import { useEffect, useState } from 'react'
import TetrisLoading from '../ui/tetris-loader'

/**
 * Cold-open loader: a Tetris board plays while the scene initialises, then the
 * whole overlay wipes upward. Calls onDone when the wipe finishes.
 */
export function Loader({ onDone }: { onDone: () => void }) {
  const [leaving, setLeaving] = useState(false)

  useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
    const total = reduce ? 400 : 1900
    const t1 = window.setTimeout(() => setLeaving(true), total)
    const t2 = window.setTimeout(onDone, total + 900)
    return () => {
      window.clearTimeout(t1)
      window.clearTimeout(t2)
    }
  }, [onDone])

  return (
    <div
      className="fixed inset-0 z-[100] flex flex-col items-center justify-center"
      style={{
        background: '#0a0a0b',
        transform: leaving ? 'translateY(-100%)' : 'translateY(0)',
        transition: 'transform 0.9s cubic-bezier(0.76, 0, 0.24, 1)',
      }}
    >
      <div style={{ opacity: leaving ? 0 : 1, transition: 'opacity 0.4s ease' }}>
        <TetrisLoading size="sm" speed="fast" showLoadingText={false} />
      </div>

      <p
        className="mt-2 text-center"
        style={{
          opacity: leaving ? 0 : 1,
          transition: 'opacity 0.4s ease',
          fontFamily: 'var(--font-mono)',
          letterSpacing: '0.22em',
          fontSize: 12,
          textTransform: 'uppercase',
          color: '#eaf0f7',
        }}
      >
        Kuch_Nhi_Aata loading ...
      </p>
    </div>
  )
}