import { useEffect, useRef, useState, type FormEvent } from "react";
import { api, ApiError, operatorSessionVersion } from "../lib/api";
import type { ManagedOperatorRole, SecretSlotCatalog, SecretSlotMutation } from "../types";

export function SecretSlotsPanel({ role }: { role: ManagedOperatorRole }) {
  const [catalog, setCatalog] = useState<SecretSlotCatalog | null>(null);
  const [busy, setBusy] = useState(false);
  const [locked, setLocked] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [selected, setSelected] = useState("");
  const [now, setNow] = useState(Date.now());
  const alive = useRef(false);
  const generation = useRef(operatorSessionVersion());
  const inFlight = useRef(false);
  const token = useRef<HTMLInputElement>(null);
  const current = () => alive.current && generation.current === operatorSessionVersion();
  const clearToken = () => { if (token.current) token.current.value = ""; };
  function failure(cause: unknown) {
    if (current()) setError(`${cause instanceof ApiError ? `${cause.code ?? "REQUEST_FAILED"}: ` : ""}${cause instanceof Error ? cause.message : "Secret operation failed"}. Refresh metadata before retrying.`);
  }
  async function refresh() {
    if (inFlight.current || !current()) return;
    clearToken(); inFlight.current = true; setBusy(true); setError(null); setNotice(null);
    try { const next = await api.secretSlots(); if (current()) { setCatalog(next); setSelected(String(next.slot.candidate_version ?? "")); } }
    catch (cause) { failure(cause); }
    finally { inFlight.current = false; if (current()) setBusy(false); }
  }
  useEffect(() => {
    alive.current = true; generation.current = operatorSessionVersion();
    void refresh();
    const timer = setInterval(() => {
      setNow(Date.now());
      if (!current()) { clearToken(); setLocked(true); setCatalog(null); }
    }, 250);
    return () => { clearToken(); alive.current = false; clearInterval(timer); };
  }, []);
  const slot = catalog?.slot;
  const candidate = slot?.versions.find((item) => String(item.version) === selected);
  const recentPass = candidate?.test_status === "passed" && candidate.tested_at !== null && now - Date.parse(candidate.tested_at) >= 0 && now - Date.parse(candidate.tested_at) < 300_000;
  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    const data = new FormData(form);
    const value = token.current?.value ?? "";
    clearToken();
    if (!slot || !current() || inFlight.current || role !== "admin" || !slot.root_key_available) return;
    const action = (event.nativeEvent as SubmitEvent).submitter?.getAttribute("value") as SecretSlotMutation["action"] | null;
    if (!action) return;
    const base = { expected_revision: slot.revision, reason: String(data.get("reason") ?? "").trim() };
    if (base.reason.length < 8) { setError("Provide a non-secret reason of at least eight characters."); return; }
    if (action === "revoke" && data.get("confirm_slot") !== slot.slot) { setError("Type huggingface_control_plane to confirm revocation."); return; }
    if ((action === "test" || action === "activate") && (!candidate || candidate.revoked_at || candidate.version !== slot.candidate_version)) { setError("Select the current candidate version."); return; }
    if (action === "activate" && !recentPass) { setError("Test this candidate successfully within five minutes before activation."); return; }
    const body: SecretSlotMutation = action === "set" ? { ...base, action, value } : action === "revoke" ? { ...base, action, confirm_slot: slot.slot } : { ...base, action, version: Number(selected) };
    inFlight.current = true; setBusy(true); setError(null); setNotice(null);
    try {
      const next = await api.mutateSecretSlot(body);
      if (!current()) return;
      setCatalog((previous) => previous ? { ...previous, slot: next } : null);
      setSelected(String(next.candidate_version ?? ""));
      const tested = next.versions.find((item) => item.version === Number(selected));
      if (action === "test" && tested?.test_status !== "passed") setError(`Provider test failed: ${tested?.test_code ?? "no successful result"}. This does not authorize activation.`);
      else setNotice(action === "test" ? "Token authentication test passed. Repository entitlement and node downloads are not tested." : `${action === "set" ? "Candidate saved; test and activate it before use" : action === "activate" ? "Activated for new control-plane requests" : "All managed versions revoked"}. Change audited.`);
    } catch (cause) { failure(cause); }
    finally { clearToken(); inFlight.current = false; if (current()) setBusy(false); }
  }
  if (locked) return <section className="panel"><p role="status">The Console session changed. Reopen secret management after unlocking.</p></section>;
  return <section className="panel onboarding-panel" aria-label="Platform secret slots">
    <div className="operations-section-title"><h2>Platform secret slots</h2><button className="standalone-action" disabled={busy} onClick={() => void refresh()}>Refresh secret metadata</button></div>
    <p>Hugging Face control-plane discovery and repository metadata only. Node download credentials remain separately deployed.</p>
    {error && <p role="alert" className="error-banner">{error}</p>}{notice && <p role="status">{notice}</p>}{busy && <p role="status">Loading secret state…</p>}
    {slot && <><p>Source: {slot.source} · State: {slot.state} · Revision: {slot.revision} · Active version: {slot.active_version ?? "none"}</p>
      <p>The first set switches to managed mode and blocks discovery until activation. There is no fallback to deployment credentials. An existing active version continues during rotation.</p>
      {!slot.root_key_available && <p role="status">The encryption root key must be provisioned externally before managed writes. It cannot be supplied through this Console.</p>}
      <ul>{slot.versions.map((version) => <li key={version.version}>Version {version.version} · {version.revoked_at ? "revoked" : version.test_status} · Key ID: {version.key_id} · Test: {version.tested_at ? new Date(version.tested_at).toLocaleString() : "not recorded"}{version.test_code ? ` · ${version.test_code}` : ""}</li>)}</ul>
      {role === "admin" ? <form onSubmit={(event) => void submit(event)} noValidate><fieldset className="onboarding-form" disabled={busy || !slot.root_key_available}>
        <legend>Manage Hugging Face control-plane token</legend>
        <label>New token<input ref={token} type="password" autoComplete="new-password" aria-label="New Hugging Face token" /></label>
        <p>Write only. The token is cleared on every submission, refresh, lock or navigation; it cannot be revealed or exported.</p>
        <label>Candidate version<select aria-label="Secret candidate version" value={selected} onChange={(event) => { clearToken(); setSelected(event.target.value); }}><option value="">Select candidate</option>{slot.versions.map((version) => <option key={version.version} value={version.version} disabled={!!version.revoked_at || version.version !== slot.candidate_version}>Version {version.version}{version.version !== slot.candidate_version ? " (historical)" : ""}</option>)}</select></label>
        <label>Reason<input name="reason" aria-label="Secret change reason" maxLength={500} /></label>
        <button className="standalone-action" type="submit" value="set">Save candidate token</button>
        <button className="standalone-action" type="submit" value="test" disabled={!candidate || !!candidate.revoked_at}>Test candidate</button>
        <button className="standalone-action" type="submit" value="activate" disabled={!recentPass || !!candidate?.revoked_at}>Activate candidate</button>
        <label>Confirm slot to revoke<input name="confirm_slot" aria-label="Confirm secret revocation" placeholder="huggingface_control_plane" /></label>
        <button className="standalone-action" type="submit" value="revoke">Revoke all managed versions</button>
      </fieldset></form> : <p>Viewer and operator access is read only. An administrator is required to change secrets.</p>}
      <h3>Deployment-managed secrets</h3><ul>{catalog.deployment_secrets.map((item) => <li key={item.key}>{item.key}: {item.configured ? "configured" : "not configured"} · {item.consumer} · restart required · read only</li>)}</ul>
    </>}
  </section>;
}