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