import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { requireAgency } from "@/lib/auth";
import { formatDate, money } from "@/lib/format";
import { countryFlag, countryName } from "@/lib/countries";
import TripForm from "./TripForm";

export default async function TripsPage() {
  const { agency } = await requireAgency();
  const trips = await prisma.trip.findMany({
    where: { agencyId: agency.id },
    orderBy: { startDate: "desc" },
    include: { _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">Viajes</h1>
          <p className="text-slate-500">{trips.length} viaje(s).</p>
        </div>
        <TripForm />
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
        {trips.map((tr) => (
          <Link key={tr.id} href={`/agency/trips/${tr.id}`} className="card p-5 transition hover:shadow-md">
            <div className="flex items-start justify-between">
              <h3 className="font-semibold">{tr.name}</h3>
              <span className="text-2xl">{countryFlag(tr.destinationCountry) || "🗺️"}</span>
            </div>
            <p className="text-sm text-slate-500">
              {countryName(tr.originCountry)} → {countryName(tr.destinationCountry)}
            </p>
            <p className="mt-1 text-xs text-slate-400">
              {formatDate(tr.startDate)} – {formatDate(tr.endDate)}
            </p>
            <div className="mt-3 flex items-center justify-between border-t border-slate-100 pt-3 text-sm">
              <span className="badge bg-slate-100 text-slate-600">{tr._count.assignments} viajero(s)</span>
              <span className="font-medium">{money(tr.baseCost)}</span>
            </div>
          </Link>
        ))}
      </div>

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