"use client";

import {
  AlignCenterIcon,
  AlignVerticalJustifyStartIcon,
  AlignVerticalJustifyCenterIcon,
  AlignVerticalJustifyEndIcon,
  AlignLeftIcon,
  AlignRightIcon,
  BoldIcon,
  ClipboardIcon,
  CopyIcon,
  EraserIcon,
  GripHorizontalIcon,
  GripVerticalIcon,
  ItalicIcon,
  MergeIcon,
  SplitIcon,
  PlusIcon,
  PaletteIcon,
  Redo2Icon,
  ScissorsIcon,
  StrikethroughIcon,
  Trash2Icon,
  Undo2Icon,
  UnderlineIcon,
} from "lucide-react";
import Spreadsheet, {
  type ColumnIndicatorProps,
  type DataEditorProps,
  EntireColumnsSelection,
  EntireRowsSelection,
  PointRange,
  RangeSelection,
  type Point,
  type RowIndicatorProps,
  type Selection,
  type SpreadsheetRef,
  type TableProps,
} from "react-spreadsheet";
import {
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
  type ClipboardEvent,
  type KeyboardEvent,
} from "react";
import {
  closestCenter,
  DndContext,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  type CollisionDetection,
  type DragEndEvent,
} from "@dnd-kit/core";
import {
  horizontalListSortingStrategy,
  rectSortingStrategy,
  sortableKeyboardCoordinates,
  SortableContext,
  useSortable,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

import { flushSync } from "react-dom";
import { toast } from "sonner";

import {
  ExtraSheetCellContext,
  ExtraSheetCellView,
  sheetRangeRect,
} from "@/components/admin/extra-sheet-cell";
import { DeleteConfirmationDialog } from "@/components/admin/delete-confirmation-dialog";
import { RichTextContent } from "@/components/rich-text-content";
import { SimpleTooltip } from "@/components/tooltip";
import { Button } from "@/components/ui/button";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { ClearableInput as Input } from "@/components/admin/ui/clearable-input";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupTextarea,
} from "@/components/ui/input-group";
import { Kbd } from "@/components/ui/kbd";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import {
  addExtraSheetColumn,
  addExtraSheetRow,
  clearExtraSheetCellFormatting,
  canMergeExtraSheetRange,
  expandExtraSheetRange,
  extraSheetAnchor,
  extraSheetMergeAt,
  extraSheetMergeMap,
  extraSheetRangePoints,
  mergeExtraSheetRange,
  unmergeExtraSheetRange,
  updateExtraSheetCell,
  DEFAULT_EXTRA_SHEET_COLUMN_WIDTH,
  MAX_EXTRA_SHEET_COLUMN_WIDTH,
  MIN_EXTRA_SHEET_COLUMN_WIDTH,
  deleteExtraSheetColumn,
  deleteExtraSheetRow,
  extraSheetRangeToTsv,
  extraSheetToMatrix,
  insertExtraSheetColumn,
  insertExtraSheetRow,
  matrixToExtraSheet,
  moveExtraSheetColumn,
  moveExtraSheetRow,
  nextExtraSheetColumnLabel,
  nextExtraSheetPoint,
  parseExtraSheetTsv,
  pasteExtraSheetText,
  resizeExtraSheetColumn,
  styleExtraSheetCells,
  updateExtraSheetCells,
  type ExtraSheetAlignment,
  type ExtraSheetVerticalAlignment,
  type ExtraSheet,
  type ExtraSheetMatrix,
} from "@/lib/guides/extra-sheet";
import {
  extraRichTextToPlainText,
  normalizeExtraRichText,
  type RichTextStylePatch,
} from "@/lib/rich-text";
import { cn } from "@/lib/utils";

interface SheetHistory {
  items: ExtraSheet[];
  index: number;
  value: ExtraSheet;
}

const DEFAULT_CELL_BACKGROUND = "#16A34A";
const SHEET_HISTORY_LIMIT = 80;
const columnDragId = (id: string) => `column:${id}`;
const rowDragId = (id: string) => `row:${id}`;

const sameAxisCollision: CollisionDetection = (args) => {
  const axis = String(args.active.id).split(":", 1)[0];
  return closestCenter({
    ...args,
    droppableContainers: args.droppableContainers.filter((container) =>
      String(container.id).startsWith(`${axis}:`),
    ),
  });
};

function movedIndex(current: number, from: number, to: number): number {
  if (current === from) return to;
  if (from < to && current > from && current <= to) return current - 1;
  if (to < from && current >= to && current < from) return current + 1;
  return current;
}

function spreadsheetColumnName(index: number): string {
  let value = index + 1;
  let label = "";
  while (value > 0) {
    value -= 1;
    label = String.fromCharCode(65 + (value % 26)) + label;
    value = Math.floor(value / 26);
  }
  return label;
}

function LiteralDataViewer({
  cell,
}: {
  cell?: {
    value?: unknown;
    backgroundColor?: string;
    alignment?: ExtraSheetAlignment;
  };
}) {
  return (
    <div
      className="Spreadsheet__data-viewer Spreadsheet__data-viewer--preserve-breaks size-full"
      style={
        cell?.backgroundColor
          ? {
              backgroundColor: cell.backgroundColor,
              textAlign: cell.alignment ?? "left",
            }
          : { textAlign: cell?.alignment ?? "left" }
      }
    >
      <RichTextContent
        html={normalizeExtraRichText(String(cell?.value ?? ""))}
        className="extra-sheet-text"
      />
    </div>
  );
}

