)} {/* z-3: InkLayer (SVG freehand + รูปทรง F5) */} {/* z-4: TEXTBOX overlay (F17/B2) — ก่อน comment pins ใน DOM */} {/* z-4: comment pins — คอนเทนเนอร์โปร่งใส ปุ่ม pin รับ event เอง */}

{comments.map((a) => { const x = toPx(a.data.position.x, width); const y = toPx(a.data.position.y, height); const open = openPinId === a.id; // L3 (UX audit 2026-09-16): pin ชิดขวาหน้า — popover เปิดขวาของ pin จะยื่น // เกินกระดาษ 200px+ พลิกไปซ้ายของ pin แทน (pattern เดียวกับ tooltip N1) const flipLeft = x + 12 + 224 > width; return (

{open && (

e.stopPropagation()} >

{a.userName}

{/* F13/A6: ปุ่มแก้ไขข้อความ — เจ้าของเท่านั้น */} {a.userId === ownUserId && editingCommentId !== a.id && ( )}

{editingCommentId === a.id ? (

onCommentEditDraft(e.target.value)}
                        onKeyDown={(e) => {
                          e.stopPropagation(); // ไม่ให้ปุ่มใน textarea ชนคีย์ลัดของข้างนอก
                          if (e.key === "Escape") onStartCommentEdit(null);
                          if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
                            const msg = commentEditDraft.trim();
                            if (msg) {
                              onAnnotationUpdate(a.id, {
                                position: a.data.position,
                                message: msg,
                              });
                              onStartCommentEdit(null);
                            }
                          }
                        }}
                        className="w-full resize-none rounded border border-slate-300 p-1.5 text-xs 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={`coarse-36 rounded px-2 py-0.5 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
                          onClick={() => onStartCommentEdit(null)}
                        >
                          ยกเลิก
                        </button>
                        <button
                          type="button"
                          disabled={!commentEditDraft.trim()}
                          className={`coarse-36 rounded bg-primary px-2 py-0.5 font-medium text-white disabled:opacity-40 ${FOCUS_RING_CLS}`}
                          onClick={() => {
                            const msg = commentEditDraft.trim();
                            if (!msg) return;
                            onAnnotationUpdate(a.id, {
                              position: a.data.position,
                              message: msg,
                            });
                            onStartCommentEdit(null);
                          }}
                        >
                          บันทึก
                        </button>
                      </div>
                    </div>
                  ) : (
                    // T2/T3 (typography audit): ข้อความหลักไทยที่อ่านต่อเนื่อง = 13px +
                    // leading-relaxed (สระบน+วรรณยุกต์ซ้อนชนกันที่ leading เดิม)
                    <p className="mt-1 whitespace-pre-wrap break-words text-[13px] leading-relaxed">
                      {a.data.message}
                    </p>
                  )}
                  <p className="mt-1 text-[11px] text-slate-400" suppressHydrationWarning>
                    {formatThaiDate(a.createdAt, true)}
                  </p>
                  {/* F10/A5: toggle จัดการแล้ว — ใครก็ได้ (D6) */}
                  <button
                    type="button"
                    className={`coarse-36 mt-1.5 w-full rounded px-2 py-1 text-[11px] font-medium ${FOCUS_RING_CLS} ${
                      a.resolved
                        ? "bg-emerald-100 text-emerald-700 hover:bg-emerald-200"
                        : "border border-slate-300 text-slate-500 hover:bg-slate-100"
                    }`}
                    onClick={(e) => {
                      e.stopPropagation();
                      onSetResolved(a.id, !a.resolved);
                    }}
                  >
                    {a.resolved ? "✓ จัดการแล้ว (เลิกทำเครื่องหมาย)" : "ทำเครื่องหมายจัดการแล้ว"}
                  </button>
                  {/* F9: เธรดคำตอบ */}
                  <ReplyBox
                    annotationId={a.id}
                    replies={replies.filter((r) => r.annotationId === a.id)}
                    ownUserId={ownUserId}
                    onCreateReply={onCreateReply}
                    onDeleteReply={onDeleteReply}
                  />
                </div>
              )}
            </div>
          );
        })}
      </div>

{/* z-4: กรอบ selection + handles ของรายการที่เลือก (F1) — หลัง pins ใน DOM */}
      {(() => {
        const selected = annotations.find((a) => a.id === selectedId);
        // COMMENT ที่เปิด popover อยู่ไม่วาดกรอบ/แผง — bbox ของ COMMENT ครอบพื้นที่ pin
        // พอดี แผงจะทับ popover และแถบ handle บังการคลิก (sidebar ยังตาม selectedId เหมือนเดิม)
        if (!selected || (selected.type === "COMMENT" && openPinId === selected.id)) return null;
        return (
          <AnnotationSelectionLayer
            annotation={selected}
            size={{ width, height }}
            editable={ownUserId !== "" && selected.userId === ownUserId}
            pageBaseWidth={pageBaseWidth}
            disabled={overlayFrozen}
            onPreview={onAnnotationPreview}
            onCommit={onAnnotationUpdate}
            onDelete={onErase}
            onBookmark={(y) => onAnnotationBookmark(selected, y)}
            onStartEdit={textbox.startEdit}
          />
        );
      })()}
    </>
  );
}

// ─── Client root ─────────────────────────────────────────────────────────────

export default function PDFViewer({
  file,
  initialAnnotations,
  initialBookmarks,
  initialReplies,
  user,
}: {
  file: { id: string; title: string; pdfUrl: string };
  initialAnnotations: AnnotationDTO[];
  initialBookmarks: BookmarkDTO[];
  initialReplies: ReplyDTO[];
  /** identity จาก cookie oacCase (หน้า annotate การันตีให้ — ไม่มีช่วง null หลัง mount) */
  user: OacUser;
}) {
  const [pdfjs, setPdfjs] = useState<typeof import("pdfjs-dist") | null>(null);
  const [doc, setDoc] = useState<import("pdfjs-dist").PDFDocumentProxy | null>(null);
  // N3: src ของรูปภาพต่อหน้า (คู่ขนานกับ doc ของ pdf — ไฟล์รูปใช้อันนี้แทน pdfjs/doc)
  const [imageSrcs, setImageSrcs] = useState<(string | null)[] | null>(null);
  // โหลดเอกสารพัง (ไฟล์เสีย/decode ไม่ได้) — แสดงข้อความแทน "กำลังโหลด…" ค้างตลอดไป
  const [loadError, setLoadError] = useState<string | null>(null);
  // F8: Export PDF ดาวน์โหลดในแท็บเดิม (fetch → blob → <a download>) ไม่เปิดแท็บใหม่
  const [exporting, setExporting] = useState(false);
  const [exportError, setExportError] = useState<string | null>(null);
  /** H1 (UX audit 2026-09-16): error ล่าสุดของการบันทึก/แก้ไข/ลบ annotation — เดิม catch
   *  ทุกตัวมีแต่ console.error ผู้ใช้เห็นรายการหายเงียบ ๆ (React rollback optimistic)
   *  โดยไม่รู้เลยว่าบันทึกไม่สำเร็จ */
  const [actionError, setActionError] = useState<string | null>(null);
  const actionErrorTimerRef = useRef<number | null>(null);
  const [pageSizes, setPageSizes] = useState<Size[]>([]);
  const [tool, setTool] = useState<Tool>("select");
  const [shapeKind, setShapeKind] = useState<ShapeKind>("rect"); // F5: ชนิดรูปทรงของ tool shape
  const [drawPen, setDrawPen] = useState<DrawPen>("pencil"); // ชนิดปากกาของ tool draw (ปากกา/ไฮไลต์)
  // ค่าปากกาปัจจุบัน — เลือก pen = รีเซ็ตเป็น preset ของ pen นั้น แล้วปรับแต่ต่อได้ (เมนูของปุ่ม DRAW)
  const [drawColor, setDrawColor] = useState(DRAW_PENS.pencil.color);
  const [drawWidthPct, setDrawWidthPct] = useState(DRAW_PENS.pencil.strokeWidthPct);
  const [drawOpacityPct, setDrawOpacityPct] = useState(DRAW_PENS.pencil.opacity * 100);
  // ค่าตั้งตอนสร้างของ shape/textbox/stamp — เมนูตั้งค่าบนปุ่ม tool แบบเดียวกับปากกาของ draw
  const [shapeColor, setShapeColor] = useState("#ef4444");
  const [shapeWidthPct, setShapeWidthPct] = useState(0.4); // % ของความกว้างหน้า
  const [textboxColor, setTextboxColor] = useState(TEXTBOX_DEFAULT_COLOR);
  const [textboxFontSizePct, setTextboxFontSizePct] = useState(TEXTBOX_DEFAULT_FONT_SIZE_PCT);
  const [textboxBold, setTextboxBold] = useState(false);
  const [textboxOpacityPct, setTextboxOpacityPct] = useState(100);
  const [textboxAlign, setTextboxAlign] = useState<"left" | "center" | "right">("left");
  const [stampColor, setStampColor] = useState(STAMP_COLOR);
  const [stampScalePct, setStampScalePct] = useState(STAMP_DEFAULT_SCALE_PCT);
  const [stampPreset, setStampPreset] = useState<string>(STAMP_PRESETS[0]); // F18: preset ตรายาง
  const [stampMenuOpen, setStampMenuOpen] = useState(false); // F18: dropdown เลือก preset ตรายาง
  const [shapeMenuOpen, setShapeMenuOpen] = useState(false); // F5: dropdown เลือกชนิดรูปทรง
  const [drawMenuOpen, setDrawMenuOpen] = useState(false); // dropdown เลือกชนิดปากกา (draw)
  const [textboxMenuOpen, setTextboxMenuOpen] = useState(false); // dropdown ตั้งค่ากล่องข้อความ
  // tool highlight — คลุมข้อความแล้วสร้างทันทีตามรูปแบบ/สีที่ตั้งไว้ใน dropdown ของปุ่ม
  const [highlightStyle, setHighlightStyle] = useState<HighlightStyle>("highlight");
  /** ความทึบของมาร์กใหม่ 0–100 (เก็บเป็น % — เหมือน drawOpacityPct ของ tool draw) */
  const [highlightOpacityPct, setHighlightOpacityPct] = useState(100);
  const [highlightColor, setHighlightColor] = useState(HIGHLIGHT_COLORS[0]);
  const [highlightMenuOpen, setHighlightMenuOpen] = useState(false);
  // C1: เมนู tool ทั้ง 5 + popup bookmark render ผ่าน createPortal เป็น position:fixed ตาม
  // พิกัดจริงของปุ่มตอนคลิก (fixedMenuPos clamp ไว้ในจอ) — เดิมเป็น absolute ใน scroll
  // container ของแถบ tool ที่ต้องสลับ overflow ตอนเปิด ทำให้ scroll position รีเซ็ต เมนู
  // เปิดนอกจอบนมือถือ และทั้ง app เอียงเลื่อนแนวนอนได้ / ค่าเขียนใหม่ทุกครั้งที่เปิดเมนู
  const [menuPos, setMenuPos] = useState<{ left: number; top: number } | null>(null);
  const [bookmarkPos, setBookmarkPos] = useState<{ left: number; top: number } | null>(null);
  const [scale, setScale] = useState(1);
  const [currentPage, setCurrentPage] = useState(0);
  // tool highlight — live preview มาร์กตามรูปแบบ/สีที่ตั้งไว้ ระหว่างลากคลุมข้อความ
  const [liveMark, setLiveMark] = useState<{ pageIndex: number; rects: Rect[] } | null>(null);
  // tool เลือกข้อความ — selection สีฟ้าสะอาด ๆ (กรองแนวเส้นทางลากแล้ว ไม่สร้างไฮไลต์)
  const [selectPreview, setSelectPreview] = useState<{ pageIndex: number; rects: Rect[] } | null>(null);
  const [composer, setComposer] = useState<Composer | null>(null);
  const [draft, setDraft] = useState("");
  const [openPinId, setOpenPinId] = useState<string | null>(null);
  // F1 แก้ไข/ย้าย/ปรับขนาด — รายการที่เลือก + data ชั่วคราวระหว่างลาก (render ที่ layer เดิม)
  const [selectedId, setSelectedId] = useState<string | null>(null);
  // N1: annotation ที่ mouse ชี้อยู่บนหน้า — แสดง tooltip ใครทำ + โน้ต (เปลี่ยนค่าเฉพาะเมื่อรายการเปลี่ยน)
  const [hoveredId, setHoveredId] = useState<string | null>(null);
  // N2: popup บันทึก bookmark (ชื่อ/โน้ต/วางระดับบนสุดหรือใต้หัวข้อ) — null = ปิด
  const [bookmarkComposer, setBookmarkComposer] = useState<{
    pageIndex: number;
    yOffset: number;
    title: string;
    note: string;
    parentId: string | null;
  } | null>(null);
  /** error ล่าสุดของการบันทึก bookmark — แสดงใน popup ให้ผู้ใช้แก้ (เช่น เปลี่ยน "วางที่") แทนเงียบ */
  const [bookmarkError, setBookmarkError] = useState<string | null>(null);
  /** กัน double-submit ระหว่าง action ค้าง (กดบันทึกรัว ๆ) */
  const bookmarkPendingRef = useRef(false);
  /** M6 (UX audit 2026-09-16): feedback สั้น ๆ บนปุ่ม 🔖 หลังบันทึกสำเร็จ — sidebar ที่ปิด
   *  อยู่ (ค่า default ของ iPad) ทำให้ไม่มีอะไรบอกว่าเซฟแล้ว ผู้ใช้กดซ้ำจนได้ bookmark ซ้ำ */
  const [bookmarkSaved, setBookmarkSaved] = useState(false);
  const bookmarkSavedTimerRef = useRef<number | null>(null);
  /** L6: สถานะกำลังบันทึกของปุ่มใน popup bookmark — กันกดซ้ำเพราะคิดว่ากดไม่เข้า */
  const [bookmarkSaving, setBookmarkSaving] = useState(false);
  const [previewData, setPreviewData] = useState<AnnotationData | null>(null);
  // F13/A6: แก้ไขข้อความ comment ของตัวเองใน popover — บันทึกผ่าน updateAnnotation (reuse F1)
  const [editingCommentId, setEditingCommentId] = useState<string | null>(null);
  const [commentEditDraft, setCommentEditDraft] = useState("");
  // F17/B2: กล่องข้อความ — composer ตอนสร้าง + โหมดแก้ไขข้อความของตัวเอง (double-click)
  const [textboxComposer, setTextboxComposer] = useState<TextboxComposer | null>(null);
  const [editingTextboxId, setEditingTextboxId] = useState<string | null>(null);
  // F4 ซ่อน–แสดงรายคน — "all" | "mine" | <userId> กรองฝั่ง client ล้วน (A3)
  const [userFilter, setUserFilter] = useState<string>("all");
  // UX review 2026-09-09: สลับ sidebar — จอ < xl เป็น overlay, desktop กดซ่อนเพื่อดู PDF เต็มจอ
  // (เริ่ม true เพื่อให้ SSR เรนเดอร์แบบเปิดเหมือน desktop เดิม กัน hydration mismatch)
  const [sidebarOpen, setSidebarOpen] = useState(true);

const {
    annotations,
    bookmarks,
    replies,
    setAnnotations,
    setBookmarks,
    setReplies,
  } = useAnnotationRealtime(file.id, initialAnnotations, initialBookmarks, initialReplies);

// F2: undo/redo ต่อ session ต่อผู้ใช้ฝั่ง client (D10 — ไม่เก็บใน DB)
  const {
    push: pushHistory,
    undo: undoHistory,
    redo: redoHistory,
    canUndo,
    canRedo,
  } = useHistory();

// Optimistic update (invariant #9): ใช้ useOptimistic ภายใน startTransition
  // React ถอด optimistic row ออกอัตโนมัติเมื่อ action เสร็จ + rollback เองเมื่อล้มเหลว
  const [optimisticAnnotations, applyAnnotation] = useOptimistic(
    annotations,
    (state, action: AnnotationAction) => {
      if (action.kind === "add") {
        return state.some((a) => a.id === action.row.id)
          ? state
          : [...state, action.row];
      }
      if (action.kind === "update") {
        // replace ตาม id — idempotent เหมือน SSE update event (PLAN-FEAT.md §2)
        return state.map((a) => (a.id === action.row.id ? action.row : a));
      }
      return state.filter((a) => a.id !== action.id);
    },
  );
  // N2: การสร้าง bookmark รอผลจาก action ตรง ๆ (ไม่ optimistic) — เหลือแค่ remove
  const [optimisticBookmarks, applyBookmark] = useOptimistic(
    bookmarks,
    (state, action: BookmarkAction) =>
      action.kind === "remove" ? state.filter((b) => b.id !== action.id) : state,
  );

// F4: รายชื่อผู้เขียน (unique ตาม userId จาก annotations — ตัวเองอยู่ใน option "ของฉัน" แล้ว)
  const users = useMemo(() => {
    const seen = new Map<string, string>();
    for (const a of optimisticAnnotations) {
      if (!seen.has(a.userId) && a.userId !== user?.userId) seen.set(a.userId, a.userName);
    }
    return Array.from(seen, ([userId, userName]) => ({ userId, userName }));
  }, [optimisticAnnotations, user]);

// F4: กรองฝั่ง client ล้วน — ไม่แตะข้อมูลใน DB (A3)
  const visibleAnnotations = useMemo(() => {
    if (userFilter === "all") return optimisticAnnotations;
    const target = userFilter === "mine" ? user?.userId : userFilter;
    return optimisticAnnotations.filter((a) => a.userId === target);
  }, [optimisticAnnotations, userFilter, user]);

// FIX-8: bbox (หน่วย %) ของรายการที่ hover ตรวจได้ — เดิน paths
  // (O(points) ของเส้น DRAW) ครั้งเดียวต่อ list แทนคำนวณใหม่ทุก mousemove
  const hoverBBoxPct = useMemo(() => {
    const m = new Map<AnnotationDTO["id"], Rect>();
    for (const a of visibleAnnotations) {
      if (a.type === "COMMENT") continue; // pin มี popover ของตัวเอง ไม่เข้า hit-test
      m.set(a.id, annotationBBox(a, { width: 100, height: 100 }));
    }
    return m;
  }, [visibleAnnotations]);

// F9: จำนวน reply ต่อ comment (สำหรับ sidebar)
  const replyCounts = useMemo(() => {
    const counts: Record<string, number> = {};
    for (const r of replies) {
      counts[r.annotationId] = (counts[r.annotationId] ?? 0) + 1;
    }
    return counts;
  }, [replies]);

// F9: replies ของแม่ที่ยังแสดงอยู่ (ตาม filter ของ F4) — กรองครั้งเดียว ไม่ใช่ทุกหน้า
  const visibleReplies = useMemo(
    () =>
      replies.filter((r) => visibleAnnotations.some((a) => a.id === r.annotationId)),
    [replies, visibleAnnotations],
  );

// UX review 2026-09-14 H1: จอ < lg sidebar เป็น overlay บังเอกสาร — ปิดตอน mount
  // ให้เห็นเอกสารทันที (คง initial true ไว้กัน hydration mismatch เหมือนเดิม)
  // (identity มาจาก prop user แล้ว — ไม่ต้องอ่านใน effect)
  useEffect(() => {
    if (!window.matchMedia("(min-width: 1024px)").matches) setSidebarOpen(false);
  }, []);

// UX review 2026-09-14 M5: จอ < lg แถบ tool เป็นแถวเดียวเลื่อนแนวนอน — เฝ้าว่าเลื่อน
  // ถึงท้ายแถวหรือยัง เพื่อซ่อนแถบเงาขวา (บอกว่ายังมีปุ่มถัดไป) เมื่อเลื่อนสุดแล้ว
  const toolbarRowRef = useRef<HTMLDivElement | null>(null);
  const [toolbarAtEnd, setToolbarAtEnd] = useState(false);
  const syncToolbarEnd = useCallback(() => {
    const el = toolbarRowRef.current;
    if (el) setToolbarAtEnd(el.scrollLeft + el.clientWidth >= el.scrollWidth - 4);
  }, []);
  useEffect(() => {
    syncToolbarEnd();
    window.addEventListener("resize", syncToolbarEnd);
    return () => window.removeEventListener("resize", syncToolbarEnd);
  }, [syncToolbarEnd]);

// เมนู tool ใด ๆ เปิดอยู่ — C1: เมนูเป็น position:fixed ผ่าน portal แล้ว แถบ tool คง
  // overflow-x-auto เสมอไม่ต้องสลับ overflow — เหลือใช้เป็นเงื่อนไข effect ปิดเมนู
  // ตอนเลื่อนแถบ/resize จอ (ตำแหน่ง fixed คำนวณตอนเปิด ไม่ตามปุ่มที่เลื่อนไปทีหลัง)
  const anyMenuOpen =
    highlightMenuOpen ||
    drawMenuOpen ||
    shapeMenuOpen ||
    stampMenuOpen ||
    textboxMenuOpen ||
    !!bookmarkComposer;

// C1: ปิดเมนูทั้งหมดเมื่อเลื่อนแถบ tool ต่อ หรือ resize/หมุนจอ — ตำแหน่ง fixed จะเพี้ยน
  // จากปุ่มทันทีที่แถบเลื่อน (header sticky → เลื่อนหน้าเอกสารไม่กระทบ ปุ่มไม่ขยับเทียบ viewport)
  // Major 1 (code review): resize ของมือถือจาก URL bar/คีย์บอร์ดเปลี่ยนแค่ความสูงและเมนูยัง
  // ยึด sticky header อยู่กับที่ — จึงปิดจาก resize เฉพาะเมื่อความกว้างจอเปลี่ยนจากตอนเปิดเท่านั้น
  useEffect(() => {
    if (!anyMenuOpen) return;
    const close = () => {
      markMenuClosed(); // M4: เลื่อนแถบ/resize จนเมนูปิด — tap ถัดไปใกล้ ๆ ไม่สร้างรายการ
      setStampMenuOpen(false);
      setShapeMenuOpen(false);
      setDrawMenuOpen(false);
      setTextboxMenuOpen(false);
      setHighlightMenuOpen(false);
      setBookmarkComposer(null);
    };
    const onResize = () => {
      if (window.innerWidth !== menuOpenWRef.current) close();
    };
    toolbarRowRef.current?.addEventListener("scroll", close, { passive: true });
    window.addEventListener("resize", onResize);
    return () => {
      toolbarRowRef.current?.removeEventListener("scroll", close);
      window.removeEventListener("resize", onResize);
    };
  }, [anyMenuOpen]);

// M6: จำนวน span ของ textLayer ต่อหน้า (0 = หน้าสแกนไม่มีข้อความ) — ใช้แสดง hint ตอน
  // tool highlight ว่าไฟล์นี้คลุมข้อความไม่ได้ / เขียนค่าเดิมคืน object เดิมให้ callback
  // identity คงที่ (useCallback []) กัน effect render ของทุกหน้ารันซ้ำเพราะ prop เปลี่ยน
  const [pageSpanCount, setPageSpanCount] = useState<Record<number, number>>({});
  const handleTextLayerRendered = useCallback((pageIndex: number, spanCount: number) => {
    setPageSpanCount((prev) =>
      prev[pageIndex] === spanCount ? prev : { ...prev, [pageIndex]: spanCount },
    );
  }, []);

// F8: Export PDF — ดาวน์โหลดเงียบ ๆ ในแท็บเดิม (เดิม window.open _blank จะแวบแท็บใหม่
  // และ error พา viewer ไปโผล่แท็บนั้น): fetch เป็น blob แล้วกด <a download> โดยรับชื่อ
  // ไฟล์จาก Content-Disposition ของ route (รองรับภาษาไทยผ่าน filename*) — พัง = toast ในหน้า
  const handleExportPdf = async () => {
    if (exporting) return;
    setExporting(true);
    setExportError(null);
    try {
      const res = await fetch(withBasePath(`/api/annotations/export?fileId=${file.id}`));
      if (!res.ok) {
        const text = await res.text().catch(() => "");
        throw new Error(text || `HTTP ${res.status}`);
      }
      const blob = await res.blob();
      const disposition = res.headers.get("Content-Disposition") ?? "";
      const utf8 = /filename\*=UTF-8''([^;\s]+)/i.exec(disposition);
      const ascii = /filename="([^"]+)"/i.exec(disposition);
      const name = utf8 ? decodeURIComponent(utf8[1]) : (ascii?.[1] ?? `${file.title}.pdf`);
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = name;
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
    } catch (err) {
      console.error("export PDF ไม่สำเร็จ", err);
      setExportError("Export PDF ไม่สำเร็จ — ลองอีกครั้ง (ไฟล์อาจใหญ่เกินหรือต้นฉบับเสียหาย)");
      window.setTimeout(() => setExportError(null), 6000);
    } finally {
      setExporting(false);
    }
  };

