import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { requireAgency } from "@/lib/auth";
import { money } from "@/lib/format";

export default async function PaymentsPage() {
  const { agency } = await requireAgency();
  const travelers = await prisma.traveler.findMany({
    where: { agencyId: agency.id, assignments: { some: {} } },
    include: { assignments: { include: { payments: true } } },
    orderBy: { firstName: "asc" },
  });

  const rows = travelers
    .map((t) => {
      const billed = t.assignments.reduce((s, a) => s + a.cost, 0);
      const paid = t.assignments.reduce((s, a) => s + a.payments.reduce((p, x) => p + x.amount, 0), 0);
      return { t, billed, paid, balance: billed - paid };
    })
    .sort((a, b) => b.balance - a.balance);

  const totalBilled = rows.reduce((s, r) => s + r.billed, 0);
  const totalPaid = rows.reduce((s, r) => s + r.paid, 0);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Pagos</h1>
        <p className="text-slate-500">Control de cobranza por viajero.</p>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div className="card p-5"><div className="text-sm text-slate-500">Facturado</div><div className="text-2xl font-bold">{money(totalBilled)}</div></div>
        <div className="card p-5"><div className="text-sm text-slate-500">Cobrado</div><div className="text-2xl font-bold text-emerald-600">{money(totalPaid)}</div></div>
        <div className="card p-5"><div className="text-sm text-slate-500">Por cobrar</div><div className="text-2xl font-bold text-amber-600">{money(totalBilled - totalPaid)}</div></div>
      </div>

      <div className="card p-5">
        {rows.length === 0 ? (
          <p className="text-sm text-slate-400">Aún no hay viajeros con viajes asignados.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="text-left text-slate-500">
                <tr className="border-b border-slate-200">
                  <th className="py-2">Viajero</th>
                  <th className="py-2 text-right">Facturado</th>
                  <th className="py-2 text-right">Pagado</th>
                  <th className="py-2 text-right">Saldo</th>
                  <th className="py-2 text-right">Acción</th>
                </tr>
              </thead>
              <tbody>
                {rows.map(({ t, billed, paid, balance }) => (
                  <tr key={t.id} className="border-b border-slate-100">
                    <td className="py-2 font-medium">{t.firstName} {t.lastName}</td>
                    <td className="py-2 text-right">{money(billed)}</td>
                    <td className="py-2 text-right text-emerald-600">{money(paid)}</td>
                    <td className={`py-2 text-right font-medium ${balance > 0 ? "text-amber-600" : "text-emerald-600"}`}>
                      {money(balance)}
                    </td>
                    <td className="py-2 text-right">
                      <Link href={`/agency/travelers/${t.id}`} className="text-blue-600">Gestionar</Link>
                      {" · "}
                      <Link href={`/agency/travelers/${t.id}/statement`} className="text-blue-600">Estado</Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}