jiang13-bbs/frontend/components/SnippetVersionModal.tsx

"use client";

import { useState, useEffect, useCallback } from "react";
import { History, X } from "lucide-react";
import { apiSnippetHistory } from "@/lib/api";
import type { SnippetVersionItem } from "@/lib/api";
import { toast } from "@/lib/toast";
import { formatRelative } from "@/lib/format";
import { smartDiff, toFoldedRows, type FoldedRow } from "@/lib/smartDiff";
import Modal from "@/components/Modal";

function DiffLineRow({ row }: { row: FoldedRow }) {
  if (row.kind === "fold") {
    return (
      <div
        className="text-center py-1 text-[11px] select-none"
        style={{ color: "var(--ink-3)", background: "var(--panel-2)" }}
      >
        ⋯ 折叠 {row.count} 行 ⋯
      </div>
    );
  }
  const bg =
    row.op === "del"
      ? "color-mix(in srgb, var(--danger) 8%, transparent)"
      : row.op === "ins"
        ? "color-mix(in srgb, var(--ok) 8%, transparent)"
        : "transparent";
  const color =
    row.op === "del"
      ? "var(--danger)"
      : row.op === "ins"
        ? "var(--ok)"
        : "var(--ink)";
  const prefix = row.op === "del" ? "- " : row.op === "ins" ? "+ " : "  ";

  if (row.segments && row.segments.length > 0) {
    // 行内细分高亮
    const parts: Array<{ text: string; changed: boolean }> = [];
    let last = 0;
    for (const seg of row.segments) {
      if (seg.start > last) parts.push({ text: row.text.slice(last, seg.start), changed: false });
      parts.push({ text: row.text.slice(seg.start, seg.end), changed: true });
      last = seg.end;
    }
    if (last < row.text.length) parts.push({ text: row.text.slice(last), changed: false });
    return (
      <div
        className="flex gap-2 px-3 py-0.5 text-[12.5px] font-mono whitespace-pre-wrap break-all"
        style={{ background: bg, color }}
      >
        <span className="shrink-0 w-4 select-none" style={{ color: "var(--ink-3)" }}>
          {prefix}
        </span>
        <span>
          {parts.map((p, i) =>
            p.changed ? (
              <mark
                key={i}
                style={{
                  background:
                    row.op === "del"
                      ? "color-mix(in srgb, var(--danger) 25%, transparent)"
                      : "color-mix(in srgb, var(--ok) 25%, transparent)",
                  color: "inherit",
                }}
              >
                {p.text}
              </mark>
            ) : (
              <span key={i}>{p.text}</span>
            )
          )}
        </span>
      </div>
    );
  }

  return (
    <div
      className="flex gap-2 px-3 py-0.5 text-[12.5px] font-mono whitespace-pre-wrap break-all"
      style={{ background: bg, color }}
    >
      <span className="shrink-0 w-4 select-none" style={{ color: "var(--ink-3)" }}>
        {prefix}
      </span>
      <span>{row.text || " "}</span>
    </div>
  );
}

function VersionDiff({ oldText, newText }: { oldText: string; newText: string }) {
  const result = smartDiff(oldText, newText);
  const rows = toFoldedRows(result.blocks, 3);
  return (
    <div
      className="rounded-lg overflow-hidden"
      style={{ border: "1px solid var(--line)", background: "var(--bg)" }}
    >
      <div
        className="px-3 py-1.5 text-[11px] font-medium flex items-center gap-3"
        style={{ background: "var(--panel-2)", borderBottom: "1px solid var(--line)", color: "var(--ink-3)" }}
      >
        <span style={{ color: "var(--ok)" }}>+{result.stats.adds}</span>
        <span style={{ color: "var(--danger)" }}>-{result.stats.dels}</span>
      </div>
      <div className="max-h-[320px] overflow-y-auto">
        {rows.map((row, i) => (
          <DiffLineRow key={i} row={row} />
        ))}
      </div>
    </div>
  );
}

export default function SnippetVersionModal({
  open,
  onClose,
  snippetId,
  currentCode,
  currentTitle,
  currentLanguage,
  currentDescription,
}: {
  open: boolean;
  onClose: () => void;
  snippetId: number;
  currentCode: string;
  currentTitle: string;
  currentLanguage: string;
  currentDescription: string;
}) {
  const [items, setItems] = useState<SnippetVersionItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [expandedId, setExpandedId] = useState<number | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const res = await apiSnippetHistory(snippetId, 1, 50);
      setItems(res.items);
    } catch (e) {
      toast(e instanceof Error ? e.message : "加载历史失败");
    } finally {
      setLoading(false);
    }
  }, [snippetId]);

  useEffect(() => {
    if (open) load();
  }, [open, load]);

  const toggleExpand = (id: number) => {
    setExpandedId((prev) => (prev === id ? null : id));
  };

  return (
    <Modal
      open={open}
      title="版本历史"
      description="每次编辑前的旧值快照"
      onClose={onClose}
      dismissOnOverlay
      maxWidthClass="max-w-3xl"
      panelClassName="p-5 sm:p-6"
    >
      <div className="max-h-[60vh] overflow-y-auto">
        {loading ? (
          <p className="meta text-[13px] text-center py-8">加载中…</p>
        ) : items.length === 0 ? (
          <p className="meta text-[13px] text-center py-8">暂无编辑历史</p>
        ) : (
          <div className="flex flex-col gap-3">
            {items.map((v) => {
              const isExpanded = expandedId === v.id;
              const diffRows = isExpanded
                ? toFoldedRows(smartDiff(v.old_code, currentCode).blocks, 3)
                : null;
              return (
                <div
                  key={v.id}
                  className="rounded-lg overflow-hidden"
                  style={{ border: "1px solid var(--line)", background: "var(--panel)" }}
                >
                  <button
                    type="button"
                    onClick={() => toggleExpand(v.id)}
                    className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-[var(--panel-2)] transition-colors"
                  >
                    <div className="min-w-0">
                      <p className="text-[13px] font-medium truncate" style={{ color: "var(--ink)" }}>
                        {v.old_title || currentTitle}
                      </p>
                      <p className="meta text-[11px] mt-0.5">
                        {formatRelative(v.created_at)} · {v.old_language || currentLanguage}
                      </p>
                    </div>
                    <span className="meta text-[11px] shrink-0 ml-3">
                      {isExpanded ? "收起" : "查看差异"}
                    </span>
                  </button>
                  {isExpanded && diffRows && (
                    <div className="px-4 pb-4">
                      <div
                        className="rounded-lg overflow-hidden"
                        style={{ border: "1px solid var(--line)", background: "var(--bg)" }}
                      >
                        <div
                          className="px-3 py-1.5 text-[11px] font-medium flex items-center gap-3"
                          style={{
                            background: "var(--panel-2)",
                            borderBottom: "1px solid var(--line)",
                            color: "var(--ink-3)",
                          }}
                        >
                          <span style={{ color: "var(--ok)" }}>
                            +{smartDiff(v.old_code, currentCode).stats.adds}
                          </span>
                          <span style={{ color: "var(--danger)" }}>
                            -{smartDiff(v.old_code, currentCode).stats.dels}
                          </span>
                        </div>
                        <div className="max-h-[320px] overflow-y-auto">
                          {diffRows.map((row, i) => (
                            <DiffLineRow key={i} row={row} />
                          ))}
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </Modal>
  );
}