import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { getAgentSummary, HttpError } from '../api';
import type { AgentSummary } from '../types';
import { Link } from 'react-router-dom';
import { fmtRelative, fmtTime } from '../util';

export function AgentActivityPage() {
  const { id } = useParams<{ id: string }>();
  const [data, setData] = useState<AgentSummary | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [needsKey, setNeedsKey] = useState(false);
  const [pendingKey, setPendingKey] = useState('');

  useEffect(() => {
    if (!id) return;
    const ac = new AbortController();
    getAgentSummary(id, ac.signal)
      .then((d) => {
        setData(d);
        setErr(null);
        setNeedsKey(false);
      })
      .catch((e) => {
        if ((e as Error).name === 'AbortError') return;
        if (e instanceof HttpError && (e.status === 401 || e.status === 403)) {
          setNeedsKey(true);
          setErr(null);
        } else {
          setErr((e as Error).message);
        }
      });
    return () => ac.abort();
  }, [id]);

  function saveKey() {
    if (!pendingKey.trim()) return;
    localStorage.setItem('dialectic-admin-key', pendingKey.trim());
    setPendingKey('');
    window.location.reload();
  }

  if (!id) return <div className="err">missing agent id</div>;

  return (
    <div>
      <span className="eyebrow">agent</span>
      <h1>{id}</h1>

      {needsKey && (
        <div className="aa-admin-prompt">
          <div>
            this page calls an <strong>admin endpoint</strong> — paste your
            <code> x-dialectic-admin-key</code> (stored in localStorage; never
            sent except to <code>/api/admin/*</code>).
          </div>
          <input
            type="password"
            value={pendingKey}
            onChange={(e) => setPendingKey(e.target.value)}
            placeholder="admin key…"
          />
          <div className="row" style={{ marginTop: 8 }}>
            <button onClick={saveKey}>save + reload</button>
            <span className="muted">key never leaves this browser</span>
          </div>
        </div>
      )}

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

      {data && (
        <>
          <div className="aa-summary-grid">
            <div className="aa-card">
              <div className="aa-card-value">
                {data.key_provisioned ? 'yes' : 'no'}
              </div>
              <div className="aa-card-label">key provisioned</div>
            </div>
            <div className="aa-card">
              <div className="aa-card-value">{data.signups_count}</div>
              <div className="aa-card-label">signups</div>
            </div>
            <div className="aa-card">
              <div className="aa-card-value">{data.arguments_count}</div>
              <div className="aa-card-label">arguments</div>
            </div>
            <div className="aa-card">
              <div className="aa-card-value">{data.verdicts_count}</div>
              <div className="aa-card-label">verdicts</div>
            </div>
          </div>

          <h2>recent topics</h2>
          {data.recent_topics.length === 0 ? (
            <div className="td-empty">no recent topics for this agent</div>
          ) : (
            <table className="tl-table">
              <thead>
                <tr>
                  <th>topic</th>
                  <th>role</th>
                  <th>status</th>
                  <th>last action</th>
                </tr>
              </thead>
              <tbody>
                {data.recent_topics.map((t) => (
                  <tr key={t.topic_id}>
                    <td>
                      <Link to={`/topics/${t.topic_id}`}>{t.title}</Link>
                    </td>
                    <td>
                      <span className={`camp-${t.role}`}>{t.role}</span>
                    </td>
                    <td>
                      <span className={`pill pill-${t.status}`}>{t.status}</span>
                    </td>
                    <td title={fmtTime(t.last_action_at)}>
                      {fmtRelative(t.last_action_at)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </>
      )}
    </div>
  );
}