import { useState } from 'react';
import { variablesTema, type Restaurante } from '@gustito/shared';
import { useAuth } from '../../lib/auth';
import Menu from '../Menu';
import TiendaPreview, { PhoneFrame } from '../TiendaPreview';
import PasoPerfil from './PasoPerfil';
import PasoPagos from './PasoPagos';
import PasoDelivery from './PasoDelivery';
import PasoPublicar from './PasoPublicar';

const PASOS = ['Perfil', 'Menu', 'Pagos', 'Delivery', 'Publicar'] as const;

export default function Wizard({ restaurante }: { restaurante: Restaurante }) {
  const { salir } = useAuth();
  const [i, setI] = useState(0);
  const [previewMovil, setPreviewMovil] = useState(false);
  const paso = PASOS[i];

  const preview = (
    <div style={variablesTema(restaurante.color_primario) as React.CSSProperties}>
      <PhoneFrame>
        <TiendaPreview restaurante={restaurante} />
      </PhoneFrame>
    </div>
  );

  return (
    <div className="min-h-full">
      <header className="bg-superficie border-b px-4 py-3 flex items-center justify-between sticky top-0 z-20">
        <div>
          <span className="font-extrabold text-dorado">Gustito Xpress</span>
          <span className="text-niebla text-sm ml-2">Arma tu tienda</span>
        </div>
        <button onClick={salir} className="text-sm text-niebla">
          Salir
        </button>
      </header>

      <div className="max-w-5xl mx-auto px-4 lg:grid lg:grid-cols-[1fr_320px] lg:gap-8 lg:items-start">
        {/* Columna izquierda: pasos */}
        <div className="pt-4">
          <div className="flex gap-1">
            {PASOS.map((p, k) => (
              <button
                key={p}
                onClick={() => setI(k)}
                className={`flex-1 text-xs font-bold py-2 rounded-lg transition ${
                  k === i
                    ? 'bg-dorado text-noche'
                    : k < i
                      ? 'bg-dorado/15 text-dorado'
                      : 'bg-white/10 text-niebla'
                }`}
              >
                {k + 1}. {p}
              </button>
            ))}
          </div>

          <div className="py-5">
            {paso === 'Perfil' && <PasoPerfil restaurante={restaurante} />}
            {paso === 'Menu' && <Menu restauranteId={restaurante.id} />}
            {paso === 'Pagos' && <PasoPagos restaurante={restaurante} />}
            {paso === 'Delivery' && <PasoDelivery restaurante={restaurante} />}
            {paso === 'Publicar' && <PasoPublicar restaurante={restaurante} />}
          </div>

          <div className="sticky bottom-0 z-30 -mx-4 flex justify-between gap-3 border-t border-white/10 bg-superficie px-4 py-3 lg:static lg:mx-0 lg:border-0 lg:bg-transparent lg:px-0 lg:py-0 lg:pb-8">
            <button
              onClick={() => setI((v) => Math.max(0, v - 1))}
              disabled={i === 0}
              className="btn border border-white/10 text-niebla disabled:opacity-40"
            >
              Anterior
            </button>
            {i < PASOS.length - 1 && (
              <button onClick={() => setI((v) => v + 1)} className="btn bg-dorado text-noche">
                Siguiente
              </button>
            )}
          </div>
        </div>

        {/* Columna derecha: vista previa (escritorio) */}
        <aside className="hidden lg:block sticky top-24 pt-4">
          <p className="text-xs font-bold text-niebla text-center mb-3 uppercase tracking-wide">
            Vista previa en vivo
          </p>
          {preview}
        </aside>
      </div>

      {/* Boton flotante de preview (movil) */}
      <button
        onClick={() => setPreviewMovil(true)}
        className="lg:hidden fixed bottom-24 right-4 bg-white/10 text-white ring-1 ring-white/15 rounded-full px-4 py-2.5 shadow-2xl text-sm font-bold z-30"
      >
        Ver mi tienda
      </button>
      {previewMovil && (
        <div
          className="lg:hidden fixed inset-0 z-40 bg-black/60 grid place-items-center p-4"
          onClick={() => setPreviewMovil(false)}
        >
          {preview}
        </div>
      )}
    </div>
  );
}