// โหลดเอกสาร: dynamic import ภายใน useEffect เท่านั้น (invariant #6)
  useEffect(() => {
    let cancelled = false;
    let loadedDoc: import("pdfjs-dist").PDFDocumentProxy | null = null;

// สลับไฟล์ (Next reuse component เดิมเมื่อเปลี่ยน dynamic param): เคลียร์เอกสาร
    // ก่อนหน้าก่อนโหลดใหม่ — กัน state เก่า (doc ที่ถูก destroy / blob URL ที่ถูก revoke
    // / span count ของหน้าเดิม) ถูก render ชั่วขณะกลางทาง แล้วกลับไป "กำลังโหลด…" ตามปกติ
    setLoadError(null);
    setPageSizes([]);
    setImageSrcs(null);
    setPageSpanCount({});

// N3: ไฟล์รูปภาพไม่ผ่าน pdfjs — โหลด static pdfUrl ตรง ๆ (ไม่มี ToUnicode ให้ซ่อม
    // ตาม rules/pdf-viewer.md) แล้วผลิต pageSizes จาก naturalWidth/Height (browser คิด
    // EXIF orientation ให้แล้ว) normalize กว้าง IMAGE_PAGE_WIDTH ให้ zoom/fit-width
    // ทำงานเหมือนหน้า A4 — jpg/png คือ 1 หน้าเสมอ
    if (fileKindFromUrl(file.pdfUrl) === "image") {
      setDoc(null);
      setPdfjs(null);
      const objectUrls: string[] = [];
      // URL จริงที่ browser ใช้โหลดไฟล์ (fetch/img.src ตรง — ต้องเติม basePath เอง)
      const fileUrl = withBasePath(file.pdfUrl);
      (async () => {
        let pages: { src: string | null; width: number; height: number }[];
        if (imageFormatFromUrl(file.pdfUrl) === "tiff") {
          // N3: TIFF หลายเฟรม = หลายหน้า — decode ครั้งเดียวต่อการเปิดไฟล์
          // (utif2 dynamic import ภายใน decodeTiffPages) แล้วเก็บ blob URL ไว้ใช้ต่อ
          const buffer = await (await fetch(fileUrl)).arrayBuffer();
          pages = await decodeTiffPages(buffer, IMAGE_PAGE_WIDTH);
          for (const p of pages) if (p.src) objectUrls.push(p.src);
        } else {
          const img = new Image();
          img.src = fileUrl;
          await img.decode();
          const factor = IMAGE_PAGE_WIDTH / img.naturalWidth;
          pages = [
            { src: fileUrl, width: IMAGE_PAGE_WIDTH, height: img.naturalHeight * factor },
          ];
        }
        if (cancelled) {
          // cleanup ของ effect รันไปแล้วตอน objectUrls ยังว่าง (สลับไฟล์กลาง decode)
          // — ต้อง revoke เอง ไม่งั้น blob ทั้งชุดรั่ว (plan-reviewer)
          objectUrls.forEach((u) => URL.revokeObjectURL(u));
          return;
        }
        setImageSrcs(pages.map((p) => p.src));
        setPageSizes(pages.map((p) => ({ width: p.width, height: p.height })));
      })().catch((err) => {
        console.error("โหลดรูปไม่สำเร็จ", err);
        if (!cancelled) setLoadError("โหลดรูปไม่สำเร็จ — ไฟล์อาจเสียหรือรูปแบบไม่รองรับ");
        objectUrls.forEach((u) => URL.revokeObjectURL(u));
      });
      return () => {
        cancelled = true;
        // N3: revoke ทุก blob URL ตอนสลับไฟล์/unmount กัน memory leak (rules/pdf-viewer.md)
        objectUrls.forEach((u) => URL.revokeObjectURL(u));
      };
    }

(async () => {
      const pdfjs = await import("pdfjs-dist");
      pdfjs.GlobalWorkerOptions.workerSrc = withBasePath("/pdf.worker.min.mjs");
      // โหลดผ่าน /api/pdf ที่ซ่อม ToUnicode จาก ActualText ของ PDF ไทยที่ cmap เพี้ยน
      // (ข้อความถูกทั้ง select/copy/ค้นหา) — endpoint fail ก็ถอยไปไฟล์ดิบตามเดิม
      let data: ArrayBuffer;
      try {
        const res = await fetch(withBasePath(`/api/pdf?fileId=${file.id}`));
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        data = await res.arrayBuffer();
      } catch {
        data = await (await fetch(withBasePath(file.pdfUrl))).arrayBuffer();
      }
      const doc = await pdfjs.getDocument({ data }).promise;
      loadedDoc = doc;
      if (cancelled) {
        void doc.destroy();
        return;
      }
      // ขนาดทุกหน้าที่ scale 1 ครั้งเดียว — ใช้ทำ placeholder + คำนวณ bookmark
      const sizes: Size[] = [];
      for (let n = 1; n <= doc.numPages; n++) {
        const page = await doc.getPage(n);
        const vp = page.getViewport({ scale: 1 });
        sizes.push({ width: vp.width, height: vp.height });
      }
      if (cancelled) {
        void doc.destroy();
        return;
      }
      setPdfjs(pdfjs);
      setDoc(doc);
      setPageSizes(sizes);
    })().catch((err) => {
      console.error("โหลดเอกสารไม่สำเร็จ", err);
      if (!cancelled) setLoadError("โหลดเอกสารไม่สำเร็จ — ไฟล์อาจเสียหรือไม่ใช่ PDF ที่รองรับ");
    });

return () => {
      cancelled = true;
      if (loadedDoc) void loadedDoc.destroy();
    };
  }, [file.id, file.pdfUrl]);

const pageWrapRefs = useRef<(HTMLDivElement | null)[]>([]);

// Page Virtualization: render เฉพาะหน้าใน viewport ± 1 หน้า (invariant #10)
  const [renderPages, setRenderPages] = useState<Set<number>>(new Set([0]));
  useEffect(() => {
    const n = pageSizes.length;
    if (n === 0) return;
    const visible = new Set<number>();
    const io = new IntersectionObserver(
      (entries) => {
        for (const en of entries) {
          const p = Number((en.target as HTMLElement).dataset.page);
          if (en.isIntersecting) visible.add(p);
          else visible.delete(p);
        }
        if (visible.size === 0) return;
        const next = new Set<number>();
        for (const p of Array.from(visible)) {
          for (const d of [-1, 0, 1]) {
            const q = p + d;
            if (q >= 0 && q < n) next.add(q);
          }
        }
        setRenderPages(next);
      },
      { rootMargin: "100% 0px" },
    );
    for (const el of pageWrapRefs.current) {
      if (el) io.observe(el);
    }
    return () => io.disconnect();
  }, [pageSizes]);

