eCourt-note/components/pdf/AnnotationSelectionLayer.tsx

"use client";

import {
  useEffect,
  useRef,
  useState,
  type PointerEvent as ReactPointerEvent,
} from "react";
import {
  AlignCenter,
  AlignLeft,
  AlignRight,
  BookmarkPlus,
  Pencil,
  RotateCw,
  Trash2,
} from "lucide-react";

import type {
  AnnotationData,
  AnnotationDTO,
  CommentData,
  HighlightData,
  HighlightStyle,
  TextboxData,
  TextboxSegment,
} from "@/db/schema";
import {
  COMMENT_PIN_COARSE_SIZE_PX,
  COMMENT_PIN_SIZE_PX,
  TEXTBOX_MAX_WIDTH_PCT,
  annotationBBox,
  clampStampIntoPage,
  commentPinBoxPct,
  commentPinBoxPx,
  rotatePoint,
  scaleAnnotationData,
  stampRect,
  translateAnnotationData,
} from "@/utils/geometry";
import {
  clamp,
  getPointerPercent,
  type Point,
  type Rect,
  type Size,
} from "@/utils/coordinates";
import {
  annotationTypeLabel,
  measureStampText,
  STAMP_COLOR,
} from "@/utils/annotation-display";
import { ColorSwatches, HIGHLIGHT_STYLE_BTNS, NumberCombo, PanelRow } from "./ToolControls";

/** Patch ของตัวควบคุมเล็กในแผง selection / editor ข้อความ — ส่งเฉพาะ field ที่แตะ
 *  ให้ viewer ผสานเข้ากับ data ล่าสุด**ตอนถึงคิว update** ไม่ใช่ snapshot ของ render
 *  นี้ — คอมมิตแบบ full object จาก base เก่าจะทับค่าที่เพิ่งเปลี่ยน (จอสัมผัส:
 *  blur-commit ข้อความใน editor แล้วแตะสี/ขนาดในแผงต่อทันทีก่อน React render
 *  optimistic row — code review 2026-09-28 รอบสอง) */
export type AnnotationPatch =
  /** สี — ชื่อ field ตามชนิด: HIGHLIGHT/STAMP = `color`, DRAW/SHAPE = `strokeColor` */
  | { kind: "color"; color: string }
  /** ความหนา — DRAW สเกล `widths` ต่อจุดตามอัตราส่วนตอนผสาน (เหมือนเดิม) */
  | { kind: "strokeWidth"; strokeWidth: number }
  | { kind: "highlightStyle"; style: HighlightStyle }
  /** ความทึบของ HIGHLIGHT — 100 = ถอด field `opacity` ทิ้งเหมือนตอนสร้างใหม่ */
  | { kind: "highlightOpacity"; opacityPct: number }
  | { kind: "stampScale"; scale: number }
  /** STAMP — มุมเอียง (องศา −180..180 หมุนรอบกลางกรอบ; 0 = ถอด field เหมือนแถวเดิม) */
  | { kind: "stampRotation"; rotation: number }
  | {
      kind: "textbox";
      fields: Partial<
        Pick<TextboxData, "color" | "fontSize" | "opacity" | "bold" | "align">
      >;
    }
  /** StampEditor — แก้คำตรายาง */
  | { kind: "label"; label: string }
  /** TextboxEditor — แก้ข้อความกล่องข้อความ (segments null = เคลียร์ตัวหนาทั้งก้อน) */
  | { kind: "textboxText"; text: string; segments: TextboxSegment[] | null };

/** UX audit 2026-09-16: focus ring คีย์บอร์ด — ค่าเดียวกับ FOCUS_RING_CLS ของ
 *  PDFViewer/AnnotationSidebar (ประกาศแยกที่นี่กัน circular import) */
const FOCUS_RING_CLS =
  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";

// กรอบ selection + handles ของ annotation ที่เลือก (PLAN-FEAT.md §3 F1)
// - container เป็น z-4 เหมือน comment pins และ pointer-events: none **เสมอ**
//   เฉพาะ handle มุม (scale) / ขอบกรอบ (translate) / แถบเครื่องมือที่ auto
//   → ไม่บังการ select ข้อความของ textLayer (invariant #3)
// - ระหว่างลาก: ส่ง preview data ให้ parent ไป render ที่ layer เดิมของชนิดนั้น
//   pointerup → commit ผ่าน onCommit (parent ทำ optimistic + updateAnnotation)

const HANDLE_PX = 10; // ขนาดมุมจับ (scale)
const STRIP_PX = 8; // ความหนาขอบกรอบ (translate)
const ROT_HANDLE_PX = 18; // จุดจับหมุนตรายาง (STAMP) — วงกลมเหนือกึ่งกลางขอบบน
const ROT_HANDLE_GAP_PX = 20; // ระยะแนวฉากจากขอบบนกรอบถึงจุดจับหมุน
const MIN_BOX_PCT = 0.5; // bbox เล็กสุด (% ของหน้า) กันกรอบหาย
const EPS = 1e-6;

// COMMENT: ขนาด pin px + bbox px/% ของ pin ย้ายไป utils/geometry.ts แล้ว (ใช้ร่วมกับ
// goToAnnotation ของ PDFViewer — single source ตาม responsive audit 2026-09-24)

type DragState = {
  // wleft/wright = TEXTBOX กว้างคงที่: ลากขอบซ้าย/ขวาปรับความกว้าง (ฟอนต์คงขนาด)
  mode: "move" | "scale" | "wleft" | "wright" | "rotate";
  /** ตำแหน่ง pointer ตอนเริ่มลาก (% ของหน้า) */
  startPct: Point;
  /** data ก่อนเริ่มลาก — ต้นทางของการคำนวณทุก move (ไม่สะสมจาก preview) */
  origData: AnnotationData;
  /** bbox ก่อนเริ่มลาก (% ของหน้า) — STAMP เอียง = AABB ของกรอบหมุนแล้ว (ครอบกรอบจริง) */
  origBoxPct: Rect;
  /** mode "scale" เท่านั้น — มุมตรงข้ามของ handle (% ของหน้า ตำแหน่งจริงบนจอ) */
  anchorPct: Point;
  /** STAMP เอียงเท่านั้น — มุมกรอบตอนเริ่มลาก (องศา): คำนวณ k ของ scale ต้อง
   *  แปลง pointer เข้า frame ของกรอบ (ย้อนหมุนรอบ center) ก่อน ไม่งั้นลากมุมของ
   *  กรอบเอียงแล้วสัดส่วนแกน x/y ผิดจากสายตา */
  rot?: number;
};

