"use client";

/**
 * TASK-0133 — API keys tab (workspace-scoped).
 *
 * API keys live per-workspace in the API (`/workspaces/:id/api-keys`), so the
 * console operates on the workspace chosen in the shared picker. This tab
 * REUSES the same building-block components as the workspace Developers
 * settings (`ApiKeyTable` / `ApiKeyCreateDialog` / `ApiKeyRevealDialog`) —
 * no duplicated table/dialog code.
 *
 * Authorization: the API keys routes are workspace-scoped and require
 * `ADMIN` workspace role; an org admin is an OWNER of every org workspace, so
 * the org console can manage them. A non-admin caller is rejected by the API.
 */
import { useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Plus } from "lucide-react";
import { orgWorkspaceApi } from "@/lib/org-admin";
import { API_BASE } from "@/lib/constants";
import { toast } from "@/stores/ui-store";
import { Section } from "@/components/settings/settings-shell";
import { ApiKeyTable } from "@/components/settings/api-keys/ApiKeyTable";
import { ApiKeyCreateDialog } from "@/components/settings/api-keys/ApiKeyCreateDialog";
import { ApiKeyRevealDialog } from "@/components/settings/api-keys/ApiKeyRevealDialog";

export function AdminApiKeysTab({ workspaceId }: { workspaceId: string | null }) {
  const qc = useQueryClient();
  const [createOpen, setCreateOpen] = useState(false);
  const [reveal, setReveal] = useState<{ rawKey: string; name: string } | null>(null);
  const [revokingId, setRevokingId] = useState<string | null>(null);

  const keys = useQuery({
    queryKey: ["workspaces", workspaceId, "api-keys"],
    queryFn: () => orgWorkspaceApi.listApiKeys(workspaceId!),
    enabled: Boolean(workspaceId),
    retry: false,
  });

  const create = useMutation({
    mutationFn: (input: { name: string; scopes: string[]; rateLimit?: number; expiresAt?: string }) =>
      orgWorkspaceApi.createApiKey(workspaceId!, input),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["workspaces", workspaceId, "api-keys"] }),
  });

  const revoke = useMutation({
    mutationFn: (id: string) => orgWorkspaceApi.deleteApiKey(workspaceId!, id),
    onMutate: (id) => setRevokingId(id),
    onSettled: () => setRevokingId(null),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["workspaces", workspaceId, "api-keys"] }),
    onError: (e) => toast("error", "Could not revoke the key", (e as Error).message),
  });

  if (!workspaceId) {
    return (
      <Section title="API keys" description="Pick a workspace above to manage its API keys.">
        <p className="text-sm text-muted-foreground">No workspace selected.</p>
      </Section>
    );
  }

  return (
    <Section title="API keys" description="Authenticate server-to-server calls. The raw key is shown once, at creation.">
      <div className="mb-3 flex justify-end">
        <button
          type="button"
          onClick={() => setCreateOpen(true)}
          className="inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90"
          data-testid="org-admin-apikey-create"
        >
          <Plus className="size-3.5" aria-hidden />
          Create API key
        </button>
      </div>

      <ApiKeyTable
        rows={keys.data?.data ?? []}
        isLoading={keys.isLoading}
        baseApiUrl={API_BASE}
        workspaceId={workspaceId}
        onRevoke={(row) => revoke.mutate(row.id)}
        revokingId={revokingId}
        onCreate={() => setCreateOpen(true)}
      />

      <ApiKeyCreateDialog
        open={createOpen}
        onClose={() => setCreateOpen(false)}
        onCreated={(k) => {
          setCreateOpen(false);
          setReveal(k);
        }}
        create={create.mutateAsync}
        isPending={create.isPending}
      />

      {reveal ? (
        <ApiKeyRevealDialog open rawKey={reveal.rawKey} keyName={reveal.name} onConfirmed={() => setReveal(null)} />
      ) : null}
    </Section>
  );
}