// Runs drawer — slides in from the right, lists prior runs, lets the user
// open one and load its output as the proposed workflow.

const { useState: useStateRD, useEffect: useEffectRD } = React;

const RunsDrawer = ({ open, runs, onClose, onLoadAsProposed }) => {
  const [selectedId, setSelectedId] = useStateRD(null);
  const [selectedRun, setSelectedRun] = useStateRD(null);
  const [loadError, setLoadError] = useStateRD(null);

  useEffectRD(() => {
    if (!selectedId) { setSelectedRun(null); return; }
    let cancelled = false;
    (async () => {
      try {
        const full = await window.Api.getRun(selectedId);
        if (!cancelled) { setSelectedRun(full); setLoadError(null); }
      } catch (err) {
        if (!cancelled) { setLoadError(String(err)); setSelectedRun(null); }
      }
    })();
    return () => { cancelled = true; };
  }, [selectedId]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 flex">
      <div className="flex-1 bg-black/30" onClick={onClose} />
      <aside className="w-[600px] max-w-[90vw] bg-white shadow-2xl flex flex-col">
        <header className="px-6 py-4 border-b border-neutral-200 flex items-center justify-between">
          <h2 className="text-lg font-black text-neutral-800">Runs ({runs.length})</h2>
          <button onClick={onClose} className="text-neutral-500 hover:text-neutral-800">✕</button>
        </header>
        <div className="flex-1 overflow-y-auto p-4 grid grid-cols-2 gap-4">
          <div className="flex flex-col gap-2">
            {runs.length === 0 && <div className="text-sm text-neutral-500 italic">No runs yet.</div>}
            {runs.map((r) => (
              <button
                key={r.id}
                type="button"
                onClick={() => setSelectedId(r.id)}
                className={`text-left p-3 rounded-lg border transition-colors ${selectedId === r.id ? "bg-indigo-50 border-indigo-300" : "bg-white border-neutral-200 hover:bg-neutral-50"}`}
              >
                <div className="font-mono text-[11px] text-neutral-500">{r.started_at}</div>
                <div className="text-sm font-bold text-neutral-800">{r.role}</div>
                <div className="text-xs">
                  <span className={`inline-block px-1.5 py-0.5 rounded font-bold uppercase tracking-widest ${
                    r.parse_status === "ok" ? "bg-emerald-50 text-emerald-700 border border-emerald-200"
                    : r.parse_status === "parse-error" ? "bg-amber-50 text-amber-700 border border-amber-200"
                    : "bg-red-50 text-red-700 border border-red-200"
                  }`}>{r.parse_status}</span>
                </div>
              </button>
            ))}
          </div>
          <div className="flex flex-col gap-3">
            {!selectedId && <div className="text-sm text-neutral-500 italic">Select a run to inspect.</div>}
            {loadError && <div className="text-sm text-red-700 bg-red-50 border border-red-200 rounded p-3">{loadError}</div>}
            {selectedRun && (
              <>
                <div className="text-xs text-neutral-500 font-mono break-all">{selectedRun.id}</div>
                {selectedRun.result?.parse_error && (
                  <div className="text-sm text-amber-800 bg-amber-50 border border-amber-200 rounded p-3">
                    <div className="font-bold mb-1">Parse error</div>
                    {selectedRun.result.parse_error.message}
                  </div>
                )}
                {selectedRun.result?.parsed && (
                  <pre className="text-xs bg-neutral-900 text-neutral-100 p-3 rounded-lg overflow-auto max-h-[40vh]">{JSON.stringify(selectedRun.result.parsed, null, 2)}</pre>
                )}
                {selectedRun.result?.raw_text && !selectedRun.result?.parsed && (
                  <pre className="text-xs bg-neutral-50 border border-neutral-200 p-3 rounded-lg overflow-auto max-h-[40vh] whitespace-pre-wrap">{selectedRun.result.raw_text}</pre>
                )}
                {selectedRun.result?.parsed?.status === "workflow_plan" && (
                  <button
                    type="button"
                    onClick={() => { onLoadAsProposed(selectedRun); onClose(); }}
                    className="px-4 py-2 rounded-lg bg-indigo-600 text-white font-bold text-sm hover:bg-indigo-700"
                  >
                    Load as proposed workflow
                  </button>
                )}
              </>
            )}
          </div>
        </div>
      </aside>
    </div>
  );
};

window.RunsDrawer = RunsDrawer;