/** จำกัดตัวคูณ scale แกนเดียว ให้กรอบผลลัพธ์ยังอยู่ใน 0–100 และไม่เล็กกว่าขั้นต่ำ */
function clampAxisScale(
  rawS: number,
  anchor: number,
  edgeA: number,
  edgeB: number,
  origExtent: number,
): number {
  let lo = 0;
  let hi = 50;
  for (const e of [edgeA, edgeB]) {
    const denom = e - anchor;
    if (Math.abs(denom) < EPS) continue;
    const a = (0 - anchor) / denom;
    const b = (100 - anchor) / denom;
    lo = Math.max(lo, Math.min(a, b));
    hi = Math.min(hi, Math.max(a, b));
  }
  if (origExtent > EPS) lo = Math.max(lo, MIN_BOX_PCT / origExtent);
  if (lo > hi) return 1; // กรอบเดิมใหญ่เต็มหน้า — ไม่ขยาย
  return clamp(rawS, lo, hi);
}

export default function AnnotationSelectionLayer({
  annotation,
  size,
  editable,
  pageBaseWidth,
  disabled,
  onPreview,
  onCommit,
  onDelete,
  onBookmark,
  onStartEdit,
  onPatch,
}: {
  annotation: AnnotationDTO;
  /** ขนาด px ของหน้า (จาก width/height ที่คำนวณจาก scale) */
  size: Size;
  /** true เฉพาะ annotation ของตัวเอง — ของคนอื่นเห็นแค่กรอบ ไม่มี handle (guard จริงอยู่ที่ action) */
  editable: boolean;
  /** ความกว้างหน้าแรกที่ scale 1 — แปลง px↔% ของ fontSize ตอนแสดงในแผง */
  pageBaseWidth: number;
  /** tool ที่ InkLayer ใช้ pointer (draw/shape/erase) → ปิด handle ไม่ให้ดัก pointer (PLAN-FEAT.md §5) */
  disabled: boolean;
  /** ระหว่างลาก: data ชั่วคราวให้ parent ไป render ที่ layer เดิม (null = เลิก preview) */
  onPreview: (data: AnnotationData | null) => void;
  /** pointerup แล้วมีการเปลี่ยนตำแหน่ง/ขนาดจริง → parent ทำ optimistic + updateAnnotation */
  onCommit: (id: string, data: AnnotationData) => void;
  /** ปุ่มลบบนกรอบ — parent เรียก deleteAnnotation (แสดงเฉพาะรายการของตัวเอง) */
  onDelete: (id: string) => void;
  /** N2: ปุ่ม bookmark ในแผง — เปิด popup ที่ตำแหน่ง (yOffset %) ของ annotation นี้ */
  onBookmark: (yOffsetPct: number) => void;
  /** M1: ปุ่ม "แก้ไขข้อความ" ของ TEXTBOX — เข้าโหมดแก้ไขโดยไม่ต้อง double-click
   *  (จอสัมผัสไม่มี dblclick ที่เชื่อถือได้: iOS double-tap = zoom หน้า) */
  onStartEdit?: (id: string) => void;
  /** ตัวควบคุมเล็กของแผง (สี/ความหนา/ขนาด/รูปแบบ/ทึบ/patch กล่องข้อความ) commit เป็น
   *  patch — viewer ผสานกับ data ล่าสุดตอนถึงคิว update กัน stale base ทับค่าที่เพิ่ง
   *  เปลี่ยน (ดู AnnotationPatch) */
  onPatch: (id: string, patch: AnnotationPatch) => void;
}) {
  const rootRef = useRef<HTMLDivElement>(null);
  const dragRef = useRef<DragState | null>(null);
  const movedRef = useRef(false);
  const latestRef = useRef<AnnotationData | null>(null);

  // อุปกรณ์จอสัมผัส (pointer หลัก coarse) — คำนวณครั้งเดียวตอน mount เหมือน
  // coarseTouch ของ PDFViewer: .coarse-36 ขยายปุ่ม pin เป็น 36px บนพวกนี้
  const [coarseTouch] = useState(
    () =>
      typeof window !== "undefined" &&
      window.matchMedia("(pointer: coarse)").matches,
  );

  // COMMENT ใช้กล่องครอบ pin จริง (px คงที่ตามอุปกรณ์) — ชนิดอื่นคือ bbox ตามขนาดหน้า
  // boxPct ก็ใช้มาตราฐานเดียวกัน (% จาก px จริง): move-clamp กับปุ่ม bookmark ของ pin
  // ต้องเห็น pin ตามที่ render ไม่ใช่ COMMENT_PIN_BOX_PCT ประมาณ (audit 2026-09-24)
  const isCommentPin = annotation.type === "COMMENT";
  const pinPx = coarseTouch ? COMMENT_PIN_COARSE_SIZE_PX : COMMENT_PIN_SIZE_PX;
  // bbox ของ STAMP ส่ง measureStampText ให้ความสูงตรงกับที่ StampItem render จริง
  // (ประมาณแล้วขอบล่างกรอบเกินตรายาง — bug 2026-09-28)
  const boxPx = isCommentPin
    ? commentPinBoxPx(annotation.data as CommentData, size, pinPx)
    : annotationBBox(annotation, size, measureStampText);
  const boxPct = isCommentPin
    ? commentPinBoxPct(annotation.data as CommentData, size, pinPx)
    : annotationBBox(annotation, { width: 100, height: 100 }, measureStampText);

  // STAMP เอียง (rotation ≠ 0) — กรอบ+handles วาดที่ตำแหน่งกรอบ*ก่อนหมุน* แล้วหมุน
  // ทั้งชุดด้วย CSS transform รอบกลางกรอบ (ตรงกับที่ StampItem render) ส่วน boxPx/
  // boxPct ด้านบนเป็น AABB ของกรอบหมุนแล้ว ใช้กับ clamp ย้าย/แผงเครื่องมือ/ป้ายชื่อ
  // stampData narrow ด้วย "label" in ตรงนี้แล้วส่งเข้า stampRect ตรง ๆ — ไม่ as-cast
  // (cast พังเงียบถ้าเงื่อนไขแวดข้างเปลี่ยน — code review 2026-09-29)
  const stampData = "label" in annotation.data ? annotation.data : null;
  const stampRot = stampData?.rotation ?? 0;
  const isRotStamp = stampRot !== 0;
  const framePx =
    stampData && isRotStamp ? stampRect(stampData, size, measureStampText) : boxPx;
  const framePct =
    stampData && isRotStamp
      ? stampRect(stampData, { width: 100, height: 100 }, measureStampText)
      : boxPct;
  // transform หมุนทั้งชุดกรอบ — origin เป็น**กลางกรอบในพิกัดของ element นั้น ๆ** (CSS
  // transform-origin วัดจากมุมซ้ายบนของ element เอง ไม่ใช่ของ page — จุดกลางกรอบ
  // ในพิกัด page ลบด้วย left/top ของ element จึงได้ origin ที่ทุก div หมุนไปตรงจุด
  // เดียวกัน ตามตัวตรายาง — bug "กรอบไม่ตรงตัวเมื่อเอียง" 2026-09-28)
  const rotC = {
    x: framePx.x + framePx.width / 2,
    y: framePx.y + framePx.height / 2,
  };
  const rotOn = (elLeft: number, elTop: number) =>
    isRotStamp
      ? {
          transform: `rotate(${stampRot}deg)`,
          transformOrigin: `${rotC.x - elLeft}px ${rotC.y - elTop}px`,
        }
      : undefined;

  // FIX-9: เอา non-null ! ออก — handler ยิงได้แค่ตอน DOM mount แล้ว
  // ref จึงไม่ควรเป็น null (คืน 0,0 เผื่อไว้เฉย ๆ ให้ type ชัด)
  const pointerPct = (e: ReactPointerEvent): Point => {
    const el = rootRef.current;
    if (!el) return { x: 0, y: 0 };
    return getPointerPercent(e, el);
  };

  function beginDrag(
    e: ReactPointerEvent<HTMLElement>,
    mode: "move" | "scale" | "wleft" | "wright" | "rotate",
    anchorPct: Point,
  ) {
    if (!editable || e.button !== 0) return;
    e.preventDefault(); // กัน native text selection ระหว่างลาก
    e.stopPropagation();
    e.currentTarget.setPointerCapture(e.pointerId);
    dragRef.current = {
      mode,
      startPct: pointerPct(e),
      origData: annotation.data,
      origBoxPct: boxPct,
      anchorPct,
      ...(stampRot !== 0 ? { rot: stampRot } : null),
    };
    movedRef.current = false;
    latestRef.current = null;
  }

  function moveDrag(e: ReactPointerEvent<HTMLElement>) {
    const st = dragRef.current;
    if (!st) return;
    e.stopPropagation();
    const cur = pointerPct(e);
    let next: AnnotationData;
    if (st.mode === "rotate") {
      // STAMP — ลากหมุน: มุมใหม่ = มุมเดิม + มุมที่ pointer กวาดรอบ**กลางกรอบ**
      // (atan2 ในพิกัดจอ y ลง = ทิศเดียวกับ CSS rotate) — snap ดูดเข้าทวีคูณ 15°
      // เมื่อใกล้ ≤4° ให้ตั้ง 0/±45/±90 เร็ว แล้ว wrap เข้า (−180, 180] เก็บ 1 ทศนิยม
      // (0° ถอด field เหมือน patch ของแผง — anchorPct = กลางกรอบจาก AABB)
      const ctr = st.anchorPct;
      const a0 = Math.atan2(st.startPct.y - ctr.y, st.startPct.x - ctr.x);
      const a1 = Math.atan2(cur.y - ctr.y, cur.x - ctr.x);
      let deg = (st.rot ?? 0) + ((a1 - a0) * 180) / Math.PI;
      const snap = Math.round(deg / 15) * 15;
      if (Math.abs(deg - snap) <= 4) deg = snap;
      deg = Number(((((deg + 180) % 360) + 360) % 360 - 180).toFixed(1));
      if ("label" in st.origData) {
        const { rotation: _prev, ...rest } = st.origData;
        // หมุนจนกรอบยื่นเกินขอบหน้า = เลื่อนกลับเข้าหน้าทันทีระหว่างลาก (เดียวกับ
        // patch ของแผง — validator ตรวจ AABB ไม่ติดลบ, code review 2026-09-28)
        next =
          deg === 0
            ? rest
            : { ...rest, rotation: deg, position: clampStampIntoPage({ ...rest, rotation: deg }) };
      } else {
        next = st.origData;
      }
    } else if (st.mode === "move") {
      // clamp offset ให้ bbox ทั้งกลุ่มยังอยู่ในหน้า (พิกัด % ติดลบโดน action ปฏิเสธ)
      const dx = clamp(
        cur.x - st.startPct.x,
        -st.origBoxPct.x,
        100 - st.origBoxPct.x - st.origBoxPct.width,
      );
      const dy = clamp(
        cur.y - st.startPct.y,
        -st.origBoxPct.y,
        100 - st.origBoxPct.y - st.origBoxPct.height,
      );
      next = translateAnnotationData(st.origData, dx, dy);
    } else if (st.mode === "wleft" || st.mode === "wright") {
      // TEXTBOX กว้างคงที่ — ขอบที่จับขยับ อีกขอบตายตัว (position = มุมซ้ายบนเสมอ:
      // ลากขอบซ้าย = เลื่อนกล่อง+เปลี่ยนกว้าง, ลากขอบขวา = เปลี่ยนกว้างอย่างเดียว)
      // ฟอนต์คงขนาด ข้อความ wrap ใหม่ ส่วนสูงตามจำนวนบรรทัดอัตโนมัติ
      const d = st.origData;
      if (!("fontSize" in d)) {
        next = d;
      } else {
        const MIN_W = 2; // % ของหน้า — กล่องแคบสุดที่ยังใช้ได้จริง
        const right = st.origBoxPct.x + st.origBoxPct.width;
        let left = st.origBoxPct.x;
        let w = st.origBoxPct.width;
        if (st.mode === "wright") {
          const r = clamp(
            cur.x,
            st.origBoxPct.x + MIN_W,
            Math.min(100, st.origBoxPct.x + TEXTBOX_MAX_WIDTH_PCT),
          );
          w = r - st.origBoxPct.x;
        } else {
          const l = clamp(
            cur.x,
            Math.max(0, right - TEXTBOX_MAX_WIDTH_PCT),
            right - MIN_W,
          );
          left = l;
          w = right - l;
        }
        next = { ...d, width: w, position: { ...d.position, x: left } };
      }
    } else if ("scale" in st.origData) {
      // STAMP — ความกว้างมีมาจาก scale เพียงตัวเดียว (สูงตามจำนวนบรรทัดของ label,
      // stampLayout) จึงขยายด้วยตัวคูณ uniform เดียว: เฉลี่ยอัตราส่วนของ pointer สองแกน
      // แล้ว clamp รายแกนซ้อนกัน (x แล้ว y) ให้กรอบผลลัพธ์ยังอยู่ในหน้าทั้งสองแกนพร้อมกัน
      // · STAMP เอียง: อัตราส่วนต้องวัดในแกนของ*กรอบ* — ย้อนหมุน pointer รอบกลางกรอบ
      // ก่อน (แกน x/y ของสูตรคือแกนกรอบ ไม่ใช่แกนจอ) ส่วน clamp กับ scaleAnnotationData
      // ใช้พิกัดจอ: มุมกรอบหมุนทั้งชุดโดย scale-uniform รอบ anchor จริง ๆ (AABB ของ
      // กรอบหมุน scale ตาม k รอบ anchor เช่นกัน) clamp ด้วยขอบ AABB จึงยังถูกต้อง
      const rot = st.rot ?? 0;
      let curL = cur;
      let startL = st.startPct;
      let anchorL = st.anchorPct;
      if (rot) {
        const ctr = {
          x: st.origBoxPct.x + st.origBoxPct.width / 2,
          y: st.origBoxPct.y + st.origBoxPct.height / 2,
        };
        curL = rotatePoint(cur, ctr, -rot);
        startL = rotatePoint(st.startPct, ctr, -rot);
        anchorL = rotatePoint(st.anchorPct, ctr, -rot);
      }
      const rawK =
        ((curL.x - anchorL.x) / (startL.x - anchorL.x || EPS) +
          (curL.y - anchorL.y) / (startL.y - anchorL.y || EPS)) /
        2;
      const k = clampAxisScale(
        clampAxisScale(
          rawK,
          st.anchorPct.x,
          st.origBoxPct.x,
          st.origBoxPct.x + st.origBoxPct.width,
          st.origBoxPct.width,
        ),
        st.anchorPct.y,
        st.origBoxPct.y,
        st.origBoxPct.y + st.origBoxPct.height,
        st.origBoxPct.height,
      );
      next = scaleAnnotationData(st.origData, st.anchorPct, k, k);
    } else {
      const sx = clampAxisScale(
        (cur.x - st.anchorPct.x) / (st.startPct.x - st.anchorPct.x || EPS),
        st.anchorPct.x,
        st.origBoxPct.x,
        st.origBoxPct.x + st.origBoxPct.width,
        st.origBoxPct.width,
      );
      const sy = clampAxisScale(
        (cur.y - st.anchorPct.y) / (st.startPct.y - st.anchorPct.y || EPS),
        st.anchorPct.y,
        st.origBoxPct.y,
        st.origBoxPct.y + st.origBoxPct.height,
        st.origBoxPct.height,
      );
      next = scaleAnnotationData(st.origData, st.anchorPct, sx, sy);
    }
    movedRef.current = true;
    latestRef.current = next;
    onPreview(next);
  }

  function endDrag(e: ReactPointerEvent<HTMLElement>) {
    const st = dragRef.current;
    if (!st) return;
    e.stopPropagation();
    dragRef.current = null;
    onPreview(null);
    if (movedRef.current && latestRef.current) onCommit(annotation.id, latestRef.current);
    movedRef.current = false;
    latestRef.current = null;
  }

  function cancelDrag() {
    if (!dragRef.current) return;
    dragRef.current = null;
    movedRef.current = false;
    latestRef.current = null;
    onPreview(null);
  }

  /** ปุ่มสี/ความหนาบนกรอบ — ส่ง patch ให้ viewer ผสานกับ data ล่าสุด (ชื่อ field ตาม
   *  ชนิด: HIGHLIGHT/STAMP = color, DRAW/SHAPE = strokeColor — ตัดสินตอนผสาน) */
  function commitColor(color: string) {
    onPatch(annotation.id, { kind: "color", color });
  }

  function commitStrokeWidth(w: number) {
    onPatch(annotation.id, { kind: "strokeWidth", strokeWidth: w });
  }

  /** HIGHLIGHT — เปลี่ยนรูปแบบมาร์กหลังสร้าง (ไฮไลต์/เส้นใต้/ขีดฆ่า/ขยุกขยิก) */
  function commitHighlightStyle(style: HighlightStyle) {
    onPatch(annotation.id, { kind: "highlightStyle", style });
  }

  /** HIGHLIGHT — ปรับความทึบหลังสร้าง (100% = ทึบเต็ม = ถอด field opacity ตอนผสาน) */
  function commitHighlightOpacity(opacityPct: number) {
    onPatch(annotation.id, { kind: "highlightOpacity", opacityPct });
  }

  /** STAMP — ปรับขนาดตรายางหลังสร้าง */
  function commitStampScale(scale: number) {
    onPatch(annotation.id, { kind: "stampScale", scale });
  }

  /** STAMP — ปรับมุมเอียงหลังสร้าง (องศา −180..180 หมุนรอบกลางกรอบ) */
  function commitStampRotation(rotation: number) {
    onPatch(annotation.id, { kind: "stampRotation", rotation });
  }

  /** TEXTBOX — แก้ค่าทั้งกล่องหลังสร้าง (สี/ขนาด/ทึบ/หนา/จัดแนว) เหมือน dropdown ของ tool */
  function commitTextboxPatch(
    patch: Partial<Pick<TextboxData, "color" | "fontSize" | "opacity" | "bold" | "align">>,
  ) {
    if (!textboxData) return;
    onPatch(annotation.id, { kind: "textbox", fields: patch });
  }

  // ตัวควบคุมในแผงตรวจตามชนิดด้วยการเช็ค field ใน data ตรง ๆ (rects = HIGHLIGHT,
  // paths/shape = เส้น/รูปทรง, label = STAMP) — เก็บเป็นตัวแปรท้องถิ่นเพื่อให้ TS
  // narrow type คงอยู่ใน callback ของ JSX
  // HIGHLIGHT ห้ามย้าย/ขยาย — boolean แยกไว้ใช้กับเงื่อนไข handle (ไม่แตะการ narrow ของตัวแปรอื่น)
  const isHighlightMark = "rects" in annotation.data;
  const highlightData: HighlightData | null =
    "rects" in annotation.data ? annotation.data : null;
  const strokeData =
    "paths" in annotation.data || "shape" in annotation.data
      ? annotation.data
      : null;
  // (stampData ย้ายไปขึ้นบน — ใช้ร่วมกับ stampRot/framePx ของตรายางเอียง)
  const textboxData: TextboxData | null =
    "fontSize" in annotation.data ? annotation.data : null;
  // TEXTBOX กว้างคงที่ (มี width) — ขอบซ้าย/ขวาเป็น handle ปรับความกว้างแทนการย้าย
  // และซ่อนมุม (scale ไม่มีความหมายกับกล่องกว้างคงที่) — ย้ายกล่องใช้ขอบบน/ล่าง
  const isFixedTextbox = textboxData?.width !== undefined;

  // แผงมี row ตัวควบคุมสไตล์หรือเหลือแค่ปุ่ม bookmark+ลบ (COMMENT/REDACTION) —
  // กรณีหลังหุบเป็น w-fit ไม่คั่นเส้น และปุ่มติดกันแทน justify-between
  const hasStyleControls = !!(highlightData || strokeData || stampData || textboxData);

  // มุมทั้ง 4 — ตำแหน่งวางเป็น px ของกรอบ*ก่อนหมุน* (STAMP เอียง: div ทั้งชุดถูกหมุน
  // ทีหลังผ่าน rotStyle), anchor มุมตรงข้ามเป็น % **ตำแหน่งจริงบนจอ** — STAMP เอียง
  // ต้องหมุนมุมกลับออกมาก่อน (พิกัด % คำนวณผ่าน utils/coordinates เท่านั้น — invariant #2)
  const frameCtrPct = isRotStamp
    ? {
        x: framePct.x + framePct.width / 2,
        y: framePct.y + framePct.height / 2,
      }
    : null;
  const anchorOnScreen = (p: Point): Point =>
    frameCtrPct ? rotatePoint(p, frameCtrPct, stampRot) : p;
  const corners: { key: string; x: number; y: number; cursor: string; anchor: Point }[] = [
    {
      key: "nw",
      x: framePx.x,
      y: framePx.y,
      cursor: "nwse-resize",
      anchor: anchorOnScreen({
        x: framePct.x + framePct.width,
        y: framePct.y + framePct.height,
      }),
    },
    {
      key: "ne",
      x: framePx.x + framePx.width,
      y: framePx.y,
      cursor: "nesw-resize",
      anchor: anchorOnScreen({ x: framePct.x, y: framePct.y + framePct.height }),
    },
    {
      key: "sw",
      x: framePx.x,
      y: framePx.y + framePx.height,
      cursor: "nesw-resize",
      anchor: anchorOnScreen({ x: framePct.x + framePct.width, y: framePct.y }),
    },
    {
      key: "se",
      x: framePx.x + framePx.width,
      y: framePx.y + framePx.height,
      cursor: "nwse-resize",
      anchor: anchorOnScreen({ x: framePct.x, y: framePct.y }),
    },
  ];

  const toolbarAbove = boxPx.y >= 36;

  // แผงเครื่องมือปกติเปิดขึ้นด้านบน bbox — แต่ถ้ารายการอยู่ใกล้บนสุดของ viewport
  // (หน้าเลื่อนขึ้นจนกรอบอยู่ใต้ sticky header) แผงจะเปิดขึ้นไปโดน header บัง
  // → วัดตำแหน่งจริงหลัง render แล้วพลิกลงด้านล่างแทน (รีเซ็ตทุกครั้งที่เปลี่ยนรายการ)
  const panelRef = useRef<HTMLDivElement | null>(null);
  const [flipBelow, setFlipBelow] = useState(false);
  useEffect(() => {
    setFlipBelow(false);
  }, [annotation.id]);
  useEffect(() => {
    if (!toolbarAbove || flipBelow || !panelRef.current) return;
    const headerH = document.querySelector("header")?.offsetHeight ?? 0;
    if (panelRef.current.getBoundingClientRect().top < headerH) {
      setFlipBelow(true);
    }
  }, [toolbarAbove, flipBelow, annotation.id, boxPx.x, boxPx.y]);
  const openAbove = toolbarAbove && !flipBelow;

  return (
    <div
      ref={rootRef}
      className="absolute inset-0 z-[4] select-none"
      style={{ pointerEvents: "none" }}
      onClick={(e) => e.stopPropagation()} // คลิกบน handle/toolbar ไม่ให้ bubble ไป deselect ที่ page
    >
      {/* กรอบ bbox — ตัวกรอบเอง pointer-events none ผ่านไป textLayer ได้ · STAMP เอียง
          วาดที่กรอบก่อนหมุนแล้วหมุนทั้งชุด (กรอบ+handles) รอบกลางกรอบเหมือน StampItem */}
      <div
        className="absolute border-2 border-dashed border-primary"
        style={{
          left: framePx.x,
          top: framePx.y,
          width: framePx.width,
          height: framePx.height,
          ...rotOn(framePx.x, framePx.y),
        }}
      />

      {/* HIGHLIGHT ผูกกับตำแหน่งข้อความจริงบนหน้า — ห้ามย้าย/ขยาย (เลือกเพื่อเปลี่ยน
          สี/รูปแบบ/ลบได้อย่างเดียว) จึงไม่มี handle ขอบกรอบและมุม */}
      {editable && !disabled && !isHighlightMark && (
        <>
          {/* ขอบกรอบ 4 ด้าน — ลาก = translate ทั้งกลุ่ม (touch-none: จอสัมผัสลาก
              ได้จริง ไม่ถูก browser ยึดเป็น scroll แล้วส่ง pointercancel) */}
          <div
            className="absolute cursor-move touch-none sel-strip"
            style={{
              left: framePx.x - STRIP_PX / 2,
              top: framePx.y - STRIP_PX / 2,
              width: framePx.width + STRIP_PX,
              height: STRIP_PX,
              pointerEvents: "auto",
              ...rotOn(framePx.x - STRIP_PX / 2, framePx.y - STRIP_PX / 2),
            }}
            onPointerDown={(e) => beginDrag(e, "move", { x: 0, y: 0 })}
            onPointerMove={moveDrag}
            onPointerUp={endDrag}
            onPointerCancel={cancelDrag}
          />
          <div
            className="absolute cursor-move touch-none sel-strip"
            style={{
              left: framePx.x - STRIP_PX / 2,
              top: framePx.y + framePx.height - STRIP_PX / 2,
              width: framePx.width + STRIP_PX,
              height: STRIP_PX,
              pointerEvents: "auto",
              ...rotOn(framePx.x - STRIP_PX / 2, framePx.y + framePx.height - STRIP_PX / 2),
            }}
            onPointerDown={(e) => beginDrag(e, "move", { x: 0, y: 0 })}
            onPointerMove={moveDrag}
            onPointerUp={endDrag}
            onPointerCancel={cancelDrag}
          />
          <div
            className={`absolute touch-none sel-strip ${isFixedTextbox ? "cursor-ew-resize" : "cursor-move"}`}
            style={{
              left: framePx.x - STRIP_PX / 2,
              top: framePx.y,
              width: STRIP_PX,
              height: framePx.height,
              pointerEvents: "auto",
              ...rotOn(framePx.x - STRIP_PX / 2, framePx.y),
            }}
            onPointerDown={(e) =>
              beginDrag(e, isFixedTextbox ? "wleft" : "move", { x: 0, y: 0 })
            }
            onPointerMove={moveDrag}
            onPointerUp={endDrag}
            onPointerCancel={cancelDrag}
          />
          <div
            className={`absolute touch-none sel-strip ${isFixedTextbox ? "cursor-ew-resize" : "cursor-move"}`}
            style={{
              left: framePx.x + framePx.width - STRIP_PX / 2,
              top: framePx.y,
              width: STRIP_PX,
              height: framePx.height,
              pointerEvents: "auto",
              ...rotOn(framePx.x + framePx.width - STRIP_PX / 2, framePx.y),
            }}
            onPointerDown={(e) =>
              beginDrag(e, isFixedTextbox ? "wright" : "move", { x: 0, y: 0 })
            }
            onPointerMove={moveDrag}
            onPointerUp={endDrag}
            onPointerCancel={cancelDrag}
          />

          {/* มุมทั้ง 4 — ลาก = scale รอบ anchor มุมตรงข้าม (TEXTBOX กว้างคงที่ไม่มีมุม —
              ปรับความกว้างที่ขอบซ้าย/ขวาแทน ส่วนสูงตามจำนวนบรรทัดอัตโนมัติ; COMMENT ไม่
              มีมุมเช่นกัน — pin ไม่มี field ขนาด scale จึงไร้ความหมาย และ anchor จาก boxPct
              (% รอบจุด) กับ handle บนกล่อง pin คนละกล่องทำให้ลากแล้วเหลื่อมจากนิ้ว) */}
          {!isFixedTextbox && !isCommentPin && corners.map((c) => (
            <div
              key={c.key}
              className="absolute touch-none sel-handle rounded-sm border border-primary bg-primary/50"
              style={{
                left: c.x - HANDLE_PX / 2,
                top: c.y - HANDLE_PX / 2,
                width: HANDLE_PX,
                height: HANDLE_PX,
                cursor: c.cursor,
                pointerEvents: "auto",
                ...rotOn(c.x - HANDLE_PX / 2, c.y - HANDLE_PX / 2),
              }}
              onPointerDown={(e) => beginDrag(e, "scale", c.anchor)}
              onPointerMove={moveDrag}
              onPointerUp={endDrag}
              onPointerCancel={cancelDrag}
            />
          ))}

          {/* STAMP — จุดจับหมุนเหนือกึ่งกลางขอบบนของกรอบ (หมุนตามกรอบผ่าน rotOn):
              ลากวนรอบกลางกรอบ = ปรับมุมเอียงแทนการพิมพ์ในแผงอย่างเดียว (คำขอผู้ใช้
              2026-09-28) — anchor ของ mode "rotate" = กลางกรอบ (% จาก AABB) */}
          {stampData && (
            <div
              className="absolute flex touch-none sel-handle cursor-grab items-center justify-center rounded-full border border-primary bg-white text-primary shadow-lg"
              style={{
                left: rotC.x - ROT_HANDLE_PX / 2,
                top: framePx.y - ROT_HANDLE_GAP_PX - ROT_HANDLE_PX / 2,
                width: ROT_HANDLE_PX,
                height: ROT_HANDLE_PX,
                pointerEvents: "auto",
                ...rotOn(
                  rotC.x - ROT_HANDLE_PX / 2,
                  framePx.y - ROT_HANDLE_GAP_PX - ROT_HANDLE_PX / 2,
                ),
              }}
              title="ลากเพื่อหมุนตรายาง"
              aria-label="ลากเพื่อหมุนตรายาง"
              onPointerDown={(e) =>
                beginDrag(e, "rotate", {
                  x: boxPct.x + boxPct.width / 2,
                  y: boxPct.y + boxPct.height / 2,
                })
              }
              onPointerMove={moveDrag}
              onPointerUp={endDrag}
              onPointerCancel={cancelDrag}
            >
              <RotateCw className="h-3 w-3" />
            </div>
          )}

        </>
      )}

      {/* Responsive audit 2026-09-24: รายการของผู้อื่นที่เลือกอยู่ — ป้าย "ชนิด · ผู้ทำ" ลอย
          เหนือกรอบ (จอสัมผัสไม่มี hover tooltip N1 ให้ดูว่าใครทำ เดิมต้องเปิด sidebar
          อย่างเดียว) — read-only pointer-events:none ตามกติกา container ของ layer นี้
          ไม่บัง textLayer; ชิดหัวหน้าเกินก็ห้อยใต้กรอบแทน */}
      {!editable && (
        <div
          className="absolute z-10 max-w-[200px] truncate rounded-md border border-line bg-white px-1.5 py-0.5 text-[11px] text-ink-soft shadow-lg"
          style={{
            left: Math.max(0, Math.min(boxPx.x, size.width - 204)),
            top: boxPx.y - 24 < 0 ? boxPx.y + boxPx.height + 4 : boxPx.y - 24,
            pointerEvents: "none",
          }}
        >
          {annotationTypeLabel(annotation)} · {annotation.userName || "ไม่ทราบชื่อ"}
        </div>
      )}

      {/* แผงเครื่องมือของรายการที่เลือก — ตัวควบคุมเดียวกับ dropdown ของ tool ผู้สร้าง
          (สี/ความหนา/ขนาด/รูปแบบตามชนิด) + ปุ่มลบท้ายแผง — แสดงทุกชนิดรวม HIGHLIGHT
          (ไม่มี handle ย้าย/ขยาย แต่เปลี่ยนสี/รูปแบบ/ลบได้) — เฉพาะรายการของตัวเอง
          clamp แนวนอน: รายการชิดขวาหน้า (จอแคบ fit-width) ต้องไม่ทำแผง w-60 ล้นขอบขวา
          จนปุ่มลบ/ตัวควบคุมหลุดจอ (เจอตอน verify จอ 390px — ปุ่มลบครึ่งเดียวจิ้มได้ยาก)
          กรณี w-fit ใช้ 240 เป็น upper bound ต่อ (แคบกว่า w-60 เสมอ — clamp หลวมเกินไม่มีผลร้าย) */}
      {editable && !disabled && (
        <div
          ref={panelRef}
          className={`absolute ${hasStyleControls ? "w-60" : "w-fit"} sel-panel rounded-lg border border-line bg-white p-1.5 shadow-lg`}
          style={{
            left: Math.max(0, Math.min(boxPx.x, size.width - 240 - 4)),
            top: openAbove ? boxPx.y - 6 : boxPx.y + boxPx.height + 4,
            transform: openAbove ? "translateY(-100%)" : undefined,
            pointerEvents: "auto",
          }}
        >
          {highlightData && (
            <>
              <PanelRow>
                <ColorSwatches value={highlightData.color} onChange={commitColor} />
              </PanelRow>
              <PanelRow label="รูปแบบ">
                <div className="flex flex-1 gap-1">
                  {HIGHLIGHT_STYLE_BTNS.map(({ key, label, Icon }) => (
                    <button
                      key={key}
                      type="button"
                      aria-label={label}
                      title={label}
                      aria-pressed={(highlightData.style ?? "highlight") === key}
                      className={`flex h-6 w-6 items-center justify-center rounded-md transition ${FOCUS_RING_CLS} ${
                        (highlightData.style ?? "highlight") === key
                          ? "bg-primary text-white"
                          : "text-ink-soft hover:bg-ink/[0.05]"
                      }`}
                      onClick={() => commitHighlightStyle(key)}
                    >
                      <Icon className="h-3.5 w-3.5" />
                    </button>
                  ))}
                </div>
              </PanelRow>
              <PanelRow label="ความทึบ">
                <NumberCombo
                  value={Math.round((highlightData.opacity ?? 1) * 100)}
                  options={[25, 50, 75, 100]}
                  min={0}
                  max={100}
                  step={1}
                  suffix="%"
                  onChange={commitHighlightOpacity}
                />
              </PanelRow>
            </>
          )}
          {strokeData && (
            <PanelRow>
              <ColorSwatches value={strokeData.strokeColor} onChange={commitColor} />
            </PanelRow>
          )}
          {strokeData && (
            <PanelRow label="ความหนา">
              {/* หน่วยย่อ ×10 ของ % ความกว้างหน้า — เดียวกับ dropdown ของ tool draw/shape */}
              <NumberCombo
                value={Number((strokeData.strokeWidth * 10).toFixed(2))}
                options={[1, 2, 4, 8, 12]}
                min={1}
                step={1}
                onChange={(v) => commitStrokeWidth(v / 10)}
              />
            </PanelRow>
          )}
          {stampData && (
            <>
              {/* ทางเข้า StampEditor (แก้คำตรายางหลังวาง — เหมือนปุ่มเดียวกันของ TEXTBOX):
                  แผงโผล่เฉพาะของตัวเองอยู่แล้ว (editable) จึงไม่ต้องเช็ค userId ซ้ำ /
                  root มี stopPropagation คลิกไม่หลุดไป deselect · sel-panel-btn ขยาย
                  hit 36px บนจอสัมผัสเหมือนปุ่มอื่นของแผง (UX audit 2026-09-28) */}
              <PanelRow label="ข้อความ">
                <button
                  type="button"
                  className={`sel-panel-btn flex flex-1 items-center justify-center gap-1 rounded-md border border-line px-2 py-1 text-[11px] font-medium text-ink-soft hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
                  onClick={() => onStartEdit?.(annotation.id)}
                >
                  <Pencil className="h-3.5 w-3.5" />
                  แก้ไขข้อความ
                </button>
              </PanelRow>
              <PanelRow>
                <ColorSwatches
                  value={stampData.color ?? STAMP_COLOR}
                  onChange={commitColor}
                />
              </PanelRow>
              <PanelRow label="ขนาด">
                <NumberCombo
                  value={stampData.scale}
                  options={[12, 18, 25, 40]}
                  min={5}
                  max={60}
                  step={1}
                  suffix="%"
                  onChange={commitStampScale}
                />
              </PanelRow>
              <PanelRow label="มุมเอียง">
                <NumberCombo
                  value={stampData.rotation ?? 0}
                  options={[-45, -15, 0, 15, 45]}
                  min={-180}
                  max={180}
                  step={1}
                  suffix="°"
                  onChange={commitStampRotation}
                />
              </PanelRow>
            </>
          )}
          {textboxData && (
            <>
              {/* M1: ทางเข้า editor นอกจาก double-click — แผงโผล่เฉพาะของตัวเองอยู่แล้ว
                  (editable) จึงไม่ต้องเช็ค userId ซ้ำ / root มี stopPropagation คลิกไม่หลุดไป deselect
                  · sel-panel-btn ขยาย hit 36px บนจอสัมผัสเหมือนปุ่มอื่นของแผง (UX audit 2026-09-28) */}
              <PanelRow label="ข้อความ">
                <button
                  type="button"
                  className={`sel-panel-btn flex flex-1 items-center justify-center gap-1 rounded-md border border-line px-2 py-1 text-[11px] font-medium text-ink-soft hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
                  onClick={() => onStartEdit?.(annotation.id)}
                >
                  <Pencil className="h-3.5 w-3.5" />
                  แก้ไขข้อความ
                </button>
              </PanelRow>
              <PanelRow>
                <ColorSwatches
                  value={textboxData.color}
                  onChange={(c) => commitTextboxPatch({ color: c })}
                />
              </PanelRow>
              <PanelRow label="ขนาด">
                {/* แสดง/กรอกเป็น px ตามขนาดหน้าจริง — เก็บใน DB เป็น % ของความกว้างหน้า */}
                <NumberCombo
                  value={Number(((textboxData.fontSize / 100) * pageBaseWidth).toFixed(1))}
                  options={[10, 12, 14, 18, 24]}
                  min={6}
                  max={48}
                  step={1}
                  suffix="px"
                  onChange={(v) => commitTextboxPatch({ fontSize: (v / pageBaseWidth) * 100 })}
                />
              </PanelRow>
              <PanelRow label="ความทึบ">
                <NumberCombo
                  value={Math.round((textboxData.opacity ?? 1) * 100)}
                  options={[25, 50, 75, 100]}
                  min={0}
                  max={100}
                  step={1}
                  suffix="%"
                  onChange={(v) => commitTextboxPatch({ opacity: v / 100 })}
                />
              </PanelRow>
              <PanelRow label="ตัวหนา">
                <button
                  type="button"
                  aria-label="สลับตัวหนาทั้งกล่อง"
                  aria-pressed={!!textboxData.bold}
                  className={`flex h-6 w-6 items-center justify-center rounded-md border transition ${FOCUS_RING_CLS} ${
                    textboxData.bold
                      ? "border-primary bg-primary text-white"
                      : "border-line bg-white text-ink-soft hover:bg-ink/[0.05]"
                  }`}
                  onClick={() => commitTextboxPatch({ bold: !textboxData.bold })}
                >
                  {/* B ทึบ — เหมือน dropdown ของ tool (ตัวควบคุมชุดเดียวกัน) */}
                  <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-line">
                  {(
                    [
                      ["left", AlignLeft, "ชิดซ้าย"],
                      ["center", AlignCenter, "กึ่งกลาง"],
                      ["right", AlignRight, "ชิดขวา"],
                    ] as const
                  ).map(([a, AlignIcon, aLabel]) => (
                    <button
                      key={a}
                      type="button"
                      aria-label={`จัดแนว${aLabel}`}
                      aria-pressed={(textboxData.align ?? "left") === a}
                      className={`px-2 py-1 transition ${FOCUS_RING_CLS} ${
                        (textboxData.align ?? "left") === a
                          ? "bg-primary text-white"
                          : "text-ink-soft hover:bg-ink/[0.05]"
                      }`}
                      onClick={() => commitTextboxPatch({ align: a })}
                    >
                      <AlignIcon className="h-3.5 w-3.5" />
                    </button>
                  ))}
                </div>
              </PanelRow>
            </>
          )}
          {hasStyleControls && <div className="my-1 border-t border-line/60" />}
          <div className={hasStyleControls ? "flex items-center justify-between" : "flex items-center"}>
            {/* N2: bookmark ตำแหน่งของรายการนี้ — เปิด popup ตั้งชื่อ/โน้ต/เลือกหัวข้อต่อ */}
            {/* hover เป็นกลางแบบปุ่มจิ๋วอื่นในแผง (เดิม copy มาจากปุ่มลบข้าง ๆ จน hover
                แดง = สัญญาณอันตรายเท็จกับการ "บันทึก" — UX review M4 2026-09-23) */}
            <button
              type="button"
              aria-label="บันทึก bookmark ตำแหน่งรายการนี้"
              title="Bookmark ตำแหน่งนี้"
              className={`flex h-5 w-5 sel-panel-btn items-center justify-center rounded text-ink-faint hover:bg-ink/[0.05] hover:text-ink ${FOCUS_RING_CLS}`}
              onClick={() => onBookmark(boxPct.y)}
            >
              <BookmarkPlus className="h-3.5 w-3.5" />
            </button>
            {/* เส้นคั่นแนวตั้ง — เฉพาะกรณีปุ่มติดกัน (แผงไม่มี row สไตล์): แยก bookmark ออกจากปุ่มลบ */}
            {!hasStyleControls && (
              <span aria-hidden="true" className="mx-1 h-3.5 w-px bg-line" />
            )}
            <button
              type="button"
              aria-label="ลบรายการนี้"
              title="ลบ"
              className={`flex h-5 w-5 sel-panel-btn items-center justify-center rounded text-error-ink hover:bg-error/10 ${FOCUS_RING_CLS}`}
              onClick={() => onDelete(annotation.id)}
            >
              <Trash2 className="h-3.5 w-3.5" />
            </button>
          </div>
        </div>
      )}
    </div>
  );
}