import { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Power } from 'lucide-react'

export default function LampEffect({ onUnlock }: { onUnlock: () => void }) {
  const [mousePos, setMousePos] = useState({ x: -1000, y: -1000 })
  const [isHoveringSwitch, setIsHoveringSwitch] = useState(false)
  const [unlocked, setUnlocked] = useState(false)

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setMousePos({ x: e.clientX, y: e.clientY })
    }
    window.addEventListener('mousemove', handleMouseMove)
    return () => window.removeEventListener('mousemove', handleMouseMove)
  }, [])

  const handleTurnOn = () => {
    setUnlocked(true)
    setTimeout(() => onUnlock(), 800) // Give time for flicker
  }

  return (
    <AnimatePresence>
      {!unlocked && (
        <motion.div 
          className="fixed inset-0 z-[100] bg-black cursor-none"
          initial={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5, delay: 0.3 }} // Fade out after flicker
        >
          {/* Flashlight mask */}
          <div 
            className="absolute inset-0 pointer-events-none transition-opacity duration-300"
            style={{
              background: `radial-gradient(circle 180px at ${mousePos.x}px ${mousePos.y}px, transparent 0%, rgba(0,0,0,0.98) 100%)`
            }}
          />

          {/* The switch */}
          <div className="absolute left-10 lg:left-1/4 top-1/3 flex flex-col items-center gap-4 z-10">
            <button
              onMouseEnter={() => setIsHoveringSwitch(true)}
              onMouseLeave={() => setIsHoveringSwitch(false)}
              onClick={handleTurnOn}
              className={`w-16 h-16 rounded-full border-2 flex items-center justify-center transition-all duration-300 ${
                isHoveringSwitch ? 'border-amber-400 bg-amber-400/20 text-amber-400 shadow-[0_0_30px_rgba(251,191,36,0.5)] scale-110' : 'border-white/20 text-white/40'
              }`}
              style={{ cursor: 'pointer' }}
            >
              <Power className="w-8 h-8" />
            </button>
            <p className="text-white/40 font-mono text-xs uppercase tracking-widest pointer-events-none">
              Main Power
            </p>
          </div>
          
          {/* Custom Cursor */}
          <div 
            className="fixed w-4 h-4 rounded-full border border-white/50 pointer-events-none mix-blend-difference transition-transform duration-75"
            style={{ 
              left: mousePos.x - 8, top: mousePos.y - 8,
              transform: isHoveringSwitch ? 'scale(0)' : 'scale(1)'
            }}
          />
        </motion.div>
      )}
      
      {/* Power On Flicker Effect */}
      {unlocked && (
        <motion.div 
          className="fixed inset-0 z-[110] bg-amber-50 mix-blend-overlay pointer-events-none"
          animate={{ opacity: [0, 1, 0.2, 1, 0] }}
          transition={{ duration: 0.4, times: [0, 0.1, 0.2, 0.3, 1] }}
        />
      )}
    </AnimatePresence>
  )
}
