import Link from "next/link";
import { getAllClientsWithPayments } from "@/lib/admin-queries";
import { ClientRow } from "@/components/admin/ClientRow";
import { Button } from "@/components/ui/button";
import { PageHeader } from "@/components/admin/PageHeader";

export const revalidate = 0;

export default async function AdminClientsPage({
  searchParams,
}: {
  searchParams: Promise<{ archived?: string }>;
}) {
  const { archived } = await searchParams;
  const showArchived = archived === "1";
  const clients = await getAllClientsWithPayments(showArchived);

  const clientiAction = (
    <div className="flex items-center gap-4 self-start sm:self-auto">
      <a
        href={showArchived ? "/admin/clients" : "/admin/clients?archived=1"}
        className="text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
      >
        {showArchived ? "Nascondi archiviati" : "Mostra archiviati"}
      </a>
      <Button asChild>
        <Link href="/admin/clients/new">+ Nuovo cliente</Link>
      </Button>
    </div>
  );

  return (
    <div className="space-y-6">
      <PageHeader
        title="Clienti"
        subtitle="Monitora i rapporti finanziari e i dettagli dei clienti attivi"
        action={clientiAction}
      />

      {clients.length === 0 ? (
        <div className="text-center py-20 text-muted-foreground">
          <p>{showArchived ? "Nessun cliente archiviato." : "Nessun cliente ancora."}</p>
          {!showArchived && (
            <p className="mt-2">
              <Link href="/admin/clients/new" className="text-primary hover:underline font-medium">
                Crea il primo cliente
              </Link>
            </p>
          )}
        </div>
      ) : (
        <div className="bg-card rounded-xl border border-border shadow-card overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="border-b border-border bg-muted/50 text-muted-foreground text-[11px] font-semibold uppercase tracking-wider">
                  <th className="py-4 px-6 text-left w-1/4">Cliente</th>
                  <th className="py-4 px-6 text-right">LTV</th>
                  <th className="py-4 px-6 text-right">Importo incassato</th>
                  <th className="py-4 px-6 text-right">Importo da saldare</th>
                  <th className="py-4 px-6 text-right">Link profilo</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                {clients.map((client) => (
                  <ClientRow key={client.id} client={client} />
                ))}
              </tbody>
            </table>
          </div>
          <div className="border-t border-border px-6 py-4 text-xs text-muted-foreground">
            Mostrando {clients.length}{" "}
            {clients.length === 1 ? "cliente" : "clienti"}
            {showArchived ? "" : clients.length === 1 ? " attivo" : " attivi"}
          </div>
        </div>
      )}
    </div>
  );
}
