import { useTheme } from '../lib/theme-context';

export default function AnimatedFireLogo({ size = 100 }) {
  const { theme } = useTheme();

  // Theme-aware colors
  const colors = {
    dark: {
      fireBase: '#FF8C42',
      fireMiddle: '#FF6B35', 
      fireTop: '#FFF200',
      cardBg: '#F6E3AE',
      cardBorder: '#E38F36'
    },
    light: {
      fireBase: '#FF6B35',
      fireMiddle: '#F6891F',
      fireTop: '#FFD04A', 
      cardBg: '#F6E3AE',
      cardBorder: '#E38F36'
    }
  };

  const currentColors = colors[theme] || colors.light;

  return (
    <div 
      className="deck-hearth-logo-container relative flex items-center justify-center"
      style={{ width: size * 3.5, height: size * 2.4 }}
    >
      {/* Contained Fire Base */}
      <div className="fire-base absolute" style={{
        left: '50%',
        bottom: '15%',
        transform: 'translateX(-50%)',
        zIndex: 1
      }}>
        <svg width={size * 2.2} height={size * 1.8} viewBox="0 0 220 180" fill="none">
          {/* Main fire shape - more contained */}
          <ellipse className="fire-layer-base" cx="110" cy="140" rx="90" ry="35" fill={currentColors.fireBase} opacity="0.8"/>
          <ellipse className="fire-layer-mid" cx="110" cy="120" rx="75" ry="45" fill={currentColors.fireMiddle} opacity="0.9"/>
          <ellipse className="fire-layer-top" cx="110" cy="90" rx="60" ry="35" fill={currentColors.fireTop} opacity="0.7"/>
          
          {/* Flame tongues */}
          <path className="flame-tongue-1" d="M80 90 Q75 70 85 50 Q90 70 80 90" fill={currentColors.fireTop} opacity="0.8"/>
          <path className="flame-tongue-2" d="M110 80 Q105 55 115 30 Q120 60 110 80" fill={currentColors.fireTop} opacity="0.9"/>
          <path className="flame-tongue-3" d="M140 90 Q145 70 135 50 Q130 70 140 90" fill={currentColors.fireTop} opacity="0.8"/>
          <path className="flame-tongue-4" d="M95 85 Q92 65 100 45 Q105 70 95 85" fill={currentColors.fireMiddle} opacity="0.7"/>
          <path className="flame-tongue-5" d="M125 85 Q128 65 120 45 Q115 70 125 85" fill={currentColors.fireMiddle} opacity="0.7"/>
        </svg>
      </div>

      {/* Left Card */}
      <div className="card-left absolute" style={{ 
        left: '20%', 
        top: '35%', 
        transform: 'translate(-50%, -50%) rotate(-15deg)',
        zIndex: 10
      }}>
        <svg width={size * 1.2} height={size * 1.5} viewBox="0 0 120 150" fill="none">
          <rect x="5" y="5" width="110" height="140" rx="12" fill={currentColors.cardBg} stroke={currentColors.cardBorder} strokeWidth="3"/>
          {/* Card corner symbol - bottom left */}
          <g transform="translate(15, 120)">
            <text x="0" y="15" fontSize="18" fill={currentColors.cardBorder} fontFamily="serif" fontWeight="bold">J♥</text>
          </g>
        </svg>
      </div>

      {/* Right Card */}
      <div className="card-right absolute" style={{ 
        right: '20%', 
        top: '35%', 
        transform: 'translate(50%, -50%) rotate(15deg)',
        zIndex: 10
      }}>
        <svg width={size * 1.2} height={size * 1.5} viewBox="0 0 120 150" fill="none">
          <rect x="5" y="5" width="110" height="140" rx="12" fill={currentColors.cardBg} stroke={currentColors.cardBorder} strokeWidth="3"/>
          {/* Card corner symbol - top right */}
          <g transform="translate(85, 20)">
            <text x="0" y="15" fontSize="18" fill={currentColors.cardBorder} fontFamily="serif" fontWeight="bold">K♥</text>
          </g>
        </svg>
      </div>

      {/* Center Card - Front */}
      <div className="card-center absolute" style={{ 
        left: '50%', 
        top: '30%', 
        transform: 'translate(-50%, -50%)',
        zIndex: 15
      }}>
        <svg width={size * 1.3} height={size * 1.6} viewBox="0 0 130 160" fill="none">
          <rect x="5" y="5" width="120" height="150" rx="12" fill={currentColors.cardBg} stroke={currentColors.cardBorder} strokeWidth="3"/>
          
          {/* Center fire symbol */}
          <g transform="translate(65, 80)">
            <path className="center-fire-icon" d="M0 20 Q-8 10 -5 0 Q0 -10 5 0 Q8 10 0 20 Q-3 15 0 10 Q3 15 0 20" 
                  fill={currentColors.fireMiddle} opacity="0.9"/>
          </g>
        </svg>
      </div>

      <style jsx>{`
        .deck-hearth-logo-container {
          filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.3));
        }
        
        /* Fire Animations - Subtle and contained */
        .fire-layer-base {
          animation: fire-base-flicker 3s ease-in-out infinite alternate;
        }
        
        .fire-layer-mid {
          animation: fire-mid-flicker 2.5s ease-in-out infinite alternate;
          animation-delay: -0.5s;
        }
        
        .fire-layer-top {
          animation: fire-top-flicker 2s ease-in-out infinite alternate;
          animation-delay: -1s;
        }
        
        .flame-tongue-1 { animation: flame-dance-1 1.8s ease-in-out infinite alternate; animation-delay: -0.2s; }
        .flame-tongue-2 { animation: flame-dance-2 2.2s ease-in-out infinite alternate; animation-delay: -0.7s; }
        .flame-tongue-3 { animation: flame-dance-3 1.9s ease-in-out infinite alternate; animation-delay: -0.4s; }
        .flame-tongue-4 { animation: flame-dance-4 2.1s ease-in-out infinite alternate; animation-delay: -0.9s; }
        .flame-tongue-5 { animation: flame-dance-5 1.7s ease-in-out infinite alternate; animation-delay: -0.3s; }
        
        /* Card Animations - Gentle floating */
        .card-center {
          animation: card-float-center 4s ease-in-out infinite;
        }
        
        .card-left {
          animation: card-float-left 4.5s ease-in-out infinite;
          animation-delay: -1s;
        }
        
        .card-right {
          animation: card-float-right 4.2s ease-in-out infinite;
          animation-delay: -2s;
        }
        
        .center-fire-icon {
          animation: icon-glow 2s ease-in-out infinite alternate;
        }
        
        /* Fire Animation Keyframes */
        @keyframes fire-base-flicker {
          0% { transform: scaleY(1) scaleX(1); opacity: 0.8; }
          100% { transform: scaleY(1.05) scaleX(1.02); opacity: 0.9; }
        }
        
        @keyframes fire-mid-flicker {
          0% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
          100% { transform: scaleY(1.08) scaleX(0.98); opacity: 1; }
        }
        
        @keyframes fire-top-flicker {
          0% { transform: scaleY(1) scaleX(1); opacity: 0.7; }
          100% { transform: scaleY(1.12) scaleX(0.95); opacity: 0.85; }
        }
        
        @keyframes flame-dance-1 {
          0% { transform: scaleY(1) rotate(0deg); opacity: 0.8; }
          100% { transform: scaleY(1.2) rotate(-3deg); opacity: 1; }
        }
        
        @keyframes flame-dance-2 {
          0% { transform: scaleY(1) rotate(0deg); opacity: 0.9; }
          100% { transform: scaleY(1.3) rotate(2deg); opacity: 1; }
        }
        
        @keyframes flame-dance-3 {
          0% { transform: scaleY(1) rotate(0deg); opacity: 0.8; }
          100% { transform: scaleY(1.15) rotate(4deg); opacity: 0.95; }
        }
        
        @keyframes flame-dance-4 {
          0% { transform: scaleY(1) rotate(0deg); opacity: 0.7; }
          100% { transform: scaleY(1.25) rotate(-2deg); opacity: 0.9; }
        }
        
        @keyframes flame-dance-5 {
          0% { transform: scaleY(1) rotate(0deg); opacity: 0.7; }
          100% { transform: scaleY(1.18) rotate(3deg); opacity: 0.85; }
        }
        
        /* Card Float Animations */
        @keyframes card-float-center {
          0%, 100% { 
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
          }
          25% { 
            transform: translate(-50%, -52%) rotate(1deg) scale(1.02);
          }
          50% { 
            transform: translate(-48%, -50%) rotate(-0.5deg) scale(0.98);
          }
          75% { 
            transform: translate(-52%, -48%) rotate(1.5deg) scale(1.01);
          }
        }
        
        @keyframes card-float-left {
          0%, 100% { 
            transform: translate(-50%, -50%) rotate(-15deg) scale(1);
          }
          25% { 
            transform: translate(-48%, -52%) rotate(-14deg) scale(1.01);
          }
          50% { 
            transform: translate(-52%, -50%) rotate(-16deg) scale(0.99);
          }
          75% { 
            transform: translate(-50%, -48%) rotate(-13deg) scale(1.02);
          }
        }
        
        @keyframes card-float-right {
          0%, 100% { 
            transform: translate(50%, -50%) rotate(15deg) scale(1);
          }
          25% { 
            transform: translate(52%, -52%) rotate(14deg) scale(1.01);
          }
          50% { 
            transform: translate(48%, -50%) rotate(16deg) scale(0.99);
          }
          75% { 
            transform: translate(50%, -48%) rotate(13deg) scale(1.02);
          }
        }
        
        @keyframes icon-glow {
          0% { opacity: 0.9; transform: scale(1); }
          100% { opacity: 1; transform: scale(1.1); }
        }
      `}</style>
    </div>
  );
}