import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { requireAgency } from "@/lib/auth";
import { money, formatDate } from "@/lib/format";
import PrintButton from "@/components/PrintButton";

export default async function StatementPage({ 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: {
      assignments: {
        include: { trip: true, payments: { orderBy: { date: "asc" } } },
        orderBy: { createdAt: "asc" },
      },
    },
  });
  if (!t) notFound();

  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);

  return (
    <div className="mx-auto max-w-3xl space-y-6">
      <div className="no-print flex items-center justify-between">
        <a href={`/agency/travelers/${t.id}`} className="text-sm text-blue-600">← Volver</a>
        <PrintButton />
      </div>

      <div className="card p-5 sm:p-8">
        <div className="flex flex-col gap-3 border-b border-slate-200 pb-4 sm:flex-row sm:items-start sm:justify-between">
          <div className="flex items-center gap-3">
            {agency.logoUrl ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={agency.logoUrl} alt="" className="h-12 w-12 rounded-lg object-cover" />
            ) : null}
            <div>
              <h1 className="text-lg font-bold">{agency.name}</h1>
              {agency.taxId ? <p className="text-xs text-slate-500">{agency.taxId}</p> : null}
              {agency.phone ? <p className="text-xs text-slate-500">{agency.phone}</p> : null}
            </div>
          </div>
          <div className="text-left sm:text-right">
            <h2 className="text-lg font-semibold">Estado de cuenta</h2>
            <p className="text-xs text-slate-500">{formatDate(new Date())}</p>
          </div>
        </div>

        <div className="py-4">
          <p className="text-sm text-slate-500">Cliente</p>
          <p className="text-lg font-semibold">{t.firstName} {t.lastName}</p>
          {t.email ? <p className="text-sm text-slate-500">{t.email}</p> : null}
        </div>

        {t.assignments.map((a) => {
          const paid = a.payments.reduce((s, x) => s + x.amount, 0);
          return (
            <div key={a.id} className="mb-6">
              <div className="mb-1 flex items-center justify-between bg-slate-50 px-3 py-2">
                <span className="font-medium">{a.trip.name}</span>
                <span className="text-sm">Costo: {money(a.cost)}</span>
              </div>
              <div className="overflow-x-auto">
              <table className="w-full min-w-[28rem] text-sm">
                <thead>
                  <tr className="text-left text-slate-400">
                    <th className="py-1">Fecha</th>
                    <th className="py-1">Método</th>
                    <th className="py-1">Nota</th>
                    <th className="py-1 text-right">Abono</th>
                  </tr>
                </thead>
                <tbody>
                  {a.payments.length === 0 ? (
                    <tr><td colSpan={4} className="py-2 text-slate-400">Sin abonos.</td></tr>
                  ) : (
                    a.payments.map((p) => (
                      <tr key={p.id} className="border-t border-slate-100">
                        <td className="py-1">{formatDate(p.date)}</td>
                        <td className="py-1">{p.method ?? "—"}</td>
                        <td className="py-1 text-slate-500">{p.note ?? ""}</td>
                        <td className="py-1 text-right">{money(p.amount)}</td>
                      </tr>
                    ))
                  )}
                </tbody>
                <tfoot>
                  <tr className="border-t border-slate-200 font-medium">
                    <td colSpan={3} className="py-1">Pagado / Saldo del viaje</td>
                    <td className="py-1 text-right">
                      {money(paid)} / {money(a.cost - paid)}
                    </td>
                  </tr>
                </tfoot>
              </table>
              </div>
            </div>
          );
        })}

        <div className="mt-6 ml-auto w-full max-w-xs space-y-1 border-t border-slate-200 pt-4 text-sm">
          <div className="flex justify-between"><span className="text-slate-500">Total facturado</span><span>{money(totalBilled)}</span></div>
          <div className="flex justify-between"><span className="text-slate-500">Total pagado</span><span className="text-emerald-600">{money(totalPaid)}</span></div>
          <div className="flex justify-between text-base font-bold"><span>Saldo</span><span className="text-amber-600">{money(totalBilled - totalPaid)}</span></div>
        </div>
      </div>
    </div>
  );
}