import { useEffect, useState } from "react";
import { get, post } from "../api";
import { useT } from "../i18n";
import { confirmDialog, promptDialog, toast } from "../dialogs";

/** Rewind to a message, optionally restoring the files the agent changed since. */
export function RewindDialog({ sessionId, messageId, onDone, onClose }: { sessionId: string; messageId: string; onDone: () => void; onClose: () => void }) {
  const t = useT();
  const [files, setFiles] = useState<{ path: string; created: boolean }[]>();
  const [restore, setRestore] = useState(true);
  const [busy, setBusy] = useState(false);
  useEffect(() => {
    get<{ path: string; created: boolean }[]>(`/sessions/${sessionId}/changes?since_message=${messageId}`).then(setFiles).catch(() => setFiles([]));
  }, [sessionId, messageId]);
  const go = async () => {
    setBusy(true);
    try {
      await post(`/sessions/${sessionId}/rewind`, { message_id: messageId, restore_files: restore && !!files?.length });
      onDone();
    } catch (e: any) {
      toast(e.message);
      setBusy(false);
    }
  };
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" role="dialog" aria-label={t("chat.rewind")} onClick={(e) => e.stopPropagation()}>
        <h3>{t("chat.rewind")}</h3>
        <p style={{ fontSize: 13, color: "var(--fg3)" }}>{t("rewind.intro")}</p>
        {files === undefined ? (
          <div className="empty">…</div>
        ) : files.length === 0 ? (
          <p style={{ fontSize: 13 }}>{t("rewind.noFiles")}</p>
        ) : (
          <>
            <label className="row" style={{ marginBottom: 6 }}>
              <input type="checkbox" checked={restore} onChange={(e) => setRestore(e.target.checked)} /> {t("rewind.restore", { n: files.length })}
            </label>
            <ul className="rewind-files">
              {files.map((f) => (
                <li key={f.path}>
                  <code>{f.path}</code> {f.created && <span className="chip">{t("rewind.willDelete")}</span>}
                </li>
              ))}
            </ul>
            <p style={{ fontSize: 12, color: "var(--muted)" }}>{t("rewind.bashNote")}</p>
          </>
        )}
        <div className="row" style={{ justifyContent: "flex-end", marginTop: 10 }}>
          <button onClick={onClose}>{t("common.cancel")}</button>
          <button className="primary" disabled={busy || files === undefined} onClick={go}>
            {t("rewind.confirm")}
          </button>
        </div>
      </div>
    </div>
  );
}