"use client";

import { useState } from "react";
import { buttonVariants } from "@/components/ui/button";
import type { DoctorReport } from "@/lib/tool-types";
import { fmtGB } from "@/lib/dashboard";
import { fmtAgo } from "@/lib/format";

// Tools, disk, index. The tool list is the CACHE handed down by the page, or
// "not checked": the page never probes. The button POSTs, which is the one
// place a probe happens in the app.
//
// Red ONLY when the report pipeline needs it and it is absent. A missing python
// on a machine that never cuts a face is a fact, not a fault.
export default function ToolsPanel({
  initial,
  freeBytes,
  index,
}: {
  initial: DoctorReport | null;
  freeBytes: number | null;
  index: { ok: boolean; fresh: number; total: number };
}) {
  const [report, setReport] = useState<DoctorReport | null>(initial);
  const [busy, setBusy] = useState(false);

  return (
    <section data-panel="tools" className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2">
      <div className="mb-1.5 flex items-baseline gap-2">
        <h2 className="micro">tools &amp; disk</h2>
        <span className="micro ml-auto" data-tools-checked={report ? String(report.checkedAt) : "never"}>
          {report ? `checked ${fmtAgo(report.checkedAt)}` : "not checked"}
        </span>
        <button
          type="button"
          data-action="doctor"
          disabled={busy}
          className={buttonVariants({ size: "sm" })}
          onClick={async () => {
            setBusy(true);
            try {
              const r = await fetch("/api/doctor", { method: "POST" });
              if (r.ok) setReport((await r.json()) as DoctorReport);
            } finally {
              setBusy(false);
            }
          }}
        >
          {busy ? "…" : report ? "re-check" : "check"}
        </button>
      </div>
      {report && (
        <ul className="grid grid-cols-2 gap-x-3 gap-y-0.5 text-[11px]">
          {report.tools.map((t) => {
            const bad = t.required && !t.present;
            return (
              <li
                key={t.id}
                data-tool={t.id}
                data-present={t.present ? "1" : "0"}
                data-required={t.required ? "1" : "0"}
                title={t.error ?? t.bin}
                className={`flex gap-1.5 ${bad ? "text-[var(--color-bad)]" : t.present ? "text-[var(--color-dim)]" : "text-[var(--color-dim)] opacity-70"}`}
              >
                <span className="font-mono text-[var(--color-text)]">{t.id}</span>
                <span className="num truncate">{t.present ? (t.version ?? "present") : "absent"}</span>
              </li>
            );
          })}
        </ul>
      )}
      <div className="mt-1.5 flex flex-wrap gap-3 border-t border-[var(--color-line)] pt-1.5 text-[11px] text-[var(--color-dim)]">
        <span data-free-bytes={freeBytes ?? ""}>
          free <b className="num text-[var(--color-meter)]">{fmtGB(freeBytes)}</b>
        </span>
        <span data-index={index.ok ? `${index.fresh}/${index.total}` : "off"}>
          index{" "}
          {index.ok ? (
            <>
              <b className="num text-[var(--color-text)]">{index.fresh}/{index.total}</b> fresh
            </>
          ) : (
            "off"
          )}
        </span>
      </div>
    </section>
  );
}