'use client'

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

const UNIT_FRAMES = 40

interface UnitRevealOverlayProps {
  unitId: string | null
  unitLabel: string
  unitSub: string
  onClose: () => void
}

export default function UnitRevealOverlay({
  unitId,
  unitLabel,
  unitSub,
  onClose,
}: UnitRevealOverlayProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const framesRef = useRef<HTMLImageElement[]>([])
  const rafRef = useRef<number | null>(null)
  const [loadProgress, setLoadProgress] = useState(0)
  const [loaded, setLoaded] = useState(false)
  const [finished, setFinished] = useState(false)

  // Frame'leri preload et
  useEffect(() => {
    if (!unitId) return

    setLoaded(false)
    setFinished(false)
    setLoadProgress(0)
    framesRef.current = []

    const images: HTMLImageElement[] = new Array(UNIT_FRAMES)
    let loadedCount = 0
    let cancelled = false

    for (let i = 0; i < UNIT_FRAMES; i++) {
      const img = new Image()
      img.src = `/unit-frames/${unitId}/ezgif-frame-${String(i + 1).padStart(3, '0')}.jpg`
      img.onload = () => {
        if (cancelled) return
        loadedCount++
        setLoadProgress(Math.round((loadedCount / UNIT_FRAMES) * 100))
        if (loadedCount === UNIT_FRAMES) {
          framesRef.current = images
          setLoaded(true)
        }
      }
      images[i] = img
    }

    return () => { cancelled = true }
  }, [unitId])

  // Canvas boyutu
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const resize = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }
    resize()
    window.addEventListener('resize', resize)
    return () => window.removeEventListener('resize', resize)
  }, [])

  // Yüklenince otomatik oynat
  useEffect(() => {
    if (!loaded) return

    const canvas = canvasRef.current
    const ctx = canvas?.getContext('2d')
    if (!canvas || !ctx) return

    let frame = 0
    const fps = 24
    const interval = 1000 / fps
    let last = 0

    const draw = (imgs: HTMLImageElement[], index: number) => {
      const img = imgs[index]
      if (img?.complete && img.naturalWidth > 0) {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      }
    }

    const animate = (ts: number) => {
      if (ts - last >= interval) {
        draw(framesRef.current, frame)
        last = ts
        if (frame < UNIT_FRAMES - 1) {
          frame++
        } else {
          setFinished(true)
          return // son frame'de dur
        }
      }
      rafRef.current = requestAnimationFrame(animate)
    }

    rafRef.current = requestAnimationFrame(animate)
    return () => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current)
    }
  }, [loaded])

  // ESC ile kapat
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [onClose])

  return (
    <AnimatePresence>
      {unitId && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.4 }}
          className="fixed inset-0 z-50 bg-black"
        >
          {/* Canvas */}
          <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />

          {/* Loading */}
          {!loaded && (
            <div className="absolute inset-0 flex flex-col items-center justify-center bg-black z-10">
              <div className="w-48 h-px bg-white/10 mb-3">
                <div
                  className="h-full bg-white/60 transition-all duration-150"
                  style={{ width: `${loadProgress}%` }}
                />
              </div>
              <p className="text-white/30 text-xs tracking-widest uppercase">{loadProgress}%</p>
            </div>
          )}

          {/* Kapat */}
          <button
            onClick={onClose}
            className="absolute top-6 right-6 z-20 flex items-center gap-2 bg-black/40 backdrop-blur-sm border border-white/20 text-white/70 hover:text-white hover:bg-black/60 transition-all rounded-full px-4 py-2 text-sm"
          >
            <X className="w-4 h-4" />
            Geri
          </button>

          {/* Bitiş bilgisi — son frame'de */}
          <AnimatePresence>
            {finished && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                className="absolute bottom-16 left-10 z-20"
              >
                <p className="text-white/50 text-[10px] tracking-[0.4em] uppercase mb-2">Vesta Muğla</p>
                <h2 className="text-white text-3xl md:text-4xl font-serif font-light">{unitLabel}</h2>
                <p className="text-white/50 mt-1 text-sm">{unitSub}</p>
                <button
                  onClick={onClose}
                  className="mt-5 flex items-center gap-2 text-white/60 hover:text-white text-xs tracking-widest uppercase transition-colors"
                >
                  <span>← Projeye Dön</span>
                </button>
              </motion.div>
            )}
          </AnimatePresence>

        </motion.div>
      )}
    </AnimatePresence>
  )
}