// หน้าปัจจุบัน = หน้าที่ midpoint ใกล้กึ่งกลาง viewport สุด (สำหรับ bookmark — PLAN.md §6.4)
  useEffect(() => {
    if (pageSizes.length === 0) return;
    const onScroll = () => {
      const center = window.scrollY + window.innerHeight / 2;
      let best = 0;
      let bestDist = Infinity;
      for (let i = 0; i < pageWrapRefs.current.length; i++) {
        const el = pageWrapRefs.current[i];
        if (!el) continue;
        const r = el.getBoundingClientRect();
        const mid = r.top + window.scrollY + r.height / 2;
        const d = Math.abs(mid - center);
        if (d < bestDist) {
          bestDist = d;
          best = i;
        }
      }
      setCurrentPage(best);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [pageSizes]);

// F12/C4: deep link `?page=N` (1-based) และ/หรือ `?ann=<uuid>` — อ่าน
  // window.location.search ครั้งเดียวหลัง pageSizes พร้อม (ไม่ใช้ useSearchParams
  // เลี่ยงข้อจำกัด prerender ของ Next 14) — placeholder มีขนาดจริงทุกหน้าจึงคำนวณ
  // absolute scroll ได้เสมอแม้หน้ายังไม่ render (กลไกเดียวกับ bookmark — §5)
  const deepLinkDoneRef = useRef(false);
  useEffect(() => {
    if (pageSizes.length === 0 || deepLinkDoneRef.current) return;
    deepLinkDoneRef.current = true;
    const params = new URLSearchParams(window.location.search);
    let targetPage: number | null = null;
    const annId = params.get("ann");
    if (annId) {
      const a = annotations.find((x) => x.id === annId);
      if (a) {
        // กระโดด + เลือกด้วยกลไกเดียวกับคลิกใน sidebar (เลื่อนถึง bbox ใต้ header)
        targetPage = a.pageIndex;
        goToAnnotation(a);
      }
    }
    const pageParam = Number(params.get("page"));
    if (targetPage === null && Number.isInteger(pageParam) && pageParam >= 1) {
      targetPage = Math.min(pageParam - 1, pageSizes.length - 1);
      const el = pageWrapRefs.current[targetPage];
      if (el) {
        scrollToBelowHeader(el.getBoundingClientRect().top + window.scrollY);
      }
    }
  }, [pageSizes, annotations]);

// จอเล็ก: หน้ากระดาษ (scale 1) กว้างกว่าพื้นที่แสดงผล → ย่อให้พอดีความกว้าง
  // ครั้งเดียวตอนโหลดเท่านั้น (ผู้ใช้ซูมเองหลังจากนี้แล้วไม่ถูกแทนที่) —
  // อิงความกว้างหน้าแรกเหมือน basePageWidth และตัด padding px-4 ซ้าย-ขวาของ main ออก
  const mainRef = useRef<HTMLElement>(null);
  const fitWidthDoneRef = useRef(false);
  useEffect(() => {
    if (pageSizes.length === 0 || fitWidthDoneRef.current) return;
    fitWidthDoneRef.current = true;
    const avail = (mainRef.current?.clientWidth ?? 0) - 32;
    const pageW = pageSizes[0].width;
    if (avail > 0 && pageW > avail) {
      setScale(clamp(Math.floor((avail / pageW) * 100) / 100, 0.5, 1));
    }
  }, [pageSizes]);

useEffect(() => {
    setDraft("");
  }, [composer]);

// F5/F18 + DRAW: dropdown บนปุ่ม tool (ชนิดปากกา/รูปทรง/ตรายาง) — ปิดเมื่อคลิกข้างนอก
  // ส่วน Esc ปิดแค่เมนูก่อน (stopPropagation กันชนคีย์ลัด F3 ที่จะ deselect ทุกอย่างพร้อมกัน)
  const stampMenuRef = useRef<HTMLDivElement | null>(null);
  const shapeMenuRef = useRef<HTMLDivElement | null>(null);
  const drawMenuRef = useRef<HTMLDivElement | null>(null);
  const textboxMenuRef = useRef<HTMLDivElement | null>(null);
  const highlightMenuRef = useRef<HTMLDivElement | null>(null);
  // C1: popup bookmark — ref ของปุ่ม 🔖 (คำนวณตำแหน่ง fixed แทนที่จะยึด absolute ใน wrapper)
  // + ref ของ wrapper ให้ outside-click รู้จัก "คลิกที่ปุ่ม = ไม่ใช่ข้างนอก"
  const bookmarkBtnRef = useRef<HTMLButtonElement | null>(null);
  const bookmarkWrapRef = useRef<HTMLDivElement | null>(null);
  // M4: เวลาที่เมนู/popup ปิดล่าสุด — tap/คลิกที่ใช้ปิดเมนูยังยิง click ต่อถึงหน้ากระดาษ
  // ในลำดับเดียวกัน (mousedown ปิดเมนูก่อน → click ไปถึง page) กลายเป็นวาง comment/
  // textbox/stamp โดยไม่ตั้งใจ — handlePageClick จึงเฉย 300ms แรกหลังปิดเมนู
  const menuClosedAtRef = useRef(0);
  function markMenuClosed() {
    menuClosedAtRef.current = Date.now();
  }
  // Major 1 (code review): ความกว้าง viewport ตอนเปิดเมนูล่าสุด — resize ของมือถือจาก URL bar
  // ยุบ/กาง หรือคีย์บอร์ดขึ้น เปลี่ยนแค่ความสูง (เมนู fixed ยึด sticky header ยังอยู่กับที่)
  // จะปิดเมนูเฉพาะเมื่อความกว้างเปลี่ยน (หมุนจอ/split view) เท่านั้น
  const menuOpenWRef = useRef(0);
  /** C1: เปิดเมนู tool ตรงตำแหน่งปุ่ม + จำความกว้างจอตอนเปิด (ใช้แยก resize จากหมุนจอ vs URL bar) */
  const openToolMenu = useCallback((btn: HTMLElement) => {
    menuOpenWRef.current = window.innerWidth;
    setMenuPos(fixedMenuPos(btn.getBoundingClientRect(), TOOL_MENU_W));
  }, []);
  // tool pan — ลากเลื่อนหน้า: เก็บตำแหน่ง pointer ล่าสุดระหว่างลาก (scrollBy สวนทางการเลื่อน)
  const panRef = useRef<{ x: number; y: number } | null>(null);
  const [grabbing, setGrabbing] = useState(false);
  useEffect(() => {
    const menus = [
      { open: stampMenuOpen, ref: stampMenuRef, close: () => setStampMenuOpen(false) },
      { open: shapeMenuOpen, ref: shapeMenuRef, close: () => setShapeMenuOpen(false) },
      { open: drawMenuOpen, ref: drawMenuRef, close: () => setDrawMenuOpen(false) },
      { open: textboxMenuOpen, ref: textboxMenuRef, close: () => setTextboxMenuOpen(false) },
      { open: highlightMenuOpen, ref: highlightMenuRef, close: () => setHighlightMenuOpen(false) },
      { open: !!bookmarkComposer, ref: bookmarkWrapRef, close: () => setBookmarkComposer(null) },
    ];
    if (!menus.some((m) => m.open)) return;
    const onMouseDown = (e: MouseEvent) => {
      // เมนู render ผ่าน portal ที่ document.body — ref ของ wrapper มองไม่เห็นโหนดใน portal
      // ต้องข้ามก่อน ไม่งั้นคลิกในเมนูถูกนับเป็น "ข้างนอก" แล้วเมนูปิดตัวเอง (C1)
      if (e.target instanceof Element && e.target.closest("[data-tool-menu]")) return;
      markMenuClosed(); // M4: tap นี้ใช้ปิดเมนู — click ที่ตามมาต้องไม่สร้างรายการ
      for (const m of menus) {
        if (m.open && !m.ref.current?.contains(e.target as Node)) m.close();
      }
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        e.stopPropagation();
        markMenuClosed(); // M4: Escape แล้วแตะหน้าเร็ว ๆ ก็ต้องไม่สร้างรายการ
        for (const m of menus) m.close();
      }
    };
    document.addEventListener("mousedown", onMouseDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onMouseDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [stampMenuOpen, shapeMenuOpen, drawMenuOpen, textboxMenuOpen, highlightMenuOpen, bookmarkComposer]);

// F2+F3: คีย์ลัดทั้งหมด — H/D/C สลับ tool, B bookmark, Ctrl+Z/Ctrl+Shift+Z undo/redo,
  // Esc ปิด popup/deselect — ข้ามทุก shortcut เมื่อ focus อยู่ใน input/textarea/
  // contenteditable (PLAN-FEAT.md §3 F3, §5)
  const shortcutHandlersRef = useRef({
    switchTool,
    openBookmarkComposer,
    undoHistory,
    redoHistory,
    deleteSelected: () => {},
  });
  useEffect(() => {
    // เก็บเวอร์ชันล่าสุดของ handler ตลอด (currentPage เปลี่ยนตอน scroll — กัน stale closure)
    shortcutHandlersRef.current = {
      switchTool,
      openBookmarkComposer,
      undoHistory,
      redoHistory,
      // DEL/Backspace = ลบรายการที่เลือก (ของตัวเองเท่านั้น — เงื่อนไขเดียวกับปุ่มลบในแผง selection)
      deleteSelected: () => {
        if (selectedId === null || !user) return;
        const target = annotations.find((a) => a.id === selectedId);
        if (!target || target.userId !== user.userId) return;
        void handleDeleteAnnotation(selectedId);
      },
    };
  });
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const t = e.target as HTMLElement | null;
      const inForm =
        t !== null &&
        (t.tagName === "INPUT" ||
          t.tagName === "TEXTAREA" ||
          t.tagName === "SELECT" || // รวม dropdown (เช่น "วางที่" ของ popup bookmark N2) — กดคีย์ลัดใน select ต้องข้าม
          t.isContentEditable);
      const h = shortcutHandlersRef.current;

if (e.key === "Escape") {
        if (inForm) return; // ฟอร์ม (เช่น composer) จัดการ Esc เอง
        setComposer(null);
        setOpenPinId(null);
        setSelectedId(null);
        setPreviewData(null);
        setEditingCommentId(null);
        setTextboxComposer(null);
        setEditingTextboxId(null);
        setBookmarkComposer(null);
        return;
      }

if (e.ctrlKey || e.metaKey) {
        if (e.key.toLowerCase() === "z" && !inForm) {
          e.preventDefault();
          if (e.shiftKey) void h.redoHistory();
          else void h.undoHistory();
        }
        return; // Ctrl/Cmd + อื่น (เช่น Ctrl+C) ไม่ใช่คีย์ลัดของเรา
      }

if (e.altKey || inForm) return;
      const k = e.key.toLowerCase();
      if (k === "delete" || k === "backspace") {
        e.preventDefault(); // Backspace ในบางบราวเซอร์ = ย้อนหน้า — กันไว้
        h.deleteSelected();
        return;
      }
      // กันอักขระหลุดเข้า input ที่เพิ่ง autoFocus — กด B เปิด popup bookmark แล้ว
      // React focus input ทันทีใน keydown เดียวกัน browser จึงพิมพ์ "b" ตามลงไป
      if (k !== "h" && k !== "d" && k !== "c" && k !== "b") return;
      e.preventDefault();
      switch (k) {
        case "h": // H = ไฮไลต์ — สลับไป tool highlight (คลุมข้อความ = สร้างทันที)
          h.switchTool("highlight");
          break;
        case "d":
          h.switchTool("draw");
          break;
        case "c":
          h.switchTool("comment");
          break;
        case "b":
          h.openBookmarkComposer(); // N2: เปิด popup ตั้งชื่อ/โน้ต/เลือกหัวข้อ (คีย์ลัด B เดิม)
          break;
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

// ─── เขียนผ่าน Server Actions + optimistic (invariant #4, #9) ──────────────

// FIX-2: create ที่ยังรอ network อยู่ (key = temp id) —
  // ลบทันทีก่อน action เสร็จ → mark cancelled แล้วฝั่ง create ลบ row จริงต่อเมื่อ
  // action กลับมา (id ชั่วคราวยังไม่มีใน DB — ยิง delete ตอนนี้จะพัง แล้วรายการ
  // โผล่กลับมาเมื่อ create เสร็จช้ากว่า)
  const pendingCreatesRef = useRef(new Map<string, { cancelled: boolean }>());

/** H1: toast แจ้ง error ของ action 6 วินาที (pattern เดียวกับ exportError) */
  function showActionError(message: string) {
    setActionError(message);
    if (actionErrorTimerRef.current !== null) window.clearTimeout(actionErrorTimerRef.current);
    actionErrorTimerRef.current = window.setTimeout(() => {
      actionErrorTimerRef.current = null;
      setActionError(null);
    }, 6000);
  }

async function handleCreateAnnotation(
    pageIndex: number,
    type: AnnotationType,
    data: AnnotationData,
  ) {
    if (!user) return;
    const now = new Date().toISOString();
    const temp: AnnotationDTO = {
      id: crypto.randomUUID(),
      fileId: file.id,
      pageIndex,
      userId: user.userId,
      userName: user.userName,
      type,
      data,
      createdAt: now,
      updatedAt: now,
      resolved: false,
      resolvedAt: null,
    };
    const pending = { cancelled: false };
    pendingCreatesRef.current.set(temp.id, pending);
    await startTransition(async () => {
      applyAnnotation({ kind: "add", row: temp });
      try {
        const saved = await createAnnotation({
          id: temp.id, // ใช้ id เดียวกับ optimistic row — กัน duplicate ชั่วขณะ (row โผล่แล้วหาย)
          fileId: file.id,
          pageIndex,
          userId: user.userId,
          userName: user.userName,
          type,
          data,
        });
        if (pending.cancelled) {
          // ถูกสั่งลบไปแล้วระหว่างรอ — ลบ row จริงที่ server แล้วจบเลย
          // ไม่ append เข้า state ไม่ลง history (optimistic row ถูกถอดเมื่อ transition จบ)
          await deleteAnnotation(saved.id, user.userId);
          return;
        }
        setAnnotations((prev) =>
          prev.some((a) => a.id === saved.id) ? prev : [...prev, saved],
        );
        // สร้าง "วัตถุ" เสร็จ = เลือกตัวใหม่ทันที (ใช้ id จาก server — id ชั่วคราวของ
        // optimistic row ถูกถอดตอน transition จบ เลือก id นั้นไฮไลต์จะหายเอง)
        if (AUTO_SELECT_TYPES.has(type)) {
          setSelectedId(saved.id);
          setPreviewData(null);
          // แผง selection กำลังจะโผล่ = ปิดเมนู tool/popup bookmark ที่เปิดค้างก่อน — บน iOS
          // การลาก (คลุมข้อความ/วาดเส้น) ไม่ยิง compat mousedown ให้ outside-click ปิดเมนู
          // เอง (Android/desktop ปิดไปแล้วตั้งแต่เริ่มกด) ไม่ปิดตรงนี้ = เมนูซ้อนแผงบนจอสัมผัส
          setStampMenuOpen(false);
          setShapeMenuOpen(false);
          setDrawMenuOpen(false);
          setTextboxMenuOpen(false);
          setHighlightMenuOpen(false);
          setBookmarkComposer(null);
        }
        // F2: undo ของ create = ลบ id ปัจจุบัน; redo = สร้างใหม่ (id ใหม่) แล้วส่งต่อให้ undo รอบถัดไป
        let currentId = saved.id;
        pushHistory({
          undo: async () => {
            await deleteAnnotation(currentId, user.userId);
            setAnnotations((prev) => prev.filter((a) => a.id !== currentId));
          },
          redo: async () => {
            const re = await createAnnotation({
              fileId: file.id,
              pageIndex,
              userId: user.userId,
              userName: user.userName,
              type,
              data,
            });
            currentId = re.id;
            setAnnotations((prev) =>
              prev.some((a) => a.id === re.id) ? prev : [...prev, re],
            );
          },
        });
      } catch (err) {
        console.error("บันทึก annotation ไม่สำเร็จ", err); // React rollback optimistic row ให้เอง
        showActionError("บันทึกรายการไม่สำเร็จ — ตรวจสอบการเชื่อมต่อแล้วลองอีกครั้ง");
      } finally {
        pendingCreatesRef.current.delete(temp.id);
      }
    });
  }

async function handleDeleteAnnotation(id: string) {
    if (!user) return;
    // FIX-2: id นี้เป็นรายการที่ create ยังรอ network อยู่ — mark ให้ฝั่ง create ลบต่อเอง
    // เมื่อ action กลับมา (id ชั่วคราวยังไม่มีใน DB) — ไม่ dispatch remove แยกต่างหาก
    // เพราะ transition ใหม่จบทันทีแล้ว optimistic remove ถูก revert (row กระพริบกลับมา)
    // optimistic row จะหายเองเมื่อ transition ของ create จบลง
    const pending = pendingCreatesRef.current.get(id);
    if (pending) {
      pending.cancelled = true;
      setSelectedId(null);
      setPreviewData(null);
      return;
    }
    const target = annotations.find((a) => a.id === id); // เก็บข้อมูลก่อนลบไว้ทำ undo
    setSelectedId(null);
    setPreviewData(null);
    await startTransition(async () => {
      applyAnnotation({ kind: "remove", id });
      try {
        await deleteAnnotation(id, user.userId);
        setAnnotations((prev) => prev.filter((a) => a.id !== id));
        if (target) {
          // F2: undo ของ delete = สร้างใหม่จาก data เดิม (id ใหม่); redo = ลบ id ที่สร้างใหม่นั้น
          let currentId: string | null = null;
          pushHistory({
            undo: async () => {
              const re = await createAnnotation({
                fileId: file.id,
                pageIndex: target.pageIndex,
                userId: target.userId,
                userName: target.userName,
                type: target.type,
                data: target.data,
              });
              currentId = re.id;
              setAnnotations((prev) =>
                prev.some((a) => a.id === re.id) ? prev : [...prev, re],
              );
            },
            redo: async () => {
              if (!currentId) return;
              await deleteAnnotation(currentId, user.userId);
              setAnnotations((prev) => prev.filter((a) => a.id !== currentId));
            },
          });
        }
      } catch (err) {
        console.error("ลบ annotation ไม่สำเร็จ", err);
        showActionError("ลบรายการไม่สำเร็จ — ตรวจสอบการเชื่อมต่อแล้วลองอีกครั้ง");
      }
    });
  }

// F1: ย้าย/ปรับขนาด/เปลี่ยนสี–ความหนา — optimistic แบบเดียวกับ create (invariant #9)
  async function handleUpdateAnnotation(id: string, data: AnnotationData) {
    if (!user) return;
    const current = annotations.find((a) => a.id === id);
    if (!current || current.userId !== user.userId) return; // ของคนอื่นแก้ไม่ได้ (D9)
    const before = current.data; // ไว้ย้อนกลับตอน undo (F2)
    setPreviewData(null);
    await startTransition(async () => {
      applyAnnotation({
        kind: "update",
        row: { ...current, data, updatedAt: new Date().toISOString() },
      });
      try {
        const saved = await updateAnnotation(id, user.userId, data);
        setAnnotations((prev) => prev.map((a) => (a.id === saved.id ? saved : a)));
        pushHistory({
          undo: async () => {
            const up = await updateAnnotation(id, user.userId, before);
            setAnnotations((prev) => prev.map((a) => (a.id === up.id ? up : a)));
          },
          redo: async () => {
            const up = await updateAnnotation(id, user.userId, data);
            setAnnotations((prev) => prev.map((a) => (a.id === up.id ? up : a)));
          },
        });
      } catch (err) {
        console.error("แก้ไข annotation ไม่สำเร็จ", err); // React rollback optimistic row ให้เอง
        showActionError("แก้ไขรายการไม่สำเร็จ — ตรวจสอบการเชื่อมต่อแล้วลองอีกครั้ง");
      }
    });
  }

// ─── Resolve (F10/A5 — ใครก็ได้ toggle ตาม D6; ไม่เข้า history ของ F2
  //     เพราะ undo ผ่าน updateAnnotation จำกัดเจ้าของ และสเปก F2 ก็ไม่รวม resolve) ──

async function handleSetResolved(id: string, resolved: boolean) {
    const current = annotations.find((a) => a.id === id);
    if (!current) return;
    const now = new Date().toISOString();
    await startTransition(async () => {
      applyAnnotation({
        kind: "update",
        row: {
          ...current,
          resolved,
          resolvedAt: resolved ? now : null,
          updatedAt: now,
        },
      });
      try {
        const saved = await setAnnotationResolved(id, resolved);
        setAnnotations((prev) => prev.map((a) => (a.id === saved.id ? saved : a)));
      } catch (err) {
        console.error("ตั้งสถานะไม่สำเร็จ", err); // React rollback optimistic ให้เอง
        showActionError("ตั้งสถานะไม่สำเร็จ — ตรวจสอบการเชื่อมต่อแล้วลองอีกครั้ง");
      }
    });
  }

// ─── Replies (F9/A4) ───────────────────────────────────────────────────────

async function handleCreateReply(
    annotationId: string,
    message: string,
  ): Promise<boolean> {
    if (!user) return false;
    try {
      const saved = await createReply({
        annotationId,
        userId: user.userId,
        userName: user.userName,
        message,
      });
      setReplies((prev) =>
        prev.some((r) => r.id === saved.id) ? prev : [...prev, saved],
      );
      return true;
    } catch (err) {
      console.error("ตอบ comment ไม่สำเร็จ", err);
      showActionError("ตอบ comment ไม่สำเร็จ — ตรวจสอบการเชื่อมต่อแล้วลองอีกครั้ง");
      return false;
    }
  }

async function handleDeleteReply(id: string) {
    if (!user) return;
    try {
      await deleteReply(id, user.userId);
      setReplies((prev) => prev.filter((r) => r.id !== id));
    } catch (err) {
      console.error("ลบคำตอบไม่สำเร็จ", err);
      showActionError("ลบคำตอบไม่สำเร็จ — ตรวจสอบการเชื่อมต่อแล้วลองอีกครั้ง");
    }
  }

// ─── Bookmarks (N2: หมุดหัวข้อใหญ่ + sub-bookmark + โน้ต) ────────────────────

/** ข้อความที่เพิ่งคลุมบนหน้าล่าสุด — ชื่อ default ของ popup bookmark (จาก mouseup บนหน้า) */
  const lastSelectionTextRef = useRef("");

/** เส้นทางลากเมาส์ของ tool highlight/select (client coords) — จุดกดเมาส์ + ตำแหน่ง
   *  ล่าสุด ใช้เป็น ground truth กรอง selection rects (DOM order ของ textLayer บาง PDF
   *  มั่วจน range ครอบบรรทัดที่ไม่ได้ลากผ่าน) — เคลียร์ตอนปล่อยเมาส์ (document mouseup
   *  ยิงหลัง React onMouseUp ของ page เพราะ root อยู่ใต้ document) */
  const selDragStartRef = useRef<{ x: number; y: number } | null>(null);
  const selDragEndRef = useRef<{ x: number; y: number } | null>(null);

/** เส้นทางลากล่าสุด (px อิงหน้า) + ข้อความดิบ/ความกว้างหน้า ณ mouseup — ให้ event
   *  copy นำไปกรองแนวที่ลากจริงแบบเดียวกับตอนสร้างมาร์ก (DOM range ของ textLayer
   *  ไทยครอบ span เกินบริเวณที่เห็น Ctrl+C เลยได้ข้อความเกินมา) — เทียบข้อความ
   *  ดิบ + ความกว้างหน้าก่อนใช้ กันข้อมูลเก่าหลัง selection/zoom เปลี่ยน */
  const lastSweepRef = useRef<{
    pageIndex: number;
    start: ClientPt;
    end: ClientPt;
    pageWidth: number;
    raw: string;
  } | null>(null);

/** ความลึกของ bookmark (root = 1) บน state ปัจจุบัน — popup ใช้กรองเป้าหมายระดับ 1–2
   *  (cap 100 กันลูปไม่รู้จบหากข้อมูลวนซ้ำ) */
  function bookmarkDepthOf(b: BookmarkDTO): number {
    let depth = 1;
    let cur: BookmarkDTO | undefined = b;
    while (cur?.parentId && depth <= 100) {
      const parent = optimisticBookmarks.find((x) => x.id === cur!.parentId);
      if (!parent) break;
      depth += 1;
      cur = parent;
    }
    return depth;
  }

/** C1: ตำแหน่ง fixed ของ popup bookmark — จาก rect ของปุ่ม 🔖 (คลิกปุ่ม/ปุ่มในแผง selection/
   *  คีย์ลัด B เรียกจากไหนก็ยึดปุ่มเดียวกัน เหมือน anchor เดิมที่ absolute ใน wrapper ของปุ่ม) */
  const positionBookmarkPopup = useCallback(() => {
    menuOpenWRef.current = window.innerWidth;
    setBookmarkPos(
      bookmarkBtnRef.current
        ? fixedMenuPos(bookmarkBtnRef.current.getBoundingClientRect(), BOOKMARK_MENU_W)
        : { left: Math.max(8, window.innerWidth - BOOKMARK_MENU_W - 8), top: 72 }
    );
  }, []);

/** ปุ่ม bookmark ในแผง selection (N2) — เปิด popup ที่ตำแหน่ง annotation นั้น
   *  ชื่อ default มาจากข้อความของรายการ (ชนิดที่มีข้อความจริง) ไม่งั้น = "หน้า N" */
  function handleAnnotationBookmark(a: AnnotationDTO, yOffsetPct: number) {
    const meaningful =
      a.type === "HIGHLIGHT" ||
      a.type === "TEXTBOX" ||
      a.type === "STAMP" ||
      a.type === "COMMENT";
    const text = meaningful ? normalizeBookmarkTitle(annotationPreviewText(a)) : "";
    setBookmarkError(null);
    positionBookmarkPopup();
    setBookmarkComposer({
      pageIndex: a.pageIndex,
      yOffset: clamp(yOffsetPct, 0, 100),
      title: text || `หน้า ${a.pageIndex + 1}`,
      note: "",
      parentId: null,
    });
  }

/** ตำแหน่งที่กำลังดู: หน้าปัจจุบัน + จุดกึ่งกลางจอเป็น % ของความสูงหน้า */
  function currentViewPosition() {
    const el = pageWrapRefs.current[currentPage];
    if (!el) return null;
    const r = el.getBoundingClientRect();
    // นิยาม yOffset แบบเดียวกับพิกัด annotation: "จุดจริงบนหน้า" — ใช้ขอบบนของ
    // แถบมองเห็นใต้ header (+gap เท่ากับตอนกดผ่าน scrollToBelowHeader) ตอนกด
    // bookmark จุดนี้จะกลับมาอยู่ตำแหน่งเดิมพอดี ไม่ใช่กึ่งกลางจอแบบเดิม
    const viewTop =
      window.scrollY + viewerHeaderHeight() + SCROLL_BELOW_HEADER_GAP;
    const pageTop = r.top + window.scrollY;
    return {
      pageIndex: currentPage,
      yOffset: clamp(((viewTop - pageTop) / r.height) * 100, 0, 100),
    };
  }

/** M6: ปุ่ม 🔖 เปลี่ยนเป็น ✓ เขียว 1.5 วิ (pattern เดียวกับ copiedId ของ sidebar) */
  function flashBookmarkSaved() {
    setBookmarkSaved(true);
    if (bookmarkSavedTimerRef.current !== null) {
      window.clearTimeout(bookmarkSavedTimerRef.current);
    }
    bookmarkSavedTimerRef.current = window.setTimeout(() => {
      bookmarkSavedTimerRef.current = null;
      setBookmarkSaved(false);
    }, 1500);
  }

async function handleSaveBookmark() {
    const c = bookmarkComposer;
    if (!c || !user || bookmarkPendingRef.current) return;
    bookmarkPendingRef.current = true;
    setBookmarkSaving(true);
    try {
      const saved = await createBookmark({
        fileId: file.id,
        pageIndex: c.pageIndex,
        userId: user.userId,
        userName: user.userName,
        title: c.title.trim() || `หน้า ${c.pageIndex + 1}`,
        yOffset: c.yOffset,
        parentId: c.parentId,
        note: c.note.trim() || null,
      });
      // ปิด popup เฉพาะเมื่อสำเร็จ — ถ้า fail (เช่น หัวข้อแม่ถูกคนอื่นลบไประหว่างกรอก)
      // คงข้อมูลที่พิมพ์ไว้ + แสดง error ให้ผู้ใช้แก้ (เช่น เปลี่ยน "วางที่") แทนหายเงียบ ๆ
      setBookmarkComposer(null);
      setBookmarkError(null);
      setBookmarks((prev) =>
        prev.some((b) => b.id === saved.id) ? prev : [...prev, saved],
      );
      flashBookmarkSaved();
    } catch (err) {
      console.error("บันทึก bookmark ไม่สำเร็จ", err);
      setBookmarkError(err instanceof Error ? err.message : "บันทึกไม่สำเร็จ ลองอีกครั้ง");
    } finally {
      bookmarkPendingRef.current = false;
      setBookmarkSaving(false);
    }
  }

/** ปุ่ม + ที่หัวข้อใน sidebar → bookmark หน้าที่ดูอยู่เข้าใต้หัวข้อนั้นทันที (ไม่เปิด popup) */
  async function handleAddSubBookmark(parentId: string) {
    if (!user || bookmarkPendingRef.current) return;
    const pos = currentViewPosition();
    if (!pos) return;
    bookmarkPendingRef.current = true;
    try {
      const saved = await createBookmark({
        fileId: file.id,
        pageIndex: pos.pageIndex,
        userId: user.userId,
        userName: user.userName,
        title: `หน้า ${pos.pageIndex + 1}`,
        yOffset: pos.yOffset,
        parentId,
      });
      setBookmarks((prev) =>
        prev.some((b) => b.id === saved.id) ? prev : [...prev, saved],
      );
    } catch (err) {
      console.error("เพิ่ม sub-bookmark ไม่สำเร็จ", err);
    } finally {
      bookmarkPendingRef.current = false;
    }
  }

/** แก้ไข bookmark ของตัวเอง — ชื่อ/โน้ต/ย้ายหัวข้อ (✏ ใน sidebar, N2) */
  async function handleUpdateBookmark(
    id: string,
    patch: { title?: string; note?: string | null; parentId?: string | null },
  ) {
    if (!user) return;
    try {
      const saved = await updateBookmark({ id, userId: user.userId, ...patch });
      setBookmarks((prev) => prev.map((b) => (b.id === saved.id ? saved : b)));
    } catch (err) {
      console.error("แก้ไข bookmark ไม่สำเร็จ", err);
    }
  }

async function handleDeleteBookmark(id: string) {
    if (!user) return;
    await startTransition(async () => {
      applyBookmark({ kind: "remove", id });
      try {
        await deleteBookmark(id, user.userId);
        setBookmarks((prev) => prev.filter((b) => b.id !== id));
      } catch (err) {
        console.error("ลบ bookmark ไม่สำเร็จ", err);
      }
    });
  }

// ─── Text selection → highlight (PLAN.md §6.1) ─────────────────────────────

/** อ่าน text selection ปัจจุบันบนหน้าที่ระบุ → rects % (รวบบรรทัดแล้ว) + ข้อความ + rect แรก
   *  ใช้ทั้งตอน mouseup สร้างมาร์ก และ live preview ระหว่างลาก — ข้อความ (กรองให้เหลือ
   *  เฉพาะตัวอักษรใน rects ที่เห็นบนจอ) คำนวณเฉพาะเมื่อ withText เพราะแพง ส่วน live
   *  preview ที่เรียกถี่ระหว่างลากใช้แค่ rects
   *  opts.range = ใช้ Range จากภายนอกแทน native selection (custom selection จอสัมผัส
   *  ของ useCustomSelection — ตอนนั้น user-select:none ไม่มี native selection ให้อ่าน) */
  function readTextSelection(
    pageIndex: number,
    opts?: { withText?: boolean; range?: Range },
  ) {
    let range: Range;
    if (opts?.range) {
      range = opts.range;
    } else {
      const selection = window.getSelection();
      if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
        return null;
      }
      range = selection.getRangeAt(0);
    }
    // รับเฉพาะ selection ใน page เดียว (PLAN.md §8)
    const container = range.commonAncestorContainer;
    const node =
      container instanceof Element ? container : container.parentElement;
    const pageEl = node?.closest<HTMLElement>("[data-page]");
    if (!pageEl || Number(pageEl.dataset.page) !== pageIndex) return null;

// tool highlight — ฟัง selectionchange ระหว่างลากเพื่อวาด preview มาร์กสด ๆ
  // (แสดงเส้น/สีตามรูปแบบที่ตั้งไว้ทันที ไม่ต้องรอปล่อยเมาส์)
  // tool ที่เหลือของ TEXT_SELECTION_TOOLS (select/comment/textbox/stamp) — ใช้กลไก
  // เดียวกันแต่วาดเป็น selection สีฟ้าสะอาด ๆ (ไม่สร้างไฮไลต์ ไม่วางรายการ)
  // จอสัมผัส (coarse) + tool highlight ไม่ผ่านทางนี้ — native selection ถูกปิดไว้
  // ใช้ custom selection ของ useCustomSelection แทน (ด้านล่าง)
  useEffect(() => {
    if (!TEXT_SELECTION_TOOLS.has(tool)) {
      setLiveMark(null);
      setSelectPreview(null);
      return;
    }
    const onSelectionChange = () => {
      const selection = window.getSelection();
      if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
        setLiveMark(null);
        setSelectPreview(null);
        return;
      }
      const node = selection.getRangeAt(0).commonAncestorContainer;
      const el = node instanceof Element ? node : node.parentElement;
      const pageEl = el?.closest<HTMLElement>("[data-page]");
      if (!pageEl) {
        setLiveMark(null);
        setSelectPreview(null);
        return;
      }
      const pi = Number(pageEl.dataset.page);
      const sel = readTextSelection(pi);
      const setPreview = tool === "highlight" ? setLiveMark : setSelectPreview;
      setPreview((prev) => {
        const next = sel ? { pageIndex: pi, rects: sel.rects } : null;
        // ค่าเดิมทุกอย่าง = คืน object เดิมให้ React ข้าม re-render (ลากทีละนิดไม่หนัก)
        const same =
          prev !== null &&
          next !== null &&
          prev.pageIndex === next.pageIndex &&
          prev.rects.length === next.rects.length &&
          prev.rects.every(
            (r, idx) =>
              r.x === next.rects[idx].x &&
              r.y === next.rects[idx].y &&
              r.width === next.rects[idx].width &&
              r.height === next.rects[idx].height,
          );
        return same ? prev : next;
      });
    };
    document.addEventListener("selectionchange", onSelectionChange);
    // เคลียร์เส้นทางลากตอนปล่อยเมาส์ — listener นี้ที่ document ยิงหลัง React
    // onMouseUp ของหน้า (root ของ React อยู่ใต้ document) ค่าจึงยังใช้ได้ตอนสร้างมาร์ก
    const onMouseUpDoc = () => {
      selDragStartRef.current = null;
      selDragEndRef.current = null;
    };
    document.addEventListener("mouseup", onMouseUpDoc);
    return () => {
      document.removeEventListener("selectionchange", onSelectionChange);
      document.removeEventListener("mouseup", onMouseUpDoc);
    };
  }, [tool]);

// Copy (Ctrl+C) ข้อความจาก textLayer — ข้อความดิบของ PDF ไทยบางไฟล์เพี้ยน (glyph
  // ต่อ glyph + control char ขยะ + span เรียงไม่ตรงลำดับบนจอ) และ DOM range ครอบ
  // span เกินบริเวณที่ลาก จึงแทนที่คลิปบอร์ดด้วยข้อความที่กรองตามเส้นทางลากล่าสุด
  // (เทียบข้อความดิบ + ความกว้างหน้า — ต่างจากตอน mouseup = selection/zoom เปลี่ยน
  // ไปแล้ว กลับไปใช้ rect ของ range เองทั้งหมด) เรียงตามตำแหน่งบนจอแล้วล้างขยะ
  useEffect(() => {
    if (!TEXT_SELECTION_TOOLS.has(tool)) return;
    const onCopy = (e: ClipboardEvent) => {
      const selection = window.getSelection();
      if (!selection || selection.isCollapsed || selection.rangeCount === 0) return;
      const range = selection.getRangeAt(0);
      const node = range.commonAncestorContainer;
      const el = node instanceof Element ? node : node.parentElement;
      const pageEl = el?.closest<HTMLElement>("[data-page]");
      if (!pageEl) return; // เฉพาะ selection ในหน้า PDF ของเรา
      const rects = Array.from(range.getClientRects()).filter((r) => r.width > 0);
      const sweep = lastSweepRef.current;
      const pageRect = pageEl.getBoundingClientRect();
      const fresh =
        sweep !== null &&
        sweep.pageIndex === Number(pageEl.dataset.page) &&
        Math.abs(sweep.pageWidth - pageRect.width) < 1 &&
        sweep.raw === selection.toString();
      const kept =
        sweep && fresh && rects.length > 0
          ? rectsInSweptPath(
              rects,
              { x: sweep.start.x + pageRect.left, y: sweep.start.y + pageRect.top },
              { x: sweep.end.x + pageRect.left, y: sweep.end.y + pageRect.top },
            )
          : rects;
      const text =
        kept.length > 0
          ? selectionTextWithin(kept, range)
          : sanitizePdfText(selection.toString());
      e.preventDefault();
      e.clipboardData?.setData("text/plain", text);
    };
    document.addEventListener("copy", onCopy);
    return () => document.removeEventListener("copy", onCopy);
  }, [tool]);

/** สร้าง HIGHLIGHT จาก selection ที่อ่านได้ — ใช้ร่วมกันทั้ง desktop (mouseup บนหน้า)
   *  และจอสัมผัส (custom selection ของ useCustomSelection commit ตอนปล่อยนิ้ว) */
  function commitHighlight(
    pageIndex: number,
    sel: { rects: HighlightData["rects"]; text: string },
  ) {
    setLiveMark(null);
    window.getSelection()?.removeAllRanges();
    void handleCreateAnnotation(pageIndex, "HIGHLIGHT", {
      text: sel.text,
      color: highlightColor,
      rects: sel.rects,
      ...(highlightStyle !== "highlight" ? { style: highlightStyle } : {}),
      ...(highlightOpacityPct < 100 ? { opacity: highlightOpacityPct / 100 } : {}),
    });
  }

/** custom selection (จอสัมผัส + tool highlight) ปล่อยนิ้ว — hook สร้าง Range จาก
   *  caret ตำแหน่งนิ้วให้ อ่านเป็น rects+ข้อความผ่าน readTextSelection ชุดเดียวกับ
   *  desktop (อุดหนุเส้นทางลากให้ rectsInSweptPath กรองแนวที่ลากจริง) แล้ว commit
   *  ทันทีไม่มีปุ่มยืนยัน — สร้างเสร็จเลือกให้ทันทีผ่าน AUTO_SELECT_TYPES ของ
   *  handleCreateAnnotation เหมือน desktop */
  function handleCustomSelectionCommit({
    range,
    start,
    end,
  }: CustomSelectionCommit) {
    const node = range.commonAncestorContainer;
    const el = node instanceof Element ? node : node.parentElement;
    const pageEl = el?.closest<HTMLElement>("[data-page]");
    if (!pageEl) return;
    const pi = Number(pageEl.dataset.page);
    // ยืม selDrag refs ชั่วคราวให้ readTextSelection กรองตามเส้นทางนิ้ว (desktop
    // เขียนคู่นี้จาก mousedown/mousemove ของ page wrapper)
    selDragStartRef.current = start;
    selDragEndRef.current = end;
    const sel = readTextSelection(pi, { withText: true, range });
    selDragStartRef.current = null;
    selDragEndRef.current = null;
    if (!sel) return;
    // ชื่อ bookmark default จาก selection เหมือน mouseup ของ desktop
    lastSelectionTextRef.current = normalizeBookmarkTitle(sel.text);
    commitHighlight(pi, sel);
  }

function handleMouseUpOnPage(pageIndex: number) {
    // N2: จำข้อความที่เพิ่งคลุมบนหน้า (ทุก tool) — ใช้เป็นชื่อ default ของ popup bookmark
    // (คลิกปุ่ม 🔖 ใน header ไม่ผ่าน mouseup ของหน้า ค่าจึงไม่โดนเคลียร์ก่อนเปิด popup)
    // อ่านครั้งเดียวพร้อมข้อความ (กรองตาม rects แล้ว) — bookmark กับมาร์กใช้ชุดเดียวกัน
    const sel = readTextSelection(pageIndex, { withText: true });
    lastSelectionTextRef.current = normalizeBookmarkTitle(sel?.text ?? "");
    // มาร์กข้อความสร้างจาก tool highlight อย่างเดียว (มี live preview ระหว่างลาก)
    // tool select คลุมข้อความเฉย ๆ — ไม่มี popup
    if (tool !== "highlight") return;
    if (!sel) return;
    commitHighlight(pageIndex, sel);
  }

/** อุปกรณ์จอสัมผัส (pointer หลัก coarse) — คำนวณครั้งเดียวตอน mount: เฉพาะพวกนี้
   *  ที่ใช้ custom selection ตอน tool highlight (desktop ใช้ native mouse selection
   *  + commit ตอน mouseup ตามเดิม ไม่เปลี่ยนพฤติกรรม) */
  const [coarseTouch] = useState(
    () =>
      typeof window !== "undefined" &&
      window.matchMedia("(pointer: coarse)").matches,
  );

// M3 (UX audit 2026-09-16): hint วิธีเลื่อนหน้าของ tool highlight บนจอสัมผัส (ช่วง
  // tool นี้ลากที่ไหนก็ไม่เลื่อน — gesture เป็นของ selection) แสดง 3 ครั้งแรกต่อ
  // session พอ ไม่รบกวนผู้ใช้ที่คุ้นแล้ว
  const coarseHlHintCountRef = useRef(0);
  const [coarseHlHintVisible, setCoarseHlHintVisible] = useState(false);

// จอสัมผัส + tool highlight — ลากเลือกข้อความเองผ่าน Pointer Events (ไม่พึ่ง
  // native selection ของ OS ที่ยึด gesture ปล่อยนิ้วไปแสดงเมนู/handles): ลาก → ปล่อย
  // = ไฮไลต์ทันที ผ่าน commitHighlight ชุดเดียวกับ desktop / preview ของ hook
  // (สร้างสดระหว่างลาก) ทดแทน liveMark ของ selectionchange ที่ใช้ไม่ได้ตอนนั้น
  const { previewRects: customSelPreview } = useCustomSelection({
    containerRef: mainRef,
    enabled: tool === "highlight" && coarseTouch,
    onCommit: handleCustomSelectionCommit,
  });

// ─── Comment (PLAN.md §6.3) ────────────────────────────────────────────────

/** N1: ชี้ mouse เหนือ annotation บนหน้า → เก็บ id ไว้แสดง tooltip (ใครทำ + โน้ต)
   *  hit-test ชุดเดียวกับการคลิกเลือก (ตัวบนสุดชนะ) — เปลี่ยน state เฉพาะเมื่อ id เปลี่ยน
   *  จึงไม่ re-render ทุก mousemove; ปิดช่วง tool ที่รับ pointer (วาด/ลบ), กดปุ่มค้าง
   *  หรือตอน popover ของ comment pin เปิดอยู่ (กัน tooltip ลอยทับ popover) */
  function handlePageHoverMove(
    e: ReactMouseEvent<HTMLDivElement>,
    pageIndex: number,
  ) {
    const frozen =
      tool === "draw" ||
      tool === "shape" ||
      tool === "erase" ||
      tool === "redact" ||
      tool === "pan";
    if (frozen || e.buttons !== 0 || openPinId !== null) {
      if (hoveredId !== null) setHoveredId(null);
      return;
    }
    const base = pageSizes[pageIndex];
    if (!base) return;
    const size = { width: base.width * scale, height: base.height * scale };
    const p = getPointerPercent(e, e.currentTarget);
    // เดินจากรายการหลังสุดก่อน (ตัวบนสุดชนะ) — for-loop ตรง ๆ ไม่สร้าง array ใหม่ต่อ mousemove
    let id: string | null = null;
    for (let k = visibleAnnotations.length - 1; k >= 0; k--) {
      const a = visibleAnnotations[k];
      if (a.pageIndex !== pageIndex || a.type === "COMMENT") continue; // pin มี popover ของตัวเองอยู่แล้ว
      // FIX-8: bbox pre-filter ก่อน hit-test แม่น — hitTestPath ของเส้น DRAW เป็น
      // O(points) ต่อเส้น ตัดรายการที่จุดอยู่ไกลทิ้งก่อนด้วย bbox + margin เผื่อ threshold
      // ของ hit-test (generic +4px, DRAW/SHAPE +6px — bbox ของเส้นขยายความหนาครึ่งหนึ่งแล้ว)
      const box = hoverBBoxPct.get(a.id);
      if (box) {
        const marginPx = 6;
        const mx = (marginPx / size.width) * 100;
        const my = (marginPx / size.height) * 100;
        if (
          p.x < box.x - mx ||
          p.x > box.x + box.width + mx ||
          p.y < box.y - my ||
          p.y > box.y + box.height + my
        ) {
          continue;
        }
      }
      if (hitTestAnnotation(a, p, size)) {
        id = a.id;
        break;
      }
    }
    setHoveredId((prev) => (prev === id ? prev : id));
  }

async function handleComposerSave() {
    const c = composer;
    if (!c || !draft.trim() || !user) return;
    setComposer(null);
    await handleCreateAnnotation(c.pageIndex, "COMMENT", {
      position: c.position,
      message: draft.trim(),
    });
  }

// ─── Scroll-to จาก sidebar (PLAN.md §6.4 — คำนวณ absolute ครั้งเดียว) ──────

function goToBookmark(b: BookmarkDTO) {
    // M1 (UX audit 2026-09-16): จอ < lg sidebar เป็น overlay — กระโดดแล้วปิดให้
    // เห็นเป้าหมายทันที ไม่ต้องปิดเองก่อน (deep link ผ่าน goToAnnotation ก็เช่นกัน)
    if (!window.matchMedia("(min-width: 1024px)").matches) setSidebarOpen(false);
    const el = pageWrapRefs.current[b.pageIndex];
    if (!el) return;
    const r = el.getBoundingClientRect();
    const pageTop = r.top + window.scrollY;
    // ดันจุด yOffset กลับมาชิดใต้ sticky header — pattern เดียวกับ goToAnnotation
    // ที่ดันขอบบน bbox (yOffset เก็บจาก "ขอบบนของสิ่งที่ดูอยู่" ตอนสร้าง กดแล้วจึงได้
    // มุมมองเดิมพอดี ไม่ต้องชดเชยครึ่งจอ)
    scrollToBelowHeader(pageTop + (r.height * b.yOffset) / 100);
  }

function goToAnnotation(a: AnnotationDTO) {
    // M1: จอ < lg sidebar เป็น overlay — กระโดดแล้วปิดให้ เห็นเป้าหมายทันที
    if (!window.matchMedia("(min-width: 1024px)").matches) setSidebarOpen(false);
    // คลิกใน sidebar = กระโดดไปหน้า + เลือกรายการนั้น (F1) — เลื่อนให้ขอบบน bbox
    // ของรายการอยู่ใต้ sticky header (เดิมเลื่อนไปขอบบนหน้าตรง ๆ เลยถูก header บัง
    // กรณีรายการอยู่ส่วนบนสุดของหน้า)
    setSelectedId(a.id);
    setPreviewData(null);
    setOpenPinId(null); // กระโดดไปเลือกรายการอื่น = ปิด popover ของ pin เดิมทิ้ง
    const el = pageWrapRefs.current[a.pageIndex];
    if (!el) return;
    const r = el.getBoundingClientRect();
    const boxPct = annotationBBox(a, { width: 100, height: 100 });
    scrollToBelowHeader(r.top + window.scrollY + (r.height * boxPct.y) / 100);
  }

/** คลิก comment pin = เปิด popover + เลือกรายการ (F1) */
  function handlePinToggle(id: string | null) {
    setOpenPinId(id);
    if (id) setSelectedId(id);
  }

/** คลิกรายการ overlay (TEXTBOX ฯลฯ) = เลือกรายการนั้น (F1) */
  function handleSelectAnnotation(id: string) {
    setSelectedId(id);
    setPreviewData(null);
    // เลือกรายการอื่น = ปิด popover ของ pin เดิม (คลิก pin จะไม่ผ่านที่นี่ — มัน toggle เอง)
    setOpenPinId(null);
  }

/** F13/A6: เข้าสู่โหมดแก้ไขข้อความ comment (null = ยกเลิก) — draft เริ่มจากข้อความปัจจุบัน */
  function startCommentEdit(id: string | null) {
    setEditingCommentId(id);
    if (id) {
      const a = annotations.find((x) => x.id === id && x.type === "COMMENT");
      setCommentEditDraft(a ? (a.data as CommentData).message : "");
    }
  }

// ─── Text box (F17/B2) ─────────────────────────────────────────────────────

/** เข้าสู่โหมดแก้ไขข้อความ TEXTBOX ของตัวเอง (double-click — null = ยกเลิก) */
  function startTextboxEdit(id: string | null) {
    setEditingTextboxId(id);
  }

/** บันทึกข้อความที่แก้ — reuse updateAnnotation ของ F1 (เจ้าของเท่านั้น การกันอยู่ที่ handler)
   *  segments (ตัวหนาเฉพาะส่วน) เก็บเฉพาะเมื่อยังมีส่วนที่เป็นตัวหนา ไม่งั้นเคลียร์ทิ้ง */
  function commitTextboxEdit(id: string, text: string, segments?: TextboxSegment[]) {
    const current = annotations.find((a) => a.id === id);
    if (!current || current.type !== "TEXTBOX") return;
    setEditingTextboxId(null);
    const hasBold = !!segments?.some((s) => s.bold);
    void handleUpdateAnnotation(id, {
      ...current.data,
      text,
      segments: hasBold ? segments : undefined,
    });
  }

/** บันทึกกล่องข้อความใหม่จาก composer ณ ตำแหน่งที่คลิก (ค่าทั้งหมดจากเมนูตั้งค่าของ tool) */
  function commitTextboxComposer(text: string, segments?: TextboxSegment[]) {
    const c = textboxComposer;
    if (!c) return;
    setTextboxComposer(null);
    const hasBold = !!segments?.some((s) => s.bold);
    void handleCreateAnnotation(c.pageIndex, "TEXTBOX", {
      position: c.position,
      text,
      color: textboxColor,
      fontSize: textboxFontSizePct,
      ...(textboxBold ? { bold: true } : {}),
      opacity: textboxOpacityPct / 100,
      align: textboxAlign,
      // กล่องกว้างคงที่ (สไตล์ Smallpdf) — บีบด้วยพื้นที่จริงถึงขอบขวาตอนสร้าง
      // ให้ตรงกับที่ editor แสดง (maxWidth ของ CSS clamp ให้อยู่แล้วระหว่างพิมพ์)
      width: Math.min(TEXTBOX_DEFAULT_WIDTH_PCT, textboxMaxWidthPct(c.position.x)),
      ...(hasBold ? { segments } : {}),
    });
  }

/** ตัวเลื่อนหน้า — scroll ไปต้นหน้าที่ระบุ (กลไกเดียวกับ bookmark/deep link:
   *  placeholder ทุกหน้ามีขนาดจริงจึงคำนวณ absolute scroll ได้เสมอ) */
  function goToPage(pageIndex: number) {
    const el = pageWrapRefs.current[pageIndex];
    if (!el) return;
    const r = el.getBoundingClientRect();
    scrollToBelowHeader(r.top + window.scrollY);
  }

// ─── Render ────────────────────────────────────────────────────────────────

// ค่าปากกาปัจจุบันรวมเป็นก้อนเดียว — ใช้ทั้ง live preview และตอนบันทึกเส้นใหม่
  const drawStyle = {
    color: drawColor,
    strokeWidthPct: drawWidthPct,
    opacity: drawOpacityPct / 100,
  };
  // ค่าตั้งตอนสร้างของ shape/textbox — ส่งลง PdfPage (stamp ใช้ตรงจุดสร้างใน viewer เอง)
  const shapeStyle = { color: shapeColor, strokeWidthPct: shapeWidthPct };
  const textboxStyle = {
    color: textboxColor,
    fontSizePct: textboxFontSizePct,
    bold: textboxBold,
    opacity: textboxOpacityPct / 100,
    align: textboxAlign,
    widthPct: TEXTBOX_DEFAULT_WIDTH_PCT,
  };
  // ความกว้างหน้าแรกที่ scale 1 (≈ pt ของ PDF) — ใช้แปลงหน่วย fontSize ระหว่าง % (ที่เก็บใน DB)
  // กับ px ที่แสดงใน UI (fallback 595 = ความกว้าง A4 ก่อนเอกสารโหลด)
  const basePageWidth = pageSizes[0]?.width ?? 595;

return (
    <div className="flex min-h-screen">
      {/* tool คลุมข้อความได้ (TEXT_SELECTION_TOOLS) — ซ่อนสี selection ของเบราว์เซอร์
          ให้เห็นแต่ preview มาร์ก/selection สีฟ้าของเรา (กรองแนวเส้นทางลากแล้ว
          สะอาดกว่า native) */}
      {TEXT_SELECTION_TOOLS.has(tool) && (
        <style>{`.textLayer span::selection, .textLayer br::selection { background: transparent; }`}</style>
      )}
      {/* UX review 2026-09-09: backdrop กันคลิกทะลุใต้ sidebar overlay (เฉพาะ < lg)
          z-[45] อยู่เหนือ header sticky z-40 แต่ใต้ aside z-50 / composer z-50 */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 z-[45] bg-slate-900/30 lg:hidden"
          aria-hidden
          onClick={() => setSidebarOpen(false)}
        />
      )}
      {/* lg+ = sticky แยกคอลัมน์ (เปิดแล้ว content ขยับไปข้าง ๆ ไม่บังกัน)
          / < lg = overlay เลื่อนเข้า-ออก กว้างเป็นสัดส่วนของจอกว้างกว่า 288px
          (ปิดบน desktop ใช้ lg:hidden ออกจาก flow → main เต็มจอ) */}
      <aside
        data-sidebar=""
        className={`sticky top-0 flex h-screen w-72 flex-col shrink-0 border-r border-slate-200 bg-white max-lg:fixed max-lg:left-0 max-lg:z-50 max-lg:w-[75vw] max-lg:max-w-72 max-lg:transition-transform max-lg:duration-200 ${
          sidebarOpen
            ? "max-lg:translate-x-0"
            : "max-lg:pointer-events-none max-lg:-translate-x-full lg:hidden"
        }`}
      >
        {/* M6: ปิด sidebar บนมือถือได้อีกทาง — overlay (z-50) กลบปุ่ม toggle ใน header
            (z-40) ไปด้วย เหลือทางออกเดิมคือจิ้ม backdrop 25% ขวา ซึ่งไม่ชัดเท่าปุ่มปิดตรง ๆ */}
        <div className="flex items-center justify-end px-2 pt-2 lg:hidden">
          <button
            type="button"
            aria-label="ปิดแผงข้าง"
            className={`flex h-11 w-11 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
            onClick={() => setSidebarOpen(false)}
          >
            <X className="h-5 w-5" />
          </button>
        </div>
        {/* min-h-0 flex-1 ให้ root h-full ของ sidebar อยู่ในคอลัมน์ flex โดยไม่ล้น h-screen */}
        <div className="min-h-0 flex-1">
          <AnnotationSidebar
            annotations={visibleAnnotations}
            bookmarks={optimisticBookmarks}
            fileId={file.id}
            userId={user?.userId ?? ""}
            userFilter={userFilter}
            users={users}
            onUserFilterChange={setUserFilter}
            replyCounts={replyCounts}
            onDeleteAnnotation={(id) => void handleDeleteAnnotation(id)}
            onUpdateAnnotation={(id, data) => {
              void handleUpdateAnnotation(id, data);
            }}
            onDeleteBookmark={(id) => void handleDeleteBookmark(id)}
            onAddSubBookmark={(parentId) => void handleAddSubBookmark(parentId)}
            onUpdateBookmark={(id, patch) => void handleUpdateBookmark(id, patch)}
            onGoToBookmark={goToBookmark}
            onGoToAnnotation={goToAnnotation}
            selectedId={selectedId}
          />
        </div>
      </aside>

<div className="min-w-0 flex-1">
        {/* แยกเป็นสองแถว: บน = ชื่อไฟล์ + ตัวเลื่อนหน้า/ซูม (กลาง) + หน้าสรุป,
            ล่าง = แถบ tool + undo/redo + bookmark/export (ชิดขวา) */}
        <header className="sticky top-0 z-40 border-b border-slate-200 bg-white">
          <div className="touch-44 flex flex-wrap items-center gap-2 px-4 py-2">
            {/* UX review 2026-09-09: สลับ sidebar (ทุกขนาดจอ — desktop ซ่อนเพื่อดู PDF เต็มจอได้) */}
            <button
              type="button"
              title="สลับแผงข้าง"
              aria-label={sidebarOpen ? "ซ่อนแผงข้าง" : "แสดงแผงข้าง"}
              aria-expanded={sidebarOpen}
              className={`shrink-0 rounded-lg border border-slate-300 px-2 py-2 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
              onClick={() => setSidebarOpen((o) => !o)}
            >
              <PanelLeft className="h-4 w-4" />
            </button>

{/* M6: ซ่อนชื่อไฟล์บนจอเล็ก (แถว title พับ 2 บรรทัดทำ header สูงเกินครึ่งจอ) */}
            <h1 className="hidden min-w-0 flex-1 truncate text-sm font-semibold sm:block">
              {file.title}
            </h1>

{/* ตัวเลื่อนหน้า < หน้า 1/12 > + ซูม −/%/+ — อยู่ด้วยกันกึ่งกลางแถว title (ซ้าย-ขวา flex-1 เท่ากัน) */}
            <div className="flex shrink-0 items-center gap-2">
              <div className="flex items-center rounded-lg border border-slate-300">
                <button
                  type="button"
                  aria-label="หน้าก่อนหน้า"
                  disabled={currentPage <= 0}
                  className={`px-2 py-2 text-slate-500 hover:bg-slate-100 disabled:opacity-40 disabled:hover:bg-transparent ${FOCUS_RING_CLS}`}
                  onClick={() => goToPage(currentPage - 1)}
                >
                  <ChevronLeft className="h-4 w-4" />
                </button>
                {/* L4: เลข 3 หลักล้น w-16 — ปล่อยกว้างตามเนื้อหา มีขั้นต่ำให้ตัวเลขไม่ขยับ */}
                <span className="w-auto min-w-[4.5rem] px-1 text-center text-xs tabular-nums">
                  หน้า {pageSizes.length ? currentPage + 1 : "–"}/{pageSizes.length}
                </span>
                <button
                  type="button"
                  aria-label="หน้าถัดไป"
                  disabled={currentPage >= pageSizes.length - 1}
                  className={`px-2 py-2 text-slate-500 hover:bg-slate-100 disabled:opacity-40 disabled:hover:bg-transparent ${FOCUS_RING_CLS}`}
                  onClick={() => goToPage(currentPage + 1)}
                >
                  <ChevronRight className="h-4 w-4" />
                </button>
              </div>
              <div className="flex items-center rounded-lg border border-slate-300">
                <button
                  type="button"
                  aria-label="ซูมออก"
                  className={`px-2 py-2 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
                  onClick={() => setScale((s) => clamp(Math.round((s - 0.25) * 100) / 100, 0.5, 3))}
                >
                  <ZoomOut className="h-4 w-4" />
                </button>
                <span className="w-12 text-center text-xs tabular-nums">
                  {Math.round(scale * 100)}%
                </span>
                <button
                  type="button"
                  aria-label="ซูมเข้า"
                  className={`px-2 py-2 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
                  onClick={() => setScale((s) => clamp(Math.round((s + 0.25) * 100) / 100, 0.5, 3))}
                >
                  <ZoomIn className="h-4 w-4" />
                </button>
              </div>
            </div>

<div className="flex flex-1 items-center justify-end gap-2">
              {/* F15/D2: หน้าสรุปหมายเหตุทั้งไฟล์ */}
              <Link
                href={`/annotate/${file.id}/summary`}
                title="หน้าสรุปหมายเหตุ"
                className={`rounded-lg border border-slate-300 px-2 py-2 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
              >
                <ClipboardList className="h-4 w-4" />
              </Link>
            </div>
          </div>

{/* UX review 2026-09-14 M5: จอ < lg ทั้งแถวเป็นแถวเดียวเลื่อนแนวนอนได้ (wrap เดิม
              ทำ header สูง ~32% ของจอมือถือ) — C1: เมนู dropdown/popup bookmark ย้ายไป
              createPortal (position:fixed ที่ document.body) แล้ว แถบจึงเป็น overflow-x-auto
              เสมอ ไม่ต้องสลับ overflow ตอนเปิดเมนู (สลับแล้ว scroll position รีเซ็ต เมนูเปิด
              นอกจอ และทั้ง app เอียงเลื่อนแนวนอนได้) */}
          <div className="relative">
          <div
            ref={toolbarRowRef}
            onScroll={syncToolbarEnd}
            className="touch-44 flex flex-wrap items-center gap-2 border-t border-slate-100 px-4 py-2 max-lg:flex-nowrap max-lg:overflow-x-auto"
          >

{/* แถบ tool — shape กับ stamp เป็น dropdown เลือกชนิด/preset ตรงที่ปุ่มเอง
              (F5/F18) — container ไม่ใช้ overflow-hidden เพื่อให้เมนูยื่นออกได้ มุมมน
              ของ active bg จึงจัดที่ปุ่มแรก/สุดท้ายแทน
              UX review 2026-09-09: บน desktop ปุ่ม wrap ภายในกรอบได้ / M5 2026-09-14:
              จอแคบเป็นแถวเดียว ไหลตามแถบทั้งแถวที่เลื่อนแนวนอน */}
          <div className="flex max-lg:shrink-0 flex-wrap gap-0.5 rounded-lg border border-slate-300 max-lg:flex-nowrap">
            {TOOLS.map(({ key, label, Icon }, i) => {
              const corner = i === 0 ? "rounded-l-lg" : i === TOOLS.length - 1 ? "rounded-r-lg" : "";
              const activeCls = `${
                tool === key ? "bg-primary text-white" : "text-slate-500 hover:bg-slate-100"
              } ${FOCUS_RING_CLS}`;

// Highlight — dropdown เลือกรูปแบบมาร์ก (4 แบบ) + สี; คลุดข้อความแล้วสร้างทันที
              if (key === "highlight") {
                const CurrentIcon =
                  HIGHLIGHT_STYLE_BTNS.find((s) => s.key === highlightStyle)?.Icon ?? Icon;
                return (
                  <div key={key} ref={highlightMenuRef} className="relative">
                    <button
                      type="button"
                      title={label}
                      aria-label={label}
                      aria-pressed={tool === "highlight"}
                      aria-haspopup="menu"
                      aria-expanded={highlightMenuOpen}
                      className={`flex items-center gap-0.5 px-2 py-2 transition ${activeCls}`}
                      onClick={(e) => {
                        openToolMenu(e.currentTarget);
                        // เรียก switchTool เสมอแม้เป็น tool เดิม — เคลียร์ popup บนหน้าที่ค้างเปิด
                        // (editor/แผง selection/popover) ไม่ให้ซ้อนกับเมนู; จำ intent เปิด/พับ
                        // ไว้ก่อนเพราะ switchTool ปิดเมนูทุกตัวก่อน
                        const reopen = tool !== "highlight" || !highlightMenuOpen;
                        switchTool("highlight");
                        if (reopen) setHighlightMenuOpen(true);
                      }}
                    >
                      <CurrentIcon className="h-4 w-4" />
                      <ChevronDown className="h-3 w-3" />
                    </button>
                    {highlightMenuOpen &&
                      menuPos &&
                      typeof document !== "undefined" &&
                      createPortal(
                      <div
                        data-tool-menu=""
                        aria-label="ตั้งค่าการมาร์กข้อความ"
                        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 sidebar/composer (z-50) และ backdrop (z-[45])
                          zIndex: 60,
                          // จอเตี้ย (มือถือแนวนอน) เมนูยาวเกินพื้นที่ใต้แถบ → เลื่อนภายในได้
                          maxHeight: Math.max(160, window.innerHeight - menuPos.top - 8),
                          overflowY: "auto",
                        }}
                      >
                        {HIGHLIGHT_STYLE_BTNS.map(({ key: sKey, label: sLabel, Icon: SIcon }) => (
                          <button
                            key={sKey}
                            type="button"
                            className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs font-medium transition ${FOCUS_RING_CLS} ${
                              highlightStyle === sKey
                                ? "bg-slate-100 text-slate-900"
                                : "text-slate-600 hover:bg-slate-100"
                            }`}
                            onClick={() => setHighlightStyle(sKey)}
                          >
                            <SIcon className="h-3.5 w-3.5 shrink-0" />
                            <span className="flex-1">{sLabel}</span>
                            {highlightStyle === sKey && <Check className="h-3.5 w-3.5 shrink-0" />}
                          </button>
                        ))}
                        <div className="my-1.5 border-t border-slate-100" />
                        <PanelRow>
                          <ColorSwatches value={highlightColor} onChange={setHighlightColor} />
                        </PanelRow>
                        <PanelRow label="ความทึบ">
                          <NumberCombo
                            value={highlightOpacityPct}
                            options={[25, 50, 75, 100]}
                            min={0}
                            max={100}
                            step={1}
                            suffix="%"
                            onChange={setHighlightOpacityPct}
                          />
                        </PanelRow>
                      </div>,
                      document.body
                    )}
                  </div>
                );
              }

