import React, { useState, useEffect } from 'react'

interface HeartLogoProps {
  size?: 'small' | 'medium' | 'large' | 'header' | 'header-no-rays'
  className?: string
  onClick?: () => void
}

export function HeartLogo({ size = 'small', className = '', onClick }: HeartLogoProps) {
  const [animationOffset, setAnimationOffset] = useState(0)
  const [isAnimating, setIsAnimating] = useState(false)

  // Click handler to toggle animation
  const handleClick = () => {
    setIsAnimating(!isAnimating)
    if (onClick) {
      onClick()
    }
  }

  // Animation for header beams
  useEffect(() => {
    if (size !== 'header-no-rays' || !isAnimating) return

    let animationId: number
    let startTime = Date.now()

    const animate = () => {
      const elapsed = Date.now() - startTime
      const rotationSpeed = 0.02 // Slow rotation speed
      const offset = (elapsed * rotationSpeed) % 360
      setAnimationOffset(offset)
      animationId = requestAnimationFrame(animate)
    }

    animationId = requestAnimationFrame(animate)

    return () => {
      if (animationId) {
        cancelAnimationFrame(animationId)
      }
    }
  }, [size, isAnimating])
  if (size === 'header') {
    // Header version with rays filling the entire header rectangle
    return (
      <div className={`heart-logo ${size} ${className}`}>
        <div className="heart-logo-rectangle">
          <div className="heart-logo-content">
            <div className="heart-logo-rays">
              <svg viewBox="0 0 100 100" className="heart-logo-rays-svg" preserveAspectRatio="none">
                {/* Header rays matching loading screen exactly */}
                <g transform="translate(50, 50)">
                  {[...Array(16)].map((_, i) => {
                    const angle = (i * 22.5);
                    const rayWidth = 2; // Much thinner rays

                    // Create triangular ray path - thin rays extending to header edges
                    const startAngle = angle - rayWidth;
                    const endAngle = angle + rayWidth;

                    const innerRadius = 0; // Start from center (heart center)
                    const outerRadius = 200; // Extend far beyond to reach all header edges

                    const x1 = Math.cos(startAngle * Math.PI / 180) * innerRadius;
                    const y1 = Math.sin(startAngle * Math.PI / 180) * innerRadius;
                    const x2 = Math.cos(endAngle * Math.PI / 180) * innerRadius;
                    const y2 = Math.sin(endAngle * Math.PI / 180) * innerRadius;
                    const x3 = Math.cos(startAngle * Math.PI / 180) * outerRadius;
                    const y3 = Math.sin(startAngle * Math.PI / 180) * outerRadius;
                    const x4 = Math.cos(endAngle * Math.PI / 180) * outerRadius;
                    const y4 = Math.sin(endAngle * Math.PI / 180) * outerRadius;

                    return (
                      <polygon
                        key={i}
                        points={`${x1},${y1} ${x2},${y2} ${x4},${y4} ${x3},${y3}`}
                        fill={i % 2 === 0 ? "#8B0000" : "#000000"}
                        opacity="0.9"
                      />
                    );
                  })}
                </g>
              </svg>
            </div>
            <div className="heart-logo-outline">
              <svg viewBox="0 0 100 100" className="heart-logo-svg">
                <path d="M50,85 C50,85 10,60 10,35 C10,18 20,8 35,8 C42,8 50,13 50,25 C50,13 58,8 65,8 C80,8 90,18 90,35 C90,60 50,85 50,85 Z"
                      fill="#8B0000"
                      stroke="#8B0000"
                      strokeWidth="2"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    )
  }

  if (size === 'header-no-rays') {
    // Header version with small red beams - compact sunlight effect
    return (
      <div className={`heart-logo ${size} ${className}`} onClick={handleClick} style={{ cursor: 'pointer' }}>
        <div className="heart-logo-content">
          <div className="heart-logo-rays">
            <svg viewBox="-200 -67 400 134" className="heart-logo-rays-svg" preserveAspectRatio="xMidYMid slice">
              {/* Red beams extending across entire header rectangle - optimized for wide screens */}
              <g>
                {[...Array(32)].map((_, i) => {
                  const angle = (i * 11.25) + animationOffset; // 32 rays, 11.25 degrees apart, animated
                  const rayWidth = 2; // Much narrower rays to show background between them

                  // Create triangular ray path
                  const startAngle = angle - rayWidth;
                  const endAngle = angle + rayWidth;

                  const innerRadius = 0; // Start from heart center

                  // Calculate intersection with rectangle bounds for wide header
                  const getIntersectionWithRect = (angleInDegrees: number) => {
                    const rad = angleInDegrees * Math.PI / 180;
                    const dx = Math.cos(rad);
                    const dy = Math.sin(rad);

                    // Header rectangle bounds (wide format ~3:1 ratio)
                    const rectBoundsX = 200; // Full width
                    const rectBoundsY = 67;  // Height to match header proportions

                    // Calculate intersection with each edge
                    let t = Infinity;

                    // Right edge (x = rectBoundsX)
                    if (dx > 0) {
                      t = Math.min(t, rectBoundsX / dx);
                    }
                    // Left edge (x = -rectBoundsX)
                    if (dx < 0) {
                      t = Math.min(t, -rectBoundsX / dx);
                    }
                    // Top edge (y = -rectBoundsY)
                    if (dy < 0) {
                      t = Math.min(t, -rectBoundsY / dy);
                    }
                    // Bottom edge (y = rectBoundsY)
                    if (dy > 0) {
                      t = Math.min(t, rectBoundsY / dy);
                    }

                    return { x: dx * t, y: dy * t };
                  };

                  const x1 = Math.cos(startAngle * Math.PI / 180) * innerRadius;
                  const y1 = Math.sin(startAngle * Math.PI / 180) * innerRadius;
                  const x2 = Math.cos(endAngle * Math.PI / 180) * innerRadius;
                  const y2 = Math.sin(endAngle * Math.PI / 180) * innerRadius;

                  const edge1 = getIntersectionWithRect(startAngle);
                  const edge2 = getIntersectionWithRect(endAngle);

                  return (
                    <polygon
                      key={i}
                      points={`${x1},${y1} ${x2},${y2} ${edge2.x},${edge2.y} ${edge1.x},${edge1.y}`}
                      fill={i % 2 === 0 ? "#DC2626" : "#B91C1C"}
                      opacity="0.6"
                    />
                  );
                })}
              </g>
            </svg>
          </div>
          <div className="heart-logo-outline">
            <svg viewBox="0 0 100 100" className="heart-logo-svg">
              <path d="M50,85 C50,85 10,60 10,35 C10,18 20,8 35,8 C42,8 50,13 50,25 C50,13 58,8 65,8 C80,8 90,18 90,35 C90,60 50,85 50,85 Z"
                    fill="#8B0000"
                    stroke="#8B0000"
                    strokeWidth="2"/>
            </svg>
          </div>
        </div>
      </div>
    )
  }

  // Original square version for other sizes
  return (
    <div className={`heart-logo ${size} ${className}`}>
      <div className="heart-logo-rectangle">
        <div className="heart-logo-content">
          <div className="heart-logo-rays">
            <svg viewBox="-100 -67 200 134" className="heart-logo-rays-svg">
              {/* Rising Sun flag style rays - triangular rays extending to rectangle edges */}
              <g>
                {[...Array(16)].map((_, i) => {
                  const angle = (i * 22.5);
                  const rayWidth = 11.25; // Half the angle between rays for triangular shape

                  // Create triangular ray path
                  const startAngle = angle - rayWidth;
                  const endAngle = angle + rayWidth;

                  const innerRadius = 0; // Start from center (heart center)

                  // Calculate intersection with rectangle bounds
                  // Rectangle aspect ratio 120:80 = 3:2, so use different bounds for x and y
                  const getIntersectionWithRect = (angleInDegrees: number) => {
                    const rad = angleInDegrees * Math.PI / 180;
                    const dx = Math.cos(rad);
                    const dy = Math.sin(rad);

                    // Rectangle bounds matching the 120x80 aspect ratio (3:2)
                    const rectBoundsX = 100; // Full width
                    const rectBoundsY = 67;  // 2/3 of width to maintain 3:2 ratio

                    // Calculate intersection with each edge
                    let t = Infinity;

                    // Right edge (x = rectBoundsX)
                    if (dx > 0) {
                      t = Math.min(t, rectBoundsX / dx);
                    }
                    // Left edge (x = -rectBoundsX)
                    if (dx < 0) {
                      t = Math.min(t, -rectBoundsX / dx);
                    }
                    // Top edge (y = -rectBoundsY)
                    if (dy < 0) {
                      t = Math.min(t, -rectBoundsY / dy);
                    }
                    // Bottom edge (y = rectBoundsY)
                    if (dy > 0) {
                      t = Math.min(t, rectBoundsY / dy);
                    }

                    return { x: dx * t, y: dy * t };
                  };

                  const x1 = Math.cos(startAngle * Math.PI / 180) * innerRadius;
                  const y1 = Math.sin(startAngle * Math.PI / 180) * innerRadius;
                  const x2 = Math.cos(endAngle * Math.PI / 180) * innerRadius;
                  const y2 = Math.sin(endAngle * Math.PI / 180) * innerRadius;

                  const edge1 = getIntersectionWithRect(startAngle);
                  const edge2 = getIntersectionWithRect(endAngle);

                  return (
                    <polygon
                      key={i}
                      points={`${x1},${y1} ${x2},${y2} ${edge2.x},${edge2.y} ${edge1.x},${edge1.y}`}
                      fill={i % 2 === 0 ? "#8B0000" : "#000000"}
                      opacity="0.9"
                    />
                  );
                })}
              </g>
            </svg>
          </div>
          <div className="heart-logo-outline">
            <svg viewBox="0 0 100 100" className="heart-logo-svg">
              <path d="M50,85 C50,85 10,60 10,35 C10,18 20,8 35,8 C42,8 50,13 50,25 C50,13 58,8 65,8 C80,8 90,18 90,35 C90,60 50,85 50,85 Z"
                    fill="#8B0000"
                    stroke="#8B0000"
                    strokeWidth="2"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  )
}