← snapshot

"use client";

import { useEffect, useState } from "react";
import { DiffModal } from "@/components/diff-modal";
import { api } from "@/lib/api";
import type { ActorView, DecisionDto } from "@/lib/types";

/** Bench for the diff modal: an explicit snapshot pair, no tour required. */
export function DiffHarness({
  repo,
  from,
  into,
  paths,
}: {
  repo: string;
  from: string;
  into: string | null;
  paths: string[];
}) {
  const [decisions, setDecisions] = useState<DecisionDto[]>([]);
  const [humans, setHumans] = useState<ActorView[]>([]);
  const [open, setOpen] = useState(true);

  useEffect(() => {
    void api.decisions(repo).then((d) => setDecisions(d.decisions)).catch(() => {});
    void api.repo(repo).then((d) => setHumans(d.humans)).catch(() => {});
  }, [repo]);

  if (!from || paths.length === 0) {
    return (
      <div className="jac-page">
        <h1 className="jac-h1">Diff lab</h1>
        <p className="jac-lede">
          Pass <code className="jac-mono">?from=&into=&paths=a,b,c</code> to mount
          the modal against a specific pair of snapshots.
        </p>
      </div>
    );
  }

  return (
    <div className="jac-page">
      <h1 className="jac-h1">Diff lab</h1>
      <button type="button" className="jac-btn" onClick={() => setOpen(true)}>
        Open the diff
      </button>
      {open ? (
        <DiffModal
          repo={repo}
          fromSnapshot={from}
          intoSnapshot={into}
          paths={paths}
          decisions={decisions}
          humans={humans}
          onClose={() => setOpen(false)}
        />
      ) : null}
    </div>
  );
}