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

/** "bash:git status" → "git status"; tool names stay. */
const label = (key: string) => (key.startsWith("bash:") ? `$ ${key.slice(5)}` : key);

/** What the user allowed "for this project" (all chats of the folder) – with a way to revoke it. */
export function ProjectPermissions({ sessionId, cwd, onClose }: { sessionId: string; cwd: string; onClose: () => void }) {
  const t = useT();
  const [keys, setKeys] = useState<string[]>();
  useEffect(() => {
    get<string[]>(`/sessions/${sessionId}/approvals`).then(setKeys, (e) => (toast(e.message), setKeys([])));
  }, [sessionId]);
  const revoke = async (key: string) => {
    try {
      await api(`/sessions/${sessionId}/approvals`, { method: "DELETE", json: { key } });
      setKeys((k) => k?.filter((x) => x !== key));
    } catch (e: any) {
      toast(e.message);
    }
  };
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" role="dialog" aria-label={t("permProject.title")} onClick={(e) => e.stopPropagation()}>
        <h3>
          <Icon name="lock" /> {t("permProject.title")}
        </h3>
        <p style={{ fontSize: 13, color: "var(--fg3)", marginBottom: 4 }}>{t("permProject.intro")}</p>
        <div className="path mono" style={{ marginBottom: 8 }}>{cwd}</div>
        {keys === undefined ? (
          <div className="empty">…</div>
        ) : keys.length === 0 ? (
          <p style={{ fontSize: 13 }}>{t("permProject.empty")}</p>
        ) : (
          <ul className="rewind-files">
            {keys.map((k) => (
              <li key={k} className="row" style={{ justifyContent: "space-between" }}>
                <code>{label(k)}</code>
                <button className="small danger" onClick={() => void revoke(k)}>
                  {t("permProject.revoke")}
                </button>
              </li>
            ))}
          </ul>
        )}
        <div className="row" style={{ justifyContent: "flex-end", marginTop: 10 }}>
          <button onClick={onClose}>{t("common.close")}</button>
        </div>
      </div>
    </div>
  );
}