"use client";

import { useEffect, useState } from "react";
import { api, ApiError } from "@/lib/api";
import { fmtAgo, fmtDate, fmtNum } from "@/lib/format";
import type { ApiKey } from "@/lib/types";
import { Code, Modal, PageHeader, Pill, useToast } from "@/components/ui";

export default function KeysPage() {
  const toast = useToast();
  const [keys, setKeys] = useState<ApiKey[]>([]);
  const [name, setName] = useState("");
  const [admin, setAdmin] = useState(false);
  const [created, setCreated] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const load = () => api.get<{ keys: ApiKey[] }>("/api/keys").then((r) => setKeys(r.keys)).catch(() => {});
  useEffect(() => { load(); }, []);

  const create = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    try {
      const r = await api.post<{ key: string }>("/api/keys", { name: name.trim() || "key", scopes: admin ? ["inference", "admin"] : ["inference"] });
      setCreated(r.key);
      setName("");
      setAdmin(false);
      load();
    } catch (err) {
      toast.push(err instanceof ApiError ? err.message : "Failed", "bad");
    } finally {
      setBusy(false);
    }
  };
  const revoke = async (k: ApiKey) => {
    if (!confirm(`Revoke "${k.name}"? Clients using it will stop working.`)) return;
    await api.del(`/api/keys/${k.id}`);
    load();
  };
  const rename = async (k: ApiKey) => {
    const n = prompt("New name", k.name);
    if (!n) return;
    await api.patch(`/api/keys/${k.id}`, { name: n });
    load();
  };
  const origin = typeof location !== "undefined" ? location.origin : "https://www.llm-api.io";

  return (
    <div>
      {toast.view}
      <PageHeader title="API keys" sub="Keys are shown once at creation and stored hashed. Use them as Bearer tokens with any OpenAI SDK." />
      <form onSubmit={create} className="card p-4 mb-5 flex flex-col sm:flex-row gap-2 sm:items-center">
        <input className="input sm:max-w-xs" placeholder="Key name (e.g. laptop, cursor, n8n)" value={name} onChange={(e) => setName(e.target.value)} />
        <label className="text-sm flex items-center gap-2 text-ink-2"><input type="checkbox" checked={admin} onChange={(e) => setAdmin(e.target.checked)} /> admin scope (management API)</label>
        <button className="btn btn-primary sm:ml-auto" disabled={busy}>Create key</button>
      </form>
      <div className="card overflow-x-auto">
        <table className="tbl">
          <thead><tr><th>Name</th><th>Prefix</th><th>Scopes</th><th>Created</th><th>Last used</th><th className="text-right">Requests</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {keys.map((k) => (
              <tr key={k.id} className={k.revoked_at ? "opacity-50" : ""}>
                <td className="font-medium">{k.name}</td>
                <td className="mono text-xs">{k.prefix}…</td>
                <td className="flex gap-1">{k.scopes.map((s) => <Pill key={s} tone={s === "admin" ? "violet" : "neutral"}>{s}</Pill>)}</td>
                <td className="text-ink-2">{fmtDate(k.created_at)}</td>
                <td className="text-ink-2">{fmtAgo(k.last_used_at)}</td>
                <td className="text-right num">{fmtNum(k.request_count)}</td>
                <td>{k.revoked_at ? <Pill tone="bad">revoked</Pill> : <Pill tone="good">active</Pill>}</td>
                <td className="text-right whitespace-nowrap">{!k.revoked_at && <><button className="btn btn-sm btn-ghost" onClick={() => rename(k)}>Rename</button> <button className="btn btn-sm btn-danger" onClick={() => revoke(k)}>Revoke</button></>}</td>
              </tr>
            ))}
            {!keys.length && <tr><td colSpan={8} className="text-center text-ink-3 py-8">No keys yet.</td></tr>}
          </tbody>
        </table>
      </div>
      <Modal open={!!created} onClose={() => setCreated(null)} title="Your new API key" width={640}>
        <p className="text-sm mb-3">Copy it now — it will not be shown again.</p>
        <Code>{created || ""}</Code>
        <p className="text-sm mt-4 mb-2 text-ink-2">Quick start:</p>
        <Code>{`from openai import OpenAI
client = OpenAI(base_url="${origin}/v1", api_key="${created}")
r = client.chat.completions.create(model="default", messages=[{"role": "user", "content": "Hello"}])
print(r.choices[0].message.content)`}</Code>
        <div className="flex justify-end mt-4"><button className="btn btn-primary" onClick={() => setCreated(null)}>Done</button></div>
      </Modal>
    </div>
  );
}