import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { requireAgency } from "@/lib/auth";
import { countryFlag } from "@/lib/countries";
import TravelerForm, { TravelerData } from "./TravelerForm";

export default async function TravelersPage() {
  const { agency } = await requireAgency();
  const travelers = await prisma.traveler.findMany({
    where: { agencyId: agency.id },
    orderBy: { createdAt: "desc" },
    include: {
      emergencyContacts: true,
      _count: { select: { assignments: true } },
    },
  });

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold">Viajeros</h1>
          <p className="text-slate-500">{travelers.length} viajero(s) registrados.</p>
        </div>
        <TravelerForm />
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
        {travelers.map((t) => {
          const data: TravelerData = {
            ...t,
            birthDate: t.birthDate ? t.birthDate.toISOString() : null,
            emergencyContacts: t.emergencyContacts.map((c) => ({
              name: c.name,
              relationship: c.relationship ?? undefined,
              country: c.country ?? undefined,
              phone: c.phone,
              email: c.email ?? undefined,
            })),
          };
          return (
            <div key={t.id} className="card p-5">
              <div className="flex items-center gap-3">
                {t.photoUrl ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={t.photoUrl} alt="" className="h-14 w-14 rounded-full object-cover ring-1 ring-slate-200" />
                ) : (
                  <div className="flex h-14 w-14 items-center justify-center rounded-full bg-blue-100 text-xl font-semibold text-blue-700">
                    {t.firstName.charAt(0)}
                  </div>
                )}
                <div className="min-w-0">
                  <h3 className="truncate font-semibold">
                    {t.firstName} {t.lastName}
                  </h3>
                  <p className="text-sm text-slate-500">
                    {countryFlag(t.residenceCountry)} {t.phone ?? t.email ?? "—"}
                  </p>
                </div>
              </div>

              <div className="mt-3 flex flex-wrap gap-2 text-xs">
                <span className="badge bg-slate-100 text-slate-600">{t._count.assignments} viaje(s)</span>
                {t.bloodType ? <span className="badge bg-red-50 text-red-600">🩸 {t.bloodType}</span> : null}
              </div>

              <div className="mt-4 flex items-center justify-between border-t border-slate-100 pt-3">
                <Link href={`/agency/travelers/${t.id}`} className="text-sm font-medium text-blue-600">
                  Ver detalle →
                </Link>
                <TravelerForm traveler={data} />
              </div>
            </div>
          );
        })}
      </div>

      {travelers.length === 0 && (
        <div className="card p-10 text-center text-slate-500">
          Aún no tienes viajeros. Crea el primero con “Nuevo viajero”.
        </div>
      )}
    </div>
  );
}