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

export const dynamic = "force-dynamic";

export default async function AdminOrganizationsPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  await requireAdmin();
  const sp = await searchParams;
  const q = str(sp.q);
  const plan = str(sp.plan);
  const page = pageNum(sp.page);
  const data = await listOrganizations({ q: q || undefined, plan: plan || undefined, page });

  return (
    <>
      <PageHeader
        eyebrow="Customers"
        title="Organizations"
        description={`${formatNumber(data.total)} organizations. Requests and spend are for the last 30 days.`}
        actions={
          <SearchForm action="/admin/organizations" q={q} placeholder="name, slug, owner email or id">
            <NativeSelect name="plan" defaultValue={plan} className="h-8 w-[150px] text-[13px]" aria-label="Plan">
              <option value="">All plans</option>
              {PLAN_OPTIONS.map((p) => (
                <option key={p.value} value={p.value}>
                  {p.label}
                </option>
              ))}
            </NativeSelect>
          </SearchForm>
        }
      />
      <Panel flush>
        {data.total === 0 ? (
          <div className="p-4">
            <EmptyState icon={Building2} title="No organizations match" description="Every signup creates a personal organization automatically." compact />
          </div>
        ) : (
          <>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Name</TableHead>
                  <TableHead>Plan</TableHead>
                  <TableHead>Owner</TableHead>
                  <TableHead className="text-right">Projects</TableHead>
                  <TableHead className="text-right">Requests 30d</TableHead>
                  <TableHead className="text-right">Spend 30d</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Provider vis.</TableHead>
                  <TableHead className="text-right">Created</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.rows.map((o) => (
                  <TableRow key={o.id}>
                    <TableCell>
                      <Link href={`/admin/organizations/${o.id}`} className="font-medium hover:underline">
                        {o.name}
                      </Link>
                      <div className="font-mono text-[11.5px] text-fg-subtle">{o.slug}</div>
                    </TableCell>
                    <TableCell>
                      <PlanBadge plan={o.plan} />
                    </TableCell>
                    <TableCell className="max-w-[220px] truncate text-fg-muted">{o.ownerEmail ?? "—"}</TableCell>
                    <TableCell className={numCell}>{o.projects}</TableCell>
                    <TableCell className={numCell}>{formatNumber(o.requests30d)}</TableCell>
                    <TableCell className={numCell}>{formatUsd(o.spend30d)}</TableCell>
                    <TableCell>{o.suspended ? <StatusBadge status="suspended" /> : <StatusBadge status="active" />}</TableCell>
                    <TableCell>{o.providerVisibility ? <Badge variant="warning" dot>debug on</Badge> : <span className="text-fg-subtle">off</span>}</TableCell>
                    <TableCell className="text-right">
                      <DateCell value={o.createdAt} />
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            <Pagination page={data.page} pages={data.pages} total={data.total} pageSize={data.pageSize} basePath="/admin/organizations" params={{ q, plan }} />
          </>
        )}
      </Panel>
    </>
  );
}