// DRAW: ปุ่มวาดเส้น = dropdown เลือกชนิดปากกา (ปากกา/ไฮไลต์)
              if (key === "draw") {
                const CurrentPenIcon = DRAW_PEN_ICONS[drawPen];
                return (
                  <div key={key} ref={drawMenuRef} className="relative">
                    <button
                      type="button"
                      title={label}
                      aria-label={label}
                      aria-pressed={tool === "draw"}
                      aria-haspopup="menu"
                      aria-expanded={drawMenuOpen}
                      className={`flex items-center gap-0.5 px-2 py-2 transition ${activeCls}`}
                      onClick={(e) => {
                        openToolMenu(e.currentTarget);
                        // switchTool เสมอแม้เป็น tool เดิม — เคลียร์ popup บนหน้า (จำ intent ก่อน)
                        const reopen = tool !== "draw" || !drawMenuOpen;
                        switchTool("draw");
                        if (reopen) setDrawMenuOpen(true);
                      }}
                    >
                      <CurrentPenIcon className="h-4 w-4" />
                      <ChevronDown className="h-3 w-3" />
                    </button>
                    {drawMenuOpen &&
                      menuPos &&
                      typeof document !== "undefined" &&
                      createPortal(
                      <div
                        data-tool-menu=""
                        aria-label="ตั้งค่าปากกา"
                        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,
                          zIndex: 60,
                          maxHeight: Math.max(160, window.innerHeight - menuPos.top - 8),
                          overflowY: "auto",
                        }}
                      >
                        {(Object.keys(DRAW_PENS) as DrawPen[]).map((p) => {
                          const PenIcon = DRAW_PEN_ICONS[p];
                          return (
                            <button
                              key={p}
                              type="button"
                              className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs font-medium transition ${FOCUS_RING_CLS} ${
                                drawPen === p
                                  ? "bg-slate-100 text-slate-900"
                                  : "text-slate-600 hover:bg-slate-100"
                              }`}
                              onClick={() => {
                                setDrawPen(p);
                                // เลือก pen = รีเซ็ตค่ากลับเป็น preset ของ pen นั้น (เมนูเปิดค้างให้ปรับต่อ)
                                setDrawColor(DRAW_PENS[p].color);
                                setDrawWidthPct(DRAW_PENS[p].strokeWidthPct);
                                setDrawOpacityPct(DRAW_PENS[p].opacity * 100);
                              }}
                            >
                              <PenIcon className="h-3.5 w-3.5 shrink-0" />
                              <span className="flex-1">{DRAW_PENS[p].label}</span>
                              {drawPen === p && <Check className="h-3.5 w-3.5 shrink-0" />}
                            </button>
                          );
                        })}
                        <div className="my-1.5 border-t border-slate-100" />
                        <PanelRow>
                          <ColorSwatches value={drawColor} onChange={setDrawColor} />
                        </PanelRow>
                        <PanelRow label="ความหนา">
                          {/* แสดงเป็นหน่วยย่อ ×10 ของ % ความกว้างหน้า (4 = ปากกาเดิม 0.4%, 12 = ไฮไลต์เดิม 1.2%)
                              — toFixed กัน float artifact ของการแปลง ÷10/×10 รอบกลับ */}
                          <NumberCombo
                            value={Number((drawWidthPct * 10).toFixed(2))}
                            options={[1, 2, 4, 8, 12]}
                            min={1}
                            step={1}
                            onChange={(v) => setDrawWidthPct(v / 10)}
                          />
                        </PanelRow>
                        <PanelRow label="ความทึบ">
                          <NumberCombo
                            value={Math.round(drawOpacityPct)}
                            options={[25, 50, 75, 100]}
                            min={0}
                            max={100}
                            step={1}
                            suffix="%"
                            onChange={setDrawOpacityPct}
                          />
                        </PanelRow>
                        {/* M8: hint ไทยต้อง ≥11px + leading ไม่บีบ (สระซ้อนอ่านไม่ออกที่ 10px) */}
                        <p className="px-1 pt-1.5 text-[11px] leading-snug text-slate-500">
                          เมื่อวาดเส้นเกือบตรงแล้วปล่อยเมาส์ ระบบจะ Snap ให้เป็นเส้นตรงอัตโนมัติ — และถ้ากด Shift ค้างจะบังคับให้เส้นตรง
                        </p>
                      </div>,
                      document.body
                    )}
                  </div>
                );
              }

// F5/B1: ปุ่มรูปทรง = dropdown เลือกชนิดรูปทรง
              if (key === "shape") {
                return (
                  <div key={key} ref={shapeMenuRef} className="relative">
                    <button
                      type="button"
                      title={label}
                      aria-label={label}
                      aria-pressed={tool === "shape"}
                      aria-haspopup="menu"
                      aria-expanded={shapeMenuOpen}
                      className={`flex items-center gap-0.5 px-2 py-2 transition ${activeCls}`}
                      onClick={(e) => {
                        openToolMenu(e.currentTarget);
                        // switchTool เสมอแม้เป็น tool เดิม — เคลียร์ popup บนหน้า (จำ intent ก่อน)
                        const reopen = tool !== "shape" || !shapeMenuOpen;
                        switchTool("shape");
                        if (reopen) setShapeMenuOpen(true);
                      }}
                    >
                      <Icon className="h-4 w-4" />
                      <ChevronDown className="h-3 w-3" />
                    </button>
                    {shapeMenuOpen &&
                      menuPos &&
                      typeof document !== "undefined" &&
                      createPortal(
                      <div
                        data-tool-menu=""
                        aria-label="ตั้งค่ารูปทรง"
                        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,
                          zIndex: 60,
                          maxHeight: Math.max(160, window.innerHeight - menuPos.top - 8),
                          overflowY: "auto",
                        }}
                      >
                        {SHAPE_KIND_BTNS.map(({ key: kind, label: kindLabel, Icon: KindIcon }) => (
                          <button
                            key={kind}
                            type="button"
                            className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs font-medium transition ${FOCUS_RING_CLS} ${
                              shapeKind === kind
                                ? "bg-slate-100 text-slate-900"
                                : "text-slate-600 hover:bg-slate-100"
                            }`}
                            onClick={() => setShapeKind(kind)}
                          >
                            <KindIcon className="h-3.5 w-3.5 shrink-0" />
                            <span className="flex-1">{kindLabel}</span>
                            {shapeKind === kind && <Check className="h-3.5 w-3.5 shrink-0" />}
                          </button>
                        ))}
                        <div className="my-1.5 border-t border-slate-100" />
                        <PanelRow>
                          <ColorSwatches value={shapeColor} onChange={setShapeColor} />
                        </PanelRow>
                        <PanelRow label="ความหนา">
                          {/* หน่วยย่อ ×10 ของ % ความกว้างหน้า — เดียวกับความหนาของปากกา */}
                          <NumberCombo
                            value={Number((shapeWidthPct * 10).toFixed(2))}
                            options={[1, 2, 4, 8, 12]}
                            min={1}
                            step={1}
                            onChange={(v) => setShapeWidthPct(v / 10)}
                          />
                        </PanelRow>
                      </div>,
                      document.body
                    )}
                  </div>
                );
              }

