import { Icono, type NombreIcono } from '@gustito/shared/iconos';
import { useCerrarConAtras } from '../lib/useCerrarConAtras';

interface Paso {
  ico: NombreIcono;
  titulo: string;
  texto: string;
}

const DELIVERY: Paso[] = [
  { ico: 'enlace', titulo: 'Abre el enlace o escanea el QR', texto: 'Entra al enlace del restaurante o apunta la cámara a su código QR.' },
  { ico: 'lista', titulo: 'Elige del menú', texto: 'Toca "Menú" y escoge la categoría: Comidas, Bebidas o Adicionales.' },
  { ico: 'plato', titulo: 'Arma tu plato', texto: 'Toca lo que quieras, elige tus opciones y cuántas quieres, y toca "Agregar".' },
  { ico: 'carrito', titulo: 'Revisa tu pedido', texto: 'Toca "Ver pedido" abajo para ver tu carrito y el total.' },
  { ico: 'pin', titulo: 'Pon tus datos', texto: 'Nombre, teléfono, si es delivery o para llevar, tu dirección con GPS, y cómo vas a pagar.' },
  { ico: 'moto', titulo: 'Confirma y sigue tu pedido', texto: '¡Listo! Recibes tu número de pedido y ves el estado en vivo hasta que llega.' },
];

const MESA: Paso[] = [
  { ico: 'cubiertos', titulo: 'Escanea el QR de tu mesa', texto: 'Cada mesa tiene su código. Pide desde tu puesto.' },
  { ico: 'mas', titulo: 'Pide lo que quieras', texto: 'Todo se va sumando a la cuenta de tu mesa.' },
  { ico: 'check', titulo: 'Pide la cuenta y paga', texto: 'Al terminar, "Pedir la cuenta", eliges cómo pagar y te confirmamos.' },
];

function Lista({ pasos }: { pasos: Paso[] }) {
  return (
    <ol className="space-y-2.5">
      {pasos.map((p, i) => (
        <li key={i} className="flex gap-3">
          <span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-marca text-sm font-extrabold text-marca-contraste">
            {i + 1}
          </span>
          <div className="min-w-0">
            <p className="flex items-center gap-1.5 text-sm font-bold text-stone-800">
              <Icono nombre={p.ico} className="h-4 w-4 shrink-0 text-marca-oscuro" />
              {p.titulo}
            </p>
            <p className="text-xs leading-relaxed text-stone-500">{p.texto}</p>
          </div>
        </li>
      ))}
    </ol>
  );
}

export default function ComoPedir({ onCerrar }: { onCerrar: () => void }) {
  useCerrarConAtras(onCerrar);
  return (
    <div className="fixed inset-0 z-30 flex items-end justify-center bg-black/40 sm:items-center" onClick={onCerrar}>
      <div
        className="max-h-[92vh] w-full max-w-md overflow-y-auto rounded-t-3xl bg-white sm:rounded-3xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="sticky top-0 z-10 flex items-center justify-between border-b border-stone-100 bg-white px-5 py-4">
          <div>
            <h2 className="text-lg font-extrabold text-stone-900">¿Cómo pedir?</h2>
            <p className="text-xs text-stone-500">En menos de un minuto, desde tu teléfono.</p>
          </div>
          <button onClick={onCerrar} className="h-8 w-8 text-2xl leading-none text-stone-400" aria-label="Cerrar">
            &times;
          </button>
        </div>

        <div className="space-y-5 p-5">
          <section>
            <p className="mb-2.5 inline-flex items-center gap-2 rounded-full bg-marca-claro px-3 py-1 text-xs font-bold text-marca-oscuro">
              <span className="h-2 w-2 rounded-full bg-marca" /> Para delivery o para llevar
            </p>
            <Lista pasos={DELIVERY} />
          </section>

          <div className="flex items-start gap-2.5 rounded-xl bg-stone-50 p-3">
            <Icono nombre="tarjeta" className="mt-0.5 h-4 w-4 shrink-0 text-stone-500" />
            <p className="text-xs leading-relaxed text-stone-600">
              <b className="text-stone-800">Sobre el pago:</b> le pagas directo al negocio (efectivo, Pago Móvil…). Con Pago
              Móvil pones los últimos 4 dígitos de la referencia y subes la captura; el negocio lo verifica y te confirma.
            </p>
          </div>

          <section>
            <p className="mb-2.5 inline-flex items-center gap-2 rounded-full bg-green-100 px-3 py-1 text-xs font-bold text-green-700">
              <span className="h-2 w-2 rounded-full bg-green-500" /> ¿Comiendo en el local? (mesa)
            </p>
            <Lista pasos={MESA} />
          </section>

          <button
            onClick={onCerrar}
            className="w-full rounded-2xl bg-marca py-3 font-bold text-marca-contraste shadow-flotante active:scale-[0.99]"
          >
            ¡Entendido, a pedir!
          </button>
        </div>
      </div>
    </div>
  );
}
