eCourt-note/components/sidebar/AnnotationSidebar.tsx

"use client";

import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } from "react";
import { createPortal } from "react-dom";
import {
  ArrowRight,
  Bookmark,
  Check,
  ChevronDown,
  ChevronRight,
  Circle,
  Clock,
  Copy,
  EyeOff,
  Highlighter,
  MessageSquare,
  Minus,
  MoreHorizontal,
  Pencil,
  Plus,
  Search,
  SlidersHorizontal,
  Square,
  Stamp,
  StickyNote,
  Trash2,
  Type,
  Underline,
  Strikethrough,
  X,
  type LucideIcon,
} from "lucide-react";

import Select from "../Select";

import {
  listVersions,
  restoreVersion,
  searchAnnotations,
  searchBookmarks,
} from "@/app/actions/annotations";
import type { AnnotationVersionDTO } from "@/db/schema";
import type {
  AnnotationData,
  AnnotationDTO,
  BookmarkDTO,
  CommentData,
  DrawData,
  HighlightData,
  RedactionData,
  ShapeData,
} from "@/db/schema";
import { annotationNote, annotationPreviewText } from "@/utils/annotation-display";

/** UX audit 2026-09-16: focus ring ตอน keyboard focus — ค่าเดียวกับ FOCUS_RING_CLS
 *  ของ PDFViewer.tsx (ห้าม import ข้ามไฟล์: PDFViewer → sidebar → PDFViewer เป็น
 *  circular import — แก้ต้องแก้ทั้งสองที่พร้อมกัน) */
const FOCUS_RING_CLS =
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:z-10";

function TypeIcon({ type, data }: { type: AnnotationDTO["type"]; data: AnnotationDTO["data"] }) {
  const cls = "h-4 w-4 shrink-0 text-slate-500";
  if (type === "HIGHLIGHT") {
    const style = (data as HighlightData).style ?? "highlight";
    if (style === "underline") return <Underline className={cls} />;
    if (style === "strikethrough") return <Strikethrough className={cls} />;
    return <Highlighter className={cls} />; // highlight / squiggle
  }
  if (type === "DRAW")
    return (data as DrawData).pen === "highlighter" ? (
      <Highlighter className={cls} />
    ) : (
      <Pencil className={cls} />
    );
  if (type === "REDACTION") return <EyeOff className={cls} />;
  if (type === "TEXTBOX") return <Type className={cls} />;
  if (type === "STAMP") return <Stamp className={cls} />;
  if (type === "SHAPE") {
    const shape = (data as ShapeData).shape;
    if (shape === "rect") return <Square className={cls} />;
    if (shape === "ellipse") return <Circle className={cls} />;
    if (shape === "line") return <Minus className={cls} />;
    return <ArrowRight className={cls} />;
  }
  return <MessageSquare className={cls} />;
}

/** ใส่/ล้างโน้ตคำอธิบายใน data ของ annotation (ทุกชนิดยกเว้น COMMENT — message ทำหน้าที่นี้แล้ว) */
function withNote(data: Exclude<AnnotationData, CommentData>, note: string): AnnotationData {
  return note ? { ...data, note } : { ...data, note: undefined };
}

// ─── N2: helper โครงสร้างต้นไม้ bookmark (3 ระดับ) — คำนวณบน state ที่โหลดครบ ────
// (ปกติลึกสุด 3 — cap กันลูปไม่รู้จบหากข้อมูลวนซ้ำ)

/** ความลึกของ bookmark (root = 1) — เดินขึ้นตาม parentId (parent หาย = ถือเป็น root) */
function bookmarkDepth(b: BookmarkDTO, byId: Map<string, BookmarkDTO>): number {
  let depth = 1;
  let cur: BookmarkDTO | undefined = b;
  while (cur?.parentId && depth <= 100) {
    const parent = byId.get(cur.parentId);
    if (!parent) break;
    depth += 1;
    cur = parent;
  }
  return depth;
}

/** ความสูงของ subtree รวมตัวเอง (leaf = 1) */
function subtreeHeight(b: BookmarkDTO, kidsOf: (id: string) => BookmarkDTO[], level = 1): number {
  if (level > 100) return 1; // กันข้อมูลวนซ้ำ
  const kids = kidsOf(b.id);
  return kids.length === 0
    ? 1
    : 1 + Math.max(...kids.map((k) => subtreeHeight(k, kidsOf, level + 1)));
}

/** id เป็นลูกหลานของ ancestorId หรือไม่ (เดินขึ้นจาก id) */
function isDescendantOf(id: string, ancestorId: string, byId: Map<string, BookmarkDTO>): boolean {
  let cur = byId.get(id);
  for (let steps = 0; cur?.parentId && steps <= 100; steps += 1) {
    if (cur.parentId === ancestorId) return true;
    cur = byId.get(cur.parentId);
  }
  return false;
}

/** N5: เรียงตามลำดับหน้า — หน้า → ตำแหน่งบนหน้า (บน→ล่าง) → เวลาสร้าง (tiebreak ให้ deterministic)
 *  sort ตอน render ฝั่ง client เท่านั้น — realtime แทรก row ต่อท้าย state เชื่อลำดับจาก server อย่างเดียวไม่ได้
 *  (export ให้ PDFViewer ใช้กับ dropdown "วางที่" ของ popup bookmark ด้วย — M7 UX audit 2026-09-16) */
export function byPageOrder(a: BookmarkDTO, b: BookmarkDTO): number {
  return (
    a.pageIndex - b.pageIndex ||
    a.yOffset - b.yOffset ||
    a.createdAt.localeCompare(b.createdAt)
  );
}

// ─── เมนู ⋯ ของแถวรายการ — ปุ่ม action เดียวแทนไอคอนชุดติดกัน ──────────────────

/** ตำแหน่งเมนู ⋯ — คัดลอก pattern fixedMenuPos ของ PDFViewer.tsx (import ข้ามกัน
 *  ไม่ได้เพราะ circular): ชิดขอบขวาปุ่ม ⋯ (ปุ่มอยู่ขวาสุดแถว) แล้ว clamp ไม่ให้ล้นจอ */
const ROW_MENU_W = 240; // w-60 เท่า dropdown ของ tool
function rowMenuPos(rect: DOMRect): { left: number; top: number } {
  const vw = window.innerWidth;
  return {
    left: Math.min(Math.max(rect.right - ROW_MENU_W, 8), Math.max(8, vw - ROW_MENU_W - 8)),
    top: rect.bottom + 4,
  };
}

/** เป้าหมายของเมนู ⋯ ที่เปิดอยู่ — เก็บแค่ kind+id ไม่เก็บ object เพราะ props
 *  annotations/bookmarks เปลี่ยนตลอดจาก SSE (realtime) — lookup ตอน render/คลิก
 *  ให้ได้ข้อมูลสดเสมอ ไม่มี ghost object */
type RowMenuTarget = { kind: "annotation" | "bookmark"; id: string };

// ─── มุมมอง "ตามหน้า" — สลับมุมมองรองในแท็บ + หัวกลุ่มหน้าที่หุบได้ ────────────

/** ปุ่มสลับมุมมองภายในแท็บ (ตามหัวข้อ↔ตามหน้า / ตามสถานะ↔ตามหน้า) —
 *  segmented control ระดับรองใต้ tab หลัก (tab ใช้เส้นใต้ อันนี้ใช้ pill) */
