"use client";

import {
  GripHorizontalIcon,
  GripVerticalIcon,
  PlusIcon,
  PencilIcon,
  PaletteIcon,
  Redo2Icon,
  Trash2Icon,
  Undo2Icon,
} from "lucide-react";
import Spreadsheet, {
  type ColumnIndicatorProps,
  type DataEditorProps,
  type Point,
  type RowIndicatorProps,
  type SpreadsheetRef,
} from "react-spreadsheet";
import {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
  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 { DeleteConfirmationDialog } from "@/components/admin/delete-confirmation-dialog";
import { RichTextContent } from "@/components/rich-text-content";
import { RichTextEditor } from "@/components/rich-text-editor";
import { SimpleTooltip } from "@/components/tooltip";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Kbd } from "@/components/ui/kbd";
import {
  addExtraSheetColumn,
  addExtraSheetRow,
  extraSheetToMatrix,
  matrixToExtraSheet,
  moveExtraSheetColumn,
  moveExtraSheetRow,
  nextExtraSheetColumnLabel,
  styleExtraSheetCells,
  updateExtraSheetCell,
  updateExtraSheetCells,
  type ExtraSheet,
  type ExtraSheetMatrix,
} from "@/lib/guides/extra-sheet";
import {
  normalizeExtraRichText,
  richTextContentSignature,
  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 LiteralDataViewer({
  cell,
}: {
  cell?: { value?: unknown; backgroundColor?: string };
}) {
  return (
    <div
      className="Spreadsheet__data-viewer Spreadsheet__data-viewer--preserve-breaks size-full"
      style={
        cell?.backgroundColor
          ? { backgroundColor: cell.backgroundColor }
          : undefined
      }
    >
      <RichTextContent
        html={normalizeExtraRichText(String(cell?.value ?? ""))}
      />
    </div>
  );
}

function InlineDataEditor({
  cell,
  onChange,
}: DataEditorProps<{ value: string }>) {
  const inputRef = useRef<HTMLInputElement>(null);
  const text = useMemo(() => {
    const document = new DOMParser().parseFromString(
      normalizeExtraRichText(String(cell?.value ?? "")),
      "text/html",
    );
    document.querySelectorAll("br").forEach((br) => br.replaceWith("\n"));
    document.querySelectorAll("p + p").forEach((p) => p.prepend("\n"));
    return document.body.textContent ?? "";
  }, [cell?.value]);
  useEffect(() => {
    const input = inputRef.current;
    input?.focus();
    input?.setSelectionRange(input.value.length, input.value.length);
  }, []);
  return (
    <div className="Spreadsheet__data-editor">
      <input
        ref={inputRef}
        type="text"
        aria-label="แก้ไขข้อความเซลล์"
        value={text}
        onChange={(event) => onChange({ ...cell, value: event.target.value })}
      />
    </div>
  );
}

function EditableColumnIndicator({
  id,
  column,
  label,
  selected,
  onRename,
}: ColumnIndicatorProps & { id: string; onRename: (column: number) => void }) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id,
    strategy: horizontalListSortingStrategy,
  });
  return (
    <th
      ref={setNodeRef}
      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={() => onRename(column)}
      >
        {label}
      </Button>
    </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}
      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 spreadsheetRef = useRef<SpreadsheetRef>(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 [cellDialogOpen, setCellDialogOpen] = useState(false);
  const [cellDraft, setCellDraft] = useState("");
  const [originalCellDraft, setOriginalCellDraft] = useState("");
  const [stylePatch, setStylePatch] = useState<RichTextStylePatch>({});
  const [selectedCount, setSelectedCount] = useState(1);
  const [history, setHistory] = useState<SheetHistory>({
    items: [value],
    index: 0,
    value,
  });
  const selectedPointsRef = useRef<Point[]>([active]);
  const matrix = useMemo(() => extraSheetToMatrix(value), [value]);
  const activeColumn = value.columns[active.column];
  const activeRow = value.rows[active.row];
  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 = {
        row: Math.min(active.row, next.rows.length - 1),
        column: Math.min(active.column, next.columns.length - 1),
      };
      setActive(point);
      selectedPointsRef.current = [point];
      setSelectedCount(1);
      window.requestAnimationFrame(() =>
        spreadsheetRef.current?.activate(point),
      );
    },
    [active, history, onChange],
  );

  const activateOnly = useCallback((point: Point) => {
    setActive(point);
    selectedPointsRef.current = [point];
    setSelectedCount(1);
    window.requestAnimationFrame(() => spreadsheetRef.current?.activate(point));
  }, []);

  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 (target.closest("input, textarea, [contenteditable='true']")) return;
    const key = event.key.toLowerCase();
    const undo =
      (event.metaKey || event.ctrlKey) && !event.shiftKey && key === "z";
    const redo =
      ((event.metaKey || event.ctrlKey) && event.shiftKey && key === "z") ||
      (event.ctrlKey && !event.shiftKey && key === "y");
    if (undo && canUndo) {
      event.preventDefault();
      travel(-1);
    } else if (redo && canRedo) {
      event.preventDefault();
      travel(1);
    }
  };
  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 openCellEditorAt = useCallback(
    (point: Point, content?: string) => {
      setActive(point);
      const column = value.columns[point.column];
      const row = value.rows[point.row];
      setCellDraft(
        normalizeExtraRichText(
          content ?? (column && row ? (row.cells[column.id] ?? "") : ""),
        ),
      );
      setOriginalCellDraft(
        normalizeExtraRichText(
          content ?? (column && row ? (row.cells[column.id] ?? "") : ""),
        ),
      );
      setStylePatch({});
      setCellDialogOpen(true);
    },
    [value.columns, value.rows],
  );
  const openActiveCellEditor = () => openCellEditorAt(active);
  const columnIndicator = useCallback(
    (props: ColumnIndicatorProps) => (
      <EditableColumnIndicator
        {...props}
        id={columnDragId(value.columns[props.column].id)}
        onRename={openRenameColumn}
      />
    ),
    [openRenameColumn, value.columns],
  );
  const rowIndicator = useCallback(
    (props: RowIndicatorProps) => (
      <SortableRowIndicator
        {...props}
        id={rowDragId(value.rows[props.row].id)}
      />
    ),
    [value.rows],
  );

  return (
    <div
      className="flex min-w-0 flex-col gap-3"
      aria-label="ตารางข้อมูลเสริม"
      onKeyDown={handleSheetKeyDown}
    >
      <div className="flex flex-wrap items-center gap-2">
        <SimpleTooltip
          text={
            <>
              ย้อนกลับ <Kbd>Ctrl/⌘ Z</Kbd>
            </>
          }
        >
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            disabled={!canUndo}
            aria-label="ย้อนกลับการแก้ไขตาราง"
            onClick={() => travel(-1)}
          >
            <Undo2Icon />
          </Button>
        </SimpleTooltip>
        <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>
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={openActiveCellEditor}
        >
          <PencilIcon data-icon="inline-start" />
          แก้ไข {selectedCount > 1 ? `${selectedCount} เซลล์` : "เซลล์"}
        </Button>
        <label className="relative">
          <Button
            type="button"
            variant="outline"
            size="sm"
            render={<span />}
            nativeButton={false}
          >
            <PaletteIcon data-icon="inline-start" />
            สีพื้นหลัง {selectedCount > 1 ? `${selectedCount} เซลล์` : "เซลล์"}
          </Button>
          <input
            type="color"
            aria-label="เลือกสีพื้นหลังเซลล์"
            className="absolute inset-0 cursor-pointer opacity-0"
            value={
              activeRow?.backgrounds?.[activeColumn?.id ?? ""] ??
              DEFAULT_CELL_BACKGROUND
            }
            onChange={(event) => {
              commitSheet(
                updateExtraSheetCells(value, selectedPointsRef.current, {
                  backgroundColor: event.target.value,
                }),
              );
            }}
          />
        </label>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() =>
            commitSheet(
              updateExtraSheetCells(value, selectedPointsRef.current, {
                backgroundColor: null,
              }),
            )
          }
        >
          ล้างสีพื้นหลัง
        </Button>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => setRemoveOpen(true)}
        >
          <Trash2Icon data-icon="inline-start" />
          ลบตาราง
        </Button>
      </div>

      <div
        className="overflow-x-auto rounded-lg border"
        onClickCapture={(event) => {
          if (
            (event.target as HTMLElement).closest(
              ".Spreadsheet__active-cell--view",
            )
          ) {
            event.stopPropagation();
          }
        }}
        onDoubleClickCapture={(event) => {
          if (
            (event.target as HTMLElement).closest(
              ".Spreadsheet__cell, .Spreadsheet__active-cell",
            )
          ) {
            event.preventDefault();
            event.stopPropagation();
            openCellEditorAt(active);
          }
        }}
      >
        <DndContext
          sensors={sensors}
          collisionDetection={sameAxisCollision}
          onDragEnd={handleDragEnd}
        >
          <SortableContext items={sortableIds} strategy={rectSortingStrategy}>
            <Spreadsheet
              ref={spreadsheetRef}
              className="extra-sheet-grid"
              data={matrix}
              columnLabels={value.columns.map((column) => column.label)}
              ColumnIndicator={columnIndicator}
              RowIndicator={rowIndicator}
              DataViewer={LiteralDataViewer}
              DataEditor={InlineDataEditor}
              onActivate={(point) => {
                setActive(point);
                setSelectedCount(1);
                selectedPointsRef.current = [point];
              }}
              onSelect={(nextSelection) => {
                const range = nextSelection.toRange(matrix);
                if (range) {
                  selectedPointsRef.current = Array.from(range);
                  setSelectedCount(range.size());
                }
              }}
              onChange={(next) =>
                commitSheet(
                  matrixToExtraSheet(value, next as ExtraSheetMatrix, createId),
                )
              }
            />
          </SortableContext>
        </DndContext>
      </div>

      <Dialog open={cellDialogOpen} onOpenChange={setCellDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>แก้ไขเซลล์</DialogTitle>
            <DialogDescription>
              {selectedCount > 1
                ? `การแก้ข้อความจะแทนที่ทั้ง ${selectedCount} เซลล์ แต่การเปลี่ยนรูปแบบจะเก็บข้อความเดิมของแต่ละเซลล์`
                : `แถว ${active.row + 1} · ${activeColumn?.label ?? "คอลัมน์"}`}
            </DialogDescription>
          </DialogHeader>
          <RichTextEditor
            value={cellDraft}
            onChange={setCellDraft}
            showBubbleMenu={false}
            formatWholeContent={selectedCount > 1}
            onFormatChange={(patch) =>
              setStylePatch((current) => ({ ...current, ...patch }))
            }
          />
          <DialogFooter showCloseButton>
            <Button
              type="button"
              onClick={() => {
                const contentUnchanged =
                  richTextContentSignature(cellDraft) ===
                  richTextContentSignature(originalCellDraft);
                if (selectedCount > 1 && contentUnchanged) {
                  if (Object.keys(stylePatch).length > 0) {
                    commitSheet(
                      styleExtraSheetCells(
                        value,
                        selectedPointsRef.current,
                        stylePatch,
                      ),
                    );
                  }
                } else {
                  commitSheet(
                    selectedCount > 1
                      ? updateExtraSheetCells(
                          value,
                          selectedPointsRef.current,
                          { value: cellDraft },
                        )
                      : updateExtraSheetCell(
                          value,
                          active.row,
                          active.column,
                          cellDraft,
                        ),
                  );
                }
                setCellDialogOpen(false);
              }}
            >
              บันทึกเซลล์
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <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>
  );
}