import { useState } from "react";
import { get } from "../api";
import { useT } from "../i18n";
import type { Message } from "../types";
import { Diff } from "./Diff";
import { Icon } from "./Icon";
import { basename } from "./FileFigure";

interface Change {
  path: string;
  created: boolean;
  deleted?: boolean;
  diff?: string;
  truncated?: boolean;
}

const count = (diff: string | undefined, sign: "+" | "-") => (diff ?? "").split("\n").filter((l) => l.startsWith(sign) && !l.startsWith(sign.repeat(3))).length;

/**
 * What one turn changed: files with their diffs (from the checkpoints the agent leaves before
 * every write/edit) and a button to roll the chat and the files back to before the turn.
 */
export function TurnChanges({
  sessionId,
  fromId,
  untilId,
  fileCount,
  userMessage,
  onRewind,
}: {
  sessionId: string;
  fromId: string;
  untilId?: string;
  fileCount: number;
  userMessage?: Message;
  onRewind?: (m: Message) => void;
}) {
  const t = useT();
  const [open, setOpen] = useState(false);
  const [changes, setChanges] = useState<Change[]>();
  const [error, setError] = useState<string>();

  const toggle = () => {
    const next = !open;
    setOpen(next);
    if (next && !changes) {
      const q = `since_message=${encodeURIComponent(fromId)}&diff=true${untilId ? `&until_message=${encodeURIComponent(untilId)}` : ""}`;
      get<Change[]>(`/sessions/${sessionId}/changes?${q}`).then(setChanges, (e) => setError(e.message));
    }
  };

  return (
    <div className="turn-changes">
      <button className="small ghost" onClick={toggle} aria-expanded={open}>
        <Icon name={open ? "chevron-down" : "chevron-right"} className="tiny" /> {t("turn.changes", { n: fileCount })}
      </button>
      {open && (
        <div className="turn-changes-body">
          {error && <div className="notice err">{error}</div>}
          {!changes && !error && <div className="hint">…</div>}
          {changes?.length === 0 && <div className="hint">{t("turn.noChanges")}</div>}
          {changes?.map((c) => (
            <details key={c.path} className="turn-file">
              <summary title={c.path}>
                <span className="mono">{basename(c.path)}</span>
                {c.created && <span className="chip">{t("turn.new")}</span>}
                {c.deleted && <span className="chip warn">{t("turn.deleted")}</span>}
                <span className="turn-stat">
                  <span className="add">+{count(c.diff, "+")}</span> <span className="del">−{count(c.diff, "-")}</span>
                </span>
              </summary>
              {c.diff ? <Diff diff={c.diff} /> : <div className="hint">{t("turn.noDiff")}</div>}
              {c.truncated && <div className="hint">{t("turn.truncated")}</div>}
            </details>
          ))}
          {userMessage && onRewind && changes && changes.length > 0 && (
            <button className="small" onClick={() => onRewind(userMessage)}>
              <Icon name="undo" /> {t("turn.rollback")}
            </button>
          )}
        </div>
      )}
    </div>
  );
}