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

const LINES = [
  { label: '> init.sound-system', status: 'OK', delay: 150 },
  { label: '> load.frequency: 174Hz', status: 'LOCKED', delay: 300 },
  { label: '> warmup.amps', status: 'OK', delay: 420 },
  { label: '> patch.crate → decks', status: 'READY', delay: 560 },
  { label: '> signal.online', status: 'ON AIR', delay: 720 },
];

export default function BootSequence() {
  const [visible, setVisible] = useState(false);
  const [step, setStep] = useState(0);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    if (sessionStorage.getItem('portfolio:booted') === '1') return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      sessionStorage.setItem('portfolio:booted', '1');
      return;
    }

    setVisible(true);

    const timers: number[] = [];
    LINES.forEach((line, i) => {
      timers.push(window.setTimeout(() => setStep(i + 1), line.delay));
    });
    timers.push(
      window.setTimeout(() => {
        setVisible(false);
        sessionStorage.setItem('portfolio:booted', '1');
      }, 1200),
    );

    return () => {
      timers.forEach(clearTimeout);
    };
  }, []);

  function skip() {
    sessionStorage.setItem('portfolio:booted', '1');
    setVisible(false);
  }

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          className="fixed inset-0 z-[100] flex items-center justify-center cursor-pointer"
          onClick={skip}
          initial={{ opacity: 1 }}
          exit={{ opacity: 0, filter: 'blur(12px)' }}
          transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
          style={{ background: 'var(--color-bg)' }}
        >
          <div className="font-mono text-xs md:text-sm max-w-sm w-full px-6">
            <div className="mb-6 flex items-center gap-2 text-[color:var(--color-acid)] uppercase tracking-[0.3em]">
              <span className="led led-acid animate-pulse" />
              <span>Booting sound system</span>
            </div>
            <ul className="space-y-1.5">
              {LINES.slice(0, step).map((line, i) => (
                <motion.li
                  key={i}
                  initial={{ opacity: 0, x: -8 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.2 }}
                  className="flex justify-between gap-4"
                >
                  <span className="text-[color:var(--color-text-muted)]">{line.label}</span>
                  <span
                    className={
                      line.status === 'ON AIR'
                        ? 'text-[color:var(--color-acid)]'
                        : 'text-[color:var(--color-cyan)]'
                    }
                  >
                    [{line.status}]
                  </span>
                </motion.li>
              ))}
              {step < LINES.length && (
                <li className="flex items-center gap-1 text-[color:var(--color-text-dim)]">
                  <span className="animate-pulse">█</span>
                </li>
              )}
            </ul>
            <p className="mt-8 text-[10px] text-[color:var(--color-text-dim)] text-center uppercase tracking-widest">
              click to skip
            </p>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
