import Link from "next/link";
import { FolderKanban } from "lucide-react";
import { requireAdmin } from "@/lib/session";
import { listProjects, pageNum, str } from "@/lib/queries/admin";
import { formatNumber, formatUsd } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Badge } from "@/components/ui/badge";
import { EmptyState } from "@/components/ui/empty-state";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { DateCell, Mono, Pagination, Panel, PlanBadge, SearchForm, numCell } from "@/components/admin/primitives";

export const dynamic = "force-dynamic";

export default async function AdminProjectsPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  await requireAdmin();
  const sp = await searchParams;
  const q = str(sp.q);
  const archived = str(sp.archived) === "1";
  const page = pageNum(sp.page);
  const data = await listProjects({ q: q || undefined, page, includeArchived: archived });

  return (
    <>
      <PageHeader
        eyebrow="Customers"
        title="Projects"
        description={`${formatNumber(data.total)} projects across all organizations. Requests and spend are for the last 30 days.`}
        actions={
          <SearchForm action="/admin/projects" q={q} placeholder="project or organization name">
            <label className="flex items-center gap-1.5 text-[13px] text-fg-muted">
              <input type="checkbox" name="archived" value="1" defaultChecked={archived} className="size-3.5 accent-[var(--accent)]" /> include archived
            </label>
          </SearchForm>
        }
      />
      <Panel flush>
        {data.total === 0 ? (
          <div className="p-4">
            <EmptyState icon={FolderKanban} title="No projects match" compact />
          </div>
        ) : (
          <>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Project</TableHead>
                  <TableHead>Organization</TableHead>
                  <TableHead>Env</TableHead>
                  <TableHead className="text-right">Requests 30d</TableHead>
                  <TableHead className="text-right">Spend 30d</TableHead>
                  <TableHead className="text-right">Keys</TableHead>
                  <TableHead className="text-right">Created</TableHead>
                  <TableHead>Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.rows.map((p) => (
                  <TableRow key={p.id}>
                    <TableCell>
                      <Link href={`/admin/requests?project=${p.id}`} className="font-medium hover:underline">
                        {p.name}
                      </Link>
                      <div>
                        <Mono className="text-[11.5px] text-fg-subtle">{p.id}</Mono>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Link href={`/admin/organizations/${p.organizationId}`} className="hover:underline">
                        {p.orgName}
                      </Link>
                      <span className="ml-2">
                        <PlanBadge plan={p.orgPlan} />
                      </span>
                    </TableCell>
                    <TableCell>
                      <Badge variant={p.environment === "development" ? "warning" : "success"} dot>
                        {p.environment}
                      </Badge>
                    </TableCell>
                    <TableCell className={numCell}>{formatNumber(p.requests30d)}</TableCell>
                    <TableCell className={numCell}>{formatUsd(p.spend30d)}</TableCell>
                    <TableCell className={numCell}>{p.keys}</TableCell>
                    <TableCell className="text-right">
                      <DateCell value={p.createdAt} />
                    </TableCell>
                    <TableCell>{p.archivedAt ? <Badge variant="outline">archived</Badge> : <Badge variant="success" dot>active</Badge>}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            <Pagination page={data.page} pages={data.pages} total={data.total} pageSize={data.pageSize} basePath="/admin/projects" params={{ q, archived: archived ? "1" : undefined }} />
          </>
        )}
      </Panel>
    </>
  );
}