import { Flag } from "lucide-react";
import { requireAdmin } from "@/lib/session";
import { getFeatureFlags } from "@/lib/queries/admin";
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, Panel } from "@/components/admin/primitives";
import { DeleteFlagButton, FlagSwitch, NewFlagDialog } from "@/components/admin/flag-controls";

export const dynamic = "force-dynamic";

export default async function AdminFlagsPage() {
  await requireAdmin();
  const flags = await getFeatureFlags();

  return (
    <>
      <PageHeader eyebrow="Configuration" title="Feature flags" description="Global kill-switches and staged rollouts. A flag applies to everyone unless plans or organization ids are set." actions={<NewFlagDialog />} />
      <Panel flush>
        {flags.length === 0 ? (
          <div className="p-4">
            <EmptyState icon={Flag} title="No feature flags" description="Create a flag, then read it from code with the feature_flags table. Flags start disabled." action={<NewFlagDialog />} compact />
          </div>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Key</TableHead>
                <TableHead>Description</TableHead>
                <TableHead>Plans</TableHead>
                <TableHead>Organizations</TableHead>
                <TableHead>Updated</TableHead>
                <TableHead>Enabled</TableHead>
                <TableHead></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {flags.map((f) => (
                <TableRow key={f.key}>
                  <TableCell>
                    <Mono className="font-medium">{f.key}</Mono>
                  </TableCell>
                  <TableCell className="max-w-[320px] text-fg-muted">{f.description ?? "—"}</TableCell>
                  <TableCell>
                    {f.plans?.length ? (
                      <div className="flex flex-wrap gap-1">
                        {f.plans.map((p) => (
                          <Badge key={p} variant="outline" className="capitalize">
                            {p}
                          </Badge>
                        ))}
                      </div>
                    ) : (
                      <span className="text-fg-subtle">all</span>
                    )}
                  </TableCell>
                  <TableCell className="text-[12px] text-fg-muted">{f.organizationIds?.length ? `${f.organizationIds.length} org(s)` : <span className="text-fg-subtle">all</span>}</TableCell>
                  <TableCell>
                    <DateCell value={f.updatedAt} />
                  </TableCell>
                  <TableCell>
                    <FlagSwitch flagKey={f.key} enabled={f.enabled} />
                  </TableCell>
                  <TableCell className="text-right">
                    <DeleteFlagButton flagKey={f.key} />
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </Panel>
    </>
  );
}