import React, { useMemo } from 'react'

/**
 * StarField — matches the mobile app's StarField.js
 * 3 tiers of stars: small (60%), medium (25%), large with glow halo (15%)
 * Each star twinkles independently with CSS animation.
 */
export default function StarField({ count = 60 }) {
  const stars = useMemo(() => {
    const items = []
    const smallCount = Math.floor(count * 0.6)
    const medCount = Math.floor(count * 0.25)
    const glowCount = count - smallCount - medCount

    // Small stars
    for (let i = 0; i < smallCount; i++) {
      items.push({
        id: i,
        x: Math.random() * 100,
        y: Math.random() * 100,
        size: 1.5 + Math.random() * 2,     // 1.5–3.5px
        delay: Math.random() * 5,
        duration: 2 + Math.random() * 2.5,  // 2–4.5s
        glow: false,
      })
    }

    // Medium stars
    for (let i = 0; i < medCount; i++) {
      items.push({
        id: smallCount + i,
        x: Math.random() * 100,
        y: Math.random() * 100,
        size: 2.5 + Math.random() * 2,     // 2.5–4.5px
        delay: Math.random() * 5,
        duration: 2 + Math.random() * 2.5,
        glow: false,
      })
    }

    // Large glowing stars
    for (let i = 0; i < glowCount; i++) {
      items.push({
        id: smallCount + medCount + i,
        x: Math.random() * 100,
        y: Math.random() * 100,
        size: 3 + Math.random() * 3,       // 3–6px
        delay: Math.random() * 4,
        duration: 2.5 + Math.random() * 3,  // 2.5–5.5s
        glow: true,
      })
    }

    return items
  }, [count])

  return (
    <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden" aria-hidden="true">
      {stars.map((star) => (
        <div
          key={star.id}
          className="absolute"
          style={{
            left: `${star.x}%`,
            top: `${star.y}%`,
          }}
        >
          {/* Glow halo for large stars */}
          {star.glow && (
            <span
              className="absolute rounded-full"
              style={{
                width: star.size * 4,
                height: star.size * 4,
                top: -(star.size * 1.5),
                left: -(star.size * 1.5),
                background: 'rgba(108, 99, 255, 0.2)',
                animation: `starTwinkle ${star.duration}s ease-in-out ${star.delay}s infinite`,
              }}
            />
          )}
          {/* Star dot */}
          <span
            className="absolute rounded-full"
            style={{
              width: star.size,
              height: star.size,
              background: star.glow
                ? 'rgba(255, 255, 255, 0.85)'
                : 'rgba(255, 255, 255, 0.6)',
              boxShadow: star.glow
                ? `0 0 ${star.size * 2}px rgba(108, 99, 255, 0.5), 0 0 ${star.size}px rgba(255, 255, 255, 0.5)`
                : 'none',
              animation: `starTwinkle ${star.duration}s ease-in-out ${star.delay}s infinite`,
            }}
          />
        </div>
      ))}

      {/* Inject keyframes */}
      <style>{`
        @keyframes starTwinkle {
          0%, 100% { opacity: 0.15; }
          50% { opacity: 1; }
        }
      `}</style>
    </div>
  )
}
