import { prisma } from "@/lib/prisma";
import { money } from "@/lib/format";
import LicenseForm from "./LicenseForm";

export default async function LicensesPage() {
  const licenses = await prisma.license.findMany({
    orderBy: { rank: "asc" },
    include: { _count: { select: { agencies: 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">Licencias</h1>
          <p className="text-slate-500">
            Las licencias limitan el número de viajeros y se actualizan
            automáticamente al superar el cupo.
          </p>
        </div>
        <LicenseForm />
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {licenses.map((l) => (
          <div key={l.id} className="card p-5">
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-semibold">{l.name}</h3>
              {l.active ? (
                <span className="badge bg-emerald-100 text-emerald-700">Activa</span>
              ) : (
                <span className="badge bg-slate-100 text-slate-500">Inactiva</span>
              )}
            </div>
            <div className="mt-3 text-3xl font-bold text-blue-600">
              {l.maxTravelers.toLocaleString("es-MX")}
            </div>
            <div className="text-sm text-slate-500">viajeros máximo</div>
            <div className="mt-3 text-sm">
              <span className="font-medium">{money(l.price, "USD")}</span>
              <span className="text-slate-400"> / mes</span>
            </div>
            <div className="mt-1 text-xs text-slate-400">
              {l._count.agencies} agencia(s) · rank {l.rank}
            </div>
            <div className="mt-4 border-t border-slate-100 pt-3 text-right">
              <LicenseForm license={l} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}