import { useEffect, useState } from 'react';
import { Link } from 'wouter';
import { api, NodeStatusV2, fmtBytes } from '../lib/api';
import { StatTile } from '../components/StatTile';
import { ShutdownPrepPanel } from '../components/ShutdownPrepPanel';

interface Props {
  name: string;
}

export function NodeDetail({ name }: Props) {
  const [status, setStatus] = useState<NodeStatusV2 | null>(null);
  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {
    api
      .nodeStatus(name)
      .then((n) => {
        setStatus(n);
        setErr(null);
      })
      .catch((e) => setErr(String(e)));
  }, [name]);

  return (
    <div className="space-y-6">
      <div>
        <Link href="/">
          <a className="text-sm text-slate-500 hover:text-slate-300">
            ← fleet
          </a>
        </Link>
        <h1 className="text-2xl font-semibold text-slate-100 mt-2">
          {name}
        </h1>
      </div>

      {err && (
        <div className="rounded border border-amber-800 bg-amber-950/40 p-3 text-amber-300 text-sm">
          {err}
          <div className="mt-2 text-xs text-slate-400">
            Cross-node lookup lands in a follow-on PR. Until then this
            page shows detail only when you're already viewing the
            dashboard hosted by {name}. Try opening{' '}
            <span className="font-mono">http://{name}:7700/v2/#/nodes/{name}</span>{' '}
            directly.
          </div>
        </div>
      )}

      {status && (
        <>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
            <StatTile label="blobs" value={status.blob_count.toLocaleString()} color="ok" />
            <StatTile label="tags" value={status.tag_count} color="ok" />
            <StatTile label="refs" value={status.ref_count} color="ok" />
            <StatTile label="snapshots" value={status.snapshot_count} color="ok" />
            <StatTile label="ref-tracking" value={status.ref_tracking_count} color="ok" />
            <StatTile
              label="store size"
              value={fmtBytes(status.blob_store_bytes)}
              color="ok"
            />
          </div>
          <div className="rounded border border-slate-800 bg-slate-900/40 p-4 text-sm">
            <div className="text-slate-500 uppercase text-xs tracking-wider">
              blob store root
            </div>
            <div className="font-mono mt-1">{status.blob_store_root ?? '—'}</div>
          </div>

          <ShutdownPrepPanel name={name} />
        </>
      )}
    </div>
  );
}