import Link from "next/link";
import { ShieldCheck } from "lucide-react";
import { getWorkspace } from "@/lib/session";
import { listApiKeys } from "@/lib/queries/account";
import { PageHeader } from "@/components/ui/page-header";
import { Alert } from "@/components/ui/alert";
import { cn } from "@/lib/utils";
import { KeysTable } from "@/components/dashboard/api-keys/keys-table";
import { CreateKeyDialog } from "@/components/dashboard/api-keys/create-key-dialog";

export const dynamic = "force-dynamic";

export const metadata = { title: "API keys · Fetcha" };

export default async function ApiKeysPage({ searchParams }: { searchParams: Promise<{ project?: string; new?: string }> }) {
  const sp = await searchParams;
  const ws = await getWorkspace();

  // ?project=all → every project of the org; ?project=<id> → that project; default → current project.
  const allProjects = sp.project === "all";
  const requested = !allProjects && sp.project ? ws.projects.find((p) => p.id === sp.project) : null;
  const scopeProject = allProjects ? null : requested ?? ws.project;

  const keys = await listApiKeys(ws.organization.id, scopeProject?.id ?? null);
  const projectOptions = ws.projects.map((p) => ({ id: p.id, name: p.name, environment: p.environment }));
  const active = keys.filter((k) => k.status === "active").length;

  return (
    <div className="grid gap-6">
      <PageHeader
        title="API keys"
        description="Authenticate requests with a Bearer token. Keys belong to a project and inherit its limits and defaults."
        actions={<CreateKeyDialog projects={projectOptions} defaultProjectId={scopeProject?.id ?? ws.project.id} defaultOpen={sp.new === "1"} />}
      />

      <div className="flex flex-wrap items-center justify-between gap-3">
        <nav className="inline-flex h-9 items-center gap-0.5 rounded-md bg-bg-muted p-1 text-[13px] font-medium text-fg-muted" aria-label="Project filter">
          <FilterLink href={`/dashboard/api-keys?project=${ws.project.id}`} active={!allProjects && scopeProject?.id === ws.project.id}>
            {ws.project.name}
            <span className="ml-1 text-[11px] font-normal text-fg-subtle">current</span>
          </FilterLink>
          {requested && requested.id !== ws.project.id ? (
            <FilterLink href={`/dashboard/api-keys?project=${requested.id}`} active>
              {requested.name}
            </FilterLink>
          ) : null}
          <FilterLink href="/dashboard/api-keys?project=all" active={allProjects}>
            All projects
          </FilterLink>
        </nav>
        <p className="text-[12.5px] text-fg-subtle tabular">
          {active} active · {keys.length - active} inactive
        </p>
      </div>

      <KeysTable keys={keys} projects={projectOptions} defaultProjectId={scopeProject?.id ?? ws.project.id} showProject={allProjects} />

      <Alert
        variant="info"
        title="Keep your keys secret"
        action={
          <Link href="/docs/authentication" className="text-[13px] font-medium text-accent underline-offset-4 hover:underline">
            Auth docs
          </Link>
        }
      >
        <ul className="mt-1 grid gap-1 text-[13px]">
          <li className="flex gap-2">
            <ShieldCheck className="mt-0.5 size-3.5 shrink-0 text-info" aria-hidden />
            Keys are hashed at rest — we cannot recover a lost secret, only rotate it.
          </li>
          <li className="flex gap-2">
            <ShieldCheck className="mt-0.5 size-3.5 shrink-0 text-info" aria-hidden />
            Rotate regularly and give every service, environment and contractor its own key with the minimum scopes.
          </li>
          <li className="flex gap-2">
            <ShieldCheck className="mt-0.5 size-3.5 shrink-0 text-info" aria-hidden />
            Never commit keys to source control or ship them in browser code. Load them from environment variables on your server.
          </li>
        </ul>
      </Alert>
    </div>
  );
}

function FilterLink({ href, active, children }: { href: string; active: boolean; children: React.ReactNode }) {
  return (
    <Link href={href} aria-current={active ? "page" : undefined} className={cn("inline-flex h-7 items-center rounded-[5px] px-3 transition-colors", active ? "bg-bg text-fg shadow-xs" : "hover:text-fg")}>
      {children}
    </Link>
  );
}