CIAgent/apps/web/components/ui/user-api-key-row.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { Check, Eye, EyeOff, Loader2, Save } from "lucide-react";
import { useSetUserApiKey } from "@/hooks/use-auth";
import type { UserApiKeyStatus } from "@/lib/types";

/** One provider's own-key row: label, editable masked textbox with a
 * hide/unhide toggle, credit/free-tier info, and a blue Update button - all
 * with the same crossfade-icon transition language as the admin-only
 * server-key box's Show/Hide toggle (api-key-row.tsx). Unlike that box,
 * this one is per-user and editable: each user only ever sees/sets their
 * own key here, never anyone else's.
 *
 * `liveCredits`, when passed, overrides the number shown for the numeric
 * "N credits remaining" line - used for NinjaPear, which sources its
 * balance from useSystemStatus()'s already-fetched ninjapear_credit_balance
 * (the same number shown in System configuration below) rather than this
 * component making its own separate, redundant live call. */
export function UserApiKeyRow({
  apiKey,
  liveCredits,
}: {
  apiKey: UserApiKeyStatus;
  liveCredits?: number | null;
}) {
  const [value, setValue] = useState(apiKey.value ?? "");
  const [revealed, setRevealed] = useState(false);
  const [justSaved, setJustSaved] = useState(false);
  const savedTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
  const setKey = useSetUserApiKey();

  useEffect(
    () => () => {
      if (savedTimeout.current) clearTimeout(savedTimeout.current);
    },
    [],
  );

  const dirty = value !== (apiKey.value ?? "");
  const credits = liveCredits !== undefined ? liveCredits : apiKey.credits;

  const handleUpdate = () => {
    setKey.mutate(
      { provider: apiKey.provider, payload: { key: value } },
      {
        onSuccess: (updated) => {
          setValue(updated.value ?? "");
          setJustSaved(true);
          if (savedTimeout.current) clearTimeout(savedTimeout.current);
          savedTimeout.current = setTimeout(() => setJustSaved(false), 1800);
        },
      },
    );
  };

  return (
    <div>
      <div className="flex items-baseline justify-between gap-2">
        <label className="block text-sm font-medium text-slate-700">{apiKey.label}</label>
        {apiKey.free && (
          <span className="inline-flex items-center rounded-full bg-green-50 px-2 py-0.5 text-[11px] font-medium text-green-700">
            Free{apiKey.requires_government_id ? " · requires government ID approval" : ""}
          </span>
        )}
      </div>
      <div className="mt-1 flex items-center gap-2">
        <input
          type={revealed ? "text" : "password"}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder={apiKey.configured ? undefined : "Not set"}
          className="focus-ring block w-full rounded-md border border-slate-300 px-3 py-2 font-mono text-sm text-slate-900 shadow-sm transition-colors duration-150 placeholder:font-sans placeholder:text-slate-400"
        />
        <button
          type="button"
          onClick={() => setRevealed((r) => !r)}
          title={revealed ? "Hide key" : "Show key"}
          className="focus-ring inline-flex shrink-0 items-center justify-center rounded-md border border-slate-300 p-2 text-slate-500 transition-colors duration-200 hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700"
        >
          <span className="relative block h-4 w-4">
            <Eye
              className={`absolute inset-0 h-4 w-4 transition-opacity duration-200 ${revealed ? "opacity-0" : "opacity-100"}`}
              aria-hidden
            />
            <EyeOff
              className={`absolute inset-0 h-4 w-4 transition-opacity duration-200 ${revealed ? "opacity-100" : "opacity-0"}`}
              aria-hidden
            />
          </span>
        </button>
        <button
          type="button"
          onClick={handleUpdate}
          disabled={!dirty || setKey.isPending}
          title="Update key"
          className="focus-ring inline-flex shrink-0 items-center gap-1.5 rounded-md bg-brand-600 px-3 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-50"
        >
          <span className="relative block h-4 w-4">
            <Save
              className={`absolute inset-0 h-4 w-4 transition-opacity duration-200 ${
                setKey.isPending || justSaved ? "opacity-0" : "opacity-100"
              }`}
              aria-hidden
            />
            <Loader2
              className={`absolute inset-0 h-4 w-4 animate-spin transition-opacity duration-200 ${
                setKey.isPending ? "opacity-100" : "opacity-0"
              }`}
              aria-hidden
            />
            <Check
              className={`absolute inset-0 h-4 w-4 transition-opacity duration-200 ${
                justSaved && !setKey.isPending ? "opacity-100" : "opacity-0"
              }`}
              aria-hidden
            />
          </span>
          Update
        </button>
      </div>
      <p className="mt-1 text-xs text-slate-500">
        {apiKey.configured
          ? credits !== null && credits !== undefined
            ? `${credits} credits remaining. ${apiKey.credits_note ?? ""}`
            : (apiKey.credits_note ?? "")
          : (apiKey.credits_note ?? "")}
      </p>
      {setKey.isError && (
        <p className="mt-1 text-xs text-red-600">Couldn&apos;t save that key. Try again.</p>
      )}
    </div>
  );
}