"use client";

import {
  useRef,
  useState,
  useCallback,
  useEffect,
  useDeferredValue,
  type ReactNode,
  type KeyboardEvent as ReactKeyboardEvent,
} from "react";
import {
  Bold,
  Italic,
  Strikethrough,
  Code,
  Code2,
  Quote,
  List,
  ListOrdered,
  Heading2,
  Heading3,
  Link as LinkIcon,
  Image as ImageIcon,
  Table,
  Minus,
  Eye,
  Pencil,
  Maximize2,
  Minimize2,
  Lock,
  ChevronDown,
  History,
  Ellipsis,
  Smile,
  LayoutList,
  Highlighter,
  Keyboard,
  Palette,
  MonitorPlay,
  Pipette,
} from "lucide-react";
import { apiSearchPosts, apiUploadPostImage, type PostListItem } from "@/lib/api";
import { toast } from "@/lib/toast";
import MarkdownBodyClient from "@/components/MarkdownBodyClient";
import ImageInsertModal from "@/components/ImageInsertModal";
import TimelineEditor from "@/components/TimelineEditor";
import { ENTRIES_TEMPLATE, ENTRIES_TEMPLATE_AUTO } from "@/lib/entryBlocks";
import EmojiPicker from "@/components/EmojiPicker";
import { resolveTimelineBlockForEdit, parseVideoInput } from "@/lib/directiveBlocks";
import { isValidColorValue } from "@/lib/inlineShortcodes";
import { SHIKI_LANG_IDS } from "@/components/markdown/shikiHighlighter";
import { postPath } from "@/lib/urlStyle";
import { useUrlStyle } from "@/components/SiteBrandProvider";

type MarkdownEditorProps = {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  rows?: number;
  disabled?: boolean;
  onSubmitShortcut?: () => void;
  id?: string;
  /** 挂载后聚焦 textarea（回复/编辑评论等） */
  autoFocus?: boolean;
  /** 正文插图体积上限（MB），缺省 5 */
  imageMaxMB?: number;
  /** 是否提供隐藏可见（[hide]） */
  allowHide?: boolean;
  /**
   * 是否允许「回复可见」。
   * 仅当 allowHide 为 true 时生效；不可评论的内容（如公告）应传 false，菜单项置灰。
   */
  allowReplyHide?: boolean;
  /** default=发帖完整工具栏；comment=评论紧凑栏，低频工具进「更多」 */
  density?: "default" | "comment";
  /** 输入框可访问名称（占位文案不能代替） */
  ariaLabel?: string;
  /** 底栏左侧提示；缺省按模式生成 */
  hint?: string;
  /** 评论模式快捷键文案，例如「发表」「回复」「保存」 */
  shortcutName?: string;
  /** 底栏右侧操作（发表 / 保存），纳入编辑器边框内 */
  footer?: ReactNode;
  /** 正文字符数上限；设置后计数器显示「已输入 / 上限」并限制输入 */
  maxChars?: number;
  /** 提交失败等原因，显示在编辑器内 */
  error?: string;
  onUploadingChange?: (uploading: boolean) => void;
  /** 书级「全章节条目卡模式」：插入免壳模板、预览按隐式条目渲染 */
  entriesAuto?: boolean;
  /** 图片上传时标记的 source（如 library_content），默认 post */
  uploadSource?: string;
};

type EditorMode = "write" | "preview";

type WrapOpts = {
  before: string;
  after?: string;
  placeholder?: string;
  linePrefix?: string;
};

type PopoverKind = "link" | "code" | "hide" | "heading" | "more" | "emoji" | "color" | "video" | null;

/** 文字颜色弹窗预设色板（均为合法短代码颜色值） */
const COLOR_FG_PRESETS = [
  "#e03131", "#e8590c", "#f08c00", "#2f9e44", "#0c8599",
  "#1971c2", "#6741d9", "#c2255c", "#1f2328", "#5f6b7a",
];
const COLOR_BG_PRESETS = [
  "#fff3bf", "#ffe3e3", "#d3f9d8", "#d0ebff",
  "#e5dbff", "#ffd8a8", "#ffff8f", "#e9ecef",
];

type HSV = { h: number; s: number; v: number };

/** #rgb/#rrggbb → HSV；非 hex（如颜色名）返回 null */
function hexToHsv(hex: string): HSV | null {
  const m = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(hex.trim());
  if (!m) return null;
  let x = m[1];
  if (x.length === 3) x = x.split("").map((c) => c + c).join("");
  const r = parseInt(x.slice(0, 2), 16) / 255;
  const g = parseInt(x.slice(2, 4), 16) / 255;
  const b = parseInt(x.slice(4, 6), 16) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const d = max - min;
  let h = 0;
  if (d !== 0) {
    if (max === r) h = ((g - b) / d) % 6;
    else if (max === g) h = (b - r) / d + 2;
    else h = (r - g) / d + 4;
    h *= 60;
    if (h < 0) h += 360;
  }
  return { h, s: max === 0 ? 0 : d / max, v: max };
}

/** HSV → #rrggbb */
function hsvToHex({ h, s, v }: HSV): string {
  const c = v * s;
  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
  const m = v - c;
  let r = 0, g = 0, b = 0;
  if (h < 60) [r, g, b] = [c, x, 0];
  else if (h < 120) [r, g, b] = [x, c, 0];
  else if (h < 180) [r, g, b] = [0, c, x];
  else if (h < 240) [r, g, b] = [0, x, c];
  else if (h < 300) [r, g, b] = [x, 0, c];
  else [r, g, b] = [c, 0, x];
  const to = (n: number) =>
    Math.max(0, Math.min(255, Math.round((n + m) * 255)))
      .toString(16)
      .padStart(2, "0");
  return `#${to(r)}${to(g)}${to(b)}`;
}

const CODE_LANGS = ["plaintext", "aardio", ...SHIKI_LANG_IDS.filter((l) => l !== "plaintext")] as const;

function applyWrap(
  el: HTMLTextAreaElement,
  value: string,
  opts: WrapOpts
): { next: string; selStart: number; selEnd: number } {
  const start = el.selectionStart;
  const end = el.selectionEnd;
  const selected = value.slice(start, end);
  const after = opts.after ?? "";

  if (opts.linePrefix) {
    const block = selected || opts.placeholder || "列表项";
    const lines = block.split("\n").map((l) =>
      l.startsWith(opts.linePrefix!) ? l : `${opts.linePrefix}${l}`
    );
    const inserted = lines.join("\n");
    const next = value.slice(0, start) + inserted + value.slice(end);
    return { next, selStart: start, selEnd: start + inserted.length };
  }

  const inner = selected || opts.placeholder || "";
  const inserted = opts.before + inner + after;
  const next = value.slice(0, start) + inserted + value.slice(end);
  const selStart = start + opts.before.length;
  const selEnd = selStart + inner.length;
  return { next, selStart, selEnd };
}

function isHttpUrl(raw: string): boolean {
  try {
    const u = new URL(raw.trim());
    return u.protocol === "http:" || u.protocol === "https:";
  } catch {
    return false;
  }
}

/** 链接弹窗允许的目标：http(s) 完整链接，或站内相对路径（如 /post/123） */
function isLinkTargetUrl(raw: string): boolean {
  const u = raw.trim();
  if (!u) return false;
  if (isHttpUrl(u)) return true;
  return u.startsWith("/") && !u.startsWith("//");
}

