"use client";
import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { MoreHorizontal, RefreshCw, Ban, KeyRound } from "lucide-react";
import { revokeApiKey, rotateApiKey, type CreatedKey } from "@/actions/api-keys";
import type { ApiKeyRow } from "@/lib/queries/account";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Alert } from "@/components/ui/alert";
import { EmptyState } from "@/components/ui/empty-state";
import { SimpleTooltip } from "@/components/ui/tooltip";
import { formatDateOnly, timeAgo, formatDate } from "@/lib/format";
import { maskedKey } from "@/lib/account-snippets";
import { KeyReveal } from "./key-reveal";
import { CreateKeyDialog, type ProjectOption } from "./create-key-dialog";

type PendingAction = { kind: "rotate" | "revoke"; key: ApiKeyRow } | null;

export function KeysTable({ keys, projects, defaultProjectId, showProject }: { keys: ApiKeyRow[]; projects: ProjectOption[]; defaultProjectId: string; showProject: boolean }) {
  const router = useRouter();
  const [pendingAction, setPendingAction] = React.useState<PendingAction>(null);
  const [rotated, setRotated] = React.useState<CreatedKey | null>(null);
  const [error, setError] = React.useState<string | null>(null);
  const [busy, startTransition] = React.useTransition();

  function confirm() {
    if (!pendingAction) return;
    const { kind, key } = pendingAction;
    setError(null);
    startTransition(async () => {
      if (kind === "revoke") {
        const res = await revokeApiKey(key.id);
        if (!res.ok) {
          setError(res.error);
          return;
        }
        setPendingAction(null);
        router.refresh();
      } else {
        const res = await rotateApiKey(key.id);
        if (!res.ok) {
          setError(res.error);
          return;
        }
        setPendingAction(null);
        if (res.data) setRotated(res.data);
      }
    });
  }

  if (keys.length === 0) {
    return (
      <EmptyState
        icon={KeyRound}
        title="No API keys yet"
        description="API keys authenticate requests to Fetcha. Create one, copy it once, and use it as a Bearer token."
        action={<CreateKeyDialog projects={projects} defaultProjectId={defaultProjectId} />}
      />
    );
  }

  return (
    <>
      {error && !pendingAction ? <Alert variant="danger" className="mb-3">{error}</Alert> : null}
      <div className="overflow-hidden rounded-lg border border-border bg-bg-elevated shadow-xs">
        <Table>
          <TableHeader>
            <TableRow className="hover:bg-transparent">
              <TableHead>Name</TableHead>
              <TableHead>Key</TableHead>
              {showProject ? <TableHead>Project</TableHead> : null}
              <TableHead>Mode</TableHead>
              <TableHead>Scopes</TableHead>
              <TableHead>Created</TableHead>
              <TableHead>Last used</TableHead>
              <TableHead>Expires</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="w-10 text-right">
                <span className="sr-only">Actions</span>
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {keys.map((k) => {
              const inactive = k.status !== "active";
              return (
                <TableRow key={k.id} className={inactive ? "text-fg-muted" : undefined}>
                  <TableCell className="font-medium text-fg">{k.name}</TableCell>
                  <TableCell>
                    <code className="font-mono text-[12.5px] tabular">{maskedKey(k.keyPrefix, k.last4)}</code>
                  </TableCell>
                  {showProject ? (
                    <TableCell>
                      <Link href={`/dashboard/projects/${k.projectId}`} className="text-fg-muted underline-offset-4 hover:text-fg hover:underline">
                        {k.projectName}
                      </Link>
                    </TableCell>
                  ) : null}
                  <TableCell>
                    <Badge variant={k.mode === "live" ? "success" : "warning"}>{k.mode}</Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex flex-wrap gap-1">
                      {k.scopes.map((s) => (
                        <Badge key={s} variant="outline" className="font-mono text-[11px]">
                          {s}
                        </Badge>
                      ))}
                    </div>
                  </TableCell>
                  <TableCell className="whitespace-nowrap tabular">
                    <SimpleTooltip content={formatDate(k.createdAt)}>
                      <span>{formatDateOnly(k.createdAt)}</span>
                    </SimpleTooltip>
                  </TableCell>
                  <TableCell className="whitespace-nowrap tabular">{timeAgo(k.lastUsedAt)}</TableCell>
                  <TableCell className="whitespace-nowrap tabular">{k.expiresAt ? formatDateOnly(k.expiresAt) : "Never"}</TableCell>
                  <TableCell>
                    <StatusBadge status={k.status} />
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon-sm" aria-label={`Actions for ${k.name}`}>
                          <MoreHorizontal />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem disabled={k.status === "revoked"} onSelect={() => setPendingAction({ kind: "rotate", key: k })}>
                          <RefreshCw /> Rotate key
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem destructive disabled={k.status === "revoked"} onSelect={() => setPendingAction({ kind: "revoke", key: k })}>
                          <Ban /> Revoke
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </div>

      {/* Confirm rotate / revoke */}
      <Dialog
        open={Boolean(pendingAction)}
        onOpenChange={(o) => {
          if (!o && !busy) {
            setPendingAction(null);
            setError(null);
          }
        }}
      >
        <DialogContent size="sm">
          {pendingAction ? (
            <>
              <DialogHeader>
                <DialogTitle>{pendingAction.kind === "rotate" ? "Rotate this key?" : "Revoke this key?"}</DialogTitle>
                <DialogDescription>
                  {pendingAction.kind === "rotate" ? (
                    <>
                      A new secret is generated for <strong className="text-fg">{pendingAction.key.name}</strong> with the same project, mode, scopes and expiration. The current key{" "}
                      <code className="font-mono">{maskedKey(pendingAction.key.keyPrefix, pendingAction.key.last4)}</code> stops working immediately.
                    </>
                  ) : (
                    <>
                      <strong className="text-fg">{pendingAction.key.name}</strong> (<code className="font-mono">{maskedKey(pendingAction.key.keyPrefix, pendingAction.key.last4)}</code>) will be rejected on the next request. This cannot be undone.
                    </>
                  )}
                </DialogDescription>
              </DialogHeader>
              {error ? <Alert variant="danger">{error}</Alert> : null}
              <DialogFooter>
                <Button variant="outline" onClick={() => setPendingAction(null)} disabled={busy}>
                  Cancel
                </Button>
                <Button variant={pendingAction.kind === "revoke" ? "danger" : "primary"} onClick={confirm} loading={busy}>
                  {pendingAction.kind === "rotate" ? "Rotate key" : "Revoke key"}
                </Button>
              </DialogFooter>
            </>
          ) : null}
        </DialogContent>
      </Dialog>

      {/* Show the rotated key once */}
      <Dialog
        open={Boolean(rotated)}
        onOpenChange={() => {
          /* closing only through the Done button */
        }}
      >
        <DialogContent size="lg" onEscapeKeyDown={(e) => e.preventDefault()} onPointerDownOutside={(e) => e.preventDefault()} onInteractOutside={(e) => e.preventDefault()}>
          {rotated ? (
            <>
              <DialogHeader>
                <DialogTitle>Key rotated</DialogTitle>
                <DialogDescription>Update your integrations with the new secret. The previous key has been revoked.</DialogDescription>
              </DialogHeader>
              <KeyReveal
                plaintext={rotated.plaintext}
                name={rotated.name}
                onDone={() => {
                  setRotated(null);
                  router.refresh();
                }}
              />
            </>
          ) : null}
        </DialogContent>
      </Dialog>
    </>
  );
}