import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { requireAgency } from "@/lib/auth";
import { money, formatDate } from "@/lib/format";
import { countryName, countryFlag, countryDial } from "@/lib/countries";
import { qrToDataURL } from "@/lib/qr";
import { getBaseUrl } from "@/lib/base-url";
import PublicLinkCard from "@/components/PublicLinkCard";
import AddPaymentForm from "./AddPaymentForm";
import AddDocumentForm from "./AddDocumentForm";
import { deletePayment, deleteDocument } from "../../actions";

const DOC_LABEL: Record<string, string> = {
  FLIGHT: "✈️ Vuelos",
  TRAIN: "🚌 Transporte",
  ENTRY: "🎫 Entradas",
  RESERVATION: "🏨 Hotel",
  PASSPORT: "🛂 Pasaporte",
  VISA: "📑 Visa",
  INE: "🪪 INE",
  LICENSE: "🚗 Licencia",
  INSURANCE: "🛡️ Seguro",
  OTHER: "📄 Otros",
};

export default async function TravelerDetail({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const { agency } = await requireAgency();

  const t = await prisma.traveler.findFirst({
    where: { id, agencyId: agency.id },
    include: {
      emergencyContacts: true,
      documents: { orderBy: { createdAt: "desc" } },
      assignments: {
        include: { trip: true, payments: { orderBy: { date: "desc" } } },
        orderBy: { createdAt: "desc" },
      },
    },
  });
  if (!t) notFound();

  const baseUrl = await getBaseUrl();
  const publicUrl = `${baseUrl}/p/${t.publicToken}`;
  const qr = await qrToDataURL(publicUrl);

  const totalBilled = t.assignments.reduce((s, a) => s + a.cost, 0);
  const totalPaid = t.assignments.reduce((s, a) => s + a.payments.reduce((p, x) => p + x.amount, 0), 0);

  const assignmentOptions = t.assignments.map((a) => ({ id: a.id, tripName: a.trip.name }));

  return (
    <div className="space-y-6">
      <Link href="/agency/travelers" className="text-sm text-blue-600">← Viajeros</Link>

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {/* Perfil */}
        <div className="space-y-6 lg:col-span-1">
          <div className="card p-5">
            <div className="flex flex-col items-center text-center">
              {t.photoUrl ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img src={t.photoUrl} alt="" className="h-24 w-24 rounded-full object-cover ring-2 ring-blue-100" />
              ) : (
                <div className="flex h-24 w-24 items-center justify-center rounded-full bg-blue-100 text-3xl font-bold text-blue-700">
                  {t.firstName.charAt(0)}
                </div>
              )}
              <h1 className="mt-3 text-xl font-bold">{t.firstName} {t.lastName}</h1>
              <p className="text-sm text-slate-500">
                {countryFlag(t.residenceCountry)} {countryName(t.residenceCountry)}
              </p>
            </div>
            <dl className="mt-4 space-y-1 text-sm">
              {t.email ? <Row k="Correo" v={t.email} /> : null}
              {t.phone ? <Row k="Teléfono" v={t.phone} /> : null}
              {t.passportNumber ? <Row k="Pasaporte" v={t.passportNumber} /> : null}
              {t.birthDate ? <Row k="Nacimiento" v={formatDate(t.birthDate)} /> : null}
              <Row k="Idioma" v={t.language.toUpperCase()} />
            </dl>
          </div>

          <div className="card p-5">
            <h2 className="mb-2 font-semibold">🩺 Datos clínicos</h2>
            <dl className="space-y-1 text-sm">
              <Row k="Sangre" v={t.bloodType ?? "—"} />
              <Row k="Alergias" v={t.allergies ?? "—"} />
              <Row k="Condiciones" v={t.conditions ?? "—"} />
              <Row k="Medicamentos" v={t.medications ?? "—"} />
              {t.medicalNotes ? <Row k="Notas" v={t.medicalNotes} /> : null}
            </dl>
          </div>

          <div className="card p-5">
            <h2 className="mb-2 font-semibold">📞 Contactos de emergencia</h2>
            {t.emergencyContacts.length === 0 ? (
              <p className="text-sm text-slate-400">Sin contactos.</p>
            ) : (
              <ul className="space-y-2 text-sm">
                {t.emergencyContacts.map((c) => (
                  <li key={c.id} className="rounded-lg bg-slate-50 p-2">
                    <div className="font-medium">{c.name} {c.relationship ? <span className="text-slate-400">· {c.relationship}</span> : null}</div>
                    <div className="text-slate-500">
                      {c.country ? `${countryFlag(c.country)} ${countryDial(c.country)} ` : ""}{c.phone}{c.email ? ` · ${c.email}` : ""}
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>

        {/* Columna principal */}
        <div className="space-y-6 lg:col-span-2">
          <PublicLinkCard url={publicUrl} qr={qr} />

          {/* Estado de cuenta resumen */}
          <div className="card p-5">
            <div className="mb-3 flex items-center justify-between">
              <h2 className="font-semibold">💳 Estado de cuenta</h2>
              <Link href={`/agency/travelers/${t.id}/statement`} className="btn-ghost text-sm text-blue-600">
                🖨️ Ver / imprimir
              </Link>
            </div>
            <div className="grid grid-cols-3 gap-3 text-center">
              <Box label="Facturado" value={money(totalBilled)} color="text-slate-700" />
              <Box label="Pagado" value={money(totalPaid)} color="text-emerald-600" />
              <Box label="Saldo" value={money(totalBilled - totalPaid)} color="text-amber-600" />
            </div>
          </div>

          {/* Viajes y pagos */}
          <div className="card p-5">
            <h2 className="mb-3 font-semibold">🗺️ Viajes asignados</h2>
            {t.assignments.length === 0 ? (
              <p className="text-sm text-slate-400">
                Sin viajes. Asígnalo desde la página del viaje.
              </p>
            ) : (
              <div className="space-y-4">
                {t.assignments.map((a) => {
                  const paid = a.payments.reduce((s, x) => s + x.amount, 0);
                  const bal = a.cost - paid;
                  return (
                    <div key={a.id} className="rounded-xl ring-1 ring-slate-200">
                      <div className="flex items-center justify-between p-3">
                        <div>
                          <Link href={`/agency/trips/${a.tripId}`} className="font-medium text-blue-600">
                            {a.trip.name}
                          </Link>
                          <div className="text-xs text-slate-500">
                            {countryFlag(a.trip.destinationCountry)} {formatDate(a.trip.startDate)}
                          </div>
                        </div>
                        <div className="text-right text-sm">
                          <div>{money(paid)} / {money(a.cost)}</div>
                          <div className={bal > 0 ? "text-amber-600" : "text-emerald-600"}>
                            {bal > 0 ? `Resta ${money(bal)}` : "Pagado ✓"}
                          </div>
                        </div>
                      </div>
                      <div className="border-t border-slate-100 px-3 pb-3">
                        {a.payments.length > 0 ? (
                          <table className="w-full text-xs">
                            <tbody>
                              {a.payments.map((p) => (
                                <tr key={p.id} className="border-b border-slate-50">
                                  <td className="py-1">{formatDate(p.date)}</td>
                                  <td className="py-1 text-slate-500">{p.method ?? ""}</td>
                                  <td className="py-1 font-medium">{money(p.amount)}</td>
                                  <td className="py-1 text-right">
                                    <form action={deletePayment}>
                                      <input type="hidden" name="id" value={p.id} />
                                      <button className="text-red-400 hover:text-red-600">✕</button>
                                    </form>
                                  </td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        ) : null}
                        <AddPaymentForm assignmentId={a.id} />
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>

          {/* Documentos */}
          <div className="card p-5">
            <div className="mb-3 flex items-center justify-between">
              <h2 className="font-semibold">📎 Documentos y tickets</h2>
            </div>
            {t.documents.length === 0 ? (
              <p className="mb-3 text-sm text-slate-400">Sin documentos.</p>
            ) : (
              <div className="mb-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
                {t.documents.map((d) => (
                  <div key={d.id} className="flex items-center justify-between rounded-lg bg-slate-50 p-2 text-sm">
                    <a href={d.fileUrl} target="_blank" rel="noreferrer" className="min-w-0 flex-1 truncate text-blue-600">
                      {DOC_LABEL[d.type] ?? d.type} · {d.title}
                    </a>
                    <form action={deleteDocument}>
                      <input type="hidden" name="id" value={d.id} />
                      <button className="ml-2 text-red-400 hover:text-red-600">✕</button>
                    </form>
                  </div>
                ))}
              </div>
            )}
            <AddDocumentForm travelerId={t.id} assignments={assignmentOptions} />
          </div>
        </div>
      </div>
    </div>
  );
}

function Row({ k, v }: { k: string; v: string }) {
  return (
    <div className="flex justify-between gap-2">
      <dt className="text-slate-400">{k}</dt>
      <dd className="text-right font-medium">{v}</dd>
    </div>
  );
}

function Box({ label, value, color }: { label: string; value: string; color: string }) {
  return (
    <div className="rounded-xl bg-slate-50 p-3">
      <div className={`text-lg font-bold ${color}`}>{value}</div>
      <div className="text-xs text-slate-500">{label}</div>
    </div>
  );
}