AgentHub/client/src/components/settings/SnapshotSettings.tsx

/**
 * @file SnapshotSettings.tsx
 * @description Settings → Snapshots: every frozen session (`GET
 * /api/snapshots`), each with Open, Copy link and a confirmed Delete — the
 * buttons and the same actions on a right-click menu. Snapshots survive Clear
 * Data, so this is the one place they go away.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useCallback, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { ExternalLink, ShieldCheck, Trash2 } from "lucide-react";
import { api } from "../../lib/api";
import { formatDateTime } from "../../lib/format";
import type { SessionSnapshotInfo } from "../../lib/types";
import { ConfirmModal } from "../ConfirmModal";
import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
import { CopyButton } from "../event-views/primitives";
import { snapshotUrl } from "../SnapshotButton";
import { SettingsSection } from "./SettingsRow";

export function SnapshotSettings() {
  const { t } = useTranslation("settings");
  const [items, setItems] = useState<SessionSnapshotInfo[] | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [deleting, setDeleting] = useState<SessionSnapshotInfo | null>(null);
  const [busy, setBusy] = useState(false);
  const ctx = useContextMenu<SessionSnapshotInfo>();
  const navigate = useNavigate();

  const load = useCallback(() => {
    api.snapshots
      .list()
      .then((r) => setItems(r.snapshots))
      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
  }, []);
  useEffect(load, [load]);

  const remove = async () => {
    if (!deleting) return;
    setBusy(true);
    try {
      await api.snapshots.remove(deleting.id);
      setItems((xs) => xs?.filter((x) => x.id !== deleting.id) ?? null);
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setBusy(false);
      setDeleting(null);
    }
  };
  const pick = (fn: (s: SessionSnapshotInfo) => void) => () => {
    const s = ctx.menu?.item;
    ctx.close();
    if (s) fn(s);
  };

  return (
    <SettingsSection title={t("snapshots.title")} description={t("snapshots.description")}>
      {error && (
        <p role="alert" className="py-2 text-xs text-status-danger">
          {error}
        </p>
      )}
      {items?.length === 0 && <p className="py-2 text-sm text-fg-muted">{t("snapshots.empty")}</p>}
      {items && items.length > 0 && (
        <ul className="divide-y divide-border/60" data-testid="snapshot-list">
          {items.map((s) => (
            <li
              key={s.id}
              onContextMenu={(e) => ctx.open(e, s)}
              className="flex items-center gap-3 py-2.5"
            >
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm text-fg-secondary">
                  {s.session_name || s.session_id.slice(0, 8)}
                </p>
                <p className="flex items-center gap-2 text-[11px] text-fg-muted">
                  <span>{formatDateTime(s.created_at)}</span>
                  <span>· {t("snapshots.events", { n: s.event_count ?? 0 })}</span>
                  {s.redacted && (
                    <span
                      className="inline-flex items-center gap-0.5"
                      title={t("snapshots.redacted")}
                    >
                      <ShieldCheck className="h-3 w-3" />
                      {t("snapshots.redacted")}
                    </span>
                  )}
                </p>
              </div>
              <Link
                to={`/snapshot/${s.token}`}
                className="btn-ghost text-xs"
                title={t("snapshots.open")}
              >
                <ExternalLink className="h-3.5 w-3.5" />
              </Link>
              <CopyButton text={snapshotUrl(s.token)} />
              <button
                type="button"
                onClick={() => setDeleting(s)}
                className="btn-ghost text-xs text-status-danger"
                title={t("snapshots.delete")}
                aria-label={t("snapshots.delete")}
              >
                <Trash2 className="h-3.5 w-3.5" />
              </button>
            </li>
          ))}
        </ul>
      )}
      {ctx.menu && (
        <ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="snapshot-menu">
          <MenuItem onSelect={pick((s) => navigate(`/snapshot/${s.token}`))}>
            {t("snapshots.open")}
          </MenuItem>
          <MenuItem
            onSelect={pick((s) => void navigator.clipboard?.writeText(snapshotUrl(s.token)))}
          >
            {t("snapshots.copyLink")}
          </MenuItem>
          <MenuSeparator />
          <MenuItem danger onSelect={pick(setDeleting)}>
            {t("snapshots.delete")}
          </MenuItem>
        </ContextMenu>
      )}
      <ConfirmModal
        open={deleting !== null}
        title={t("snapshots.deleteTitle")}
        message={t("snapshots.deleteBody")}
        confirmLabel={t("snapshots.delete")}
        cancelLabel={t("snapshots.cancel")}
        busy={busy}
        onConfirm={() => void remove()}
        onCancel={() => setDeleting(null)}
      />
    </SettingsSection>
  );
}