function ViewSwitch<T extends string>({
  value,
  options,
  onChange,
}: {
  value: T;
  options: { key: T; label: string }[];
  onChange: (v: T) => void;
}) {
  return (
    <div className="flex rounded-md bg-slate-100 p-0.5">
      {options.map((o) => (
        <button
          key={o.key}
          type="button"
          aria-pressed={value === o.key}
          className={`flex-1 rounded px-2 py-1 text-[11px] font-medium transition ${FOCUS_RING_CLS} ${
            value === o.key
              ? "bg-white text-slate-900 shadow-sm"
              : "text-slate-500 hover:text-slate-600"
          }`}
          onClick={() => onChange(o.key)}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
}

/** รายการในเมนู ⋯ — ไอคอนเล็ก + label ไทย (จอสัมผัสไม่มี hover อ่าน title ไม่ได้
 *  label จึงต้องอยู่ในตัวเมนู) / danger = โซนทำลาย (แดง) / items-start รองรับ
 *  label ยาวอย่าง "เพิ่มหน้าที่ดูอยู่เข้าหัวข้อนี้" ที่ wrap 2 บรรทัดใน w-60 */
function MenuItem({
  Icon,
  label,
  danger,
  onClick,
}: {
  Icon: LucideIcon;
  label: string;
  danger?: boolean;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      role="menuitem"
      className={`flex w-full items-start gap-2 rounded px-2 py-1.5 text-left text-xs transition ${FOCUS_RING_CLS} ${
        danger ? "text-red-600 hover:bg-red-50" : "text-slate-600 hover:bg-slate-100"
      }`}
      onClick={onClick}
    >
      <Icon className="mt-0.5 h-3.5 w-3.5 shrink-0" />
      <span className="flex-1">{label}</span>
    </button>
  );
}

/** หัวกลุ่ม "หน้า N (จำนวน)" — หุบ/กางรายการของหน้านั้น (chevron เหมือนต้นไม้ bookmark) */
function PageGroupHeader({
  pageIndex,
  count,
  collapsed,
  onToggle,
}: {
  pageIndex: number;
  count: number;
  collapsed: boolean;
  onToggle: () => void;
}) {
  return (
    <button
      type="button"
      aria-label={collapsed ? `กางหน้า ${pageIndex + 1}` : `หุบหน้า ${pageIndex + 1}`}
      className={`flex w-full items-center gap-1.5 rounded px-1 py-1 text-left hover:bg-slate-100 ${FOCUS_RING_CLS}`}
      onClick={onToggle}
    >
      {collapsed ? (
        <ChevronRight className="h-3.5 w-3.5 shrink-0 text-slate-500" />
      ) : (
        <ChevronDown className="h-3.5 w-3.5 shrink-0 text-slate-500" />
      )}
      <span className="text-xs font-medium text-slate-700">
        หน้า {pageIndex + 1}
        <span className="ml-1 font-normal text-slate-500">({count})</span>
      </span>
    </button>
  );
}

/** จัดกลุ่มตามหน้าแล้วเรียง pageIndex น้อย→มาก — ลำดับในกลุ่มตาม input ต่อเนื่อง */
function groupByPage<T extends { pageIndex: number }>(items: T[]): [number, T[]][] {
  const byPage = new Map<number, T[]>();
  for (const it of items) {
    const list = byPage.get(it.pageIndex);
    if (list) list.push(it);
    else byPage.set(it.pageIndex, [it]);
  }
  return Array.from(byPage).sort(([a], [b]) => a - b);
}

// ─── N6: เงื่อนไขการค้นหา bookmark (คำค้นอยู่แยกใน state ของฟอร์ม) ────────────

/** ค่าทุกช่องเก็บเป็น string ตรง ๆ จาก input (ว่าง = ไม่ตั้งเงื่อนไข) —
 *  แปลงเป็นตัวเลข/ส่งต่อ server ตอนกดค้นเท่านั้น */
type BmConditions = {
  pageFrom: string;
  pageTo: string;
  userId: string;
  dateFrom: string;
  dateTo: string;
};

const EMPTY_BM_CONDITIONS: BmConditions = {
  pageFrom: "",
  pageTo: "",
  userId: "",
  dateFrom: "",
  dateTo: "",
};

/** วันที่ ISO (yyyy-mm-dd) → d/m/พ.ศ. — เจ้าหน้าที่ศาลคิดวันที่เป็น พ.ศ. */
function fmtThaiDate(iso: string): string {
  const [y, m, d] = iso.split("-").map(Number);
  return `${d}/${m}/${y + 543}`;
}

/** สรุปเงื่อนไขค้นหา bookmark เป็นข้อความสั้น — แถวสรุปใต้ช่องค้นหาใช้แบบไม่มีคำค้น
 *  (คำค้นแสดงอยู่ใน input ข้างบนแล้ว), หัวผลการค้นหาใช้แบบมีคำค้น (snapshot ตอนกดหา)
 *  ช่วงที่กรองฝั่งเดียวแสดงปลายเปิด เช่น "หน้า 5–…" */
function bmConditionSummary(c: BmConditions, q?: string, userName?: string): string {
  const parts: string[] = [];
  if (q?.trim()) parts.push(`"${q.trim()}"`);
  if (c.pageFrom || c.pageTo) parts.push(`หน้า ${c.pageFrom || "…"}–${c.pageTo || "…"}`);
  if (c.userId) parts.push(userName ?? "ผู้บันทึกที่เลือก");
  if (c.dateFrom || c.dateTo)
    parts.push(
      `${c.dateFrom ? fmtThaiDate(c.dateFrom) : "…"}–${c.dateTo ? fmtThaiDate(c.dateTo) : "…"}`,
    );
  return parts.join(" · ");
}

/** ค่าจาก input number → เงื่อนไขช่วงหน้า (1-based ตรงที่ผู้ใช้เห็น) —
 *  ว่าง/ไม่ใช่จำนวนเต็ม ≥ 1 = ไม่ส่งเงื่อนไขนั้น */
function toPageCondition(v: string): number | undefined {
  if (!v) return undefined;
  const n = Number(v);
  return Number.isInteger(n) && n >= 1 ? n : undefined;
}

/** แท็บ Bookmarks / Annotations + ปุ่ม scroll-to + ปุ่มลบเฉพาะรายการของตัวเอง */
export default function AnnotationSidebar({
  annotations,
  bookmarks,
  fileId,
  userId,
  userFilter,
  users,
  onUserFilterChange,
  replyCounts,
  onDeleteAnnotation,
  onUpdateAnnotation,
  onDeleteBookmark,
  onAddSubBookmark,
  onUpdateBookmark,
  onGoToBookmark,
  onGoToAnnotation,
  selectedId,
}: {
  annotations: AnnotationDTO[];
  bookmarks: BookmarkDTO[];
  /** ไฟล์ที่เปิดอยู่ — ใช้ค้นหาหมายเหตุทั้งไฟล์ (F14) */
  fileId: string;
  userId: string;
  /** F4: "all" | "mine" | <userId> — กรองฝั่ง client ล้วน */
  userFilter: string;
  users: { userId: string; userName: string }[];
  onUserFilterChange: (value: string) => void;
  /** F9: จำนวน reply ต่อ annotation (แสดงเฉพาะ COMMENT) */
  replyCounts: Record<string, number>;
  onDeleteAnnotation: (id: string) => void;
  /** แก้ไข data ของรายการของตัวเอง (โน้ตคำอธิบาย) — parent ทำ optimistic + updateAnnotation */
  onUpdateAnnotation: (id: string, data: AnnotationData) => void;
  onDeleteBookmark: (id: string) => void;
  /** N2: ปุ่ม + ที่หัวข้อ — เพิ่ม bookmark หน้าที่ viewer ดูอยู่เข้าใต้หัวข้อนั้นทันที */
  onAddSubBookmark: (parentId: string) => void;
  /** N2: แก้ bookmark ของตัวเอง — ชื่อ/โน้ต/ย้ายหัวข้อ (patch เฉพาะ field ที่เปลี่ยน) */
  onUpdateBookmark: (
    id: string,
    patch: { title?: string; note?: string | null; parentId?: string | null },
  ) => void;
  onGoToBookmark: (b: BookmarkDTO) => void;
  onGoToAnnotation: (a: AnnotationDTO) => void;
  /** id ของ annotation ที่ถูกเลือกอยู่บนหน้า PDF (null = ไม่มี) — แถวในแผงนี้ไฮไลต์ตาม */
  selectedId: string | null;
}) {
  const [tab, setTab] = useState<"bookmarks" | "annotations">("bookmarks");

  // คลิกเลือก annotation บนหน้าเอกสาร = สลับมาแท็บ annotations (ถ้ายังอยู่ bookmarks)
  // แล้วเลื่อนแถวนั้นเข้ามุมมอง — แถว render หลัง setTab จึงค่อยเลื่อนใน rAF ถัดไป
  // (dep รวม tab ตาม lint — ผลข้างเคียง: เปิดแท็บนี้ตอนยังมีรายการถูกเลือก = เลื่อนไปแถวนั้นเช่นกัน)
  const listRef = useRef<HTMLDivElement>(null);
  // id ล่าสุดที่ประกาศไปแล้ว — บังคับสลับแท็บเฉพาะตอน selectedId "เพิ่งเปลี่ยน" เท่านั้น
  // ไม่ใช่ทุกครั้งที่ effect รัน เพราะ dep มี tab ด้วย ไม่งั้นผู้ใช้กดกลับมาแท็บ bookmarks
  // ไม่ได้เลยตอนมีรายการถูกเลือกอยู่ (ถูกดึงกลับ annotations ทันที); เคลียร์เป็น null
  // ตอนไม่มีรายการถูกเลือก เพื่อให้เลือกรายการเดิมซ้ำภายหลังยังสลับแท็บให้เหมือนเดิม
  const announcedSelRef = useRef<string | null>(null);
  useEffect(() => {
    if (!selectedId) {
      announcedSelRef.current = null;
      return;
    }
    const firstAnnounce = announcedSelRef.current !== selectedId;
    announcedSelRef.current = selectedId;
    if (firstAnnounce && tab !== "annotations") setTab("annotations");
    const raf = requestAnimationFrame(() => {
      listRef.current
        ?.querySelector(`[data-ann-id="${CSS.escape(selectedId)}"]`)
        ?.scrollIntoView({ block: "nearest" });
    });
    return () => cancelAnimationFrame(raf);
  }, [selectedId, tab]);

  // ─── F14/D1: ค้นหาคำในหมายเหตุทั้งไฟล์ (highlight text / comment message) ────
  const [searchQuery, setSearchQuery] = useState("");
  const [searchResults, setSearchResults] = useState<AnnotationDTO[] | null>(null);
  const [searching, setSearching] = useState(false);

  async function runSearch(e: FormEvent) {
    e.preventDefault();
    const q = searchQuery.trim();
    if (!q || !fileId) return;
    setSearching(true);
    try {
      setSearchResults(await searchAnnotations(fileId, q));
    } catch (err) {
      console.error("ค้นหาไม่สำเร็จ", err);
      setSearchResults([]);
    } finally {
      setSearching(false);
    }
  }

  /** ผลการค้นหา F14 หลังกรองตามเจ้าของหมายเหตุ (F4) ฝั่ง client — searchAnnotations
   *  ไม่รับ userId และห้ามแต้ server action: สูตรเดียวกับ visibleAnnotations ของ
   *  PDFViewer — เปลี่ยนตัวกรองหลังค้นแล้ว ผลกรองทันทีไม่ต้องค้นใหม่ */
  const visibleSearchResults = useMemo(() => {
    if (searchResults === null) return null;
    if (userFilter === "all") return searchResults;
    const target = userFilter === "mine" ? userId : userFilter;
    return searchResults.filter((a) => a.userId === target);
  }, [searchResults, userFilter, userId]);

  // ─── F19/A7: ประวัติ/กู้คืน — dialog ต่อรายการ (แสดงเฉพาะรายการของตัวเอง) ─────
  const [historyFor, setHistoryFor] = useState<AnnotationDTO | null>(null);
  const [versions, setVersions] = useState<AnnotationVersionDTO[] | null>(null);
  const [restoringId, setRestoringId] = useState<string | null>(null);
  const [historyError, setHistoryError] = useState<string | null>(null);

  async function openHistory(a: AnnotationDTO) {
    setHistoryFor(a);
    setVersions(null);
    setHistoryError(null);
    try {
      setVersions(await listVersions(a.id));
    } catch (err) {
      setHistoryError(err instanceof Error ? err.message : "โหลดประวัติไม่สำเร็จ");
    }
  }

  /** กู้คืน = เขียนกลับ row เดิม (ต้นทางถูกลบไปแล้ว = สร้างใหม่ id ใหม่)
   *  sync ผ่าน SSE update/create event (รวมแท็บนี้) */
  async function handleRestore(versionId: string) {
    setRestoringId(versionId);
    try {
      await restoreVersion(versionId, userId);
      setHistoryFor(null);
    } catch (err) {
      setHistoryError(err instanceof Error ? err.message : "กู้คืนไม่สำเร็จ");
    } finally {
      setRestoringId(null);
    }
  }

  // Escape ปิด dialog ประวัติ (UX audit: เดิมปิดได้ด้วยปุ่ม "ปิด" เท่านั้น)
  useEffect(() => {
    if (!historyFor) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setHistoryFor(null);
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [historyFor]);

  // F10/A5: แยกกลุ่มเฉพาะ COMMENT — "ค้างดำเนินการ" (รวม annotation ชนิดอื่น)
  // กับ "จัดการแล้ว" (comment ที่ถูก resolve)
  const pendingItems = annotations.filter((a) => a.type !== "COMMENT" || !a.resolved);
  const resolvedItems = annotations.filter((a) => a.type === "COMMENT" && a.resolved);

  // มุมมอง "ตามหน้า": จัดกลุ่มตามหน้า เรียงน้อย→มาก — bookmark เอาเฉพาะ root
  // (sub ดูในต้นไม้ "ตามหัวข้อ") / annotation เก็บลำดับเดิมตามเวลาสร้าง
  const bmRootPages = groupByPage(bookmarks.filter((b) => !b.parentId).sort(byPageOrder));
  const annPages = groupByPage(annotations);

  // F12/C4: คัดลอก deep link ไปยัง annotation นี้ (?page= + ?ann=)
  const [copiedId, setCopiedId] = useState<string | null>(null);
  // FIX-7: clipboard ถูก block / ไม่มี API → แสดง feedback fail
  // 1.5s แทนกลืน error เงียบ — timer เก็บใน ref กันคลิกรัว ๆ แล้ว feedback หายก่อนเวลา
  const [copyFailedId, setCopyFailedId] = useState<string | null>(null);
  const copyTimerRef = useRef<number | null>(null);
  function copyAnnotationLink(a: AnnotationDTO) {
    const url = `${window.location.origin}/annotate/${a.fileId}?page=${a.pageIndex + 1}&ann=${a.id}`;
    if (copyTimerRef.current !== null) {
      window.clearTimeout(copyTimerRef.current);
      copyTimerRef.current = null;
    }
    const show = (ok: boolean) => {
      setCopiedId(ok ? a.id : null);
      setCopyFailedId(ok ? null : a.id);
      copyTimerRef.current = window.setTimeout(() => {
        copyTimerRef.current = null;
        setCopiedId(null);
        setCopyFailedId(null);
      }, 1500);
    };
    // บริบทที่ไม่มี clipboard API (HTTP ที่ไม่ใช่ localhost) — optional chaining
    // จะตัดทั้ง chain ทิ้ง ต้องตรวจก่อนถึงจะมี feedback fail จริง
    if (!navigator.clipboard?.writeText) {
      show(false);
      return;
    }
    navigator.clipboard.writeText(url).then(
      () => show(true),
      () => show(false),
    );
  }

  // ─── โน้ตคำอธิบายของรายการ (N1) — แก้ไขเฉพาะรายการของตัวเอง แสดงให้ทุกคน ─────
  const [noteFor, setNoteFor] = useState<AnnotationDTO["id"] | null>(null);
  const [noteDraft, setNoteDraft] = useState("");

  function startNoteEdit(a: AnnotationDTO) {
    setNoteFor(a.id);
    setNoteDraft(annotationNote(a));
  }

  function saveNote(a: AnnotationDTO) {
    const msg = noteDraft.trim();
    setNoteFor(null);
    if (a.type === "COMMENT" || msg === annotationNote(a)) return; // ไม่มีอะไรเปลี่ยน
    onUpdateAnnotation(a.id, withNote(a.data as Exclude<AnnotationData, CommentData>, msg));
  }

  // ─── เมนู ⋯ ของแถวรายการ (annotation/bookmark) — UX audit 2026-09-16 ───────────
  const [menuFor, setMenuFor] = useState<RowMenuTarget | null>(null);
  const [menuPos, setMenuPos] = useState<{ left: number; top: number } | null>(null);
  // สถานะ "แถวยืนยันลบ" ในเมนู — การลบเป็น action ที่กลับไม่ได้บนจอสัมผัส (ไม่มี Ctrl+Z)
  const [menuConfirmDelete, setMenuConfirmDelete] = useState(false);
  // ปุ่ม ⋯ ที่เปิดเมนูอยู่ — outside-mousedown เว้นปุ่มนี้ให้ onClick toggle เอง
  const menuAnchorRef = useRef<HTMLButtonElement | null>(null);

  const closeRowMenu = useCallback(() => {
    setMenuFor(null);
    setMenuPos(null);
    setMenuConfirmDelete(false);
    menuAnchorRef.current = null;
  }, []);

  function openRowMenu(btn: HTMLButtonElement, target: RowMenuTarget) {
    menuAnchorRef.current = btn;
    setMenuPos(rowMenuPos(btn.getBoundingClientRect()));
    setMenuFor(target);
    setMenuConfirmDelete(false);
  }

  // ปิดเมนู 3 ทาง: คลิกนอก (เว้นโหนดใน portal + ปุ่ม anchor กัน toggle bug) /
  // Escape / scroll ใด ๆ (scroll ของ element ไม่ bubble ถึง document — ต้องใช้
  // capture ถึงจับ scroll ของ listRef ของแผงนี้เองได้)
  useEffect(() => {
    if (!menuFor) return;
    const onMouseDown = (e: MouseEvent) => {
      const t = e.target;
      if (!(t instanceof Element)) return;
      if (t.closest("[data-tool-menu]")) return; // คลิกในเมนู — ให้ handler ของรายการทำงาน
      if (menuAnchorRef.current?.contains(t)) return; // anchor — click ถัดไป toggle เอง
      closeRowMenu();
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") closeRowMenu();
    };
    const onScroll = (e: Event) => {
      // เว้น scroll ภายในเมนูเอง (เมนูมี overflowY ตอนจอเตี้ย)
      if (e.target instanceof Element && e.target.closest("[data-tool-menu]")) return;
      closeRowMenu();
    };
    document.addEventListener("mousedown", onMouseDown);
    document.addEventListener("keydown", onKey);
    document.addEventListener("scroll", onScroll, true);
    return () => {
      document.removeEventListener("mousedown", onMouseDown);
      document.removeEventListener("keydown", onKey);
      document.removeEventListener("scroll", onScroll, true);
    };
  }, [menuFor, closeRowMenu]);

  // realtime (SSE): แถวที่เปิดเมนูถูกลบไป = id หาไม่เจอ → ปิดเมนูเอง
  // (นับ snapshot ผลค้นหา F14 ด้วย — แถวนั้นไม่ได้อยู่ใน prop annotations ที่กรอง F4 แล้ว)
  useEffect(() => {
    if (!menuFor) return;
    const alive =
      menuFor.kind === "annotation"
        ? annotations.some((a) => a.id === menuFor.id) ||
          (visibleSearchResults ?? []).some((a) => a.id === menuFor.id)
        : bookmarks.some((b) => b.id === menuFor.id);
    if (!alive) closeRowMenu();
  }, [menuFor, annotations, bookmarks, visibleSearchResults, closeRowMenu]);

  // ─── N2: bookmark ต้นไม้ 3 ระดับ (หมุดหัวข้อใหญ่ + sub + sub-sub) + edit inline ──
  const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set());
  // มุมมองรองในแต่ละแท็บ: ที่คั่นหน้า (topic=ต้นไม้หัวข้อ ↔ page) / หมายเหตุ (status ↔ page)
  const [bmView, setBmView] = useState<"topic" | "page">("topic");
  const [annView, setAnnView] = useState<"status" | "page">("status");
  // หน้าที่กางไว้ขอมุมมอง "ตามหน้า" (ใช้ร่วม 2 แท็บ — เก็บ pageIndex; ว่าง = หุบทั้งหมด)
  const [expandedPages, setExpandedPages] = useState<Set<number>>(new Set());
  const bookmarkById = new Map(bookmarks.map((b) => [b.id, b] as const));
  // เป้าหมายเมนู ⋯ ที่ lookup จาก state สดทุก render (SSE อัปเดตตลอด)
  // — null = แถวหายไปแล้ว (ผลค้นหา F14 เป็น snapshot จึง lookup เสริมจาก searchResults)
  const menuAnn =
    menuFor?.kind === "annotation"
      ? (annotations.find((a) => a.id === menuFor.id) ??
          searchResults?.find((a) => a.id === menuFor.id)) ??
        null
      : null;
  const menuBm =
    menuFor?.kind === "bookmark" ? (bookmarks.find((b) => b.id === menuFor.id) ?? null) : null;
  const [editBookmark, setEditBookmark] = useState<{
    id: string;
    title: string;
    note: string;
    parentId: string | null;
  } | null>(null);

  function toggleCollapsed(id: string) {
    setCollapsedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  function togglePageExpanded(pageIndex: number) {
    setExpandedPages((prev) => {
      const next = new Set(prev);
      if (next.has(pageIndex)) next.delete(pageIndex);
      else next.add(pageIndex);
      return next;
    });
  }

  function startBookmarkEdit(b: BookmarkDTO) {
    setEditBookmark({
      id: b.id,
      title: b.title,
      note: b.note ?? "",
      parentId: b.parentId,
    });
  }

  function saveBookmarkEdit(b: BookmarkDTO) {
    if (!editBookmark || editBookmark.id !== b.id) return;
    const patch: { title?: string; note?: string | null; parentId?: string | null } = {};
    const title = editBookmark.title.trim();
    if (title && title !== b.title) patch.title = title;
    const note = editBookmark.note.trim();
    if (note !== (b.note ?? "")) patch.note = note || null;
    if (editBookmark.parentId !== (b.parentId ?? null)) {
      patch.parentId = editBookmark.parentId;
    }
    setEditBookmark(null);
    if (Object.keys(patch).length > 0) onUpdateBookmark(b.id, patch);
  }

  // ─── N6: ค้นหา bookmark พร้อมเงื่อนไข — คำค้น/ช่วงหน้า/ผู้บันทึก/ช่วงวันที่ ──
  const [bmQuery, setBmQuery] = useState("");
  const [bmConditions, setBmConditions] = useState<BmConditions>(EMPTY_BM_CONDITIONS);
  const [bmShowConditions, setBmShowConditions] = useState(false);
  /** null = ยังไม่ค้น (แสดงต้นไม้ปกติ) — มีค่า = แสดงผลลัพธ์แทนต้นไม้จนกว่าจะกดปิด */
  const [bmResults, setBmResults] = useState<BookmarkDTO[] | null>(null);
  const [bmSearching, setBmSearching] = useState(false);
  /** error ของฟอร์มค้นหา (input ผิด/format ผิด/action fail) — แสดงแทนการเห็น "ไม่พบ"
   *  ที่หลอกลวง เช่น พิมพ์ 0/1.5 ในช่องหน้า แล้วเงื่อนไขหายเงียบจน server throw */
  const [bmSearchError, setBmSearchError] = useState<string | null>(null);
  /** ลายเซ็น (คำค้น+เงื่อนไข) ของการค้นล่าสุดที่สำเร็จ — ต่างจากค่าในฟอร์มปัจจุบัน =
   *  ผลที่กำลังแสดงเป็นของเงื่อนไขเก่า แสดง hint เตือนให้กด "หา" ใหม่ (ตั้งค่าเฉพาะ
   *  path สำเร็จหลัง await — ถ้าตั้งก่อนแล้ว request พัง hint จะเตือนทั้งที่ผลไม่เคยอัปเดต) */
  const [bmSearchedSig, setBmSearchedSig] = useState<string | null>(null);
  /** สรุปเงื่อนไข (รวมคำค้น) ของการค้นล่าสุดที่สำเร็จ — แสดงใต้หัวผลให้ผลอ่านรู้เรื่อง
   *  โดยไม่ต้องจำว่าค้นด้วยอะไร (snapshot คู่กับ bmSearchedSig — เฉพาะ path สำเร็จ) */
  const [bmSearchedSummary, setBmSearchedSummary] = useState<string | null>(null);

  /** เงื่อนไขที่ตั้งอยู่ทั้งหมด (คำค้นนับ 1) — ใช้ที่ badge ของปุ่มเงื่อนไข + disable ปุ่มหา */
  const activeConditionCount =
    (bmQuery.trim() !== "" ? 1 : 0) +
    Object.values(bmConditions).filter((v) => v !== "").length;

  /** รายชื่อผู้บันทึก bookmark — unique จาก bookmarks prop
   *  (ห้ามปนกับ dropdown กรอง F4 ที่ derive จาก annotations เท่านั้น) */
  const bookmarkAuthors = useMemo(() => {
    const seen = new Map<string, string>();
    for (const b of bookmarks) {
      if (!seen.has(b.userId)) seen.set(b.userId, b.userName || "ไม่ทราบชื่อ");
    }
    return Array.from(seen, ([userId, userName]) => ({ userId, userName })).sort((x, y) =>
      x.userName.localeCompare(y.userName, "th"),
    );
  }, [bookmarks]);

  // ─── แถวสรุปเงื่อนไข (UX design 2026-09-16) — เงื่อนไข active ต้องมองเห็นเป็น
  // ข้อความตลอดแม้แผงหุบ/ปิดผลแล้ว (เดิม badge ตัวเลขเห็นแค่จำนวน เงื่อนไขเก่าจึง
  // กรองการค้นถัดไปเงียบ ๆ ได้) — สรุปสดจากฟอร์ม ไม่รวมคำค้น (อยู่ใน input ข้างบน)
  const hasBmConditionValues = Object.values(bmConditions).some((v) => v !== "");
  const bmConditionUserName = bmConditions.userId
    ? bookmarkAuthors.find((u) => u.userId === bmConditions.userId)?.userName
    : undefined;
  const bmLiveSummary = bmConditionSummary(bmConditions, undefined, bmConditionUserName);

  async function runBookmarkSearch(e: FormEvent) {
    e.preventDefault();
    if (!fileId || activeConditionCount === 0 || bmSearching) return;
    // input type=number ล็อกแค่ spinner — พิมพ์มือ 0/1.5 ได้: ตรวจก่อน submit
    // ไม่งั้นเงื่อนไขหายเงียบ (toPageCondition → undefined) จนเห็น "ไม่พบ" ผิด ๆ
    const pageFrom = toPageCondition(bmConditions.pageFrom);
    const pageTo = toPageCondition(bmConditions.pageTo);
    if (
      (bmConditions.pageFrom !== "" && pageFrom === undefined) ||
      (bmConditions.pageTo !== "" && pageTo === undefined)
    ) {
      setBmSearchError("ช่วงหน้าต้องเป็นจำนวนเต็ม ≥ 1");
      return;
    }
    setBmSearchError(null);
    setBmSearching(true);
    try {
      const q = bmQuery.trim() || undefined;
      setBmResults(
        await searchBookmarks({
          fileId,
          q,
          pageFrom,
          pageTo,
          userId: bmConditions.userId || undefined,
          dateFrom: bmConditions.dateFrom || undefined,
          dateTo: bmConditions.dateTo || undefined,
        }),
      );
      // ลายเซ็นของค่าที่ค้นจริง (สร้างจากตัวแปรเดียวกับที่ส่งให้ server เพื่อบวกเทียบ
      // กับ JSON.stringify([bmQuery.trim(), bmConditions]) ตอน render ได้ถูกต้อง)
      setBmSearchedSig(JSON.stringify([q ?? "", bmConditions]));
      // snapshot สรุป "ค้นด้วยอะไร" ของผลที่กำลังจะแสดง — หาผู้บันทึกจากรายชื่อปัจจุบัน
      setBmSearchedSummary(
        bmConditionSummary(
          bmConditions,
          q,
          bmConditions.userId
            ? bookmarkAuthors.find((u) => u.userId === bmConditions.userId)?.userName
            : undefined,
        ),
      );
    } catch (err) {
      // แสดง error จริง ไม่กลืนเป็น "ไม่พบ" — "ไม่พบ" สงวนไว้เฉพาะผลลัพธ์ว่างจริง
      console.error("ค้นหา bookmark ไม่สำเร็จ", err);
      setBmSearchError(err instanceof Error ? err.message : "ค้นหาไม่สำเร็จ ลองอีกครั้ง");
    } finally {
      setBmSearching(false);
    }
  }

  const renderBookmarkNode = (b: BookmarkDTO, depth: number) => {
    const children = bookmarks.filter((x) => x.parentId === b.id).sort(byPageOrder);
    const hasChildren = children.length > 0;
    const collapsed = collapsedIds.has(b.id);
    const editing = editBookmark?.id === b.id;
    // FIX-9: guard null ครั้งเดียวต้น branch แทน editBookmark! ซ้ำ 6 จุด
    const eb = editing ? editBookmark : null;
    // เป้าหมายที่ย้ายเข้าได้ = ไม่ใช่ตัวเอง/ลูกหลาน และความลึกแม่ + ความสูง subtree ตัวเอง ≤ 3 ระดับ
    // (server ตรวจซ้ำอีกชั้นพร้อม lock — ตรงเกณฑ์เดียวกัน)
    // FIX-11: คำนวณเฉพาะตอนเปิดแก้หัวข้อนี้ — ไล่ subtree ทุก node ทุก render เปลืองเปล่า
    const movableTo = editing
      ? bookmarks
          .filter(
            (t) =>
              t.id !== b.id &&
              !isDescendantOf(t.id, b.id, bookmarkById) &&
              bookmarkDepth(t, bookmarkById) +
                subtreeHeight(b, (id) => bookmarks.filter((x) => x.parentId === id)) <=
                3,
          )
          .sort(byPageOrder) // M7: เรียงตามลำดับหน้าเหมือนต้นไม้ — หาหัวข้อแม่ใน select ง่ายขึ้น
      : [];
    // พื้นหลัง hover อยู่ที่ div แถวรายการ ไม่ใช่ li — li ครอบ <ul> ลูกทั้งก้อน
    // ทำให้ :hover ของแม่ทำงานด้วยเมื่อชี้รายการลูก (ไฮไลต์ทั้ง subtree เป็นก้อนเดียว)
    // UX audit: indent + เส้น guide ย้ายไปอยู่ที่ <ul> ลูก แถวจึงใช้ pad เดียวกันทุกระดับ
    const pad = "px-1";
    // แสดงปุ่ม ⋯ เมื่อมี action อย่างน้อยหนึ่ง: เพิ่ม sub (depth < 3) หรือเจ้าของแก้/ลบ
    const hasRowMenu = (depth < 3 && userId !== "") || b.userId === userId;
    return (
      <li key={b.id}>
        {eb ? (
          <div className={`rounded py-1 ${pad}`}>
            <input
              autoFocus
              value={eb.title}
              onChange={(e) => setEditBookmark({ ...eb, title: e.target.value })}
              onKeyDown={(e) => {
                e.stopPropagation();
                if (e.key === "Enter") saveBookmarkEdit(b);
                if (e.key === "Escape") setEditBookmark(null);
              }}
              placeholder="ชื่อหัวข้อ"
              className="w-full rounded border border-slate-300 px-1.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400"
            />
            <textarea
              rows={2}
              value={eb.note}
              onChange={(e) => setEditBookmark({ ...eb, note: e.target.value })}
              onKeyDown={(e) => {
                e.stopPropagation();
                if (e.key === "Escape") setEditBookmark(null);
                if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) saveBookmarkEdit(b);
              }}
              placeholder="โน้ต (ไม่บังคับ)"
              className="mt-1 w-full resize-none rounded border border-slate-300 p-1.5 text-[11px] focus:outline-none focus:ring-1 focus:ring-slate-400"
            />
            <p className="mt-1 text-[11px] text-slate-500">วางที่</p>
            <Select
              value={eb.parentId ?? ""}
              onChange={(e) =>
                setEditBookmark({ ...eb, parentId: e.target.value || null })
              }
              onKeyDown={(e) => e.stopPropagation()}
              className="mt-0.5 w-full rounded border border-slate-300 bg-white px-1.5 py-1 text-[11px] focus:outline-none focus:ring-1 focus:ring-slate-400"
            >
              <option value="">ระดับบนสุด (หมุดหัวข้อใหญ่)</option>
              {movableTo.map((h) => (
                <option key={h.id} value={h.id}>
                  ใต้ &quot;{h.title}&quot; (หน้า {h.pageIndex + 1})
                </option>
              ))}
            </Select>
            <div className="mt-1.5 flex justify-end gap-1.5 text-[11px]">
              <button
                type="button"
                className={`rounded px-2 py-0.5 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
                onClick={() => setEditBookmark(null)}
              >
                ยกเลิก
              </button>
              <button
                type="button"
                className={`rounded bg-primary px-2 py-0.5 font-medium text-white ${FOCUS_RING_CLS}`}
                onClick={() => saveBookmarkEdit(b)}
              >
                บันทึก
              </button>
            </div>
          </div>
        ) : (
          <div className={`group flex items-center gap-1.5 rounded py-1 hover:bg-slate-100 ${pad}`}>
            {hasChildren ? (
              <button
                type="button"
                aria-label={collapsed ? `กางหัวข้อ ${b.title}` : `หุบหัวข้อ ${b.title}`}
                className={`shrink-0 text-slate-500 hover:text-slate-600 ${FOCUS_RING_CLS}`}
                onClick={() => toggleCollapsed(b.id)}
              >
                {collapsed ? (
                  <ChevronRight className="h-3.5 w-3.5" />
                ) : (
                  <ChevronDown className="h-3.5 w-3.5" />
                )}
              </button>
            ) : (
              <span className="w-3.5 shrink-0" />
            )}
            <button
              type="button"
              aria-level={depth}
              className={`flex min-w-0 flex-1 items-start gap-1.5 text-left ${FOCUS_RING_CLS}`}
              onClick={() => onGoToBookmark(b)}
            >
              <Bookmark
                className={`h-3.5 w-3.5 shrink-0 ${
                  depth === 1 ? "text-amber-500" : "text-amber-300"
                }`}
              />
              <span className="min-w-0">
                <span
                  className={`block truncate text-[13px] leading-snug ${
                    depth === 1 ? "font-semibold text-slate-700" : ""
                  }`}
                >
                  {b.title}
                </span>
                {/* แสดงผู้บันทึกด้วย — เหมือนแถวผลการค้นหา (N6) และแถวหมายเหตุ
                    (แถวเดิมมีแค่ "หน้า N" ไม่รู้ว่าใครเป็นคนคั่นไว้) */}
                <span className="block text-xs text-slate-500">
                  หน้า {b.pageIndex + 1} · {b.userName || "ไม่ทราบชื่อ"}
                </span>
                {b.note && (
                  <span className="mt-0.5 block line-clamp-2 whitespace-pre-wrap break-words text-[11px] text-slate-500">
                    {b.note}
                  </span>
                )}
              </span>
            </button>
            {/* จำนวนหมุดย่อย — badge ขวาสุด (UX audit: แยกจากชื่อ ไม่ปนตอนอ่านไว) */}
            {hasChildren && (
              <span className="shrink-0 self-center rounded-full bg-slate-100 px-1.5 text-[10px] tabular-nums leading-4 text-slate-500">
                {children.length}
              </span>
            )}
            {/* action เดียวของแถว — เมนู ⋯ (เพิ่ม sub/แก้ไข/ลบ ตามสิทธิ์) ผ่าน portal */}
            {hasRowMenu && (
              <button
                type="button"
                aria-label="จัดการหัวข้อนี้"
                aria-haspopup="menu"
                aria-expanded={menuFor?.kind === "bookmark" && menuFor.id === b.id}
                className={`shrink-0 text-slate-500 hover:text-slate-600 group-hover:text-slate-600 ${FOCUS_RING_CLS}`}
                onClick={(e) => {
                  if (menuFor?.kind === "bookmark" && menuFor.id === b.id) closeRowMenu();
                  else openRowMenu(e.currentTarget, { kind: "bookmark", id: b.id });
                }}
              >
                <MoreHorizontal className="h-3.5 w-3.5" />
              </button>
            )}
          </div>
        )}
        {hasChildren && !collapsed && (
          // เส้น guide แนวตั้งนำสายตากลับหา parent แบบ file tree (indent ~17px/ระดับ
          // ≈ ของเดิม 16px — spacer/chevron w-3.5 คงเดิมจึงตรงแนวกันทุกระดับ)
          <ul className="ml-3 space-y-0.5 border-l border-slate-200 pl-1">
            {children.map((c) => renderBookmarkNode(c, depth + 1))}
          </ul>
        )}
      </li>
    );
  };

  const renderAnnotationRow = (a: AnnotationDTO) => {
    const note = annotationNote(a);
    const editingNote = noteFor === a.id;
    return (
    <li
      key={a.id}
      data-ann-id={a.id}
      className={`group rounded px-2 py-1.5 ${
        a.id === selectedId
          ? "bg-primary/10 ring-1 ring-inset ring-primary/30"
          : "hover:bg-slate-100"
      } ${a.resolved ? "opacity-60" : ""}`}
    >
      <div className="flex items-center gap-2">
      <button
        type="button"
        className={`flex min-w-0 flex-1 items-start gap-2 text-left ${FOCUS_RING_CLS}`}
        onClick={() => {
          // ระหว่างแก้โน้ต: คลิกข้อความไม่กระโดดหน้า (กัน scroll หนีตอน editor เปิดอยู่)
          if (editingNote) return;
          onGoToAnnotation(a);
        }}
      >
        <TypeIcon type={a.type} data={a.data} />
        <span className="min-w-0">
                    {/* UX audit: อักษรไทยมีสระ/วรรณยุกต์ซ้อนหลายชั้น — ข้อความหลักต้อง 13px
                        จึงอ่านได้สบาย (บรรทัดรอง/โน้ตคง 11px) */}
                    <span className="block truncate text-[13px] leading-snug">{annotationPreviewText(a)}</span>
                    <span className="block text-xs text-slate-500">
                      หน้า {a.pageIndex + 1} · {a.userName}
                      {a.type === "COMMENT" && (replyCounts[a.id] ?? 0) > 0
                        ? ` · ตอบ ${replyCounts[a.id]}`
                        : ""}
                    </span>
                  </span>
      </button>
      {/* ปุ่ม action เดียวของแถว — เปิดเมนู (คัดลอกลิงก์ F12/โน้ต N1/ประวัติ F19/ลบ ตามสิทธิ์)
          แทนไอคอนติดกัน 4 ตัวที่จิ้มพลาดง่ายบนจอสัมผัส; ตัวปุ่มยังแสดง feedback
          คัดลอกลิงก์ (Check เขียว/X แดง 1.5s) หลังเลือกจากเมนูแล้วเมนูปิดตัว */}
      <button
        type="button"
        aria-label="จัดการหมายเหตุนี้"
        aria-haspopup="menu"
        aria-expanded={menuFor?.kind === "annotation" && menuFor.id === a.id}
        title={copyFailedId === a.id ? "คัดลอกไม่ได้ (เบราว์เซอร์บล็อกคลิปบอร์ด)" : "จัดการหมายเหตุนี้"}
        className={`shrink-0 ${FOCUS_RING_CLS} ${
          copiedId === a.id
            ? "text-emerald-500"
            : copyFailedId === a.id
              ? "text-red-500"
              : "text-slate-500 hover:text-slate-600 group-hover:text-slate-600"
        }`}
        onClick={(e) => {
          if (menuFor?.kind === "annotation" && menuFor.id === a.id) closeRowMenu();
          else openRowMenu(e.currentTarget, { kind: "annotation", id: a.id });
        }}
      >
        {copiedId === a.id ? (
          <Check className="h-4 w-4" />
        ) : copyFailedId === a.id ? (
          <X className="h-4 w-4" />
        ) : (
          <MoreHorizontal className="h-4 w-4" />
        )}
      </button>
      </div>
      {editingNote ? (
        <div className="mt-1 pl-6">
          <textarea
            autoFocus
            rows={2}
            value={noteDraft}
            onChange={(e) => setNoteDraft(e.target.value)}
            onKeyDown={(e) => {
              e.stopPropagation(); // ไม่ให้ปุ่มใน textarea ชนคีย์ลัดของ viewer
              if (e.key === "Escape") setNoteFor(null);
              if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) saveNote(a);
            }}
            placeholder="โน้ต เช่น เหตุผลที่ทำรายการนี้…"
            className="w-full resize-none rounded border border-slate-300 p-1.5 text-[11px] focus:outline-none focus:ring-1 focus:ring-slate-400"
          />
          <div className="mt-1 flex justify-end gap-1.5 text-[11px]">
            <button
              type="button"
              className={`rounded px-2 py-0.5 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
              onClick={() => setNoteFor(null)}
            >
              ยกเลิก
            </button>
            <button
              type="button"
              className={`rounded bg-primary px-2 py-0.5 font-medium text-white ${FOCUS_RING_CLS}`}
              onClick={() => saveNote(a)}
            >
              บันทึก
            </button>
          </div>
        </div>
      ) : (
        note && (
          <p className="mt-0.5 flex items-start gap-1 pl-6 text-[11px] text-slate-500">
            <StickyNote className="mt-0.5 h-3 w-3 shrink-0 text-amber-400" />
            <span className="line-clamp-2 whitespace-pre-wrap break-words">{note}</span>
          </p>
        )
      )}
    </li>
  );
  };

  return (
    <div className="flex h-full flex-col">
      {/* F4: กรองแสดง annotation ตามผู้เขียน (viewer + sidebar พร้อมกัน) */}
      <div className="shrink-0 border-b border-slate-200 p-2">
        <Select
          aria-label="เลือกเจ้าของหมายเหตุที่แสดง"
          className="w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-xs text-slate-600 focus:outline-none focus:ring-2 focus:ring-slate-400"
          value={userFilter}
          onChange={(e) => onUserFilterChange(e.target.value)}
        >
          <option value="all">เจ้าของหมายเหตุ: ทุกคน</option>
          <option value="mine">เฉพาะของฉัน</option>
          {users.map((u) => (
            <option key={u.userId} value={u.userId}>
              เฉพาะ {u.userName}
            </option>
          ))}
        </Select>
      </div>

      {/* แท็บหลัก — tablist/tab semantics ให้ screen reader ประกาศว่าเป็นแท็บ */}
      <div role="tablist" aria-label="รายการในแผงข้าง" className="flex shrink-0 border-b border-slate-200">
        {(
          [
            ["bookmarks", `ที่คั่นหน้า (${bookmarks.length})`],
            ["annotations", `หมายเหตุ (${annotations.length})`],
          ] as const
        ).map(([key, label]) => (
          <button
            key={key}
            type="button"
            role="tab"
            aria-selected={tab === key}
            className={`flex-1 px-2 py-2 text-xs font-medium tabular-nums transition ${FOCUS_RING_CLS} ${
              tab === key
                ? "border-b-2 border-primary text-slate-900"
                : "text-slate-500 hover:text-slate-600"
            }`}
            onClick={() => setTab(key)}
          >
            {label}
          </button>
        ))}
      </div>

      {/* N6: ค้นหา bookmark พร้อมเงื่อนไข — เฉพาะแท็บที่คั่นหน้า
          (แยกจากช่อง F14 ที่ค้นหมายเหตุ ซึ่งอยู่เหนือแท็บ) */}
      {tab === "bookmarks" && (
        <div className="shrink-0 space-y-1.5 border-b border-slate-200 p-2">
          {/* แถวคำค้น — โครงเดียวกับ F14 ของแท็บหมายเหตุ: input เต็มกว้าง + ปุ่มเดียว
              (เดิมปุ่ม "เงื่อนไข"+badge แย่งแถวเดียวกันจน input เหลือพื้นที่ข้อความ
              ~80px ≈ 6–7 ตัวอักษรไทย พิมพ์คำค้นจริงไม่พอ) */}
          <form className="flex gap-1" onSubmit={(e) => void runBookmarkSearch(e)}>
            <div className="relative min-w-0 flex-1">
              <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500" />
              <input
                value={bmQuery}
                onChange={(e) => setBmQuery(e.target.value)}
                onKeyDown={(e) => e.stopPropagation()} // ไม่ให้ปุ่มในช่องค้นหาชนคีย์ลัดของ viewer
                placeholder="ชื่อ หรือ โน้ต…"
                className="w-full rounded-md border border-slate-300 py-1.5 pl-7 pr-2 text-xs focus:outline-none focus:ring-2 focus:ring-slate-400"
              />
            </div>
            <button
              type="submit"
              disabled={activeConditionCount === 0 || bmSearching}
              className={`shrink-0 rounded-md border border-slate-300 px-2 py-1.5 text-xs text-slate-600 hover:bg-slate-100 disabled:opacity-40 ${FOCUS_RING_CLS}`}
            >
              {bmSearching ? "…" : "หา"}
            </button>
          </form>
          {/* แถวสรุปเงื่อนไข — toggle แผงแบบเต็มความกว้าง (เป้าใหญ่จิ้มง่ายบนจอสัมผัส)
              แสดงเงื่อนไขที่ตั้งอยู่ "เป็นข้อความ" สดตามฟอร์ม ตลอดแม้แผงหุบ/ปิดผลแล้ว —
              แทน badge ตัวเลขที่เห็นแค่จำนวน / ไม่มีเงื่อนไข = บอกขอบเขตที่ตั้งได้เลย */}
          <button
            type="button"
            aria-expanded={bmShowConditions}
            onClick={() => setBmShowConditions((v) => !v)}
            className={`flex w-full items-center gap-1.5 rounded px-1.5 py-1 text-[11px] hover:bg-slate-100 ${FOCUS_RING_CLS} ${
              hasBmConditionValues ? "text-primary" : "text-slate-500"
            }`}
          >
            <SlidersHorizontal className="h-3 w-3 shrink-0" />
            <span className="min-w-0 flex-1 truncate text-left">
              {hasBmConditionValues ? bmLiveSummary : "หน้า · ผู้บันทึก · วันที่"}
            </span>
            {bmShowConditions ? (
              <ChevronDown className="h-3 w-3 shrink-0" />
            ) : (
              <ChevronRight className="h-3 w-3 shrink-0" />
            )}
          </button>
          {bmShowConditions && (
            // จังหวะเดียวทุกแถว: label บนบรรทัด + คู่ input แบ่งความกว้าง grid 1fr–1fr
            // (เดิม label inline 2 แถว + label บน 1 แถว อ่านไม่เป็นระเบียบ ขอบ input
            //  ไม่ตรงแนวกัน และคู่ date ในแถว inline ล้น 288px จนต้องหนีขึ้นบรรทัดบน)
            <div className="space-y-1.5 text-[11px] text-slate-600">
              <div>
                <span className="block pb-0.5">หน้า</span>
                <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-1">
                  <input
                    type="number"
                    min={1}
                    step={1}
                    aria-label="หน้าเริ่ม"
                    value={bmConditions.pageFrom}
                    onChange={(e) =>
                      setBmConditions({ ...bmConditions, pageFrom: e.target.value })
                    }
                    onKeyDown={(e) => e.stopPropagation()}
                    placeholder="จาก"
                    className="w-full min-w-0 rounded border border-slate-300 px-1.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400"
                  />
                  <span className="text-slate-400">–</span>
                  <input
                    type="number"
                    min={1}
                    step={1}
                    aria-label="หน้าสุดท้าย"
                    value={bmConditions.pageTo}
                    onChange={(e) =>
                      setBmConditions({ ...bmConditions, pageTo: e.target.value })
                    }
                    onKeyDown={(e) => e.stopPropagation()}
                    placeholder="ถึง"
                    className="w-full min-w-0 rounded border border-slate-300 px-1.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400"
                  />
                </div>
              </div>
              <div>
                <span className="block pb-0.5">ผู้บันทึก</span>
                <Select
                  aria-label="กรองตามผู้บันทึก bookmark"
                  value={bmConditions.userId}
                  onChange={(e) =>
                    setBmConditions({ ...bmConditions, userId: e.target.value })
                  }
                  onKeyDown={(e) => e.stopPropagation()}
                  className="w-full rounded border border-slate-300 bg-white px-1.5 py-1 text-[11px] focus:outline-none focus:ring-1 focus:ring-slate-400"
                >
                  <option value="">ทุกคน</option>
                  {bookmarkAuthors.map((u) => (
                    <option key={u.userId} value={u.userId}>
                      {u.userName}
                    </option>
                  ))}
                </Select>
              </div>
              <div>
                <span className="block pb-0.5">บันทึกวันที่</span>
                <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-1">
                  <input
                    type="date"
                    aria-label="วันที่เริ่ม"
                    value={bmConditions.dateFrom}
                    onChange={(e) =>
                      setBmConditions({ ...bmConditions, dateFrom: e.target.value })
                    }
                    onKeyDown={(e) => e.stopPropagation()}
                    className="w-full min-w-0 rounded border border-slate-300 px-1.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400"
                  />
                  <span className="text-slate-400">–</span>
                  <input
                    type="date"
                    aria-label="วันที่สุดท้าย"
                    value={bmConditions.dateTo}
                    onChange={(e) =>
                      setBmConditions({ ...bmConditions, dateTo: e.target.value })
                    }
                    onKeyDown={(e) => e.stopPropagation()}
                    className="w-full min-w-0 rounded border border-slate-300 px-1.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400"
                  />
                </div>
              </div>
              <div className="flex justify-end">
                <button
                  type="button"
                  className={`rounded px-1.5 py-1 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
                  onClick={() => {
                    // UX audit: ล้างให้สิ้นเชิง — คำค้น + เงื่อนไข + ผลที่แสดง พร้อมกัน
                    setBmConditions(EMPTY_BM_CONDITIONS);
                    setBmQuery("");
                    setBmResults(null);
                  }}
                >
                  ล้างทั้งหมด
                </button>
              </div>
            </div>
          )}
          {/* error กับ hint เป็นคำเตือนคนละเรื่อง (ฟอร์มผิด vs ผลเป็นของเงื่อนไขเก่า)
              — มี error แสดงเดี่ยว ไม่ซ้อนสองข้อความพร้อมกัน */}
          {bmSearchError ? (
            <p className="px-1 text-[11px] text-red-600">{bmSearchError}</p>
          ) : (
            bmResults !== null &&
            bmSearchedSig !== null &&
            bmSearchedSig !== JSON.stringify([bmQuery.trim(), bmConditions]) && (
              <p className="px-1 text-[11px] text-amber-600">
                เงื่อนไขเปลี่ยนแล้ว กด &quot;หา&quot; เพื่อค้นใหม่
              </p>
            )
          )}
        </div>
      )}

      {/* F14/D1: ค้นหาในหมายเหตุทั้งไฟล์ — อยู่ใต้แท็บเฉพาะแท็บหมายเหตุ (ค้นหาอะไร
          อยู่ในแท็บนั้น สมมาตรกับช่องค้นหาของแท็บที่คั่นหน้า) ผลลัพธ์ render แทน
          เนื้อหาใน list ด้านล่าง คลิกแถว = กระโดดไปตำแหน่ง + เลือก */}
      {tab === "annotations" && (
        <form
          className="flex shrink-0 gap-1 border-b border-slate-200 p-2"
          onSubmit={(e) => void runSearch(e)}
        >
          <div className="relative min-w-0 flex-1">
            <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500" />
            <input
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              onKeyDown={(e) => e.stopPropagation()} // ไม่ให้ปุ่มในช่องค้นหาชนคีย์ลัดของ viewer
              placeholder="ค้นหาในหมายเหตุ…"
              className="w-full rounded-md border border-slate-300 py-1.5 pl-7 pr-2 text-xs focus:outline-none focus:ring-2 focus:ring-slate-400"
            />
          </div>
          <button
            type="submit"
            disabled={!searchQuery.trim() || searching}
            className={`shrink-0 rounded-md border border-slate-300 px-2 py-1.5 text-xs text-slate-600 hover:bg-slate-100 disabled:opacity-40 ${FOCUS_RING_CLS}`}
          >
            {searching ? "…" : "หา"}
          </button>
        </form>
      )}

      <div ref={listRef} className="flex-1 overflow-y-auto p-2">
        {tab === "bookmarks" ? (
          bmResults !== null ? (
            <div>
              <div className="flex items-center justify-between px-1 pb-1">
                <p className="text-[11px] font-semibold tabular-nums text-slate-500">
                  ผลการค้นหา ({bmResults.length})
                </p>
                <button
                  type="button"
                  aria-label="ปิดผลการค้นหา"
                  title="กลับไปรายการที่คั่นหน้า"
                  className={`text-slate-500 hover:text-slate-600 ${FOCUS_RING_CLS}`}
                  onClick={() => setBmResults(null)}
                >
                  <X className="h-3.5 w-3.5" />
                </button>
              </div>
              {/* snapshot "ค้นด้วยอะไร" ของผลที่กำลังแสดง — ผลอ่านรู้เรื่องแม้ผู้ใช้ลืม/
                  แชร์จอให้คนอื่นดู (แก้ฟอร์มหลังค้นบรรทัดนี้ไม่เปลี่ยน จนกด "หา" ใหม่) */}
              {bmSearchedSummary && (
                <p
                  className="truncate px-1 pb-1 text-[11px] text-slate-500"
                  title={bmSearchedSummary}
                >
                  ค้นด้วย: {bmSearchedSummary}
                </p>
              )}
              {bmResults.length === 0 ? (
                <p className="px-1 pb-1 text-xs text-slate-500">ไม่พบ</p>
              ) : (
                <ul className="space-y-0.5">
                  {bmResults.map((b) => {
                    const parent = b.parentId ? bookmarkById.get(b.parentId) : undefined;
                    return (
                      <li key={b.id}>
                        <button
                          type="button"
                          className={`flex w-full items-start gap-1.5 rounded px-1 py-1 text-left hover:bg-slate-100 ${FOCUS_RING_CLS}`}
                          onClick={() => onGoToBookmark(b)}
                        >
                          <Bookmark className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500" />
                          <span className="min-w-0">
                            <span className="block truncate text-[13px] leading-snug">{b.title}</span>
                            <span className="block text-xs text-slate-500">
                              หน้า {b.pageIndex + 1} · {b.userName || "ไม่ทราบชื่อ"}
                            </span>
                            {parent && (
                              <span className="block truncate text-[11px] text-slate-500">
                                ใน: {parent.title}
                              </span>
                            )}
                            {b.note && (
                              <span className="mt-0.5 block line-clamp-2 whitespace-pre-wrap break-words text-[11px] text-slate-500">
                                {b.note}
                              </span>
                            )}
                          </span>
                        </button>
                      </li>
                    );
                  })}
                </ul>
              )}
            </div>
          ) : bookmarks.length === 0 ? (
            <p className="p-4 text-center text-xs text-slate-500">
              ยังไม่มีที่คั่นหน้า — กดปุ่มคั่นหน้าบนแถบเครื่องมือเพื่อเพิ่ม
            </p>
          ) : (
            <>
              {/* สลับมุมมองแท็บนี้: ต้นไม้หัวข้อ ↔ root แยกตามหน้า */}
              <div className="px-1 pb-1.5">
                <ViewSwitch
                  value={bmView}
                  options={[
                    { key: "topic", label: "ตามหัวข้อ" },
                    { key: "page", label: "ตามหน้า" },
                  ]}
                  onChange={setBmView}
                />
              </div>
              {bmView === "page" ? (
                bmRootPages.map(([pi, roots]) => {
                  const collapsed = !expandedPages.has(pi);
                  return (
                    <section key={pi}>
                      <PageGroupHeader
                        pageIndex={pi}
                        count={roots.length}
                        collapsed={collapsed}
                        onToggle={() => togglePageExpanded(pi)}
                      />
                      {!collapsed && (
                        <ul className="space-y-0.5">
                          {roots.map((b) => {
                            const childCount = bookmarks.filter(
                              (x) => x.parentId === b.id,
                            ).length;
                            return (
                              <li key={b.id}>
                                <button
                                  type="button"
                                  className="flex w-full items-start gap-1.5 rounded py-1 pl-5 pr-1 text-left hover:bg-slate-100"
                                  onClick={() => onGoToBookmark(b)}
                                >
                                  <Bookmark className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500" />
                                  <span className="min-w-0 flex-1">
                                    <span className="block truncate text-[13px] leading-snug font-medium text-slate-700">
                                      {b.title}
                                    </span>
                                    {/* ผู้บันทึกเหมือนแถวผลการค้นหา — ไม่ใส่ "หน้า N"
                                        เพราะหัวกลุ่มของมุมมองนี้บอกหน้าอยู่แล้ว */}
                                    <span className="block text-xs text-slate-500">
                                      {b.userName || "ไม่ทราบชื่อ"}
                                    </span>
                                    {b.note && (
                                      <span className="mt-0.5 block line-clamp-2 whitespace-pre-wrap break-words text-[11px] text-slate-500">
                                        {b.note}
                                      </span>
                                    )}
                                  </span>
                                  {childCount > 0 && (
                                    <span className="ml-auto shrink-0 self-center rounded-full bg-slate-100 px-1.5 text-[10px] tabular-nums leading-4 text-slate-500">
                                      {childCount}
                                    </span>
                                  )}
                                </button>
                              </li>
                            );
                          })}
                        </ul>
                      )}
                    </section>
                  );
                })
              ) : (
                <ul className="space-y-0.5">
                  {/* N2: root = หมุดหัวข้อใหญ่ เรียงตามลำดับหน้า (N5) — sub render ซ้อนใต้ผ่าน renderBookmarkNode */}
                  {bookmarks
                    .filter((b) => !b.parentId)
                    .sort(byPageOrder)
                    .map((b) => renderBookmarkNode(b, 1))}
                </ul>
              )}
            </>
          )
        ) : visibleSearchResults !== null ? (
          <div>
            <div className="flex items-center justify-between px-1 pb-1">
              <p className="text-[11px] font-semibold tabular-nums text-slate-500">
                ผลการค้นหา ({visibleSearchResults.length})
              </p>
              <button
                type="button"
                aria-label="ปิดผลการค้นหา"
                title="กลับไปรายการหมายเหตุ"
                className={`text-slate-500 hover:text-slate-600 ${FOCUS_RING_CLS}`}
                onClick={() => setSearchResults(null)}
              >
                <X className="h-3.5 w-3.5" />
              </button>
            </div>
            {visibleSearchResults.length === 0 ? (
              <p className="px-1 pb-1 text-xs text-slate-500">ไม่พบ</p>
            ) : (
              // reuse แถวเดิม — li มี data-ann-id ให้ effect scrollIntoView หาเจอ
              <ul className="space-y-1">{visibleSearchResults.map(renderAnnotationRow)}</ul>
            )}
          </div>
        ) : annotations.length === 0 ? (
          <p className="p-4 text-center text-xs text-slate-500">
            ยังไม่มีหมายเหตุ — คลุมข้อความ / วาดเส้น / คลิกวางคอมเมนต์บนหน้าเอกสาร
            <span className="mt-1 block text-[11px]">
              คีย์ลัด: H มาร์ก · D วาด · C comment · B คั่นหน้า · Ctrl+Z ย้อน
            </span>
          </p>
        ) : (
          <>
            {/* สลับมุมมองแท็บนี้: ค้าง–จัดแล้ว ↔ แยกตามหน้า */}
            <div className="px-1 pb-1.5">
              <ViewSwitch
                value={annView}
                options={[
                  { key: "status", label: "ตามสถานะ" },
                  { key: "page", label: "ตามหน้า" },
                ]}
                onChange={setAnnView}
              />
            </div>
            {annView === "page" ? (
              annPages.map(([pi, items]) => {
                const collapsed = !expandedPages.has(pi);
                return (
                  <section key={pi}>
                    <PageGroupHeader
                      pageIndex={pi}
                      count={items.length}
                      collapsed={collapsed}
                      onToggle={() => togglePageExpanded(pi)}
                    />
                    {!collapsed && (
                      <ul className="space-y-1">{items.map(renderAnnotationRow)}</ul>
                    )}
                  </section>
                );
              })
            ) : (
              <>
                {pendingItems.length > 0 && (
                  <section>
                    <p className="px-2 pb-1 pt-2 text-[11px] font-semibold text-slate-500">
                      ค้างดำเนินการ
                    </p>
                    <ul className="space-y-1">{pendingItems.map(renderAnnotationRow)}</ul>
                  </section>
                )}
                {resolvedItems.length > 0 && (
                  <section>
                    <p className="px-2 pb-1 pt-3 text-[11px] font-semibold text-emerald-500">
                      จัดการแล้ว
                    </p>
                    <ul className="space-y-1">{resolvedItems.map(renderAnnotationRow)}</ul>
                  </section>
                )}
              </>
            )}
          </>
        )}
      </div>

      {/* F19/A7: dialog render ผ่าน portal ไป document.body —
          aside.sticky สร้าง stacking context ครอบ z-50 ของ dialog ไว้ ทำให้ textLayer
          (z-[2] ระดับ root) ทับปุ่มจนคลิกไม่ได้ (เจอตอน verify ด้วยเบราว์เซอร์จริง) */}
      {typeof document === "undefined"
        ? null // SSR ไม่มี document — client component ก็ถูก render ฝั่ง server สำหรับ HTML แรก
        : createPortal(
        <>
      {/* F19/A7: dialog ประวัติ — รายการ version (เวลา + ชนิดการเปลี่ยนแปลง) + ปุ่มกู้คืน */}
      {historyFor && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 p-4"
          onClick={() => setHistoryFor(null)}
        >
          <div
            role="dialog"
            aria-modal="true"
            aria-label="ประวัติการเปลี่ยนแปลง"
            className="w-80 rounded-lg border border-slate-200 bg-white p-4 shadow-xl"
            onClick={(e) => e.stopPropagation()}
          >
            <p className="text-sm font-semibold">ประวัติการเปลี่ยนแปลง</p>
            <p className="mt-0.5 truncate text-[11px] text-slate-500">
              {annotationPreviewText(historyFor)}
            </p>
            {historyError && (
              <p className="mt-2 rounded bg-red-50 px-2 py-1 text-[11px] text-red-600">
                {historyError}
              </p>
            )}
            {versions === null && !historyError && (
              <p className="mt-3 text-xs text-slate-500">กำลังโหลด…</p>
            )}
            {versions !== null && versions.length === 0 && (
              <p className="mt-3 text-xs text-slate-500">
                ยังไม่มีบันทึกการเปลี่ยนแปลง (เกิดขึ้นเมื่อแก้ไขหรือลบรายการนี้)
              </p>
            )}
            {versions !== null && versions.length > 0 && (
              <ul className="mt-3 max-h-56 divide-y divide-slate-100 overflow-y-auto">
                {versions.map((v) => (
                  <li key={v.id} className="flex items-center gap-2 py-2">
                    <span className="min-w-0 flex-1">
                      <span className="block text-xs font-medium">
                        {v.kind === "delete" ? "ถูกลบ" : "ถูกแก้ไข"}
                      </span>
                      <span className="block text-[11px] text-slate-500" suppressHydrationWarning>
                        {new Date(v.createdAt).toLocaleString("th-TH")}
                      </span>
                    </span>
                    <button
                      type="button"
                      disabled={restoringId !== null}
                      className={`shrink-0 rounded border border-slate-300 px-2 py-1 text-[11px] text-slate-600 hover:bg-slate-100 disabled:opacity-40 ${FOCUS_RING_CLS}`}
                      onClick={() => void handleRestore(v.id)}
                    >
                      {restoringId === v.id ? "กำลังกู้คืน…" : "กู้คืน"}
                    </button>
                  </li>
                ))}
              </ul>
            )}
            <div className="mt-3 flex justify-end text-xs">
              <button
                type="button"
                autoFocus
                className={`rounded px-3 py-1.5 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
                onClick={() => setHistoryFor(null)}
              >
                ปิด
              </button>
            </div>
          </div>
        </div>
      )}

      {/* เมนู ⋯ ของแถวรายการ — render ผ่าน portal เดียวกับ dialog ประวัติ (aside.sticky
          สร้าง stacking context ครอบ z ไว้) / attribute data-tool-menu ให้ (1) outside-click
          handler ของ PDFViewer ข้ามโหนดใน portal นี้ (2) CSS จอสัมผัส [data-tool-menu]
          button ได้ min 36px อัตโนมัติ / lookup เป้าหมายจาก state สดทุก render — หาย
          ไปจาก realtime แล้ว effect ด้านบนปิดเมนูให้เอง */}
      {menuFor && menuPos && (menuAnn ?? menuBm) && (
        <div
          data-tool-menu=""
          role="menu"
          aria-label={menuFor.kind === "annotation" ? "จัดการหมายเหตุ" : "จัดการหัวข้อ"}
          className="w-60 rounded-lg border border-slate-200 bg-white p-1.5 shadow-lg"
          style={{
            position: "fixed",
            left: menuPos.left,
            top: menuPos.top,
            // เหนือ aside overlay (z-50) และ backdrop (z-[45]) ตามเมนูของ tool
            zIndex: 60,
            // จอเตี้ย (มือถือแนวนอน) เมนูยาวเกินพื้นที่ใต้ปุ่ม → เลื่อนภายในได้
            maxHeight: Math.max(160, window.innerHeight - menuPos.top - 8),
            overflowY: "auto",
          }}
        >
          {menuConfirmDelete ? (
            <div className="p-1">
              <p className="px-1 text-xs text-slate-700">
                ลบ{menuFor.kind === "annotation" ? "รายการ" : "หัวข้อ"}นี้?
              </p>
              <div className="mt-1.5 flex justify-end gap-1.5">
                <button
                  type="button"
                  className={`rounded px-2 py-1 text-xs text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
                  onClick={closeRowMenu}
                >
                  ยกเลิก
                </button>
                <button
                  type="button"
                  className={`rounded bg-red-600 px-2 py-1 text-xs font-medium text-white hover:bg-red-700 ${FOCUS_RING_CLS}`}
                  onClick={() => {
                    // อ่าน kind/id ก่อน close — setMenuFor(null) แล้วเงื่อนไขเดิมหาย
                    if (menuFor.kind === "annotation") onDeleteAnnotation(menuFor.id);
                    else onDeleteBookmark(menuFor.id);
                    closeRowMenu();
                  }}
                >
                  ลบ
                </button>
              </div>
            </div>
          ) : menuFor.kind === "annotation" && menuAnn ? (
            <>
              <MenuItem
                Icon={Copy}
                label="คัดลอกลิงก์"
                onClick={() => {
                  closeRowMenu();
                  copyAnnotationLink(menuAnn);
                }}
              />
              {/* N1: โน้ตคำอธิบาย — ยกเว้น COMMENT ที่มี message ทำหน้าที่นี้แล้ว */}
              {menuAnn.userId === userId && menuAnn.type !== "COMMENT" && (
                <MenuItem
                  Icon={StickyNote}
                  label={annotationNote(menuAnn) ? "แก้ไขโน้ต" : "เพิ่มโน้ต"}
                  onClick={() => {
                    closeRowMenu();
                    startNoteEdit(menuAnn);
                  }}
                />
              )}
              {/* F19/A7: ประวัติ + กู้คืน — เฉพาะรายการของตัวเอง */}
              {menuAnn.userId === userId && (
                <MenuItem
                  Icon={Clock}
                  label="ดูประวัติการเปลี่ยนแปลง"
                  onClick={() => {
                    closeRowMenu();
                    void openHistory(menuAnn);
                  }}
                />
              )}
              {menuAnn.userId === userId && (
                <>
                  <div className="my-1 border-t border-slate-100" />
                  <MenuItem
                    danger
                    Icon={Trash2}
                    label="ลบรายการ"
                    onClick={() => setMenuConfirmDelete(true)}
                  />
                </>
              )}
            </>
          ) : menuBm ? (
            <>
              {/* N2: ดักหน้าที่ viewer ดูอยู่เข้าใต้หัวข้อนี้ — ได้เฉพาะความลึกยังไม่เต็ม 3 ระดับ */}
              {bookmarkDepth(menuBm, bookmarkById) < 3 && userId !== "" && (
                <MenuItem
                  Icon={Plus}
                  label="เพิ่มหน้าที่ดูอยู่เข้าหัวข้อนี้"
                  onClick={() => {
                    closeRowMenu();
                    onAddSubBookmark(menuBm.id);
                  }}
                />
              )}
              {menuBm.userId === userId && (
                <MenuItem
                  Icon={Pencil}
                  label="แก้ไขหัวข้อ"
                  onClick={() => {
                    closeRowMenu();
                    startBookmarkEdit(menuBm);
                  }}
                />
              )}
              {menuBm.userId === userId && (
                <>
                  <div className="my-1 border-t border-slate-100" />
                  <MenuItem
                    danger
                    Icon={Trash2}
                    label="ลบหัวข้อ"
                    onClick={() => setMenuConfirmDelete(true)}
                  />
                </>
              )}
            </>
          ) : null}
        </div>
      )}

        </>
        ,
        document.body
      )}
    </div>
  );
}