// F18/B5: ปุ่มตรายาง = dropdown เลือก preset
              if (key === "stamp") {
                return (
                  <div key={key} ref={stampMenuRef} className="relative">
                    <button
                      type="button"
                      title={label}
                      aria-label={label}
                      aria-pressed={tool === "stamp"}
                      aria-haspopup="menu"
                      aria-expanded={stampMenuOpen}
                      className={`flex items-center gap-0.5 px-2 py-2 transition ${corner} ${activeCls}`}
                      onClick={(e) => {
                        openToolMenu(e.currentTarget);
                        // switchTool เสมอแม้เป็น tool เดิม — เคลียร์ popup บนหน้า (จำ intent ก่อน)
                        const reopen = tool !== "stamp" || !stampMenuOpen;
                        switchTool("stamp");
                        if (reopen) setStampMenuOpen(true);
                      }}
                    >
                      <Icon className="h-4 w-4" />
                      <ChevronDown className="h-3 w-3" />
                    </button>
                    {stampMenuOpen &&
                      menuPos &&
                      typeof document !== "undefined" &&
                      createPortal(
                      <div
                        data-tool-menu=""
                        aria-label="ตั้งค่าตรายาง"
                        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,
                          zIndex: 60,
                          maxHeight: Math.max(160, window.innerHeight - menuPos.top - 8),
                          overflowY: "auto",
                        }}
                      >
                        {STAMP_PRESETS.map((preset) => (
                          <button
                            key={preset}
                            type="button"
                            className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs font-medium transition ${FOCUS_RING_CLS} ${
                              // L1: รายการที่เลือก = state "active" ใช้ slate เหมือนเมนูอื่น
                              // (แดงสื่อ "อันตราย/ถาวร" เกินเหตุ)
                              stampPreset === preset
                                ? "bg-slate-100 text-slate-900"
                                : "text-slate-600 hover:bg-slate-100"
                            }`}
                            onClick={() => setStampPreset(preset)}
                          >
                            <span className="flex-1">{preset}</span>
                            {stampPreset === preset && <Check className="h-3.5 w-3.5 shrink-0" />}
                          </button>
                        ))}
                        <div className="my-1.5 border-t border-slate-100" />
                        <PanelRow>
                          <ColorSwatches value={stampColor} onChange={setStampColor} />
                        </PanelRow>
                        <PanelRow label="ขนาด">
                          {/* ความกว้างกรอบตรายางเป็น % ของความกว้างหน้า */}
                          <NumberCombo
                            value={stampScalePct}
                            options={[12, 18, 25, 40]}
                            min={5}
                            max={60}
                            step={1}
                            suffix="%"
                            onChange={setStampScalePct}
                          />
                        </PanelRow>
                      </div>,
                      document.body
                    )}
                  </div>
                );
              }

// F17/B2: ปุ่มกล่องข้อความ = dropdown ตั้งค่าสี/ขนาดฟอนต์
              if (key === "textbox") {
                return (
                  <div key={key} ref={textboxMenuRef} className="relative">
                    <button
                      type="button"
                      title={label}
                      aria-label={label}
                      aria-pressed={tool === "textbox"}
                      aria-haspopup="menu"
                      aria-expanded={textboxMenuOpen}
                      className={`flex items-center gap-0.5 px-2 py-2 transition ${activeCls}`}
                      onClick={(e) => {
                        openToolMenu(e.currentTarget);
                        // switchTool เสมอแม้เป็น tool เดิม — เคลียร์ popup บนหน้า (จำ intent ก่อน)
                        const reopen = tool !== "textbox" || !textboxMenuOpen;
                        switchTool("textbox");
                        if (reopen) setTextboxMenuOpen(true);
                      }}
                    >
                      <Icon className="h-4 w-4" />
                      <ChevronDown className="h-3 w-3" />
                    </button>
                    {textboxMenuOpen &&
                      menuPos &&
                      typeof document !== "undefined" &&
                      createPortal(
                      <div
                        data-tool-menu=""
                        aria-label="ตั้งค่ากล่องข้อความ"
                        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,
                          zIndex: 60,
                          maxHeight: Math.max(160, window.innerHeight - menuPos.top - 8),
                          overflowY: "auto",
                        }}
                      >
                        <PanelRow>
                          <ColorSwatches value={textboxColor} onChange={setTextboxColor} />
                        </PanelRow>
                        <PanelRow label="ขนาด">
                          {/* แสดง/กรอกเป็น px ตามขนาดหน้าจริง (scale 1 ≈ pt) — เก็บใน DB เป็น %
                              ของความกว้างหน้าเหมือนเดิม (zoom ไม่ทำให้ตัวเลขเปลี่ยน) */}
                          <NumberCombo
                            value={Number(((textboxFontSizePct / 100) * basePageWidth).toFixed(1))}
                            options={[10, 12, 14, 18, 24]}
                            min={6}
                            max={48}
                            step={1}
                            suffix="px"
                            onChange={(v) => setTextboxFontSizePct((v / basePageWidth) * 100)}
                          />
                        </PanelRow>
                        <PanelRow label="ความทึบ">
                          <NumberCombo
                            value={Math.round(textboxOpacityPct)}
                            options={[25, 50, 75, 100]}
                            min={0}
                            max={100}
                            step={1}
                            suffix="%"
                            onChange={setTextboxOpacityPct}
                          />
                        </PanelRow>
                        <PanelRow label="ตัวหนา">
                          <button
                            type="button"
                            aria-label="สลับตัวหนา"
                            aria-pressed={textboxBold}
                            className={`flex items-center justify-center rounded-md border px-3 py-1 transition ${FOCUS_RING_CLS} ${
                              textboxBold
                                ? "border-primary bg-primary text-white"
                                : "border-slate-300 bg-white text-slate-500 hover:bg-slate-100"
                            }`}
                            onClick={() => setTextboxBold((o) => !o)}
                          >
                            {/* B ทึบ — แทน icon Bold แบบเส้นขอบ (lucide ไม่มีรูปทึบ) */}
                            <span aria-hidden className="text-[13px] font-black leading-none">
                              B
                            </span>
                          </button>
                        </PanelRow>
                        <PanelRow label="จัดแนว">
                          <div className="flex overflow-hidden rounded-md border border-slate-300">
                            {(
                              [
                                ["left", AlignLeft, "ชิดซ้าย"],
                                ["center", AlignCenter, "กึ่งกลาง"],
                                ["right", AlignRight, "ชิดขวา"],
                              ] as const
                            ).map(([a, AlignIcon, alignLabel]) => (
                              <button
                                key={a}
                                type="button"
                                aria-label={`จัดแนว${alignLabel}`}
                                aria-pressed={textboxAlign === a}
                                className={`px-2 py-1 transition ${FOCUS_RING_CLS} ${
                                  textboxAlign === a
                                    ? "bg-primary text-white"
                                    : "text-slate-500 hover:bg-slate-100"
                                }`}
                                onClick={() => setTextboxAlign(a)}
                              >
                                <AlignIcon className="h-3.5 w-3.5" />
                              </button>
                            ))}
                          </div>
                        </PanelRow>
                      </div>,
                      document.body
                    )}
                  </div>
                );
              }

return (
                <button
                  key={key}
                  type="button"
                  title={label}
                  aria-label={label}
                  aria-pressed={tool === key}
                  className={`px-2 py-2 transition ${corner} ${activeCls}`}
                  onClick={() => switchTool(key)}
                >
                  <Icon className="h-4 w-4" />
                </button>
              );
            })}
          </div>

{/* H3 (UX audit 2026-09-16): จอสัมผัสไม่มี hover อ่าน title ไม่ได้ — แสดงชื่อ tool
              ที่กำลังใช้เป็นข้อความถัดกลุ่มปุ่ม (จอ ≥ lg มี tooltip จาก title อยู่แล้ว)
              คำเตือน redaction ย้ายไปเป็นแถบเตือนใต้ header แสดงทุกขนาดจอแทน (H2) */}
          <span
            aria-hidden
            className="hidden max-lg:block shrink-0 text-xs font-medium text-slate-600"
          >
            {TOOLS.find((t) => t.key === tool)?.label}
          </span>

{/* F2: Undo/Redo — ติดกลุ่มปุ่ม tool ในแถวเดียวกัน, disabled ตาม stack
              M5: จอ < lg สั่ง order-first ให้อยู่หัวแถวเลื่อน — มองเห็นเสมอโดยไม่ต้อง
              เลื่อนแถบ (undo คือทางแก้พลาดหลักของจอสัมผัส) จอ ≥ lg ไม่มี order
              ลำดับ/หน้าตาเดิมทุกประการ */}
          <div className="flex max-lg:order-first max-lg:shrink-0 items-center rounded-lg border border-slate-300">
            <button
              type="button"
              title="Undo (Ctrl+Z)"
              aria-label="ย้อนการกระทำล่าสุด"
              disabled={!canUndo}
              className={`px-2 py-2 text-slate-500 hover:bg-slate-100 disabled:opacity-40 disabled:hover:bg-transparent ${FOCUS_RING_CLS}`}
              onClick={() => void undoHistory()}
            >
              <Undo2 className="h-4 w-4" />
            </button>
            <button
              type="button"
              title="Redo (Ctrl+Shift+Z)"
              aria-label="ทำซ้ำการกระทำ"
              disabled={!canRedo}
              className={`px-2 py-2 text-slate-500 hover:bg-slate-100 disabled:opacity-40 disabled:hover:bg-transparent ${FOCUS_RING_CLS}`}
              onClick={() => void redoHistory()}
            >
              <Redo2 className="h-4 w-4" />
            </button>
          </div>

{/* N2: ปุ่ม 🔖 เปิด popup บันทึก bookmark — ชื่อ/โน้ต/วางระดับบนสุดหรือใต้หัวข้อ
              (อยู่แถบ tool ชิดขวา — popup เปิดลงด้านล่างทับหน้าเอกสาร)
              M2: จอ < lg ให้อยู่หัวแถวเคียง undo (bookmark เป็นส่วนของ flow หลัก
              highlight → comment → bookmark แต่เดิมถูกดันไปท้ายสุดของแถบเลื่อน) */}
          <div ref={bookmarkWrapRef} className="relative ml-auto max-lg:order-first max-lg:ml-0 max-lg:shrink-0">
            <button
              ref={bookmarkBtnRef}
              type="button"
              title={`เพิ่ม bookmark หน้า ${currentPage + 1} (B)`}
              aria-label={`เพิ่ม bookmark หน้า ${currentPage + 1} (B)`}
              disabled={!user}
              onClick={openBookmarkComposer}
              className={`rounded-lg border border-slate-300 px-2 py-2 text-slate-500 hover:bg-slate-100 disabled:opacity-40 ${FOCUS_RING_CLS}`}
            >
              {/* M6: ✓ เขียว 1.5 วิหลังบันทึกสำเร็จ — sidebar ปิดอยู่ก็รู้ว่าเซฟแล้ว */}
              {bookmarkSaved ? (
                <Check className="h-4 w-4 text-emerald-500" />
              ) : (
                <BookmarkPlus className="h-4 w-4" />
              )}
            </button>
            {bookmarkComposer &&
              bookmarkPos &&
              typeof document !== "undefined" &&
              createPortal(
              <div
                data-tool-menu=""
                className="w-72 rounded-lg border border-slate-200 bg-white p-3 text-xs shadow-xl"
                style={{
                  position: "fixed",
                  left: bookmarkPos.left,
                  top: bookmarkPos.top,
                  zIndex: 60,
                  maxHeight: Math.max(160, window.innerHeight - bookmarkPos.top - 8),
                  overflowY: "auto",
                }}
                onClick={(e) => e.stopPropagation()}
              >
                <p className="text-[11px] font-semibold text-slate-700">
                  บันทึก bookmark — หน้า {bookmarkComposer.pageIndex + 1}
                </p>
                {/* บอกจุดที่ bookmark จะชี้ (เก็บจากตำแหน่งที่กำลังดูอยู่ตอนเปิด popup)
                    กันความเข้าใจผิดว่าชี้ที่หัวข้อที่ตั้งชื่อไว้ */}
                <p className="mt-0.5 text-[11px] text-slate-500">
                  จะชี้ที่: หน้า {bookmarkComposer.pageIndex + 1} ·{" "}
                  {bookmarkComposer.yOffset <= 25
                    ? "ส่วนบน"
                    : bookmarkComposer.yOffset <= 75
                      ? "ราวกลาง"
                      : "ส่วนล่าง"}{" "}
                  ของหน้า
                </p>
                <input
                  autoFocus
                  onFocus={(e) => e.target.select()} // เลือกข้อความ default ทั้งหมด — พิมพ์ทับ/Enter ยอมรับได้ทันที
                  maxLength={MAX_BOOKMARK_TITLE_CHARS}
                  value={bookmarkComposer.title}
                  onChange={(e) =>
                    setBookmarkComposer({ ...bookmarkComposer, title: e.target.value })
                  }
                  onKeyDown={(e) => {
                    e.stopPropagation(); // ไม่ให้ปุ่มใน input ชนคีย์ลัดของ viewer
                    if (e.key === "Enter") void handleSaveBookmark();
                    if (e.key === "Escape") setBookmarkComposer(null);
                  }}
                  placeholder={`ชื่อหัวข้อ (เว้นว่าง = "หน้า ${bookmarkComposer.pageIndex + 1}")`}
                  className="mt-2 w-full rounded-md border border-slate-300 px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-slate-400"
                />
                <textarea
                  rows={2}
                  maxLength={MAX_BOOKMARK_NOTE_CHARS}
                  value={bookmarkComposer.note}
                  onChange={(e) =>
                    setBookmarkComposer({ ...bookmarkComposer, note: e.target.value })
                  }
                  onKeyDown={(e) => {
                    e.stopPropagation();
                    if (e.key === "Escape") setBookmarkComposer(null);
                    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
                      void handleSaveBookmark();
                    }
                  }}
                  placeholder="โน้ต (ไม่บังคับ)"
                  className="mt-1.5 w-full resize-none rounded-md border border-slate-300 px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-slate-400"
                />
                <p className="mt-1.5 text-[11px] text-slate-400">วางที่</p>
                <Select
                  value={bookmarkComposer.parentId ?? ""}
                  onChange={(e) =>
                    setBookmarkComposer({
                      ...bookmarkComposer,
                      parentId: e.target.value || null,
                    })
                  }
                  onKeyDown={(e) => e.stopPropagation()}
                  className="mt-0.5 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-slate-400"
                >
                  <option value="">ระดับบนสุด (หมุดหัวข้อใหญ่)</option>
                  {optimisticBookmarks
                    // เป้าหมายของ bookmark ใหม่ = ระดับ 1–2 (สร้างแล้วรวมกัน ≤ 3 ระดับ)
                    .filter((b) => bookmarkDepthOf(b) < 3)
                    // M7: เรียงตามลำดับหน้าเหมือน sidebar (N5) + บอกเลขหน้าใน option
                    // ช่วยหาหัวข้อแม่บน select เนทีฟของ iPad ที่ไม่มีอย่างอื่นให้สแกน
                    .sort(byPageOrder)
                    .map((h) => (
                      <option key={h.id} value={h.id}>
                        ใต้ "{h.title}" (หน้า {h.pageIndex + 1})
                      </option>
                    ))}
                </Select>
                {bookmarkError && (
                  <p className="mt-1.5 rounded bg-red-50 px-2 py-1 text-[11px] text-red-600">
                    {bookmarkError}
                  </p>
                )}
                <div className="mt-2.5 flex justify-end gap-1.5 text-[11px]">
                  <button
                    type="button"
                    className={`rounded px-2.5 py-1 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
                    onClick={() => setBookmarkComposer(null)}
                  >
                    ยกเลิก
                  </button>
                  <button
                    type="button"
                    disabled={bookmarkSaving}
                    className={`rounded bg-primary px-2.5 py-1 font-medium text-white hover:bg-primary/85 disabled:opacity-60 ${FOCUS_RING_CLS}`}
                    onClick={() => void handleSaveBookmark()}
                  >
                    {bookmarkSaving ? "กำลังบันทึก…" : "บันทึก"}
                  </button>
                </div>
              </div>,
              document.body
            )}
          </div>

{/* F8/C1: export PDF ฝัง annotation (redaction ติดไปเสมอ — D4) */}
          <button
            type="button"
            title="Export PDF พร้อม annotation"
            aria-label="Export PDF พร้อม annotation"
            disabled={exporting}
            className={`max-lg:shrink-0 rounded-lg border border-slate-300 px-2 py-2 text-slate-500 hover:bg-slate-100 disabled:opacity-50 ${FOCUS_RING_CLS}`}
            onClick={() => void handleExportPdf()}
          >
            <Download className={`h-4 w-4 ${exporting ? "animate-pulse" : ""}`} />
          </button>
          </div>
          {/* M5: เงาขวาบอกว่าเลื่อนต่อได้ — หายเมื่อถึงท้ายแถบ (จอ ≥ lg ไม่มีการ scroll) */}
          {!toolbarAtEnd && (
            <div className="pointer-events-none absolute inset-y-0 right-0 w-6 bg-gradient-to-r from-transparent to-white lg:hidden" />
          )}
          </div>
        </header>

<main
          ref={mainRef}
          className="space-y-4 px-4 py-4"
          style={{
            cursor:
              tool === "pan"
                ? grabbing
                  ? "grabbing"
                  : "grab"
                : tool === "erase"
                  ? ERASER_CURSOR
                  : undefined,
          }}
          onPointerDown={(e) => {
            if (tool !== "pan" || e.button !== 0) return;
            panRef.current = { x: e.clientX, y: e.clientY };
            e.currentTarget.setPointerCapture(e.pointerId);
            setGrabbing(true);
          }}
          onPointerMove={(e) => {
            const p = panRef.current;
            if (!p) return;
            window.scrollBy(p.x - e.clientX, p.y - e.clientY);
            panRef.current = { x: e.clientX, y: e.clientY };
          }}
          onPointerUp={() => {
            panRef.current = null;
            setGrabbing(false);
          }}
          onPointerCancel={() => {
            panRef.current = null;
            setGrabbing(false);
          }}
        >
          {/* M6: hint ไฟล์สแกน — ทุกหน้าที่ render แล้วไม่มี span เลย (virtualization เห็นเฉพาะ
              หน้าใกล้ viewport — ไฟล์ผสมหน้าสแกน/หน้า text จึงพูดแบบระดับ "หน้าที่เปิดดู" เท่านั้น)
              โชว์เฉพาะตอน tool highlight เพื่อไม่รบกวน tool อื่น — คดีศาลมี PDF สแกนเยอะ */}
          {tool === "highlight" &&
            Object.keys(pageSpanCount).length > 0 &&
            Object.values(pageSpanCount).every((n) => n === 0) && (
              <p className="mb-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
                หน้าที่เปิดดูเป็นภาพสแกน ไม่มีข้อความให้คลุมไฮไลต์ — ใช้การวาดเส้นหรือกล่องข้อความแทนได้
              </p>
            )}
          {/* H2 (UX audit 2026-09-16): คำเตือน redaction ย้ายมาเป็นแถบใต้ header แสดงทุก
              ขนาดจอ — เดิมเป็น hidden lg:block ผู้ใช้ iPad portrait (อุปกรณ์หลัก) ไม่เห็น
              เลย ทั้งเป็นความเสี่ยงข้อมูลส่วนบุคคลรั่วถ้าเผยแพร่ไฟล์ต้นฉบับโดยไม่ export */}
          {tool === "redact" && (
            <p className="mb-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-relaxed text-amber-700">
              การปิดพรางบนหน้าจอเป็นการชั่วคราว — ข้อความเดิมยังคัดลอกได้ ต้องกด
              "Export PDF" เพื่อปิดพรางถาวรก่อนนำไฟล์ไปเผยแพร่
            </p>
          )}
          {/* M3: จอสัมผัส + tool highlight — อธิบายวิธีเลื่อนหน้า กันอาการ "เลื่อนไม่ได้
              = แอปค้าง" (แสดง 3 ครั้งแรกต่อ session) */}
          {tool === "highlight" && coarseTouch && coarseHlHintVisible && (
            <p className="mb-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs leading-relaxed text-slate-600">
              โหมดมาร์กข้อความ: ลากบนหน้าเพื่อคลุมข้อความ ลากชิดขอบบน/ล่างจอเพื่อเลื่อนหน้า
              หรือสลับเป็นเครื่องมืออื่นเพื่อปัดเลื่อนตามปกติ
            </p>
          )}
          {pageSizes.length === 0 ? (
            loadError ? (
              <div className="flex h-[70vh] items-center justify-center px-6">
                <p className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                  {loadError}
                </p>
              </div>
            ) : (
              <div className="flex h-[70vh] items-center justify-center text-sm text-slate-400">
                กำลังโหลดเอกสาร…
              </div>
            )
          ) : (
            pageSizes.map((size, i) => {
              const w = Math.ceil(size.width * scale);
              const h = Math.ceil(size.height * scale);
              const mounted = renderPages.has(i);
              // N3: เนื้อหาหน้า = pdf (pdfjs) หรือรูปภาพ — เลือกจาก state ที่โหลดแล้ว
              const content: PageContent | null =
                pdfjs && doc
                  ? { kind: "pdf", pdfjs, doc }
                  : imageSrcs
                    ? { kind: "image", src: imageSrcs[i] ?? null }
                    : null;
              return (
                <div
                  key={i}
                  data-page={i}
                  ref={(el) => {
                    pageWrapRefs.current[i] = el;
                  }}
                  className="relative mx-auto bg-white shadow-md"
                  style={{ width: w, height: h }}
                  onMouseUp={() => handleMouseUpOnPage(i)}
                  onClick={(e) => handlePageClick(e, i, e.currentTarget)}
                  onMouseDown={(e) => {
                    // จุดเริ่มเส้นทางลากของ tool คลุมข้อความ (กรอง selection rects)
                    if (!TEXT_SELECTION_TOOLS.has(tool)) return;
                    selDragStartRef.current = { x: e.clientX, y: e.clientY };
                    selDragEndRef.current = { x: e.clientX, y: e.clientY };
                  }}
                  onMouseMove={(e) => {
                    // ตำแหน่งเมาส์ล่าสุดระหว่างลากค้างปุ่ม (buttons=1)
                    if (TEXT_SELECTION_TOOLS.has(tool) && e.buttons === 1) {
                      selDragEndRef.current = { x: e.clientX, y: e.clientY };
                    }
                    handlePageHoverMove(e, i);
                  }}
                  onMouseLeave={() => setHoveredId(null)}
                >
                  {mounted && content ? (
                    <PdfPage
                      content={content}
                      pageNumber={i + 1}
                      width={w}
                      height={h}
                      tool={tool}
                      shapeKind={shapeKind}
                      drawStyle={drawStyle}
                      shapeStyle={shapeStyle}
                      textboxStyle={textboxStyle}
                      pageBaseWidth={basePageWidth}
                      liveMark={customSelPreview ?? liveMark}
                      liveMarkStyle={{
                        color: highlightColor,
                        style: highlightStyle,
                        ...(highlightOpacityPct < 100
                          ? { opacity: highlightOpacityPct / 100 }
                          : {}),
                      }}
                      selectPreview={selectPreview}
                      annotations={visibleAnnotations
                        .filter((a) => a.pageIndex === i)
                        // ระหว่างลาก: แทน data ด้วย preview ให้ layer เดิม (highlight/ink/pin) render ตาม
                        .map((a) =>
                          a.id === selectedId && previewData
                            ? { ...a, data: previewData }
                            : a,
                        )}
                      replies={visibleReplies}
                      openPinId={openPinId}
                      ownUserId={user?.userId ?? ""}
                      selectedId={selectedId}
                      editingCommentId={editingCommentId}
                      commentEditDraft={commentEditDraft}
                      onCommentEditDraft={setCommentEditDraft}
                      onStartCommentEdit={startCommentEdit}
                      textbox={{
                        composer: textboxComposer,
                        commitComposer: commitTextboxComposer,
                        cancelComposer: () => setTextboxComposer(null),
                        editingId: editingTextboxId,
                        startEdit: startTextboxEdit,
                        commitEdit: commitTextboxEdit,
                      }}
                      onSelectAnnotation={handleSelectAnnotation}
                      onPinToggle={handlePinToggle}
                      onAnnotationPreview={setPreviewData}
                      onAnnotationUpdate={(id, data) => {
                        void handleUpdateAnnotation(id, data);
                      }}
                      onSetResolved={(id, resolved) => {
                        void handleSetResolved(id, resolved);
                      }}
                      onAnnotationBookmark={handleAnnotationBookmark}
                      onCreateReply={(annotationId, message) =>
                        handleCreateReply(annotationId, message)
                      }
                      onDeleteReply={(id) => {
                        void handleDeleteReply(id);
                      }}
                      onStrokeEnd={(points, widths) => {
                        if (!user) return;
                        void handleCreateAnnotation(i, "DRAW", {
                          strokeColor: drawStyle.color,
                          strokeWidth: drawStyle.strokeWidthPct,
                          paths: points,
                          opacity: drawStyle.opacity,
                          ...(widths ? { widths } : {}),
                          ...(drawPen === "highlighter" ? { pen: drawPen } : {}),
                        });
                      }}
                      onShapeEnd={(data) => {
                        if (!user) return;
                        void handleCreateAnnotation(i, "SHAPE", data);
                      }}
                      onRedactionEnd={(data) => {
                        if (!user) return;
                        void handleCreateAnnotation(i, "REDACTION", data);
                      }}
                      onTextLayerRendered={handleTextLayerRendered}
                      onErase={(id) => void handleDeleteAnnotation(id)}
                    />
                  ) : null}

{/* N1: tooltip เมื่อ mouse ชี้ annotation — ใครทำ + โน้ตที่ฝากไว้
                      (z-5 เหนือ pins, pointer-events none ไม่บังการคลิกใด ๆ) */}
                  {(() => {
                    const hovered = visibleAnnotations.find((a) => a.id === hoveredId);
                    // รายการที่ชี้ถูกเลือกอยู่ (แผง selection F1 เปิดแถวนั้นแล้ว) = ไม่โชว์
                    // tooltip ซ้อนอีกกล่อง — เจอตอนลากคลุมจบ auto-select โผล่ทันทีที่ตำแหน่งเคอร์เซอร์
                    if (!hovered || hovered.pageIndex !== i || hovered.id === selectedId) return null;
                    const box = annotationBBox(hovered, { width: w, height: h });
                    const note = annotationNote(hovered);
                    // เหลือพื้นที่ขวาของ bbox ไม่พอ (~264px) → วางทางซ้ายแทน
                    const flipLeft = box.x + box.width + 264 > w;
                    return (
                      <div
                        className="pointer-events-none absolute z-[5] w-max max-w-[256px] rounded-lg border border-slate-200 bg-white p-2 text-xs shadow-xl"
                        style={{
                          ...(flipLeft
                            ? { right: w - box.x + 8 }
                            : { left: box.x + box.width + 8 }),
                          top: Math.max(box.y - 4, 2),
                        }}
                      >
                        <p className="font-medium text-slate-700">
                          {annotationTypeLabel(hovered)} <span className="text-slate-300">·</span>{" "}
                          {hovered.userName}
                        </p>
                        {note && (
                          <p className="mt-0.5 whitespace-pre-wrap break-words leading-relaxed text-slate-500">
                            {note}
                          </p>
                        )}
                      </div>
                    );
                  })()}

</div>
              );
            })
          )}
        </main>
      </div>

{composer && (
        <div
          className="comment-composer fixed z-50 w-72 rounded-lg border border-slate-200 bg-white p-3 shadow-xl"
          style={{
            left: clamp(composer.x, 8, Math.max(8, window.innerWidth - 304)),
            top: clamp(composer.y, 8, Math.max(8, window.innerHeight - 180)),
          }}
        >
          <textarea
            autoFocus
            rows={3}
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            placeholder="พิมพ์ข้อความ comment"
            className="w-full resize-none rounded border border-slate-300 p-2 text-xs leading-relaxed focus:outline-none focus:ring-2 focus:ring-slate-400"
            onKeyDown={(e) => {
              if (e.key === "Escape") setComposer(null);
              if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
                void handleComposerSave();
              }
            }}
          />
          <div className="mt-2 flex justify-end gap-2 text-xs">
            <button
              type="button"
              className={`coarse-36 rounded px-2 py-1 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
              onClick={() => setComposer(null)}
            >
              ยกเลิก
            </button>
            <button
              type="button"
              disabled={!draft.trim()}
              className={`coarse-36 rounded bg-primary px-2 py-1 font-medium text-white disabled:opacity-40 ${FOCUS_RING_CLS}`}
              onClick={() => void handleComposerSave()}
            >
              บันทึก
            </button>
          </div>
        </div>
      )}

{/* F8: export พัง + H1: action พัง — toast แจ้งในหน้า (portal ตามกติกา fixed UI
          ของ rules/pdf-viewer.md) วางซ้อนเป็นคอลัมน์เดียว ไม่ทับกันเมื่อเกิดพร้อมกัน */}
      {(exportError || actionError) &&
        typeof document !== "undefined" &&
        createPortal(
          <div className="fixed bottom-4 right-4 z-[60] flex max-w-sm flex-col gap-2">
            {actionError && (
              <div
                role="alert"
                className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 shadow-xl"
              >
                {actionError}
              </div>
            )}
            {exportError && (
              <div
                role="alert"
                className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 shadow-xl"
              >
                {exportError}
              </div>
            )}
          </div>,
          document.body,
        )}
    </div>
  );
}