import { PartyPopper, Sparkles } from "lucide-react";
import { nombreCertificado, type Certificado, type PasajeroDatos } from "@/lib/reserva-flujo";

export function Paso4Certificados({
  pasajeros,
  certificados,
  setCertificado,
  finalizar,
  finalizado,
}: {
  pasajeros: PasajeroDatos[];
  certificados: Certificado[];
  setCertificado: (i: number, parcial: Partial<Certificado>) => void;
  finalizar: () => void;
  finalizado: boolean;
}) {
  return (
    <div className="space-y-6">
      <section className="rounded-3xl bg-ink p-6 text-center text-ink-foreground shadow-lift animate-in fade-in-0 zoom-in-95">
        <PartyPopper className="mx-auto size-8 text-brand" />
        <h2 className="mt-2 text-2xl font-bold">¡Lugares Confirmados!</h2>
        <p className="mt-1 text-sm opacity-80">
          Personaliza los certificados de vuelo de cada pasajero antes de emitir los pases.
        </p>
      </section>

      <section className="rounded-3xl bg-card p-5 shadow-soft">
        <h3 className="flex items-center gap-2 text-base font-bold">
          <Sparkles className="size-4 text-secondary" /> Certificados de vuelo
        </h3>
        <p className="text-sm text-muted-foreground">
          Si dejas el nombre vacío usaremos el registrado en el paso 2.
        </p>

        <div className="mt-4 space-y-4">
          {pasajeros.map((p, i) => {
            const cert = certificados[i];
            const fallback = nombreCertificado(undefined, p, i);
            return (
              <div key={i} className="rounded-3xl border border-border p-4 transition-shadow hover:shadow-soft">
                <p className="mb-3 text-xs font-bold uppercase tracking-wide text-primary">Pasajero {i + 1}</p>
                <div className="grid gap-3 sm:grid-cols-2">
                  <div>
                    <label className="mb-1.5 block text-xs text-muted-foreground">
                      ¿Cómo aparecerá el nombre en el certificado de vuelo?
                    </label>
                    <input
                      value={cert?.nombre ?? ""}
                      onChange={(e) => setCertificado(i, { nombre: e.target.value })}
                      placeholder={fallback}
                      className="w-full rounded-2xl border border-border bg-card px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                    />
                  </div>
                  <div>
                    <label className="mb-1.5 block text-xs text-muted-foreground">
                      Frase adicional (opcional)
                    </label>
                    <input
                      value={cert?.frase ?? ""}
                      onChange={(e) => setCertificado(i, { frase: e.target.value })}
                      placeholder="Ej. 'Para la mejor persona'"
                      className="w-full rounded-2xl border border-border bg-card px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                    />
                  </div>
                </div>
                <p className="mt-3 rounded-2xl bg-accent/60 px-4 py-2.5 text-xs text-foreground">
                  Vista previa: <span className="font-bold">{nombreCertificado(cert, p, i)}</span>
                  {cert?.frase?.trim() ? ` — “${cert.frase.trim()}”` : ""}
                </p>
              </div>
            );
          })}
        </div>

        <button
          type="button"
          onClick={finalizar}
          disabled={finalizado}
          className="mt-6 w-full rounded-2xl bg-primary px-4 py-3.5 text-sm font-bold text-primary-foreground transition-all hover:-translate-y-0.5 hover:shadow-lift active:scale-[0.99] disabled:opacity-50"
        >
          {finalizado ? "Pases emitidos" : "Finalizar Reservación y Emitir Pases"}
        </button>
      </section>
    </div>
  );
}