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

function Stat({ label, value, icon, color }: { label: string; value: string | number; icon: string; color: string }) {
  return (
    <div className="card flex items-center gap-4 p-5">
      <div className={`flex h-12 w-12 items-center justify-center rounded-xl text-2xl ${color}`}>{icon}</div>
      <div>
        <div className="text-2xl font-bold">{value}</div>
        <div className="text-sm text-slate-500">{label}</div>
      </div>
    </div>
  );
}

export default async function AgencyDashboard() {
  const { agency } = await requireAgency();

  const [travelers, trips, assignments, license] = await Promise.all([
    prisma.traveler.count({ where: { agencyId: agency.id } }),
    prisma.trip.count({ where: { agencyId: agency.id } }),
    prisma.tripAssignment.findMany({
      where: { trip: { agencyId: agency.id } },
      include: { payments: true },
    }),
    agency.licenseId ? prisma.license.findUnique({ where: { id: agency.licenseId } }) : null,
  ]);

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

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Hola, {agency.name} 👋</h1>
        <p className="text-slate-500">Resumen de tu operación.</p>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <Stat label="Viajeros" value={travelers} icon="🧳" color="bg-blue-100 text-blue-700" />
        <Stat label="Viajes" value={trips} icon="🗺️" color="bg-indigo-100 text-indigo-700" />
        <Stat label="Total facturado" value={money(totalBilled)} icon="💼" color="bg-emerald-100 text-emerald-700" />
        <Stat label="Saldo por cobrar" value={money(balance)} icon="⏳" color="bg-amber-100 text-amber-700" />
      </div>

      {license ? (
        <div className="card p-5">
          <div className="mb-2 flex items-center justify-between">
            <h2 className="font-semibold">Licencia: {license.name}</h2>
            <span className="text-sm text-slate-500">
              {travelers} / {license.maxTravelers} viajeros
            </span>
          </div>
          <div className="h-2 w-full overflow-hidden rounded-full bg-slate-100">
            <div
              className="h-full bg-blue-500"
              style={{ width: `${Math.min(100, Math.round((travelers / license.maxTravelers) * 100))}%` }}
            />
          </div>
          <p className="mt-2 text-xs text-slate-400">
            Al superar el cupo, tu licencia se actualiza automáticamente al siguiente nivel.
          </p>
        </div>
      ) : null}

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <Link href="/agency/travelers" className="card p-5 transition hover:shadow-md">
          <div className="text-2xl">🧳</div>
          <h3 className="mt-2 font-semibold">Gestionar viajeros</h3>
          <p className="text-sm text-slate-500">Datos personales, médicos, contactos y panel público.</p>
        </Link>
        <Link href="/agency/trips" className="card p-5 transition hover:shadow-md">
          <div className="text-2xl">🗺️</div>
          <h3 className="mt-2 font-semibold">Gestionar viajes</h3>
          <p className="text-sm text-slate-500">Itinerarios, asignaciones, tipo de cambio y emergencias.</p>
        </Link>
      </div>
    </div>
  );
}