export default function MarkdownEditor({
  value,
  onChange,
  placeholder,
  rows = 16,
  disabled,
  onSubmitShortcut,
  id,
  autoFocus = false,
  imageMaxMB = 5,
  allowHide = false,
  allowReplyHide = true,
  density = "default",
  ariaLabel,
  hint,
  shortcutName,
  footer,
  maxChars,
  error,
  onUploadingChange,
  entriesAuto = false,
  uploadSource,
}: MarkdownEditorProps) {
  const taRef = useRef<HTMLTextAreaElement>(null);
  const urlStyle = useUrlStyle();
  const fileRef = useRef<HTMLInputElement>(null);
  const toolbarRef = useRef<HTMLDivElement>(null);
  const [mode, setMode] = useState<EditorMode>("write");
  const deferredValue = useDeferredValue(value);
  const [uploading, setUploading] = useState(false);
  const [fullscreen, setFullscreen] = useState(false);
  const [dragOver, setDragOver] = useState(false);
  const [popover, setPopover] = useState<PopoverKind>(null);
  const [linkText, setLinkText] = useState("");
  const [linkUrl, setLinkUrl] = useState("https://");
  // 链接弹窗：站内帖子搜索（空关键词=最近发布），折叠在「高级选项」内
  const [postQuery, setPostQuery] = useState("");
  const [postResults, setPostResults] = useState<PostListItem[]>([]);
  const [postLoading, setPostLoading] = useState(false);
  const [linkAdvanced, setLinkAdvanced] = useState(false);
  const [imageModalOpen, setImageModalOpen] = useState(false);
  const [codeQuery, setCodeQuery] = useState("");
  const [hidePoints, setHidePoints] = useState(10);
  const [hidePassword, setHidePassword] = useState("");
  const [hideStep, setHideStep] = useState<"menu" | "points" | "password">("menu");
  /** 颜色弹窗：前景/背景独立选择，可同时设置；null=不设置该侧 */
  const [colorFg, setColorFg] = useState<string | null>("#e03131");
  const [colorBg, setColorBg] = useState<string | null>(null);
  /** 色轮/自定义输入框的当前值（始终 #hex，供 HSV 取色器使用） */
  const [colorFgWheel, setColorFgWheel] = useState("#e03131");
  const [colorBgWheel, setColorBgWheel] = useState("#fff3bf");
  /** 内联 HSV 取色器展开侧；打开期间 colorHsv 为该侧当前色 */
  const [activeWheel, setActiveWheel] = useState<"fg" | "bg" | null>(null);
  const [colorHsv, setColorHsv] = useState<HSV>({ h: 0, s: 1, v: 1 });
  const [videoInput, setVideoInput] = useState("");
  const [toolNarrow, setToolNarrow] = useState(false);
  const [uploadError, setUploadError] = useState("");
  const [modKey, setModKey] = useState("Ctrl");
  const retryFile = useRef<File | null>(null);
  const moreBtnRef = useRef<HTMLButtonElement>(null);
  const [timelineOpen, setTimelineOpen] = useState(false);
  const [timelineBody, setTimelineBody] = useState("");
  const [timelineRange, setTimelineRange] = useState<{ start: number; end: number } | null>(
    null
  );
  const savedSel = useRef<{ start: number; end: number } | null>(null);
  const fullscreenMounted = useRef(false);
  const modeMounted = useRef(false);
  const isComment = density === "comment";

  useEffect(() => {
    const ua = navigator.userAgent || "";
    const platform = navigator.platform || "";
    if (/Mac|iPhone|iPad|iPod/i.test(platform) || /Mac OS|iPhone|iPad/i.test(ua)) {
      setModKey("⌘");
    }
  }, []);

  const onUploadingChangeRef = useRef(onUploadingChange);
  onUploadingChangeRef.current = onUploadingChange;
  useEffect(() => {
    onUploadingChangeRef.current?.(uploading);
  }, [uploading]);

  useEffect(() => {
    const el = toolbarRef.current;
    if (!el) return;
    const apply = () => setToolNarrow(el.clientWidth < (isComment ? 520 : 640));
    apply();
    const ro = new ResizeObserver(apply);
    ro.observe(el);
    return () => ro.disconnect();
  }, [isComment]);

  useEffect(() => {
    if (!isComment) return;
    const el = taRef.current;
    if (!el) return;
    if (fullscreen || mode !== "write") {
      el.style.height = "";
      return;
    }
    const prev = el.scrollTop;
    el.style.height = "auto";
    const next = Math.min(Math.max(el.scrollHeight, 96), 320);
    el.style.height = `${next}px`;
    el.scrollTop = prev;
  }, [value, isComment, fullscreen, mode]);

  const rememberCaret = () => {
    const el = taRef.current;
    if (!el) return;
    savedSel.current = { start: el.selectionStart, end: el.selectionEnd };
  };

  const toggleFullscreen = () => {
    rememberCaret();
    setFullscreen((v) => !v);
  };

  useEffect(() => {
    if (!fullscreenMounted.current) {
      fullscreenMounted.current = true;
      return;
    }
    if (mode !== "write") return;
    const sel = savedSel.current;
    const el = taRef.current;
    if (!el || !sel) return;
    // 进出全屏后把焦点和光标放回退出前的位置
    const frame = requestAnimationFrame(() => {
      el.focus();
      const max = el.value.length;
      el.setSelectionRange(Math.min(sel.start, max), Math.min(sel.end, max));
    });
    return () => cancelAnimationFrame(frame);
  }, [fullscreen]);

  useEffect(() => {
    if (!modeMounted.current) {
      modeMounted.current = true;
      return;
    }
    if (mode !== "write") return;
    const sel = savedSel.current;
    const el = taRef.current;
    if (!el || !sel) return;
    const frame = requestAnimationFrame(() => {
      el.focus();
      const max = el.value.length;
      el.setSelectionRange(Math.min(sel.start, max), Math.min(sel.end, max));
    });
    return () => cancelAnimationFrame(frame);
  }, [mode]);

  useEffect(() => {
    if (!fullscreen) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        e.preventDefault();
        // 插图弹窗自管 ESC，不连退全屏
        if (imageModalOpen) return;
        if (popover) setPopover(null);
        else {
          rememberCaret();
          setFullscreen(false);
        }
      }
    };
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, [fullscreen, popover, imageModalOpen]);

  useEffect(() => {
    if (!popover) return;
    const onDoc = (e: MouseEvent) => {
      const t = e.target as Node;
      if (toolbarRef.current && !toolbarRef.current.contains(t)) {
        setPopover(null);
      }
    };
    const onEsc = (e: KeyboardEvent) => {
      if (e.key !== "Escape") return;
      e.preventDefault();
      const kind = popover;
      setPopover(null);
      if (kind === "more") moreBtnRef.current?.focus();
    };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onEsc);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onEsc);
    };
  }, [popover]);

  // 链接弹窗打开且展开高级选项时，搜索站内帖子（输入防抖；空关键词给最近发布）
  useEffect(() => {
    if (popover !== "link" || !linkAdvanced) return;
    let cancelled = false;
    const kw = postQuery.trim();
    setPostLoading(true);
    const t = setTimeout(() => {
      void apiSearchPosts(kw, 8)
        .then((res) => {
          if (cancelled) return;
          setPostResults(res.posts || []);
        })
        .catch(() => {
          if (!cancelled) setPostResults([]);
        })
        .finally(() => {
          if (!cancelled) setPostLoading(false);
        });
    }, kw ? 250 : 0);
    return () => {
      cancelled = true;
      clearTimeout(t);
    };
  }, [popover, postQuery, linkAdvanced]);

  const rememberSel = () => {
    const el = taRef.current;
    if (!el) return;
    savedSel.current = { start: el.selectionStart, end: el.selectionEnd };
  };

  const restoreSel = () => {
    const el = taRef.current;
    const sel = savedSel.current;
    if (!el || !sel) return;
    el.focus();
    el.setSelectionRange(sel.start, sel.end);
  };

  const runWrap = useCallback(
    (opts: WrapOpts) => {
      const el = taRef.current;
      if (!el || disabled) return;
      if (document.activeElement !== el && savedSel.current) {
        el.setSelectionRange(savedSel.current.start, savedSel.current.end);
      }
      const { next, selStart, selEnd } = applyWrap(el, value, opts);
      onChange(next);
      requestAnimationFrame(() => {
        el.focus();
        el.setSelectionRange(selStart, selEnd);
      });
    },
    [value, onChange, disabled]
  );

  const insertAtCursor = useCallback(
    (text: string, selectInner?: { offset: number; length: number }) => {
      const el = taRef.current;
      if (!el) {
        onChange(value + (value.endsWith("\n") || !value ? "" : "\n") + text);
        return;
      }
      const start = savedSel.current?.start ?? el.selectionStart;
      const end = savedSel.current?.end ?? el.selectionEnd;
      const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
      const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
      const inserted = padBefore + text + padAfter;
      const next = value.slice(0, start) + inserted + value.slice(end);
      onChange(next);
      requestAnimationFrame(() => {
        el.focus();
        if (selectInner) {
          const a = start + padBefore.length + selectInner.offset;
          el.setSelectionRange(a, a + selectInner.length);
        } else {
          const caret = start + inserted.length;
          el.setSelectionRange(caret, caret);
        }
      });
      savedSel.current = null;
    },
    [value, onChange]
  );

  /** 行内插入（无换行 padding）：表情等短代码用 */
  const insertInline = useCallback(
    (text: string) => {
      const el = taRef.current;
      if (!el) {
        onChange(value + text);
        return;
      }
      const start = savedSel.current?.start ?? el.selectionStart;
      const end = savedSel.current?.end ?? el.selectionEnd;
      const next = value.slice(0, start) + text + value.slice(end);
      onChange(next);
      requestAnimationFrame(() => {
        el.focus();
        const caret = start + text.length;
        el.setSelectionRange(caret, caret);
      });
      savedSel.current = null;
    },
    [value, onChange]
  );

  const pickEmoji = useCallback(
    (key: string) => {
      insertInline(`[:${key}:]`);
      setPopover(null);
    },
    [insertInline]
  );

  const uploadImageFile = async (file: File | null) => {
    if (!file || disabled) return;
    retryFile.current = file;
    setUploadError("");
    if (!/^image\/(jpeg|png|webp|gif)$/i.test(file.type)) {
      setUploadError("仅支持 JPEG / PNG / WebP / GIF");
      toast("仅支持 JPEG / PNG / WebP / GIF", "error");
      return;
    }
    const maxBytes = Math.max(1, imageMaxMB) * 1024 * 1024;
    if (file.size > maxBytes) {
      const msg = `图片不能超过 ${imageMaxMB}MB`;
      setUploadError(msg);
      toast(msg, "error");
      return;
    }
    setUploading(true);
    try {
      const res = await apiUploadPostImage(file, undefined, uploadSource);
      if (!res.url) {
        const msg = res.error || "上传失败";
        setUploadError(msg);
        toast(msg, "error");
        return;
      }
      const alt = file.name.replace(/\.[^.]+$/, "") || "图片";
      insertAtCursor(`![${alt}](${res.url})`);
      setMode("write");
      setUploadError("");
      retryFile.current = null;
      setImageModalOpen(false);
      toast("图片已插入", "ok");
    } catch {
      setUploadError("上传失败");
      toast("上传失败", "error");
    } finally {
      setUploading(false);
      if (fileRef.current) fileRef.current.value = "";
    }
  };

  const openPopover = (kind: PopoverKind) => {
    rememberSel();
    if (kind === "link") {
      const el = taRef.current;
      const selected = el ? value.slice(el.selectionStart, el.selectionEnd) : "";
      setLinkText(selected || "链接文字");
      setLinkUrl("https://");
      setPostQuery("");
      setPostResults([]);
      setLinkAdvanced(false);
    }
    if (kind === "code") setCodeQuery("");
    if (kind === "color") {
      setColorFg("#e03131");
      setColorBg(null);
      setColorFgWheel("#e03131");
      setColorBgWheel("#fff3bf");
      setActiveWheel(null);
    }
    if (kind === "video") setVideoInput("");
    if (kind === "hide") {
      setHideStep("menu");
      setHidePoints(10);
      setHidePassword("");
    }
    setPopover((prev) => (prev === kind ? null : kind));
  };

  /** 选中站内帖子：回填 URL 与文字，用户可再编辑后点「插入」 */
  const pickPostLink = (p: PostListItem) => {
    setLinkUrl(postPath(urlStyle, p.id));
    setLinkText(p.title);
  };

  const applyLink = () => {
    const url = linkUrl.trim();
    if (!isLinkTargetUrl(url)) {
      toast("请输入 http(s) 链接或站内路径（如 /post/123）", "error");
      return;
    }
    const el = taRef.current;
    restoreSel();
    const start = el?.selectionStart ?? 0;
    const end = el?.selectionEnd ?? 0;
    const selected = value.slice(start, end);
    const label = (selected || linkText.trim() || url).trim() || url;
    const md = `[${label}](${url})`;
    const next = value.slice(0, start) + md + value.slice(end);
    onChange(next);
    requestAnimationFrame(() => {
      if (!el) return;
      el.focus();
      el.setSelectionRange(start + md.length, start + md.length);
    });
    setPopover(null);
  };

  /** 打开插图弹窗（上传 / 链接 / 媒体库） */
  const openImageModal = () => {
    rememberSel();
    setImageModalOpen(true);
  };

  /** 链接 tab 提交：校验后在光标处插入，失败 toast 并留在弹窗 */
  const insertImageUrl = (rawUrl: string, rawAlt: string) => {
    const url = rawUrl.trim();
    if (!isHttpUrl(url)) {
      toast("请输入有效的图片 URL（http/https）", "error");
      return;
    }
    const alt = rawAlt.trim() || "图片";
    insertAtCursor(`![${alt}](${url})`);
    setImageModalOpen(false);
  };

  const insertCodeBlock = (lang: string) => {
    const el = taRef.current;
    restoreSel();
    const start = el?.selectionStart ?? 0;
    const end = el?.selectionEnd ?? 0;
    const selected = value.slice(start, end);
    const body = selected || "代码";
    const fence = "```" + lang + "\n" + body + "\n```";
    const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
    const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
    const inserted = padBefore + fence + padAfter;
    const next = value.slice(0, start) + inserted + value.slice(end);
    onChange(next);
    requestAnimationFrame(() => {
      if (!el) return;
      el.focus();
      const bodyStart = start + padBefore.length + 3 + lang.length + 1;
      el.setSelectionRange(bodyStart, bodyStart + body.length);
    });
    setPopover(null);
  };

  const insertHide = (
    kind: "login" | "reply" | "points" | "password",
    points?: number,
    password?: string
  ) => {
    if (!allowHide) return;
    restoreSel();
    const el = taRef.current;
    const start = el?.selectionStart ?? 0;
    const end = el?.selectionEnd ?? 0;
    const selected = value.slice(start, end);
    const body = selected || "在此填写隐藏内容";
    let open = `[hide ${kind}]`;
    if (kind === "points") {
      open = `[hide points=${points || 10}]`;
    } else if (kind === "password") {
      open = `[hide password=${password || "password"}]`;
    }
    const block = `${open}\n${body}\n[/hide]`;
    const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
    const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
    const inserted = padBefore + block + padAfter;
    const next = value.slice(0, start) + inserted + value.slice(end);
    onChange(next);
    requestAnimationFrame(() => {
      if (!el) return;
      el.focus();
      const bodyStart = start + padBefore.length + open.length + 1;
      el.setSelectionRange(bodyStart, bodyStart + body.length);
    });
    setPopover(null);
  };

  /**
   * 颜色短代码插入：前景/背景可独立或组合。
   * 两侧都有 → [color=前景 bg=背景]…[/color]；仅一侧 → [color] / [bg]。
   */
  const applyColor = () => {
    const fg = colorFg?.trim();
    const bg = colorBg?.trim();
    if (!fg && !bg) {
      toast("请至少选择前景色或背景色", "error");
      return;
    }
    if ((fg && !isValidColorValue(fg)) || (bg && !isValidColorValue(bg))) {
      toast("颜色仅支持 #RGB/#RRGGBB/#RRGGBBAA 或英文颜色名", "error");
      return;
    }
    restoreSel();
    const el = taRef.current;
    const start = el?.selectionStart ?? 0;
    const end = el?.selectionEnd ?? 0;
    const selected = value.slice(start, end);
    const body = selected || "彩色文字";
    let md: string;
    if (fg && bg) md = `[color=${fg} bg=${bg}]${body}[/color]`;
    else if (fg) md = `[color=${fg}]${body}[/color]`;
    else md = `[bg=${bg}]${body}[/bg]`;
    const next = value.slice(0, start) + md + value.slice(end);
    onChange(next);
    requestAnimationFrame(() => {
      if (!el) return;
      el.focus();
      const caret = start + md.length;
      el.setSelectionRange(caret, caret);
    });
    setPopover(null);
  };

  /** 内联 HSV 取色器开关：打开时以该侧当前 hex（或上次色轮值）初始化 */
  const toggleColorWheel = (side: "fg" | "bg") => {
    if (activeWheel === side) {
      setActiveWheel(null);
      return;
    }
    const wheelHex = side === "fg" ? colorFgWheel : colorBgWheel;
    setColorHsv(hexToHsv(wheelHex) ?? { h: 0, s: 1, v: 1 });
    setActiveWheel(side);
  };

  /** HSV 拖动 → 同步该侧 wheel hex 与选中色 */
  const commitHsv = (next: HSV) => {
    setColorHsv(next);
    const hex = hsvToHex(next);
    if (activeWheel === "fg") {
      setColorFgWheel(hex);
      setColorFg(hex);
    } else if (activeWheel === "bg") {
      setColorBgWheel(hex);
      setColorBg(hex);
    }
  };

  /**
   * 饱和度/明度面板拖拽：坐标以真实渲染元素 rect 映射（pointer capture 保证移出仍跟手）。
   * 注意：必须在同步阶段取出 currentTarget 存入 el——React 在事件派发结束后会把
   * e.currentTarget 置空，延迟回调里再读会拿到 null 导致拖拽中断。
   */
  const onSvPointer = (e: React.PointerEvent<HTMLDivElement>) => {
    e.preventDefault();
    const el = e.currentTarget;
    el.setPointerCapture(e.pointerId);
    const update = (clientX: number, clientY: number) => {
      const rect = el.getBoundingClientRect();
      const s = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
      const v = 1 - Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
      setColorHsv((prev) => {
        const next = { ...prev, s, v };
        const hex = hsvToHex(next);
        if (activeWheel === "fg") {
          setColorFgWheel(hex);
          setColorFg(hex);
        } else if (activeWheel === "bg") {
          setColorBgWheel(hex);
          setColorBg(hex);
        }
        return next;
      });
    };
    update(e.clientX, e.clientY);
    const onMove = (ev: PointerEvent) => update(ev.clientX, ev.clientY);
    const cleanup = () => {
      el.removeEventListener("pointermove", onMove);
      el.removeEventListener("pointerup", cleanup);
      el.removeEventListener("pointercancel", cleanup);
    };
    el.addEventListener("pointermove", onMove);
    el.addEventListener("pointerup", cleanup);
    el.addEventListener("pointercancel", cleanup);
  };

  /** 色相条拖拽（水平）；同样在同步阶段缓存元素 */
  const onHuePointer = (e: React.PointerEvent<HTMLDivElement>) => {
    e.preventDefault();
    const el = e.currentTarget;
    el.setPointerCapture(e.pointerId);
    const update = (clientX: number) => {
      const rect = el.getBoundingClientRect();
      const h = Math.max(0, Math.min(360, ((clientX - rect.left) / rect.width) * 360));
      commitHsv({ ...colorHsv, h });
    };
    update(e.clientX);
    const onMove = (ev: PointerEvent) => update(ev.clientX);
    const cleanup = () => {
      el.removeEventListener("pointermove", onMove);
      el.removeEventListener("pointerup", cleanup);
      el.removeEventListener("pointercancel", cleanup);
    };
    el.addEventListener("pointermove", onMove);
    el.addEventListener("pointerup", cleanup);
    el.addEventListener("pointercancel", cleanup);
  };

  /** [bilibili]/[youtube] 整行插入：表单裸输入统一走 parseVideoInput */
  const applyVideo = () => {
    const parsed = parseVideoInput(videoInput);
    if (!parsed) {
      toast("请输入 B站 BV 号/链接 或 YouTube 视频 ID/链接", "error");
      return;
    }
    restoreSel();
    const el = taRef.current;
    const start = el?.selectionStart ?? 0;
    const end = el?.selectionEnd ?? 0;
    const tag = `[${parsed.provider}]${parsed.id}[/${parsed.provider}]`;
    const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
    const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
    const inserted = padBefore + tag + padAfter;
    const next = value.slice(0, start) + inserted + value.slice(end);
    onChange(next);
    requestAnimationFrame(() => {
      if (!el) return;
      el.focus();
      const caret = start + inserted.length;
      el.setSelectionRange(caret, caret);
    });
    setPopover(null);
  };

  /** [details 标题]…[/details] 折叠面板：包住选区或占位正文 */
  const insertDetails = () => {
    restoreSel();
    const el = taRef.current;
    const start = el?.selectionStart ?? 0;
    const end = el?.selectionEnd ?? 0;
    const selected = value.slice(start, end);
    const body = selected || "折叠内容";
    const open = "[details 点击展开]";
    const block = `${open}\n${body}\n[/details]`;
    const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
    const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
    const inserted = padBefore + block + padAfter;
    const next = value.slice(0, start) + inserted + value.slice(end);
    onChange(next);
    requestAnimationFrame(() => {
      if (!el) return;
      el.focus();
      const bodyStart = start + padBefore.length + open.length + 1;
      el.setSelectionRange(bodyStart, bodyStart + body.length);
    });
    setPopover(null);
  };

  const openTimelineEditor = () => {
    rememberSel();
    const el = taRef.current;
    const cursor = el?.selectionStart ?? savedSel.current?.start ?? 0;
    const found = resolveTimelineBlockForEdit(value, cursor);
    if (found) {
      setTimelineBody(found.body);
      setTimelineRange({ start: found.start, end: found.end });
    } else {
      setTimelineBody("");
      setTimelineRange(null);
    }
    setPopover(null);
    setTimelineOpen(true);
  };

  const applyTimelineBlock = (block: string) => {
    const el = taRef.current;
    if (timelineRange) {
      const next = value.slice(0, timelineRange.start) + block + value.slice(timelineRange.end);
      onChange(next);
      requestAnimationFrame(() => {
        if (!el) return;
        el.focus();
        const pos = timelineRange.start + block.length;
        el.setSelectionRange(pos, pos);
      });
      return;
    }
    restoreSel();
    const start = el?.selectionStart ?? 0;
    const end = el?.selectionEnd ?? start;
    const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
    const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
    const inserted = padBefore + block + padAfter;
    const next = value.slice(0, start) + inserted + value.slice(end);
    onChange(next);
    requestAnimationFrame(() => {
      if (!el) return;
      el.focus();
      const pos = start + inserted.length;
      el.setSelectionRange(pos, pos);
    });
  };

  const insertOrderedList = () => {
    const el = taRef.current;
    if (!el || disabled) return;
    const start = el.selectionStart;
    const end = el.selectionEnd;
    const selected = value.slice(start, end) || "列表项";
    const lines = selected.split("\n").map((l, i) => {
      if (/^\d+\.\s/.test(l)) return l;
      return `${i + 1}. ${l}`;
    });
    const inserted = lines.join("\n");
    const next = value.slice(0, start) + inserted + value.slice(end);
    onChange(next);
    requestAnimationFrame(() => {
      el.focus();
      el.setSelectionRange(start, start + inserted.length);
    });
  };

  const insertTable = () => {
    insertAtCursor(
      "| 列1 | 列2 | 列3 |\n| --- | --- | --- |\n|  |  |  |\n|  |  |  |"
    );
  };

  const onTextareaKeyDown = (e: ReactKeyboardEvent<HTMLTextAreaElement>) => {
    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
      // 输入法组字期间的 Enter 不是提交
      if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return;
      e.preventDefault();
      onSubmitShortcut?.();
      return;
    }
    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === "b") {
      e.preventDefault();
      runWrap({ before: "**", after: "**", placeholder: "粗体" });
      return;
    }
    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === "i") {
      e.preventDefault();
      runWrap({ before: "*", after: "*", placeholder: "斜体" });
      return;
    }
    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === "k") {
      e.preventDefault();
      openPopover("link");
      return;
    }
    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "c") {
      e.preventDefault();
      openPopover("code");
      return;
    }
  };

  const onPaste = async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
    const items = e.clipboardData?.items;
    if (items) {
      for (const item of items) {
        if (item.type.startsWith("image/")) {
          e.preventDefault();
          const file = item.getAsFile();
          await uploadImageFile(file);
          return;
        }
      }
    }
    const text = e.clipboardData?.getData("text/plain")?.trim() || "";
    if (text && isHttpUrl(text)) {
      const el = taRef.current;
      if (el && el.selectionStart !== el.selectionEnd) {
        e.preventDefault();
        const start = el.selectionStart;
        const end = el.selectionEnd;
        const selected = value.slice(start, end);
        const md = `[${selected}](${text})`;
        const next = value.slice(0, start) + md + value.slice(end);
        onChange(next);
        requestAnimationFrame(() => {
          el.focus();
          el.setSelectionRange(start + md.length, start + md.length);
        });
      }
    }
  };

  const filteredLangs = CODE_LANGS.filter((l) =>
    l.toLowerCase().includes(codeQuery.trim().toLowerCase())
  );

  // 代码块语言弹层：常规时挂在行内按钮下，窄屏收进「更多」后挂在其锚点下（居中防溢出）
  const codePopover =
    popover === "code" ? (
      <div
        className={`j13-md-popover j13-md-popover-wide${toolNarrow ? " j13-md-popover-center" : ""}`}
        role="dialog"
        aria-label="选择语言"
      >
        <input
          autoFocus
          className="j13-md-popover-input"
          placeholder="搜索语言…"
          value={codeQuery}
          onChange={(e) => setCodeQuery(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && filteredLangs[0]) {
              e.preventDefault();
              insertCodeBlock(filteredLangs[0]);
            }
          }}
        />
        <div className="j13-md-popover-list">
          {filteredLangs.map((lang) => (
            <button key={lang} type="button" onClick={() => insertCodeBlock(lang)}>
              {lang}
            </button>
          ))}
          {filteredLangs.length === 0 && (
            <p className="meta px-2 py-3 text-center">无匹配语言</p>
          )}
        </div>
      </div>
    ) : null;

  // 隐藏内容弹层：同上，窄屏时改挂在「更多」锚点下
  const hidePopover =
    allowHide && popover === "hide" ? (
      <div
        className={`j13-md-popover j13-md-popover-form${toolNarrow ? " j13-md-popover-center" : ""}`}
        role="dialog"
        aria-label="插入隐藏内容"
      >
        {hideStep === "menu" ? (
          <>
            <button type="button" className="j13-md-menu-item" onClick={() => insertHide("login")}>
              登录可见
            </button>
            <button
              type="button"
              className="j13-md-menu-item"
              disabled={!allowReplyHide}
              data-tip={allowReplyHide ? undefined : "当前内容不可评论，无法使用回复可见"}
              aria-disabled={!allowReplyHide}
              onClick={() => {
                if (!allowReplyHide) return;
                insertHide("reply");
              }}
            >
              回复可见
              {!allowReplyHide ? (
                <span className="j13-md-menu-item-hint">不可用</span>
              ) : null}
            </button>
            <button
              type="button"
              className="j13-md-menu-item"
              onClick={() => setHideStep("points")}
            >
              积分可见…
            </button>
            <button
              type="button"
              className="j13-md-menu-item"
              onClick={() => setHideStep("password")}
            >
              密码可见…
            </button>
          </>
        ) : hideStep === "points" ? (
          <>
            <label className="j13-md-field">
              <span>所需积分</span>
              <input
                autoFocus
                type="number"
                min={1}
                max={100000}
                value={hidePoints}
                onChange={(e) => setHidePoints(Number(e.target.value) || 1)}
                className="j13-md-popover-input"
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    e.preventDefault();
                    if (hidePoints >= 1 && hidePoints <= 100000) {
                      insertHide("points", hidePoints);
                    }
                  }
                }}
              />
            </label>
            <div className="j13-md-popover-footer">
              <button
                type="button"
                className="btn btn-line btn-sm"
                onClick={() => setHideStep("menu")}
              >
                返回
              </button>
              <button
                type="button"
                className="btn btn-primary btn-sm"
                onClick={() => {
                  if (hidePoints < 1 || hidePoints > 100000) {
                    toast("积分须在 1–100000", "error");
                    return;
                  }
                  insertHide("points", hidePoints);
                }}
              >
                插入
              </button>
            </div>
          </>
        ) : (
          <>
            <label className="j13-md-field">
              <span>查看密码（不含空格，1–64 字）</span>
              <input
                autoFocus
                type="text"
                value={hidePassword}
                maxLength={64}
                placeholder="例如：secret"
                onChange={(e) => setHidePassword(e.target.value)}
                className="j13-md-popover-input"
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    e.preventDefault();
                    const p = hidePassword.trim();
                    if (p && !/\s/.test(p)) {
                      insertHide("password", undefined, p);
                    }
                  }
                }}
              />
            </label>
            <div className="j13-md-popover-footer">
              <button
                type="button"
                className="btn btn-line btn-sm"
                onClick={() => setHideStep("menu")}
              >
                返回
              </button>
              <button
                type="button"
                className="btn btn-primary btn-sm"
                onClick={() => {
                  const p = hidePassword.trim();
                  if (!p || /\s/.test(p) || p.length > 64) {
                    toast("密码须为 1–64 字符且不含空格", "error");
                    return;
                  }
                  insertHide("password", undefined, p);
                }}
              >
                插入
              </button>
            </div>
          </>
        )}
      </div>
    ) : null;

  // 文字颜色弹层：前景/背景两行独立选择，可同时设置；每行含预设、内联 HSV 取色器与自定义输入。
  // 用普通函数调用而非 <ColorPickRow/> 组件：避免内联组件每次渲染重挂载导致输入框失焦。
  const renderColorRow = (
    side: "fg" | "bg",
    label: string,
    presets: readonly string[],
    picked: string | null
  ) => {
    const setPicked = (v: string | null) =>
      side === "fg" ? setColorFg(v) : setColorBg(v);
    const wheelOpen = activeWheel === side;
    return (
      <div className="j13-md-color-row">
        <span className="j13-md-color-row-label">{label}</span>
        <div className="j13-md-color-row-items">
          <button
            type="button"
            className={`j13-md-color-none${picked === null ? " is-active" : ""}`}
            onClick={() => setPicked(null)}
          >
            无
          </button>
          {presets.map((c) => (
            <button
              key={c}
              type="button"
              className={`j13-md-color-dot${picked?.toLowerCase() === c.toLowerCase() ? " is-active" : ""}`}
              style={{ background: c }}
              data-tip={c}
              aria-label={`使用 ${c}`}
              onClick={() => setPicked(c)}
            />
          ))}
          <button
            type="button"
            className={`j13-md-color-wheel${wheelOpen ? " is-active" : ""}`}
            data-tip="自定义颜色"
            aria-label="自定义颜色"
            aria-expanded={wheelOpen}
            onClick={() => toggleColorWheel(side)}
          >
            <Pipette size={12} />
          </button>
          <input
            className="j13-md-color-hex j13-md-popover-input"
            value={picked ?? ""}
            placeholder="#e03131 或 tomato"
            onChange={(e) => {
              const v = e.target.value;
              setPicked(v);
              if (/^#[0-9a-fA-F]{6}$/.test(v)) {
                if (side === "fg") setColorFgWheel(v);
                else setColorBgWheel(v);
                if (wheelOpen) setColorHsv(hexToHsv(v) ?? colorHsv);
              }
            }}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
                applyColor();
              }
            }}
          />
        </div>
        {wheelOpen && (
          <div className="j13-md-hsv">
            <div
              className="j13-md-hsv-sv"
              style={{
                background: `linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, ${hsvToHex({ h: colorHsv.h, s: 1, v: 1 })})`,
              }}
              onPointerDown={onSvPointer}
            >
              <span
                className="j13-md-hsv-sv-thumb"
                style={{
                  left: `${colorHsv.s * 100}%`,
                  top: `${(1 - colorHsv.v) * 100}%`,
                }}
              />
            </div>
            <div className="j13-md-hsv-hue" onPointerDown={onHuePointer}>
              <span
                className="j13-md-hsv-hue-thumb"
                style={{ left: `${(colorHsv.h / 360) * 100}%` }}
              />
            </div>
          </div>
        )}
      </div>
    );
  };

  const colorPopover =
    popover === "color" ? (
      <div
        className={`j13-md-popover j13-md-popover-form j13-md-color-popover${toolNarrow ? " j13-md-popover-center" : ""}`}
        role="dialog"
        aria-label="文字颜色"
      >
        <div className="j13-md-color-preview">
          <span
            style={{
              color: colorFg ?? "inherit",
              backgroundColor: colorBg ?? "transparent",
            }}
          >
            Aa 示例文字
          </span>
        </div>
        {renderColorRow("fg", "前景", COLOR_FG_PRESETS, colorFg)}
        {renderColorRow("bg", "背景", COLOR_BG_PRESETS, colorBg)}
        <div className="j13-md-popover-footer">
          <button type="button" className="btn btn-line btn-sm" onClick={() => setPopover(null)}>
            取消
          </button>
          <button type="button" className="btn btn-primary btn-sm" onClick={() => applyColor()}>
            插入
          </button>
        </div>
      </div>
    ) : null;

  // 视频嵌入弹层：裸输入统一交给 parseVideoInput 归一化
  const videoPopover =
    popover === "video" ? (
      <div
        className={`j13-md-popover j13-md-popover-form${toolNarrow ? " j13-md-popover-center" : ""}`}
        role="dialog"
        aria-label="插入视频"
      >
        <label className="j13-md-field">
          <span>B站 / YouTube</span>
          <input
            autoFocus
            value={videoInput}
            onChange={(e) => setVideoInput(e.target.value)}
            className="j13-md-popover-input"
            placeholder="BV1… / 视频链接 / YouTube ID"
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
                applyVideo();
              }
            }}
          />
        </label>
        <div className="j13-md-popover-footer">
          <button type="button" className="btn btn-line btn-sm" onClick={() => setPopover(null)}>
            取消
          </button>
          <button type="button" className="btn btn-primary btn-sm" onClick={applyVideo}>
            插入
          </button>
        </div>
      </div>
    ) : null;

  const ToolBtn = ({
    label,
    icon,
    onClick,
    active,
    disabled: dis,
  }: {
    label: string;
    icon: ReactNode;
    onClick: () => void;
    active?: boolean;
    disabled?: boolean;
  }) => (
    <button
      type="button"
      className={`j13-md-tool${active ? " is-active" : ""}`}
      data-tip={label}
      aria-label={label}
      disabled={disabled || dis}
      onMouseDown={(e) => {
        e.preventDefault();
        rememberCaret();
      }}
      onClick={onClick}
    >
      {icon}
    </button>
  );

  const Sep = () => <span className="j13-md-sep" aria-hidden />;

  return (
    <div
      className={`j13-md-editor${fullscreen ? " is-fullscreen" : ""}${
        isComment ? " is-comment" : ""
      }${toolNarrow ? " is-narrow" : ""}`}
    >
      <div className="j13-md-toolbar" ref={toolbarRef}>
        <div className="j13-md-tool-groups flex items-center gap-0.5 flex-1 flex-wrap min-w-0">
          <ToolBtn
            label="粗体 Ctrl+B"
            icon={<Bold size={15} />}
            onClick={() => runWrap({ before: "**", after: "**", placeholder: "粗体" })}
          />
          {!isComment && !toolNarrow && (
            <ToolBtn
              label="斜体 Ctrl+I"
              icon={<Italic size={15} />}
              onClick={() => runWrap({ before: "*", after: "*", placeholder: "斜体" })}
            />
          )}
          {!isComment && !toolNarrow && (
            <ToolBtn
              label="删除线"
              icon={<Strikethrough size={15} />}
              onClick={() => runWrap({ before: "~~", after: "~~", placeholder: "删除线" })}
            />
          )}
          {!isComment && !toolNarrow && (
            <ToolBtn
              label="高亮 =="
              icon={<Highlighter size={15} />}
              onClick={() => runWrap({ before: "==", after: "==", placeholder: "高亮" })}
            />
          )}
          {!isComment && !toolNarrow && (
            <ToolBtn
              label="键帽"
              icon={<Keyboard size={15} />}
              onClick={() => runWrap({ before: "[kbd]", after: "[/kbd]", placeholder: "Ctrl" })}
            />
          )}
          {!toolNarrow && (
            <div className="j13-md-popover-anchor relative">
              <ToolBtn
                label="文字颜色"
                icon={<Palette size={15} />}
                active={popover === "color"}
                onClick={() => openPopover("color")}
              />
              {popover === "color" && colorPopover}
            </div>
          )}
          {!isComment && !toolNarrow && <Sep />}
          {!isComment && (
            <div className="j13-md-popover-anchor relative">
              <ToolBtn
                label="标题"
                icon={
                  <span className="inline-flex items-center gap-0.5">
                    <Heading2 size={15} />
                    <ChevronDown size={11} />
                  </span>
                }
                active={popover === "heading"}
                onClick={() => openPopover("heading")}
              />
              {popover === "heading" && (
                <div className="j13-md-popover" role="menu">
                  <button
                    type="button"
                    role="menuitem"
                    onMouseDown={(e) => e.preventDefault()}
                    onClick={() => {
                      runWrap({ before: "## ", after: "", placeholder: "二级标题" });
                      setPopover(null);
                    }}
                  >
                    <Heading2 size={14} /> 二级标题
                  </button>
                  <button
                    type="button"
                    role="menuitem"
                    onMouseDown={(e) => e.preventDefault()}
                    onClick={() => {
                      runWrap({ before: "### ", after: "", placeholder: "三级标题" });
                      setPopover(null);
                    }}
                  >
                    <Heading3 size={14} /> 三级标题
                  </button>
                </div>
              )}
            </div>
          )}
          {!toolNarrow && <Sep />}
          {!toolNarrow && (
            <ToolBtn
              label="引用"
              icon={<Quote size={15} />}
              onClick={() =>
                runWrap({ before: "", linePrefix: "> ", placeholder: "引用内容" })
              }
            />
          )}
          {!toolNarrow && (
            <ToolBtn
              label="无序列表"
              icon={<List size={15} />}
              onClick={() =>
                runWrap({ before: "", linePrefix: "- ", placeholder: "列表项" })
              }
            />
          )}
          {!isComment && !toolNarrow && (
            <ToolBtn
              label="有序列表"
              icon={<ListOrdered size={15} />}
              onClick={insertOrderedList}
            />
          )}
          {!isComment && !toolNarrow && <ToolBtn label="表格" icon={<Table size={15} />} onClick={insertTable} />}
          {!isComment && !toolNarrow && (
            <ToolBtn
              label="分割线"
              icon={<Minus size={15} />}
              onClick={() => insertAtCursor("---")}
            />
          )}
          <Sep />
          <ToolBtn
            label="行内代码"
            icon={<Code size={15} />}
            onClick={() => runWrap({ before: "`", after: "`", placeholder: "code" })}
          />
          {!toolNarrow && (
          <div className="j13-md-popover-anchor relative">
            <ToolBtn
              label="代码块 Ctrl+Shift+C"
              icon={<Code2 size={15} />}
              active={popover === "code"}
              onClick={() => openPopover("code")}
            />
            {codePopover}
          </div>
          )}
          <Sep />
          <div className="j13-md-popover-anchor relative">
            <ToolBtn
              label="链接 Ctrl+K"
              icon={<LinkIcon size={15} />}
              active={popover === "link"}
              onClick={() => openPopover("link")}
            />
            {popover === "link" && (
              <div className="j13-md-popover j13-md-popover-form" role="dialog" aria-label="插入链接">
                <label className="j13-md-field">
                  <span>文字</span>
                  <input
                    value={linkText}
                    onChange={(e) => setLinkText(e.target.value)}
                    className="j13-md-popover-input"
                  />
                </label>
                <label className="j13-md-field">
                  <span>URL</span>
                  <input
                    autoFocus
                    value={linkUrl}
                    onChange={(e) => setLinkUrl(e.target.value)}
                    className="j13-md-popover-input"
                    placeholder="https://… 或 /post/123"
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        e.preventDefault();
                        applyLink();
                      }
                    }}
                  />
                </label>
                <button
                  type="button"
                  className="j13-md-adv-toggle"
                  aria-expanded={linkAdvanced}
                  onClick={() => setLinkAdvanced((v) => !v)}
                >
                  高级选项
                  <ChevronDown
                    size={12}
                    className={`transition-transform${linkAdvanced ? " rotate-180" : ""}`}
                  />
                </button>
                {linkAdvanced && (
                  <div className="j13-md-link-search">
                    <input
                      className="j13-md-popover-input"
                      placeholder="搜索帖子…"
                      value={postQuery}
                      onChange={(e) => setPostQuery(e.target.value)}
                    />
                    <div className="j13-md-popover-list">
                      {postLoading ? (
                        <p className="meta px-2 py-3 text-center">搜索中…</p>
                      ) : postResults.length === 0 ? (
                        <p className="meta px-2 py-3 text-center">
                          {postQuery.trim() ? "无匹配帖子" : "暂无最近帖子"}
                        </p>
                      ) : (
                        postResults.map((p) => (
                          <button
                            key={p.id}
                            type="button"
                            className="j13-md-post-row"
                            data-tip={p.title}
                            onClick={() => pickPostLink(p)}
                          >
                            <span className="truncate flex-1">{p.title}</span>
                            <span className="j13-md-post-tag">帖子</span>
                          </button>
                        ))
                      )}
                    </div>
                  </div>
                )}
                <div className="j13-md-popover-footer">
                  <button type="button" className="btn btn-line btn-sm" onClick={() => setPopover(null)}>
                    取消
                  </button>
                  <button type="button" className="btn btn-primary btn-sm" onClick={applyLink}>
                    插入
                  </button>
                </div>
              </div>
            )}
          </div>
          {(isComment || !toolNarrow) && (
          <div className="j13-md-popover-anchor relative">
            <ToolBtn
              label="表情"
              icon={<Smile size={15} />}
              active={popover === "emoji"}
              onClick={() => openPopover("emoji")}
            />
            {popover === "emoji" && (
              <div className="j13-md-popover j13-md-emoji-popover" role="dialog" aria-label="插入表情">
                <EmojiPicker onPick={pickEmoji} />
              </div>
            )}
          </div>
          )}
          <div className="j13-md-popover-anchor relative">
            <ToolBtn
              label={uploading ? "上传中…" : "图片"}
              icon={<ImageIcon size={15} />}
              active={imageModalOpen}
              disabled={uploading}
              onClick={openImageModal}
            />
          </div>
          {(isComment || toolNarrow) && (
            <div className="j13-md-popover-anchor relative">
              <button
                ref={moreBtnRef}
                type="button"
                className={`j13-md-tool${popover === "more" || (toolNarrow && (popover === "code" || popover === "emoji" || popover === "hide")) ? " is-active" : ""}`}
                data-tip="更多工具"
                aria-label="更多工具"
                aria-haspopup="menu"
                aria-expanded={popover === "more"}
                disabled={disabled}
                onMouseDown={(e) => {
                  e.preventDefault();
                  rememberCaret();
                }}
                onClick={() => openPopover("more")}
              >
                <Ellipsis size={15} />
              </button>
              {popover === "more" && (
                <div className="j13-md-popover" role="menu" aria-label="更多工具">
                  {toolNarrow && (
                    <>
                      <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "", linePrefix: "> ", placeholder: "引用内容" }); setPopover(null); }}>引用</button>
                      <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "", linePrefix: "- ", placeholder: "列表项" }); setPopover(null); }}>无序列表</button>
                      <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => openPopover("code")}>代码块</button>
                    </>
                  )}
                  <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "*", after: "*", placeholder: "斜体" }); setPopover(null); }}>斜体</button>
                  <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "~~", after: "~~", placeholder: "删除线" }); setPopover(null); }}>删除线</button>
                  <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "==", after: "==", placeholder: "高亮" }); setPopover(null); }}>高亮</button>
                  <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "[kbd]", after: "[/kbd]", placeholder: "Ctrl" }); setPopover(null); }}>键帽</button>
                  <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => openPopover("color")}>颜色…</button>
                  {!isComment && (
                    <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => openPopover("emoji")}>表情</button>
                  )}
                  <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "## ", after: "", placeholder: "二级标题" }); setPopover(null); }}>二级标题</button>
                  <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { runWrap({ before: "### ", after: "", placeholder: "三级标题" }); setPopover(null); }}>三级标题</button>
                  <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { insertOrderedList(); setPopover(null); }}>有序列表</button>
                  <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { insertTable(); setPopover(null); }}>表格</button>
                  <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { insertAtCursor("---"); setPopover(null); }}>分隔线</button>
                  {!isComment && allowHide && (
                    <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => openPopover("hide")}>隐藏内容</button>
                  )}
                  <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { setPopover(null); openTimelineEditor(); }}>时间线</button>
                  <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { insertAtCursor(entriesAuto ? ENTRIES_TEMPLATE_AUTO : ENTRIES_TEMPLATE); setPopover(null); }}>条目卡</button>
                  {!isComment && (
                    <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => insertDetails()}>折叠面板</button>
                  )}
                  {!isComment && (
                    <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => openPopover("video")}>视频…</button>
                  )}
                  {toolNarrow && (
                    <button type="button" role="menuitem" className="j13-md-menu-item" onMouseDown={(e) => e.preventDefault()} onClick={() => { setPopover(null); toggleFullscreen(); }}>{fullscreen ? "退出全屏" : "全屏写作"}</button>
                  )}
                </div>
              )}
              {toolNarrow && codePopover}
              {toolNarrow && popover === "color" && colorPopover}
              {toolNarrow && popover === "video" && videoPopover}
              {toolNarrow && popover === "emoji" && !isComment && (
                <div className="j13-md-popover j13-md-emoji-popover j13-md-popover-center" role="dialog" aria-label="插入表情">
                  <EmojiPicker onPick={pickEmoji} />
                </div>
              )}
              {toolNarrow && hidePopover}
            </div>
          )}
          {!isComment && !toolNarrow && <Sep />}
          {!isComment && !toolNarrow && (
          <ToolBtn
            label="时间线"
            icon={<History size={15} />}
            onClick={openTimelineEditor}
          />
          )}
          {!isComment && !toolNarrow && (
          <ToolBtn
            label="条目卡"
            icon={<LayoutList size={15} />}
            onClick={() => insertAtCursor(entriesAuto ? ENTRIES_TEMPLATE_AUTO : ENTRIES_TEMPLATE)}
          />
          )}
          {!isComment && !toolNarrow && (
            <div className="j13-md-popover-anchor relative">
              <ToolBtn
                label="视频"
                icon={<MonitorPlay size={15} />}
                active={popover === "video"}
                onClick={() => openPopover("video")}
              />
              {popover === "video" && videoPopover}
            </div>
          )}
          {allowHide && !toolNarrow ? (
            <div className="j13-md-popover-anchor relative">
              <ToolBtn
                label="隐藏内容"
                icon={<Lock size={15} />}
                active={popover === "hide"}
                onClick={() => openPopover("hide")}
              />
              {hidePopover}
            </div>
          ) : null}
        </div>
        <div className="j13-md-toolbar-end flex items-center gap-2 shrink-0">
          <div className="j13-md-mode" role="tablist" aria-label="编辑模式">
            <button
              type="button"
              role="tab"
              aria-selected={mode === "write"}
              aria-label="编写模式"
              className={mode === "write" ? "is-on" : ""}
              onMouseDown={(e) => {
                e.preventDefault();
                rememberCaret();
              }}
              onClick={() => setMode("write")}
            >
              <Pencil size={12} /> <span className="j13-md-mode-text">编写</span>
            </button>
            <button
              type="button"
              role="tab"
              aria-selected={mode === "preview"}
              aria-label="预览模式"
              className={mode === "preview" ? "is-on" : ""}
              onMouseDown={(e) => {
                e.preventDefault();
                rememberCaret();
              }}
              onClick={() => setMode("preview")}
            >
              <Eye size={12} /> <span className="j13-md-mode-text">预览</span>
            </button>
          </div>
          {!toolNarrow && (
          <button
            type="button"
            className="j13-md-tool"
            data-tip={fullscreen ? "退出全屏 (Esc)" : "全屏写作"}
            aria-label={fullscreen ? "退出全屏" : "全屏写作"}
            onMouseDown={(e) => {
              e.preventDefault();
              rememberCaret();
            }}
            onClick={toggleFullscreen}
          >
            {fullscreen ? <Minimize2 size={15} /> : <Maximize2 size={15} />}
          </button>
          )}
        </div>
      </div>

      <input
        ref={fileRef}
        type="file"
        accept="image/jpeg,image/png,image/webp,image/gif"
        className="hidden"
        onChange={(e) => void uploadImageFile(e.target.files?.[0] ?? null)}
      />

      <div className={`j13-md-panes is-${mode}`}>
        <div
          className={`j13-md-write-wrap${dragOver ? " is-dragover" : ""}`}
          hidden={mode === "preview"}
          onDragEnter={(e) => {
            e.preventDefault();
            if (e.dataTransfer.types.includes("Files")) setDragOver(true);
          }}
          onDragOver={(e) => e.preventDefault()}
          onDragLeave={(e) => {
            if (e.currentTarget === e.target) setDragOver(false);
          }}
          onDrop={(e) => {
            e.preventDefault();
            setDragOver(false);
            const file = e.dataTransfer.files?.[0];
            if (file) void uploadImageFile(file);
          }}
        >
          {dragOver && (
            <div className="j13-md-drop-mask" aria-hidden>
              放开以上传图片
            </div>
          )}
          <textarea
            ref={taRef}
            id={id}
            value={value}
            disabled={disabled}
            rows={isComment ? 3 : rows}
            maxLength={maxChars}
            placeholder={placeholder}
            aria-label={ariaLabel || placeholder || "正文"}
            className="j13-md-textarea"
            autoFocus={autoFocus}
            onChange={(e) => onChange(e.target.value)}
            onKeyDown={onTextareaKeyDown}
            onPaste={(e) => void onPaste(e)}
            onSelect={rememberSel}
            onBlur={rememberCaret}
          />
        </div>
        <div className="j13-md-preview" hidden={mode === "write"}>
          <div className="j13-md-preview-label meta" aria-hidden>
            预览
          </div>
          {deferredValue.trim() ? (
            <MarkdownBodyClient content={deferredValue} entriesAuto={entriesAuto} />
          ) : (
            <p className="meta text-center py-16">暂无内容可预览</p>
          )}
        </div>
      </div>

      <div className="j13-md-foot">
        <span className="j13-md-foot-hint">
          {hint ??
            (isComment
              ? `支持 Markdown · ${modKey}+Enter ${shortcutName || "发表"}`
              : "支持粘贴/拖拽图片 · Markdown · Ctrl/⌘ + Enter 提交")}
        </span>
        <span className="j13-md-foot-actions">
          <span className="j13-md-count tabular-nums">
            {maxChars != null ? `${value.length} / ${maxChars}` : `${value.length} 字`}
          </span>
          {footer}
        </span>
      </div>
      {(uploading || uploadError) && (
        <p className="j13-md-upload" role={uploadError ? "alert" : "status"}>
          {uploading ? "图片上传中…" : uploadError}
          {uploadError && !uploading ? (
            <>
              <button type="button" onClick={() => void uploadImageFile(retryFile.current)}>
                重试
              </button>
              <button
                type="button"
                onClick={() => {
                  setUploadError("");
                  retryFile.current = null;
                }}
              >
                关闭
              </button>
            </>
          ) : null}
        </p>
      )}
      {error ? (
        <p className="j13-md-error" role="alert">
          {error}
        </p>
      ) : null}

      <TimelineEditor
        open={timelineOpen}
        initialBody={timelineBody}
        onClose={() => {
          setTimelineOpen(false);
          setTimelineRange(null);
          setTimelineBody("");
        }}
        onInsert={applyTimelineBlock}
      />

      <ImageInsertModal
        open={imageModalOpen}
        onClose={() => setImageModalOpen(false)}
        uploading={uploading}
        uploadError={uploadError}
        onChooseFile={() => fileRef.current?.click()}
        onDropFile={(file) => void uploadImageFile(file)}
        onInsertUrl={insertImageUrl}
        onPickMedia={(item) => insertAtCursor(`![图片](${item.url})`)}
      />
    </div>
  );
}