import { Icono, type NombreIcono } from '@gustito/shared/iconos';
import { useEffect, useState } from 'react';

const DUR = 5500; // ms por diapositiva

interface Slide {
  tipo?: 'portada' | 'divider' | 'cierre';
  kicker?: string;
  ico: NombreIcono;
  titulo: string;
  sub: string;
}

const SLIDES: Slide[] = [
  { tipo: 'portada', ico: 'plato', titulo: '¿Cómo pedir?', sub: 'Es facilísimo. Te enseñamos en un minuto.' },

  { tipo: 'divider', ico: 'moto', titulo: 'Opción 1 · Delivery', sub: 'Pide desde tu casa y te lo llevamos.' },
  { kicker: 'Delivery · Paso 1', ico: 'enlace', titulo: 'Entra al enlace o escanea el QR', sub: 'Apunta la cámara al código, o abre el enlace del restaurante.' },
  { kicker: 'Delivery · Paso 2', ico: 'lista', titulo: 'Elige del menú', sub: 'Comidas, bebidas y adicionales. Toca lo que se te antoje.' },
  { kicker: 'Delivery · Paso 3', ico: 'pin', titulo: 'Pon tu dirección con GPS', sub: 'Tu nombre, tu teléfono y tu ubicación. Luego eliges cómo pagar.' },
  { kicker: 'Delivery · Paso 4', ico: 'moto', titulo: 'Confirma y sigue tu pedido', sub: 'Ves en vivo cuándo sale y llega hasta tu puerta.' },

  { tipo: 'divider', ico: 'cubiertos', titulo: 'Opción 2 · En tu mesa', sub: '¿Estás aquí? Pide desde tu teléfono, sin esperar.' },
  { kicker: 'Mesa · Paso 1', ico: 'camara', titulo: 'Escanea el QR de tu mesa', sub: 'Cada mesa tiene su código. Apunta la cámara y listo.' },
  { kicker: 'Mesa · Paso 2', ico: 'plato', titulo: 'Pide lo que quieras', sub: 'Todo se va sumando a la cuenta de tu mesa.' },
  { kicker: 'Mesa · Paso 3', ico: 'mas', titulo: '¿Algo más? Agrégalo', sub: 'Sin volver a poner tus datos. Un toque y a la cocina.' },
  { kicker: 'Mesa · Paso 4', ico: 'tarjeta', titulo: 'Paga desde tu teléfono', sub: 'Pago Móvil o Zelle ahí mismo. Para efectivo o tarjeta, llama al mesero.' },

  { tipo: 'cierre', ico: 'chispa', titulo: '¡Así de fácil!', sub: 'Escanea, pide y disfruta.' },
];

export default function TutorialSala({ nombre, onCerrar }: { nombre: string; onCerrar: () => void }) {
  const [idx, setIdx] = useState(0);
  const n = SLIDES.length;
  const s = SLIDES[idx];

  // Autoavance (se reinicia en cada cambio, sea automático o manual).
  useEffect(() => {
    const t = setTimeout(() => setIdx((i) => (i + 1) % n), DUR);
    return () => clearTimeout(t);
  }, [idx, n]);

  // Controles: flechas para navegar, Esc para salir, click para avanzar.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onCerrar();
      else if (e.key === 'ArrowRight') setIdx((i) => (i + 1) % n);
      else if (e.key === 'ArrowLeft') setIdx((i) => (i - 1 + n) % n);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [n, onCerrar]);

  const esEspecial = s.tipo === 'portada' || s.tipo === 'cierre' || s.tipo === 'divider';

  return (
    <div
      className="fixed inset-0 z-50 flex flex-col overflow-hidden bg-[#0a0a12] text-white"
      onClick={() => setIdx((i) => (i + 1) % n)}
    >
      <style>{`
        @keyframes tutIn { from { opacity:0; transform: translateY(28px) scale(.97) } to { opacity:1; transform:none } }
        @keyframes tutBar { from { width:0% } to { width:100% } }
        @keyframes tutFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }
        @keyframes tutGlow { 0%,100%{ opacity:.35 } 50%{ opacity:.7 } }
        @media (prefers-reduced-motion: reduce) {
          .tut-anim, .tut-float { animation: none !important }
        }
      `}</style>

      {/* Barra de progreso */}
      <div className="flex gap-1.5 px-6 pt-5">
        {SLIDES.map((_, i) => (
          <div key={i} className="h-1.5 flex-1 overflow-hidden rounded-full bg-white/15">
            {i < idx && <div className="h-full w-full bg-amber-400" />}
            {i === idx && (
              <div key={idx} className="h-full bg-amber-400" style={{ animation: `tutBar ${DUR}ms linear forwards` }} />
            )}
          </div>
        ))}
      </div>

      {/* Marca + salir */}
      <div className="flex items-center justify-between px-8 pt-4">
        <p className="text-sm font-black uppercase tracking-[0.25em] text-white/60">
          {nombre} · <span className="text-amber-400">Gustito Xpress</span>
        </p>
        <button
          onClick={(e) => {
            e.stopPropagation();
            onCerrar();
          }}
          className="rounded-full bg-white/10 px-5 py-2 text-sm font-bold text-white/80 hover:bg-white/20"
        >
          Cerrar
        </button>
      </div>

      {/* Halo de color detrás */}
      <div
        className="pointer-events-none absolute left-1/2 top-1/3 h-[70vh] w-[70vh] -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl"
        style={{
          background: 'radial-gradient(closest-side, rgba(251,191,36,0.55), transparent)',
          animation: 'tutGlow 4s ease-in-out infinite',
        }}
      />

      {/* Diapositiva */}
      <div key={idx} className="tut-anim relative flex flex-1 flex-col items-center justify-center px-10 text-center" style={{ animation: 'tutIn .6s cubic-bezier(.2,.7,.2,1)' }}>
        {s.kicker && (
          <p className="mb-6 rounded-full bg-amber-400/15 px-6 py-2 text-xl font-black uppercase tracking-[0.15em] text-amber-400 ring-1 ring-amber-400/30">
            {s.kicker}
          </p>
        )}
        <div className="tut-float leading-none" style={{ animation: 'tutFloat 3.2s ease-in-out infinite' }}>
          <Icono nombre={s.ico} className="h-[clamp(6rem,22vh,16rem)] w-[clamp(6rem,22vh,16rem)]" grosor={1.2} />
        </div>
        <h2
          className={`mt-6 font-black leading-[0.98] tracking-tight ${
            esEspecial ? 'text-amber-400' : 'text-white'
          }`}
          style={{ fontSize: 'clamp(2.75rem,7.5vh,6rem)', textWrap: 'balance' } as React.CSSProperties}
        >
          {s.titulo}
        </h2>
        <p className="mt-6 max-w-4xl font-semibold text-white/70" style={{ fontSize: 'clamp(1.4rem,3.4vh,2.5rem)', textWrap: 'balance' } as React.CSSProperties}>
          {s.sub}
        </p>
      </div>

      {/* Pie */}
      <p className="pb-6 text-center text-base font-semibold text-white/35">
        Toca la pantalla para avanzar · las diapositivas cambian solas
      </p>
    </div>
  );
}
