import { useState, type FormEvent } from "react";
import { useSearchParams } from "react-router";
import { api, ApiError, type AuditEvent, type Credential, type Project } from "../api";
import { useFetch, fmtDate } from "../hooks";
import { Badge, Confirm, Empty, ErrorBox, JsonTree, KV, Loading, Td } from "../components/ui";
import { useMe } from "../App";

export default function Credentials() {
  const { me } = useMe();
  const { data, error, loading, reload } = useFetch<{ credentials: Credential[] }>("credentials");
  const projects = useFetch<{ projects: Project[] }>("projects");
  const providers = useFetch<{ providers: { id: string; slug: string; name: string }[] }>("providers");
  const [sp] = useSearchParams();
  const [sel, setSel] = useState<string | null>(sp.get("focus"));
  const detail = useFetch<Credential>(sel ? `credentials/${sel}` : null);
  const audit = useFetch<{ events: AuditEvent[] }>(sel ? `credentials/${sel}/audit` : null);
  const [show, setShow] = useState(false);
  const [form, setForm] = useState({ name: "", provider_id: "", scheme: "bearer", placement: "", value: "", scopes: "", allowed_projects: [] as string[], environment: "development", expires_at: "" });
  const [err, setErr] = useState<ApiError | null>(null); const [busy, setBusy] = useState(false); const [rot, setRot] = useState("");
  const canWrite = me?.role === "admin" || me?.role === "operator";
  const submit = async (e: FormEvent) => {
    e.preventDefault(); setBusy(true); setErr(null);
    try { await api("credentials", { body: { ...form, provider_id: form.provider_id || null, placement: form.placement || null, scopes: form.scopes.split(",").map((s) => s.trim()).filter(Boolean), expires_at: form.expires_at || null } }); setForm({ ...form, name: "", value: "" }); setShow(false); reload(); }
    catch (ex) { setErr(ex as ApiError); } finally { setBusy(false); }
  };
  const act = async (fn: () => Promise<unknown>) => { setErr(null); try { await fn(); reload(); detail.reload(); audit.reload(); } catch (ex) { setErr(ex as ApiError); } };
  return (
    <div>
      <div className="row between"><h1>Credential Vault</h1>{canWrite && <button className="btn primary" onClick={() => setShow((s) => !s)}>{show ? "Close" : "Onboard credential"}</button>}</div>
      <p className="hint">AKOS stores only <code>vault://</code> references; values live in the macOS keychain of the node and are injected into governed executions. Values are never displayed, logged or exported.</p>
      <ErrorBox error={err} />
      {show && (
        <form className="card" onSubmit={submit} autoComplete="off">
          <div className="form-grid">
            <div className="field"><label htmlFor="c-name">Name (alphanumeric, - _)</label><input id="c-name" required pattern="[A-Za-z0-9_\-]+" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></div>
            <div className="field"><label htmlFor="c-prov">Provider</label><select id="c-prov" value={form.provider_id} onChange={(e) => setForm({ ...form, provider_id: e.target.value })}><option value="">—</option>{providers.data?.providers.map((p) => <option key={p.id} value={p.slug}>{p.name}</option>)}</select></div>
            <div className="field"><label htmlFor="c-scheme">Scheme</label><select id="c-scheme" value={form.scheme} onChange={(e) => setForm({ ...form, scheme: e.target.value })}>{["bearer", "header", "query", "basic"].map((s) => <option key={s}>{s}</option>)}</select></div>
            <div className="field"><label htmlFor="c-place">Placement (header name or query param)</label><input id="c-place" value={form.placement} onChange={(e) => setForm({ ...form, placement: e.target.value })} placeholder={form.scheme === "header" ? "X-API-Key" : form.scheme === "query" ? "api_key" : "—"} /></div>
            <div className="field span2"><label htmlFor="c-val">Secret value (write-only; sent once to the keychain)</label><input id="c-val" type="password" required autoComplete="new-password" value={form.value} onChange={(e) => setForm({ ...form, value: e.target.value })} /></div>
            <div className="field"><label htmlFor="c-scopes">Scopes (comma separated)</label><input id="c-scopes" value={form.scopes} onChange={(e) => setForm({ ...form, scopes: e.target.value })} /></div>
            <div className="field"><label htmlFor="c-env">Environment</label><select id="c-env" value={form.environment} onChange={(e) => setForm({ ...form, environment: e.target.value })}><option>development</option><option>production</option></select></div>
            <div className="field"><label htmlFor="c-proj">Allowed projects (empty = all)</label><select id="c-proj" multiple value={form.allowed_projects} onChange={(e) => setForm({ ...form, allowed_projects: Array.from(e.target.selectedOptions).map((o) => o.value) })}>{projects.data?.projects.map((p) => <option key={p.id} value={p.slug}>{p.name}</option>)}</select></div>
            <div className="field"><label htmlFor="c-exp">Expires at (ISO, optional)</label><input id="c-exp" value={form.expires_at} onChange={(e) => setForm({ ...form, expires_at: e.target.value })} placeholder="2027-01-01T00:00:00Z" /></div>
          </div>
          <button className="btn primary" disabled={busy}>{busy ? "Storing…" : "Store in vault"}</button>
        </form>)}
      {loading && <Loading />}<ErrorBox error={error} />
      {data && data.credentials.length === 0 && <Empty>No credentials onboarded.</Empty>}
      {data && data.credentials.length > 0 && (
        <table className="tbl"><thead><tr><th>Name</th><th>Reference</th><th>Scheme</th><th>Env</th><th>Version</th><th>Projects</th><th>Uses</th><th>Status</th></tr></thead><tbody>
          {data.credentials.map((c) => <tr key={c.id} className="click" onClick={() => setSel(c.id)}><Td l="name"><b>{c.name}</b>{c.provider_name && <div className="hint">{c.provider_name}</div>}</Td><Td l="reference" wide><code>{c.ref}</code></Td><Td l="scheme">{c.scheme}{c.placement ? ` (${c.placement})` : ""}</Td><Td l="env"><Badge v={c.environment} /></Td><Td l="version" className="num">{c.version}</Td><Td l="projects">{c.allowed_projects.length ? `${c.allowed_projects.length} scoped` : "all"}</Td><Td l="uses" className="num">{c.uses ?? 0}</Td><Td l="status">{c.revoked_at ? <Badge v="revoked" /> : <Badge v="ok" label="active" />}</Td></tr>)}
        </tbody></table>)}
      {sel && (
        <div className="card">
          <div className="row between"><h3>Credential detail</h3><button className="btn sm" onClick={() => setSel(null)}>close</button></div>
          {detail.loading && <Loading />}<ErrorBox error={detail.error} />
          {detail.data && (<>
            <KV items={[["Name", detail.data.name], ["Reference", <code>{detail.data.ref}</code>], ["Vault item present", <Badge v={detail.data.vault_present ? "ok" : "fail"} label={detail.data.vault_present ? "yes" : "no"} />], ["Fingerprint", <code>{detail.data.fingerprint}</code>], ["Version", detail.data.version], ["Rotated", fmtDate(detail.data.rotated_at)], ["Revoked", fmtDate(detail.data.revoked_at)], ["Expires", fmtDate(detail.data.expires_at)], ["Packages using it", detail.data.packages?.length ? detail.data.packages.map((p) => `${p.akp_id} v${p.version}`).join(", ") : "none"]]} />
            {canWrite && !detail.data.revoked_at && <div className="row" style={{ marginTop: 10 }}>
              <input aria-label="New secret value" type="password" placeholder="new value" autoComplete="new-password" style={{ maxWidth: 260 }} value={rot} onChange={(e) => setRot(e.target.value)} />
              <button className="btn sm" disabled={!rot} onClick={() => act(async () => { await api(`credentials/${sel}/rotate`, { body: { value: rot } }); setRot(""); })}>Rotate</button>
              <Confirm label="Revoke" onConfirm={() => act(() => api(`credentials/${sel}/revoke`, { method: "POST" }))} /></div>}
            <h3>Audit</h3>{audit.data?.events.length ? audit.data.events.map((a) => <details key={a.seq} className="card tight"><summary>#{a.seq} <b>{a.action}</b> <span className="hint">{fmtDate(a.ts)} · {a.actor_type}:{a.actor_id?.slice(0, 8)}</span></summary><JsonTree data={a.details} open /></details>) : <span className="hint">no events</span>}
          </>)}
        </div>)}
    </div>
  );
}