function InlineDataEditor({
  cell,
  exitEditMode,
  initialText,
  onReady,
  onCommit,
  registerCommit,
  onNavigate,
}: DataEditorProps<{ value: string }> & {
  initialText?: string;
  onReady?: () => void;
  onCommit: (value: string) => void;
  registerCommit: (commit: (() => void) | null) => void;
  onNavigate: (key: "Enter" | "Tab", shift: boolean) => void;
}) {
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const originalText = useRef(
    extraRichTextToPlainText(String(cell?.value ?? "")),
  );
  const [text, setText] = useState(
    () => initialText ?? extraRichTextToPlainText(String(cell?.value ?? "")),
  );
  const committed = useRef(false);
  const commit = useCallback(() => {
    if (committed.current) return;
    committed.current = true;
    const nextValue = normalizeExtraRichText(text);
    if (text !== originalText.current) {
      onCommit(nextValue);
    }
  }, [onCommit, text]);
  useLayoutEffect(() => {
    registerCommit(commit);
    return () => registerCommit(null);
  }, [commit, registerCommit]);
  useEffect(() => {
    onReady?.();
    const input = inputRef.current;
    input?.focus();
    input?.setSelectionRange(input.value.length, input.value.length);
  }, [onReady]);
  return (
    <div className="Spreadsheet__data-editor">
      <textarea
        ref={inputRef}
        aria-label="แก้ไขข้อความเซลล์"
        value={text}
        onChange={(event) => setText(event.target.value)}
        onBlur={commit}
        onKeyDown={(event) => {
          if (event.key === "Escape") {
            committed.current = true;
            event.preventDefault();
            event.stopPropagation();
            exitEditMode();
            return;
          }
          if (event.key === "Enter" && (event.shiftKey || event.altKey)) {
            event.stopPropagation();
            return;
          }
          if (event.key === "Enter" || event.key === "Tab") {
            event.preventDefault();
            event.stopPropagation();
            commit();
            exitEditMode();
            onNavigate(event.key, event.shiftKey);
          }
        }}
      />
    </div>
  );
}

function EditableColumnIndicator({
  id,
  column,
  label,
  selected,
  onSelect,
  onRename,
  onResize,
  width,
}: ColumnIndicatorProps & {
  id: string;
  onRename: (column: number) => void;
  onResize: (column: number, width: number, commit: boolean) => void;
  width: number;
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id,
    strategy: horizontalListSortingStrategy,
  });
  return (
    <th
      ref={setNodeRef}
      data-sheet-column={column}
      className={cn(
        "Spreadsheet__header",
        selected && "Spreadsheet__header--selected",
        isDragging && "opacity-60",
      )}
      style={{ transform: CSS.Transform.toString(transform), transition }}
    >
      <Button
        type="button"
        variant="ghost"
        size="icon-sm"
        className="touch-none"
        aria-label={`ลากเพื่อย้าย ${String(label ?? `คอลัมน์ ${column + 1}`)}`}
        {...attributes}
        {...listeners}
      >
        <GripHorizontalIcon />
      </Button>
      <Button
        type="button"
        variant="ghost"
        size="sm"
        className="min-w-0 flex-1"
        onClick={(event) => onSelect(column, event.shiftKey)}
        onDoubleClick={() => onRename(column)}
      >
        {label}
      </Button>
      <span
        role="separator"
        aria-label={`ปรับความกว้าง ${String(label ?? `คอลัมน์ ${column + 1}`)}`}
        aria-orientation="vertical"
        tabIndex={0}
        className="extra-sheet-column-resizer"
        onKeyDown={(event) => {
          if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
          event.preventDefault();
          onResize(column, width + (event.key === "ArrowRight" ? 8 : -8), true);
        }}
        onPointerDown={(event) => {
          event.preventDefault();
          event.stopPropagation();
          const startX = event.clientX;
          const startWidth = event.currentTarget.parentElement?.getBoundingClientRect().width
            ?? DEFAULT_EXTRA_SHEET_COLUMN_WIDTH;
          const move = (moveEvent: PointerEvent) =>
            onResize(column, startWidth + moveEvent.clientX - startX, false);
          const up = (upEvent: PointerEvent) => {
            onResize(column, startWidth + upEvent.clientX - startX, true);
            window.removeEventListener("pointermove", move);
            window.removeEventListener("pointerup", up);
          };
          window.addEventListener("pointermove", move);
          window.addEventListener("pointerup", up, { once: true });
        }}
      />
    </th>
  );
}

function SortableRowIndicator({
  id,
  row,
  label,
  selected,
  onSelect,
}: RowIndicatorProps & { id: string }) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id,
    strategy: verticalListSortingStrategy,
  });
  return (
    <th
      ref={setNodeRef}
      data-sheet-row={row}
      className={cn(
        "Spreadsheet__header",
        selected && "Spreadsheet__header--selected",
        isDragging && "opacity-60",
      )}
      style={{ transform: CSS.Transform.toString(transform), transition }}
    >
      <Button
        type="button"
        variant="ghost"
        size="icon-sm"
        className="touch-none"
        aria-label={`ลากเพื่อย้ายแถว ${row + 1}`}
        {...attributes}
        {...listeners}
      >
        <GripVerticalIcon />
      </Button>
      <Button
        type="button"
        variant="ghost"
        size="sm"
        className="min-w-0 flex-1"
        onClick={(event) => onSelect(row, event.shiftKey)}
      >
        {label ?? row + 1}
      </Button>
    </th>
  );
}

