import Link from "next/link";
import { FileSpreadsheet, Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { FichasFilters } from "@/components/fichas/fichas-filters";
import { FichasTable } from "@/components/fichas/fichas-table";
import { Pagination } from "@/components/fichas/pagination";
import { can } from "@/lib/permissions";
import { requireUser } from "@/lib/session";
import { getFichas, type FichasSearchParams } from "@/server/queries/fichas";

export const dynamic = "force-dynamic";

export default async function FichasPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | undefined>>;
}) {
  const params = await searchParams;
  const user = await requireUser();
  const result = await getFichas(params as FichasSearchParams);
  const canExport = can(user.role, "reporte:export");
  const exportParams = new URLSearchParams();
  Object.entries(params).forEach(([key, value]) => {
    if (!value || key === "page") return;
    exportParams.set(key, value);
  });
  const exportHref = `/api/fichas/export${exportParams.toString() ? `?${exportParams.toString()}` : ""}`;

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h2 className="text-2xl font-semibold tracking-tight">Fichas</h2>
          <p className="text-sm text-muted-foreground">Listado inicial de fichas de empadronamiento.</p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          {canExport ? (
            <Button asChild variant="outline" className="gap-2">
              <Link href={exportHref}>
                <FileSpreadsheet className="h-4 w-4" />
                Exportar Excel
              </Link>
            </Button>
          ) : null}
          {can(user.role, "ficha:create") ? (
            <Button asChild>
              <Link href="/fichas/nueva">
                <Plus className="h-4 w-4" />
                Nueva ficha
              </Link>
            </Button>
          ) : null}
        </div>
      </div>
      <FichasFilters {...params} />
      <FichasTable
        result={result}
        canEdit={can(user.role, "ficha:update")}
        canDelete={can(user.role, "ficha:delete")}
      />
      <Pagination
        page={result.page}
        pageCount={result.pageCount}
        pageSize={result.pageSize}
        total={result.total}
        query={params}
      />
    </div>
  );
}