codecraft/web/src/components/GitPanel.tsx

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

export interface GitFile {
  path: string;
  index: string;
  worktree: string;
  from?: string;
}

export interface GitStatus {
  repo: string;
  branch: string | null;
  upstream: string | null;
  ahead: number;
  behind: number;
  files: GitFile[];
}

interface Commit {
  hash: string;
  author: string;
  time: number;
  subject: string;
  refs: string;
}

const LABEL: Record<string, string> = { M: "M", A: "A", D: "D", R: "R", C: "C", U: "!", "?": "U" };

export function GitPanel({
  repo,
  status,
  refresh,
  showDiff,
  openFile,
}: {
  repo: string;
  status?: GitStatus;
  refresh: () => Promise<void>;
  showDiff: (title: string, diff: string) => void;
  openFile: (path: string) => void;
}) {
  const t = useT();
  const [message, setMessage] = useState("");
  const [amend, setAmend] = useState(false);
  const [busy, setBusy] = useState<string>();
  const [output, setOutput] = useState<{ ok: boolean; text: string }>();
  const [branches, setBranches] = useState<{ name: string; current: boolean }[]>([]);
  const [log, setLog] = useState<Commit[]>([]);
  const [view, setView] = useState<"changes" | "history">("changes");

  const call = async <T,>(action: string, extra: Record<string, unknown> = {}): Promise<T> => post<T>("/git", { path: repo, action, ...extra });

  const run = async (label: string, fn: () => Promise<unknown>, showOutput = false) => {
    setBusy(label);
    setOutput(undefined);
    try {
      const r: any = await fn();
      if (showOutput) setOutput({ ok: true, text: (r?.output ?? "").trim() || t("git.done") });
      await refresh();
      void loadMeta();
    } catch (e: any) {
      setOutput({ ok: false, text: e.message });
    } finally {
      setBusy(undefined);
    }
  };

  const loadMeta = async () => {
    try {
      const [b, l] = await Promise.all([call<{ branches: any[] }>("branches"), call<{ commits: Commit[] }>("log", { limit: 60 })]);
      setBranches(b.branches.filter((x: any) => !String(x.name).startsWith("origin/HEAD")));
      setLog(l.commits);
    } catch {
      /* empty repository */
    }
  };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => void loadMeta(), [repo]);

  if (!status) return <div className="empty"><Spinner /></div>;
  const abs = (f: GitFile) => `${status.repo}/${f.path}`;
  const staged = status.files.filter((f) => f.index !== " " && f.index !== "?");
  const unstaged = status.files.filter((f) => f.worktree !== " " || f.index === "?");

  const diff = async (f: GitFile, isStaged: boolean) => {
    try {
      const r = await call<{ diff: string }>("diff", { files: [abs(f)], staged: isStaged });
      showDiff(`${f.path}${isStaged ? ` (${t("git.staged")})` : ""}`, r.diff);
    } catch (e: any) {
      toast(e.message);
    }
  };

  const fileRow = (f: GitFile, isStaged: boolean) => {
    const code = isStaged ? f.index : f.index === "?" ? "?" : f.worktree;
    return (
      <div key={`${isStaged}-${f.path}`} className="git-file">
        <span className={`git-mark m-${LABEL[code] ?? code}`}>{LABEL[code] ?? code}</span>
        <button className="ghost git-name" onClick={() => diff(f, isStaged)} title={f.path}>
          {f.path}
        </button>
        <button className="small ghost" title={t("git.openFile")} onClick={() => openFile(abs(f))}>
          <Icon name="external" />
        </button>
        {isStaged ? (
          <button className="small" title={t("git.unstage")} onClick={() => run("unstage", () => call("unstage", { files: [abs(f)] }))}>
            <Icon name="minus" />
          </button>
        ) : (
          <>
            {f.index !== "?" && (
              <button className="small ghost danger" title={t("git.discard")} onClick={() => void confirmDialog({ message: t("git.discardConfirm", { file: f.path }), danger: true, confirmLabel: t("git.discard") }).then((ok): unknown => ok && run("discard", () => call("discard", { files: [abs(f)] })))}>
                <Icon name="refresh" />
              </button>
            )}
            <button className="small" title={t("git.stage")} onClick={() => run("stage", () => call("stage", { files: [abs(f)] }))}>
              +
            </button>
          </>
        )}
      </div>
    );
  };

  return (
    <div className="git-panel">
      <div className="git-branch">
        <select
          value={branches.find((b) => b.current)?.name ?? status.branch ?? ""}
          onChange={(e) => run("checkout", () => call("checkout", { branch: e.target.value.replace(/^origin\//, "") }), true)}
          aria-label={t("git.branch")}
        >
          {!branches.length && <option>{status.branch}</option>}
          {branches.map((b) => (
            <option key={b.name} value={b.name}>
              {b.name}
            </option>
          ))}
        </select>
        <button
          className="small"
          title={t("git.newBranch")}
          onClick={async () => {
            const name = await promptDialog({ message: t("git.newBranchName"), placeholder: "feature/…" });
            if (name) void run("checkout", () => call("checkout", { branch: name, create: true }), true);
          }}
        >
          +
        </button>
        {status.upstream && (
          <span className="chip" title={status.upstream}>
            <Icon name="arrow-up" className="tiny" />{status.ahead} <Icon name="arrow-down" className="tiny" />{status.behind}
          </span>
        )}
        <span className="spacer" />
        {(["fetch", "pull", "push"] as const).map((a) => (
          <button key={a} className="small" disabled={!!busy} onClick={() => run(a, () => call(a), true)}>
            {busy === a ? <Spinner small /> : t(`git.${a}`)}
          </button>
        ))}
      </div>
      {output && <pre className={`git-output ${output.ok ? "" : "err"}`}>{output.text}</pre>}

      <div className="mode-tabs" style={{ margin: "8px 0" }}>
        <button className={view === "changes" ? "active" : ""} onClick={() => setView("changes")}>
          {t("git.changes")} ({status.files.length})
        </button>
        <button className={view === "history" ? "active" : ""} onClick={() => setView("history")}>
          {t("git.history")}
        </button>
      </div>

      {view === "changes" ? (
        <>
          <div className="git-section">
            <div className="git-head">
              {t("git.staged")} ({staged.length})
              {staged.length > 0 && (
                <button className="small ghost" onClick={() => run("unstage", () => call("unstage", { files: staged.map(abs) }))}>
                  {t("git.unstageAll")}
                </button>
              )}
            </div>
            {staged.map((f) => fileRow(f, true))}
          </div>
          <div className="git-section">
            <div className="git-head">
              {t("git.unstaged")} ({unstaged.length})
              {unstaged.length > 0 && (
                <button className="small ghost" onClick={() => run("stage", () => call("stage", { files: unstaged.map(abs) }))}>
                  {t("git.stageAll")}
                </button>
              )}
            </div>
            {unstaged.map((f) => fileRow(f, false))}
            {status.files.length === 0 && <div className="empty" style={{ padding: 12 }}>{t("git.clean")}</div>}
          </div>
          <div className="git-commit">
            <textarea rows={3} placeholder={t("git.message")} value={message} onChange={(e) => setMessage(e.target.value)} />
            <div className="row">
              <label style={{ fontSize: 12.5 }}>
                <input type="checkbox" checked={amend} onChange={(e) => setAmend(e.target.checked)} /> {t("git.amend")}
              </label>
              <span className="spacer" />
              <button
                disabled={!!busy || staged.length === 0}
                title={t("git.suggestHint")}
                onClick={() => run("suggest", async () => setMessage((await call<{ message: string }>("suggest")).message))}
              >
                {busy === "suggest" ? <Spinner small /> : t("git.suggest")}
              </button>
              <button
                className="primary"
                disabled={!!busy || (!amend && (!message.trim() || staged.length === 0))}
                onClick={() =>
                  run(
                    "commit",
                    async () => {
                      const r = await call("commit", { message, amend });
                      setMessage("");
                      setAmend(false);
                      return r;
                    },
                    true,
                  )
                }
              >
                {busy === "commit" ? <Spinner small /> : t("git.commit")}
              </button>
            </div>
          </div>
        </>
      ) : (
        <div className="git-log">
          {log.length === 0 && <div className="empty">{t("git.noCommits")}</div>}
          {log.map((c) => (
            <button
              key={c.hash}
              className="git-commit-row"
              onClick={async () => {
                const r = await call<{ diff: string }>("show", { rev: c.hash });
                showDiff(`${c.hash.slice(0, 8)} ${c.subject}`, r.diff);
              }}
            >
              <span className="subject">{c.subject}</span>
              <span className="meta">
                {c.hash.slice(0, 7)} · {c.author} · {fmtRelative(c.time)}
                {c.refs && <span className="chip" style={{ marginLeft: 6 }}>{c.refs}</span>}
              </span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}