export function ExtraSheetEditor({
  value,
  createId,
  onChange,
  onRemove,
}: {
  value: ExtraSheet;
  createId: (prefix: string) => string;
  onChange: (value: ExtraSheet) => void;
  onRemove: () => void;
}) {
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  );
  const sheetRootRef = useRef<HTMLDivElement>(null);
  const spreadsheetRef = useRef<SpreadsheetRef>(null);
  const libraryActiveRef = useRef<Point | null>(null);
  const initialEditTextRef = useRef<string | null>(null);
  const [active, setActive] = useState<Point>({ row: 0, column: 0 });
  const [labelDialogOpen, setLabelDialogOpen] = useState(false);
  const [renaming, setRenaming] = useState(false);
  const [columnLabel, setColumnLabel] = useState("");
  const [removeOpen, setRemoveOpen] = useState(false);
  const [selectedCount, setSelectedCount] = useState(1);
  const [selectionKind, setSelectionKind] = useState<"cells" | "rows" | "columns">("cells");
  const [history, setHistory] = useState<SheetHistory>({
    items: [value],
    index: 0,
    value,
  });
  const pendingInlineCommitRef = useRef<(() => void) | null>(null);
  const colorTargetsRef = useRef<{ text?: Point[]; background?: Point[] }>({});
  const [sheetSelection, setSheetSelection] = useState<Selection>(
    () => new RangeSelection(new PointRange(active, active)),
  );
  const [layoutVersion, setLayoutVersion] = useState(0);
  const selectedPointsRef = useRef<Point[]>([active]);
  const selectedRangeRef = useRef({ start: active, end: active });
  const matrix = useMemo(() => extraSheetToMatrix(value), [value]);
  const activeColumn = value.columns[active.column];
  const activeRow = value.rows[active.row];
  const activeValue = activeColumn && activeRow
    ? activeRow.cells[activeColumn.id] ?? ""
    : "";
  const activeAlignment = activeColumn && activeRow
    ? activeRow.alignments?.[activeColumn.id] ?? "left"
    : "left";
  const activeVerticalAlignment = activeColumn && activeRow
    ? activeRow.verticalAlignments?.[activeColumn.id] ?? "top" : "top";
  const selectedRange = sheetSelection.toRange(matrix) ?? { start: active, end: active };
  const canMerge = canMergeExtraSheetRange(value, selectedRange);
  const canUnmerge = extraSheetRangePoints(selectedRange).some((point) => !!extraSheetMergeAt(value, point));
  const mergeMap = useMemo(() => extraSheetMergeMap(value), [value]);
  const cellContext = useMemo(() => ({ merges: mergeMap, layoutVersion }), [mergeMap, layoutVersion]);
  const canUndo = history.index > 0;
  const canRedo = history.index < history.items.length - 1;
  const sortableIds = useMemo(
    () => [
      ...value.columns.map((column) => columnDragId(column.id)),
      ...value.rows.map((row) => rowDragId(row.id)),
    ],
    [value.columns, value.rows],
  );

  if (history.value !== value) {
    setHistory(
      history.items[history.index] === value
        ? { ...history, value }
        : { items: [value], index: 0, value },
    );
  }

  const commitSheet = useCallback(
    (next: ExtraSheet) => {
      if (JSON.stringify(next) === JSON.stringify(value)) return;
      setHistory((current) => {
        const items = [
          ...current.items.slice(0, current.index + 1),
          next,
        ].slice(-SHEET_HISTORY_LIMIT);
        return { items, index: items.length - 1, value: next };
      });
      onChange(next);
    },
    [onChange, value],
  );

  const travel = useCallback(
    (direction: -1 | 1) => {
      const index = history.index + direction;
      const next = history.items[index];
      if (!next) return;
      setHistory((current) => ({ ...current, index, value: next }));
      onChange(next);
      const point = extraSheetAnchor(next, {
        row: Math.min(active.row, next.rows.length - 1),
        column: Math.min(active.column, next.columns.length - 1),
      });
      const range = expandExtraSheetRange(next, point, point);
      setActive(point);
      selectedPointsRef.current = extraSheetRangePoints(range);
      selectedRangeRef.current = range;
      setSheetSelection(new RangeSelection(new PointRange(range.start, range.end)));
      setSelectedCount(selectedPointsRef.current.length);
      const previous = libraryActiveRef.current;
      if (!previous || previous.row !== point.row || previous.column !== point.column) {
        spreadsheetRef.current?.activate(point);
      }
    },
    [active, history, onChange],
  );

  const activateOnly = useCallback((point: Point) => {
    const range = expandExtraSheetRange(value, point, point);
    point = extraSheetAnchor(value, point);
    setActive(point);
    selectedPointsRef.current = extraSheetRangePoints(range);
    selectedRangeRef.current = range;
    setSheetSelection(new RangeSelection(new PointRange(range.start, range.end)));
    setSelectedCount(selectedPointsRef.current.length);
    setSelectionKind("cells");
    const previous = libraryActiveRef.current;
    if (!previous || previous.row !== point.row || previous.column !== point.column) {
      spreadsheetRef.current?.activate(point);
    }
  }, [value]);

  const moveRow = useCallback(
    (from: number, to: number) => {
      const next = moveExtraSheetRow(value, from, to);
      if (next === value) return;
      const point = { ...active, row: movedIndex(active.row, from, to) };
      commitSheet(next);
      activateOnly(point);
    },
    [active, activateOnly, commitSheet, value],
  );

  const moveColumn = useCallback(
    (from: number, to: number) => {
      const next = moveExtraSheetColumn(value, from, to);
      if (next === value) return;
      const point = { ...active, column: movedIndex(active.column, from, to) };
      commitSheet(next);
      activateOnly(point);
    },
    [active, activateOnly, commitSheet, value],
  );

  const handleDragEnd = useCallback(
    ({ active: dragged, over }: DragEndEvent) => {
      if (!over || dragged.id === over.id) return;
      const draggedId = String(dragged.id);
      const overId = String(over.id);
      if (draggedId.startsWith("row:") && overId.startsWith("row:")) {
        const from = value.rows.findIndex(
          (row) => rowDragId(row.id) === draggedId,
        );
        const to = value.rows.findIndex((row) => rowDragId(row.id) === overId);
        if (from !== -1 && to !== -1) moveRow(from, to);
      }
      if (draggedId.startsWith("column:") && overId.startsWith("column:")) {
        const from = value.columns.findIndex(
          (column) => columnDragId(column.id) === draggedId,
        );
        const to = value.columns.findIndex(
          (column) => columnDragId(column.id) === overId,
        );
        if (from !== -1 && to !== -1) moveColumn(from, to);
      }
    },
    [moveColumn, moveRow, value.columns, value.rows],
  );

  const handleSheetKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    const target = event.target as HTMLElement;
    if (event.defaultPrevented || target.closest("input, textarea, [contenteditable='true']")) return;
    const key = event.key.toLowerCase();
    const commandKey = event.metaKey || event.ctrlKey;
    const undo =
      commandKey && !event.shiftKey && key === "z";
    const redo =
      (commandKey && event.shiftKey && key === "z") ||
      (event.ctrlKey && !event.shiftKey && key === "y");
    const format = commandKey && !event.altKey && !event.shiftKey
      ? ({ b: "bold", i: "italic", u: "underline" } as const)[key as "b" | "i" | "u"]
      : event.altKey && event.shiftKey && key === "5"
        ? "strike"
        : undefined;
    if (undo && canUndo) {
      event.preventDefault();
      travel(-1);
    } else if (redo && canRedo) {
      event.preventDefault();
      travel(1);
    } else if (format) {
      event.preventDefault();
      const activePattern = {
        bold: /<strong\b/i,
        italic: /<em\b/i,
        underline: /<u\b/i,
        strike: /<s\b/i,
      }[format];
      commitSheet(styleExtraSheetCells(value, selectedPointsRef.current, {
        [format]: !activePattern.test(activeValue),
      }));
    } else if (event.key === "Delete" || event.key === "Backspace") {
      event.preventDefault();
      commitSheet(updateExtraSheetCells(value, selectedPointsRef.current, { value: "" }));
    }
  };

  const applyStyle = (patch: RichTextStylePatch) =>
    commitSheet(styleExtraSheetCells(value, selectedPointsRef.current, patch));
  const clearContents = () =>
    commitSheet(updateExtraSheetCells(value, selectedPointsRef.current, { value: "" }));
  const clearFormatting = () =>
    commitSheet(clearExtraSheetCellFormatting(value, selectedPointsRef.current));
  const selectedTsv = () => extraSheetRangeToTsv(
    value,
    selectedRangeRef.current.start,
    selectedRangeRef.current.end,
  );
  const copySelection = async () => {
    await navigator.clipboard.writeText(selectedTsv());
  };
  const cutSelection = async () => {
    await copySelection();
    clearContents();
  };
  const pasteText = (text: string) => {
    if (!text) return;
    const pasted = parseExtraSheetTsv(text);
    if (selectedCount > 1 && pasted.length === 1 && pasted[0].length === 1) {
      commitSheet(updateExtraSheetCells(value, selectedPointsRef.current, {
        value: normalizeExtraRichText(pasted[0][0]),
      }));
      return;
    }
    commitSheet(pasteExtraSheetText(value, active, text, createId));
  };
  const pasteFromClipboard = async () => {
    pasteText(await navigator.clipboard.readText());
  };
  const handleCopy = (event: ClipboardEvent<HTMLDivElement>) => {
    if ((event.target as HTMLElement).closest("input, textarea, [contenteditable='true']")) return;
    event.preventDefault();
    event.stopPropagation();
    event.clipboardData.setData("text/plain", selectedTsv());
  };
  const handleCut = (event: ClipboardEvent<HTMLDivElement>) => {
    if ((event.target as HTMLElement).closest("input, textarea, [contenteditable='true']")) return;
    handleCopy(event);
    clearContents();
  };
  const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
    if ((event.target as HTMLElement).closest("input, textarea, [contenteditable='true']")) return;
    event.preventDefault();
    event.stopPropagation();
    pasteText(event.clipboardData.getData("text/plain"));
  };
  const normalizedLabel = columnLabel.trim().toLocaleLowerCase();
  const labelInvalid =
    !normalizedLabel ||
    value.columns.some(
      (column, index) =>
        index !== (renaming ? active.column : -1) &&
        column.label.toLocaleLowerCase() === normalizedLabel,
    );
  const openAddColumn = () => {
    setRenaming(false);
    setColumnLabel(nextExtraSheetColumnLabel(value.columns));
    setLabelDialogOpen(true);
  };
  const openRenameColumn = useCallback(
    (columnIndex = active.column) => {
      const column = value.columns[columnIndex];
      if (!column) return;
      setActive((current) => ({ ...current, column: columnIndex }));
      setRenaming(true);
      setColumnLabel(column.label);
      setLabelDialogOpen(true);
    },
    [active.column, value.columns],
  );
  const saveColumnLabel = () => {
    if (labelInvalid) return;
    if (renaming) {
      commitSheet({
        ...value,
        columns: value.columns.map((column, index) =>
          index === active.column
            ? { ...column, label: columnLabel.trim() }
            : column,
        ),
      });
    } else {
      const column = value.columns.length;
      commitSheet(
        addExtraSheetColumn(
          value,
          columnLabel.trim(),
          createId("extra-sheet-column"),
        ),
      );
      activateOnly({ ...active, column });
    }
    setLabelDialogOpen(false);
  };
  const insertRowAt = (index: number) => {
    commitSheet(insertExtraSheetRow(value, index, createId("extra-sheet-row")));
    activateOnly({ ...active, row: index });
  };
  const insertColumnAt = (index: number) => {
    commitSheet(insertExtraSheetColumn(
      value,
      index,
      nextExtraSheetColumnLabel(value.columns),
      createId("extra-sheet-column"),
    ));
    activateOnly({ ...active, column: index });
  };
  const removeActiveRow = () => {
    if (value.rows.length === 1) return;
    const next = deleteExtraSheetRow(value, active.row);
    commitSheet(next);
    activateOnly({ ...active, row: Math.min(active.row, next.rows.length - 1) });
  };
  const removeActiveColumn = () => {
    if (value.columns.length === 1) return;
    const next = deleteExtraSheetColumn(value, active.column);
    commitSheet(next);
    activateOnly({ ...active, column: Math.min(active.column, next.columns.length - 1) });
  };
  const resizeColumn = useCallback(
    (column: number, width: number, commit: boolean) => {
      const boundedWidth = Math.round(Math.max(
        MIN_EXTRA_SHEET_COLUMN_WIDTH,
        Math.min(MAX_EXTRA_SHEET_COLUMN_WIDTH, width),
      ));
      if (!commit) {
        const columnElement = sheetRootRef.current?.querySelector<HTMLTableColElement>(
          `col[data-sheet-column-index="${column}"]`,
        );
        if (columnElement) columnElement.style.width = `${boundedWidth}px`;
        return;
      }
      commitSheet(resizeExtraSheetColumn(value, column, boundedWidth));
    },
    [commitSheet, value],
  );
  const columnIndicator = useCallback(
    (props: ColumnIndicatorProps) => (
      <EditableColumnIndicator
        {...props}
        id={columnDragId(value.columns[props.column].id)}
        onRename={openRenameColumn}
        onResize={resizeColumn}
        width={value.columns[props.column].width
          ?? DEFAULT_EXTRA_SHEET_COLUMN_WIDTH}
      />
    ),
    [openRenameColumn, resizeColumn, value.columns],
  );
  const rowIndicator = useCallback(
    (props: RowIndicatorProps) => (
      <SortableRowIndicator
        {...props}
        id={rowDragId(value.rows[props.row].id)}
      />
    ),
    [value.rows],
  );
  const clearInitialEditText = useCallback(() => {
    initialEditTextRef.current = null;
  }, []);
  const navigateInlineRef = useRef<(point: Point, key: "Enter" | "Tab", shift: boolean) => void>(() => {});
  const commitInlineRef = useRef<(row: number, column: number, text: string) => void>(() => {});
  useLayoutEffect(() => {
    commitInlineRef.current = (row, column, text) => commitSheet(updateExtraSheetCell(value, row, column, text));
    navigateInlineRef.current = (point, key, shift) => {
      const direction = key === "Enter" ? { row: 1, column: 0 } : { row: 0, column: shift ? -1 : 1 };
      const next = nextExtraSheetPoint(value, point, direction, key === "Tab");
      if (next) activateOnly(next);
    };
  }, [value, commitSheet, activateOnly]);
  const registerInlineCommit = useCallback((commit: (() => void) | null) => {
    pendingInlineCommitRef.current = commit;
  }, []);
  const dataEditor = useCallback(
    (props: DataEditorProps<{ value: string }>) => (
      <InlineDataEditor
        {...props}
        initialText={initialEditTextRef.current ?? undefined}
        onReady={clearInitialEditText}
        onCommit={(text) => commitInlineRef.current(props.row, props.column, text)}
        registerCommit={registerInlineCommit}
        onNavigate={(key, shift) => navigateInlineRef.current({ row: props.row, column: props.column }, key, shift)}
      />
    ),
    [clearInitialEditText, registerInlineCommit],
  );
  const sheetTable = useCallback(
    ({ children, columns, hideColumnIndicators }: TableProps) => (
      <table className="Spreadsheet__table">
        <colgroup>
          {!hideColumnIndicators ? <col className="extra-sheet-row-number-column" /> : null}
          {Array.from({ length: columns }, (_, index) => (
            <col
              key={value.columns[index]?.id ?? index}
              data-sheet-column-index={index}
              style={{
                width: value.columns[index]?.width
                  ?? DEFAULT_EXTRA_SHEET_COLUMN_WIDTH,
              }}
            />
          ))}
        </colgroup>
        <tbody>{children}</tbody>
      </table>
    ),
    [value.columns],
  );
  useEffect(() => {
    const table = sheetRootRef.current?.querySelector("table");
    if (!table) return;
    let frame = 0;
    const observer = new ResizeObserver(() => {
      cancelAnimationFrame(frame);
      frame = requestAnimationFrame(() => setLayoutVersion((version) => version + 1));
    });
    observer.observe(table);
    return () => { observer.disconnect(); cancelAnimationFrame(frame); };
  }, [sheetTable]);

  useLayoutEffect(() => {
    const grid = sheetRootRef.current?.querySelector<HTMLElement>(".extra-sheet-grid");
    const table = grid?.querySelector("table");
    if (!grid || !table) return;
    const merge = extraSheetMergeAt(value, active);
    const rect = merge && sheetRangeRect(table, merge);
    grid.classList.toggle("extra-sheet-has-active-merge", !!rect);
    if (rect) {
      grid.style.setProperty("--merged-active-width", `${rect.width}px`);
      grid.style.setProperty("--merged-active-height", `${rect.height}px`);
    }
  }, [value, active, layoutVersion]);

  const mergeSelection = () => {
    try {
      const next = mergeExtraSheetRange(value, selectedRangeRef.current);
      if (next === value) return;
      commitSheet(next);
      activateOnly(selectedRangeRef.current.start);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "ไม่สามารถผสานเซลล์ได้");
    }
  };
  const unmergeSelection = () => commitSheet(unmergeExtraSheetRange(value, selectedRangeRef.current));
  const captureColorTargets = (kind: "text" | "background") => {
    colorTargetsRef.current[kind] = [...selectedPointsRef.current];
  };

  const activeFormats = [
    /<strong\b/i.test(activeValue) ? "bold" : null,
    /<em\b/i.test(activeValue) ? "italic" : null,
    /<u\b/i.test(activeValue) ? "underline" : null,
    /<s\b/i.test(activeValue) ? "strike" : null,
  ].filter((format): format is string => Boolean(format));
  const activeTextColor = activeValue.match(/color:\s*(#[0-9A-Fa-f]{6})/i)?.[1]
    ?? "#111111";

  return (
    <div
      ref={sheetRootRef}
      className="flex min-w-0 flex-col gap-3"
      aria-label="ตารางข้อมูลเสริม"
      onKeyDown={handleSheetKeyDown}
      onMouseDownCapture={(event) => {
        if (!(event.target as HTMLElement).closest(".Spreadsheet__data-editor")) {
          flushSync(() => pendingInlineCommitRef.current?.());
        }
      }}
      onCopyCapture={handleCopy}
      onCutCapture={handleCut}
      onPasteCapture={handlePaste}
    >
      <div className="flex items-center gap-2 overflow-x-auto pb-1">
        <SimpleTooltip
          text={
            <>
              ย้อนกลับ <Kbd>Ctrl/⌘ Z</Kbd>
            </>
          }
        >
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            disabled={!canUndo}
            aria-label="ย้อนกลับการแก้ไขตาราง"
            onClick={() => travel(-1)}
          >
            <Undo2Icon />
          </Button>
        </SimpleTooltip>
        <ToggleGroup
          multiple
          value={activeFormats}
          variant="outline"
          size="sm"
          spacing={0}
          aria-label="รูปแบบตัวอักษร"
          onValueChange={(formats) => {
            const patch: RichTextStylePatch = {};
            (["bold", "italic", "underline", "strike"] as const).forEach((format) => {
              const wasActive = activeFormats.includes(format);
              const isActive = formats.includes(format);
              if (wasActive !== isActive) patch[format] = isActive;
            });
            if (Object.keys(patch).length) applyStyle(patch);
          }}
        >
          <ToggleGroupItem value="bold" aria-label="ตัวหนา" title="ตัวหนา (Ctrl/⌘ B)">
            <BoldIcon />
          </ToggleGroupItem>
          <ToggleGroupItem value="italic" aria-label="ตัวเอียง" title="ตัวเอียง (Ctrl/⌘ I)">
            <ItalicIcon />
          </ToggleGroupItem>
          <ToggleGroupItem value="underline" aria-label="ขีดเส้นใต้" title="ขีดเส้นใต้ (Ctrl/⌘ U)">
            <UnderlineIcon />
          </ToggleGroupItem>
          <ToggleGroupItem value="strike" aria-label="ขีดฆ่า" title="ขีดฆ่า (Alt/⌥ Shift 5)">
            <StrikethroughIcon />
          </ToggleGroupItem>
        </ToggleGroup>
        <label className="relative shrink-0">
          <Button
            type="button"
            variant="outline"
            size="icon-sm"
            render={<span />}
            nativeButton={false}
            aria-label="สีตัวอักษร"
          >
            <span className="font-semibold underline decoration-2" style={{ textDecorationColor: activeTextColor }}>A</span>
          </Button>
          <input
            type="color"
            aria-label="เลือกสีตัวอักษร"
            className="absolute inset-0 cursor-pointer opacity-0"
            value={activeTextColor}
            onPointerDown={() => captureColorTargets("text")}
            onFocus={() => captureColorTargets("text")}
            onChange={(event) => commitSheet(styleExtraSheetCells(value, colorTargetsRef.current.text ?? selectedPointsRef.current, { color: event.target.value }))}
          />
        </label>
        <SimpleTooltip
          text={
            <>
              ทำซ้ำ <Kbd>Ctrl/⌘ Shift Z</Kbd>
            </>
          }
        >
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            disabled={!canRedo}
            aria-label="ทำซ้ำการแก้ไขตาราง"
            onClick={() => travel(1)}
          >
            <Redo2Icon />
          </Button>
        </SimpleTooltip>
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={() => {
            const row = value.rows.length;
            commitSheet(addExtraSheetRow(value, createId("extra-sheet-row")));
            activateOnly({ ...active, row });
          }}
        >
          <PlusIcon data-icon="inline-start" />
          เพิ่มแถว
        </Button>
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={openAddColumn}
        >
          <PlusIcon data-icon="inline-start" />
          เพิ่มคอลัมน์
        </Button>
        <label className="relative">
          <Button
            type="button"
            variant="outline"
            size="sm"
            render={<span />}
            nativeButton={false}
          >
            <PaletteIcon data-icon="inline-start" />
            สีพื้นหลัง
          </Button>
          <input
            type="color"
            aria-label="เลือกสีพื้นหลังเซลล์"
            onPointerDown={() => captureColorTargets("background")}
            onFocus={() => captureColorTargets("background")}
            className="absolute inset-0 cursor-pointer opacity-0"
            value={
              activeRow?.backgrounds?.[activeColumn?.id ?? ""] ??
              DEFAULT_CELL_BACKGROUND
            }
            onChange={(event) => {
              commitSheet(
                updateExtraSheetCells(value, colorTargetsRef.current.background ?? selectedPointsRef.current, {
                  backgroundColor: event.target.value,
                }),
              );
            }}
          />
        </label>
        <ToggleGroup
          value={[activeAlignment]}
          variant="outline"
          size="sm"
          spacing={0}
          aria-label="จัดแนวข้อความ"
          onValueChange={(alignments) => {
            const alignment = alignments[0] as ExtraSheetAlignment | undefined;
            if (alignment) {
              commitSheet(updateExtraSheetCells(value, selectedPointsRef.current, { alignment }));
            }
          }}
        >
          <ToggleGroupItem value="left" aria-label="ชิดซ้าย"><AlignLeftIcon /></ToggleGroupItem>
          <ToggleGroupItem value="center" aria-label="กึ่งกลาง"><AlignCenterIcon /></ToggleGroupItem>
          <ToggleGroupItem value="right" aria-label="ชิดขวา"><AlignRightIcon /></ToggleGroupItem>
        </ToggleGroup>
        <ToggleGroup
          value={[activeVerticalAlignment]}
          variant="outline"
          size="sm"
          spacing={0}
          aria-label="จัดแนวข้อความแนวตั้ง"
          onValueChange={(alignments) => {
            const verticalAlignment = alignments[0] as ExtraSheetVerticalAlignment | undefined;
            if (verticalAlignment) commitSheet(updateExtraSheetCells(value, selectedPointsRef.current, { verticalAlignment }));
          }}
        >
          <ToggleGroupItem value="top" aria-label="ชิดบน"><AlignVerticalJustifyStartIcon /></ToggleGroupItem>
          <ToggleGroupItem value="middle" aria-label="กึ่งกลางแนวตั้ง"><AlignVerticalJustifyCenterIcon /></ToggleGroupItem>
          <ToggleGroupItem value="bottom" aria-label="ชิดล่าง"><AlignVerticalJustifyEndIcon /></ToggleGroupItem>
        </ToggleGroup>
        <SimpleTooltip text="ล้างรูปแบบ">
          <Button type="button" variant="ghost" size="icon-sm" aria-label="ล้างรูปแบบ" onClick={clearFormatting}>
            <EraserIcon />
          </Button>
        </SimpleTooltip>
        <Button type="button" variant="outline" size="sm" disabled={!canMerge} onClick={mergeSelection}>
          <MergeIcon data-icon="inline-start" /> ผสานเซลล์
        </Button>
        <Button type="button" variant="outline" size="sm" disabled={!canUnmerge} onClick={unmergeSelection}>
          <SplitIcon data-icon="inline-start" /> ยกเลิกผสาน
        </Button>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => setRemoveOpen(true)}
        >
          <Trash2Icon data-icon="inline-start" />
          ลบตาราง
        </Button>
      </div>

      <InputGroup>
        <InputGroupAddon className="min-w-16 font-mono">
          {selectedCount > 1
            ? `${selectedCount} cells`
            : `${spreadsheetColumnName(active.column)}${active.row + 1}`}
        </InputGroupAddon>
        <InputGroupTextarea
          key={`${active.row}:${active.column}:${activeValue}`}
          aria-label="ค่าของเซลล์ที่เลือก"
          rows={1}
          defaultValue={extraRichTextToPlainText(activeValue)}
          onBlur={(event) => {
            if (event.currentTarget.value !== extraRichTextToPlainText(activeValue)) {
              commitSheet(updateExtraSheetCells(value, [active], {
                value: normalizeExtraRichText(event.currentTarget.value),
              }));
            }
          }}
          onKeyDown={(event) => {
            if (event.key === "Enter" && !event.shiftKey) {
              event.preventDefault();
              event.currentTarget.blur();
            }
          }}
        />
      </InputGroup>

      <ContextMenu>
        <ContextMenuTrigger className="extra-sheet-scroll max-h-[32rem] overflow-auto rounded-lg border">
          <DndContext
            sensors={sensors}
            collisionDetection={sameAxisCollision}
            onDragEnd={handleDragEnd}
          >
            <SortableContext items={sortableIds} strategy={rectSortingStrategy}>
              <ExtraSheetCellContext.Provider value={cellContext}>
              <Spreadsheet
              ref={spreadsheetRef}
              className="extra-sheet-grid"
              data={matrix}
              Cell={ExtraSheetCellView}
              selected={sheetSelection}
              columnLabels={value.columns.map((column) => column.label)}
              ColumnIndicator={columnIndicator}
              RowIndicator={rowIndicator}
              Table={sheetTable}
              DataViewer={LiteralDataViewer}
              DataEditor={dataEditor}
              onKeyDown={(event) => {
                if (
                  (event.target as HTMLElement).closest(
                    ".Spreadsheet__data-editor",
                  )
                ) {
                  return;
                }
                if (["Delete", "Backspace"].includes(event.key)) {
                  event.preventDefault();
                  commitSheet(updateExtraSheetCells(value, selectedPointsRef.current, { value: "" }));
                  return;
                }
                const directions: Record<string, Point> = {
                  ArrowUp: { row: -1, column: 0 }, ArrowDown: { row: 1, column: 0 },
                  ArrowLeft: { row: 0, column: -1 }, ArrowRight: { row: 0, column: 1 },
                  Tab: { row: 0, column: event.shiftKey ? -1 : 1 },
                };
                const direction = directions[event.key];
                if (direction && (!event.shiftKey || event.key === "Tab") && !event.ctrlKey && !event.metaKey) {
                  event.preventDefault();
                  const point = nextExtraSheetPoint(value, active, direction, event.key === "Tab");
                  if (point) activateOnly(point);
                  return;
                }
                const startsTyping =
                  event.key.length === 1 &&
                  !event.ctrlKey &&
                  !event.metaKey &&
                  !event.altKey;
                if (event.key !== "F2" && !startsTyping) return;
                event.preventDefault();
                initialEditTextRef.current = startsTyping
                  ? event.key
                  : null;
                const root = event.currentTarget as HTMLElement;
                root
                  .querySelector<HTMLElement>(".Spreadsheet__active-cell--view")
                  ?.click();
              }}
              onBlur={() => { libraryActiveRef.current = null; }}
              onActivate={(point) => {
                libraryActiveRef.current = point;
                const anchor = extraSheetAnchor(value, point);
                if (anchor.row !== point.row || anchor.column !== point.column) {
                  spreadsheetRef.current?.activate(anchor);
                  return;
                }
                setActive(anchor);
              }}
              onSelect={(nextSelection: Selection) => {
                const range = nextSelection.toRange(matrix);
                if (range) {
                  const expanded = expandExtraSheetRange(value, range.start, range.end);
                  selectedPointsRef.current = extraSheetRangePoints(expanded);
                  selectedRangeRef.current = expanded;
                  setSelectedCount(selectedPointsRef.current.length);
                  const changed = expanded.start.row !== range.start.row || expanded.start.column !== range.start.column
                    || expanded.end.row !== range.end.row || expanded.end.column !== range.end.column;
                  setSheetSelection(changed ? new RangeSelection(new PointRange(expanded.start, expanded.end)) : nextSelection);
                  setSelectionKind(
                    nextSelection instanceof EntireRowsSelection ? "rows"
                      : nextSelection instanceof EntireColumnsSelection ? "columns" : "cells",
                  );
                }
              }}
              onChange={(next) =>
                commitSheet(
                  matrixToExtraSheet(value, next as ExtraSheetMatrix, createId),
                )
              }
              />
              </ExtraSheetCellContext.Provider>
            </SortableContext>
          </DndContext>
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuItem onClick={() => void cutSelection()}>
              <ScissorsIcon /> ตัด <ContextMenuShortcut>Ctrl/⌘ X</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem onClick={() => void copySelection()}>
              <CopyIcon /> คัดลอก <ContextMenuShortcut>Ctrl/⌘ C</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem onClick={() => void pasteFromClipboard()}>
              <ClipboardIcon /> วาง <ContextMenuShortcut>Ctrl/⌘ V</ContextMenuShortcut>
            </ContextMenuItem>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          {selectionKind === "rows" ? (
            <ContextMenuGroup>
              <ContextMenuItem onClick={() => insertRowAt(active.row)}>เพิ่มแถวด้านบน</ContextMenuItem>
              <ContextMenuItem onClick={() => insertRowAt(active.row + 1)}>เพิ่มแถวด้านล่าง</ContextMenuItem>
              <ContextMenuItem variant="destructive" disabled={value.rows.length === 1} onClick={removeActiveRow}>
                <Trash2Icon /> ลบแถว
              </ContextMenuItem>
            </ContextMenuGroup>
          ) : selectionKind === "columns" ? (
            <ContextMenuGroup>
              <ContextMenuItem onClick={() => insertColumnAt(active.column)}>เพิ่มคอลัมน์ด้านซ้าย</ContextMenuItem>
              <ContextMenuItem onClick={() => insertColumnAt(active.column + 1)}>เพิ่มคอลัมน์ด้านขวา</ContextMenuItem>
              <ContextMenuItem onClick={() => openRenameColumn()}>เปลี่ยนชื่อคอลัมน์</ContextMenuItem>
              <ContextMenuItem variant="destructive" disabled={value.columns.length === 1} onClick={removeActiveColumn}>
                <Trash2Icon /> ลบคอลัมน์
              </ContextMenuItem>
            </ContextMenuGroup>
          ) : (
            <ContextMenuGroup>
              <ContextMenuItem disabled={!canMerge} onClick={mergeSelection}><MergeIcon /> ผสานเซลล์</ContextMenuItem>
              <ContextMenuItem disabled={!canUnmerge} onClick={unmergeSelection}><SplitIcon /> ยกเลิกผสาน</ContextMenuItem>
              <ContextMenuItem onClick={clearContents}>ล้างเนื้อหา</ContextMenuItem>
              <ContextMenuItem onClick={clearFormatting}><EraserIcon /> ล้างรูปแบบ</ContextMenuItem>
            </ContextMenuGroup>
          )}
        </ContextMenuContent>
      </ContextMenu>

      <Dialog open={labelDialogOpen} onOpenChange={setLabelDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
              {renaming ? "แก้ไขชื่อคอลัมน์" : "เพิ่มคอลัมน์"}
            </DialogTitle>
            <DialogDescription>
              ตั้งชื่อที่ใช้อธิบายข้อมูลในคอลัมน์นี้
            </DialogDescription>
          </DialogHeader>
          <FieldGroup>
            <Field data-invalid={labelInvalid || undefined}>
              <FieldLabel htmlFor="extra-sheet-column-label">
                ชื่อคอลัมน์
              </FieldLabel>
              <Input
                id="extra-sheet-column-label"
                value={columnLabel}
                aria-invalid={labelInvalid || undefined}
                autoFocus
                onChange={(event) => setColumnLabel(event.target.value)}
                onKeyDown={(event) => {
                  if (event.key === "Enter") saveColumnLabel();
                }}
              />
            </Field>
          </FieldGroup>
          <DialogFooter showCloseButton>
            <Button
              type="button"
              disabled={labelInvalid}
              onClick={saveColumnLabel}
            >
              {renaming ? "บันทึกชื่อ" : "เพิ่มคอลัมน์"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <DeleteConfirmationDialog
        open={removeOpen}
        onOpenChange={setRemoveOpen}
        title="ลบตารางนี้?"
        description="คอลัมน์ แถว และข้อมูลในเซลล์ทั้งหมดจะถูกลบออกจากการ์ด"
        confirmLabel="ยืนยันลบตาราง"
        showSuccessToast={false}
        onConfirm={() => {
          onRemove();
          setRemoveOpen(false);
        }}
      />
    </div>
  );
}