import { useEffect, useMemo, useState } from 'react';
import { api, RefTrackingItem, fmtAge } from '../lib/api';

export function RefTrackingPage() {
  const [rows, setRows] = useState<RefTrackingItem[]>([]);
  const [repoFilter, setRepoFilter] = useState('');
  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {
    api
      .refTracking(repoFilter)
      .then(setRows)
      .catch((e) => setErr(String(e)));
  }, [repoFilter]);

  // Group by repo for a cleaner display.
  const grouped = useMemo(() => {
    const g = new Map<string, RefTrackingItem[]>();
    for (const r of rows) {
      const arr = g.get(r.repo) ?? [];
      arr.push(r);
      g.set(r.repo, arr);
    }
    return [...g.entries()].sort((a, b) => a[0].localeCompare(b[0]));
  }, [rows]);

  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-2xl font-semibold text-slate-100">Ref-tracking</h1>
        <p className="text-sm text-slate-500 mt-1">
          Every cached fingerprint's producing <span className="font-mono">(repo, git-ref)</span>.
          Feeds the nightly <span className="font-mono">cluster-ref-sweep</span> that reaps
          fingerprints whose refs are gone from Gitea.
        </p>
      </div>

      <input
        value={repoFilter}
        onChange={(e) => setRepoFilter(e.target.value)}
        placeholder="filter repo — e.g. clawverse/clawstor"
        className="w-full sm:w-96 rounded bg-slate-900 border border-slate-800 px-3 py-2 text-sm font-mono"
      />

      {err && (
        <div className="rounded border border-red-800 bg-red-950/40 p-3 text-red-300 text-sm">
          {err}
        </div>
      )}

      {grouped.length === 0 && (
        <div className="text-slate-500 text-sm py-6">no ref-tracking entries yet</div>
      )}

      {grouped.map(([repo, items]) => (
        <div key={repo} className="rounded border border-slate-800 overflow-hidden">
          <div className="bg-slate-900/60 px-4 py-2 flex items-baseline justify-between">
            <span className="font-mono text-sm text-emerald-300">{repo}</span>
            <span className="text-xs text-slate-500">
              {items.length} fingerprint{items.length === 1 ? '' : 's'}
            </span>
          </div>
          <table className="w-full text-sm">
            <thead className="text-slate-500 uppercase text-xs tracking-wider">
              <tr>
                <th className="text-left px-4 py-2 font-normal">node</th>
                <th className="text-left px-4 py-2 font-normal">fingerprint</th>
                <th className="text-left px-4 py-2 font-normal">refs</th>
                <th className="text-left px-4 py-2 font-normal">first seen</th>
                <th className="text-left px-4 py-2 font-normal">last seen</th>
              </tr>
            </thead>
            <tbody>
              {items.map((it) => (
                <tr key={it.node + ':' + it.fingerprint_hex} className="border-t border-slate-900">
                  <td className="px-4 py-2">
                    <span className="inline-block rounded bg-slate-800 text-emerald-300 text-xs font-mono px-2 py-0.5">
                      {it.node}
                    </span>
                  </td>
                  <td className="px-4 py-2 font-mono text-xs">
                    {it.fingerprint_hex.slice(0, 24)}…
                  </td>
                  <td className="px-4 py-2 font-mono text-xs">
                    {it.refs.join(', ')}
                  </td>
                  <td className="px-4 py-2 text-slate-400">
                    {fmtAge(it.first_seen_unix)}
                  </td>
                  <td className="px-4 py-2 text-slate-400">
                    {fmtAge(it.last_seen_unix)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ))}
    </div>
  );
}