"use client";

import { useEffect, useState } from "react";

import { api, AdminSettings, ApiKeyRow, Connector, RetentionResult, Source, UserRow } from "@/lib/api";

export default function Admin() {

  const [settings, setSettings] = useState<AdminSettings | null>(null);

  const [users, setUsers] = useState<UserRow[]>([]);

  const [sources, setSources] = useState<Source[]>([]);

  const [keys, setKeys] = useState<ApiKeyRow[]>([]);

  const [connectors, setConnectors] = useState<Connector[]>([]);

  const [newKey, setNewKey] = useState<string | null>(null);

  const [retention, setRetention] = useState<RetentionResult | null>(null);

  const [err, setErr] = useState<string | null>(null);

  const [usersErr, setUsersErr] = useState<string | null>(null);

  function loadKeys() { api.apiKeys().then(setKeys).catch(() => {}); }

  useEffect(() => {

    api.adminSettings().then(setSettings)

      .catch((e) => setErr(e.status === 401 ? "Sign in as admin." : e.status === 403 ? "Admin role required." : String(e)));

    api.users().then(setUsers).catch((e) => setUsersErr(e.status === 403 ? "Admin only." : "Unavailable."));

    api.sources().then(setSources).catch(() => {});

    api.connectors().then(setConnectors).catch(() => {});

    loadKeys();

  }, []);

  async function createKey() {

    const name = prompt("API key name (e.g. 'edge-device-01')");

    if (!name) return;

    try { const r = await api.createApiKey(name); setNewKey(r.api_key); loadKeys(); }

    catch { setErr("Could not create API key."); }

  }

  async function revoke(id: string) {

    try { await api.revokeApiKey(id); loadKeys(); } catch { setErr("Revoke failed."); }

  }

  async function runRetention(dry: boolean) {

    try { setRetention(await api.runRetention(dry)); } catch { setErr("Retention run failed (admin only)."); }

  }

  return (

    <div>

      <h1>Admin &amp; Settings</h1>

      {err && <div className="badge danger">{err}</div>}

      <h2>Platform settings</h2>

      <div className="grid">

        {settings && [

          ["Environment", settings.environment],

          ["Retention (days)", settings.default_retention_days],

          ["Rate limit / min", settings.rate_limit_per_minute],

          ["Dedup window (s)", settings.dedup_window_seconds],

          ["Impossible speed (km/h)", settings.impossible_speed_kmh],

          ["Co-travel window (s)", settings.cotravel_window_seconds],

        ].map(([k, v]) => (

          <div key={k as string} className="card"><div className="muted">{k}</div><div className="kpi" style={{ fontSize: 20 }}>{v}</div></div>

        ))}

      </div>

      <h2>Data retention</h2>

      <div className="card">

        <div className="row">

          <button onClick={() => runRetention(true)}>Preview purge (dry run)</button>

          <button className="primary" onClick={() => { if (confirm("Permanently delete reads past the retention window?")) runRetention(false); }}>Run purge</button>

        </div>

        {retention && (

          <div style={{ marginTop: 10 }}>

            <span className="muted">Cutoff {new Date(retention.cutoff).toLocaleDateString()} · </span>

            {retention.dry_run

              ? <span><strong>{retention.candidates}</strong> reads would be deleted.</span>

              : <span className="badge ok">{retention.deleted} reads deleted.</span>}

          </div>

        )}

      </div>

      <h2>API keys</h2>

      <div className="card">

        <button onClick={createKey}>+ Create key</button>

        {newKey && (

          <div className="badge ok" style={{ marginTop: 10, display: "block", padding: 10, fontFamily: "monospace", wordBreak: "break-all" }}>

            {newKey}

            <div className="muted" style={{ fontFamily: "sans-serif" }}>Copy now - shown once. Use header <code>X-API-Key</code>.</div>

          </div>

        )}

        <table style={{ marginTop: 10 }}>

          <thead><tr><th>Name</th><th>Last used</th><th>Status</th><th></th></tr></thead>

          <tbody>

            {keys.map((k) => (

              <tr key={k.id}>

                <td>{k.name}</td>

                <td className="muted">{k.last_used_at ? new Date(k.last_used_at).toLocaleString() : "never"}</td>

                <td>{k.revoked_at ? <span className="badge danger">revoked</span> : <span className="badge ok">active</span>}</td>

                <td>{!k.revoked_at && <a style={{ cursor: "pointer" }} onClick={() => revoke(k.id)}>revoke</a>}</td>

              </tr>

            ))}

            {!keys.length && <tr><td colSpan={4} className="muted">No API keys.</td></tr>}

          </tbody>

        </table>

      </div>

      <h2>Connectors</h2>

      <div className="card">

        <table>

          <thead><tr><th>Name</th><th>Description</th></tr></thead>

          <tbody>

            {connectors.map((c) => (

              <tr key={c.name}><td><span className="badge">{c.name}</span></td><td className="muted">{c.description}</td></tr>

            ))}

            {!connectors.length && <tr><td colSpan={2} className="muted">No connectors.</td></tr>}

          </tbody>

        </table>

        <p className="muted" style={{ marginTop: 8, marginBottom: 0 }}>

          Run via <code>POST /connectors/run</code> with a connector name and config to pull external reads into the pipeline.

        </p>

      </div>

      <h2>Users</h2>

      <div className="card">

        {usersErr ? <div className="muted">{usersErr}</div> : (

          <table>

            <thead><tr><th>Email</th><th>Name</th><th>Role</th><th>Active</th></tr></thead>

            <tbody>

              {users.map((u) => (

                <tr key={u.id}>

                  <td>{u.email}</td>

                  <td className="muted">{u.full_name || "-"}</td>

                  <td><span className="badge">{u.role}</span></td>

                  <td>{u.is_active ? <span className="badge ok">yes</span> : <span className="badge danger">no</span>}</td>

                </tr>

              ))}

              {!users.length && <tr><td colSpan={4} className="muted">No users.</td></tr>}

            </tbody>

          </table>

        )}

      </div>

      <h2>Sources</h2>

      <div className="card">

        <table>

          <thead><tr><th>Name</th><th>System</th><th>Organization</th></tr></thead>

          <tbody>

            {sources.map((s) => (

              <tr key={s.id}><td>{s.name}</td><td className="muted">{s.system_type || "-"}</td><td className="muted">{s.organization || "-"}</td></tr>

            ))}

            {!sources.length && <tr><td colSpan={3} className="muted">No sources.</td></tr>}

          </tbody>

        </table>

      </div>

    </div>

  );

}