"use client";

import { useState } from "react";
import { Search, Ticket, Loader2 } from "lucide-react";

export default function VerificadorPage() {
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [results, setResults] = useState<{ id: string; ticketNum: string; orderId: string; productName: string }[] | null>(null);

  const handleSearch = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError("");
    setResults(null);

    try {
      const res = await fetch(`/api/verify-tickets?email=${encodeURIComponent(email)}`);
      const data = await res.json();

      if (!res.ok) {
        setError(data.error || "Error al buscar boletos");
        return;
      }

      setResults(data.tickets);
    } catch {
      setError("Error de conexión");
    } finally {
      setLoading(false);
    }
  };

  return (
    <main className="min-h-[70vh] bg-brand-soft px-4 py-16">
      <div className="mx-auto max-w-3xl">
        <div className="mb-10 text-center">
          <p className="mb-2 text-xs font-bold uppercase tracking-[0.2em] text-brand-purple">Transparencia</p>
          <h1 className="text-3xl font-extrabold text-brand-ink md:text-4xl">
            Verifica tus <span className="text-gradient">boletos</span>
          </h1>
          <p className="mx-auto mt-3 max-w-xl text-brand-muted">
            Ingresa el correo con el que realizaste tu compra para ver tus números oficiales de
            participación en el sorteo.
          </p>
        </div>

        <div className="card-soft relative overflow-hidden p-6 md:p-8">
          <div className="absolute left-0 top-0 h-1.5 w-full bg-brand-gradient" />
          <form onSubmit={handleSearch} className="flex flex-col gap-3 md:flex-row">
            <input
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="flex-1 rounded-full border border-slate-300 bg-white px-6 py-3.5 text-brand-ink focus:border-brand-purple focus:outline-none"
              placeholder="tu@correo.cl"
              aria-label="Correo electrónico"
            />
            <button
              type="submit"
              disabled={loading || !email}
              className="flex items-center justify-center rounded-full bg-brand-gradient px-8 py-3.5 font-bold text-white shadow-md shadow-brand-purple/25 transition hover:opacity-90 disabled:opacity-50"
            >
              {loading ? <Loader2 className="h-5 w-5 animate-spin" /> : <><Search className="mr-2 h-5 w-5" /> Buscar</>}
            </button>
          </form>

          {error && (
            <div className="mt-5 rounded-xl border border-red-200 bg-red-50 p-4 text-center text-red-600">
              {error}
            </div>
          )}
        </div>

        {results !== null && (
          <div className="mt-10">
            <h2 className="mb-5 flex flex-wrap items-center justify-center gap-2 text-lg font-bold text-brand-ink">
              <Ticket className="text-brand-purple" />
              Resultados para: <span className="font-mono text-brand-purple">{email}</span>
            </h2>

            {results.length === 0 ? (
              <div className="card-soft p-10 text-center text-brand-muted">
                <Ticket className="mx-auto mb-4 h-14 w-14 opacity-30" />
                <p className="text-lg">No se encontraron boletos asociados a este correo.</p>
                <p className="mt-2 text-sm">Asegúrate de escribir el correo exactamente como lo registraste.</p>
              </div>
            ) : (
              <>
                <div className="card-soft grid grid-cols-2 gap-3 p-6 md:grid-cols-3 lg:grid-cols-4">
                  {results.map((ticket) => (
                    <div
                      key={ticket.id}
                      className="flex flex-col items-center justify-center rounded-xl border border-slate-200 bg-brand-soft p-4 transition hover:border-brand-purple"
                    >
                      <span className="mb-1 text-center text-xs text-brand-muted">{ticket.productName}</span>
                      <span className="font-mono text-base font-black tracking-widest text-brand-ink">
                        {ticket.ticketNum}
                      </span>
                      <span className="mt-1 font-mono text-[10px] text-slate-400">Orden: {ticket.orderId.slice(-12)}</span>
                    </div>
                  ))}
                </div>
                <p className="mt-5 text-center text-sm text-brand-muted">
                  Total de boletos: <span className="font-bold text-brand-ink">{results.length}</span>
                </p>
              </>
            )}
          </div>
        )}
      </div>
    </main>
  );
}