import { useEffect, useRef, useState } from "react";
import { Stage, Layer, Rect } from "react-konva";
import Konva from "konva";
import { useEditorStore } from "../store/editorStore";
import { useDrawingHandlers } from "./canvas/useDrawingHandlers";
import { useStageSize } from "./canvas/useStageSize";
import { useKeyboardMovement } from "./canvas/useKeyboardMovement";
import { useSelectionHandlers } from "./canvas/useSelectionHandlers";
import { useTransformHandlers } from "./canvas/useTransformHandlers";
import { useObjectHandlers } from "./canvas/useObjectHandlers";
import { useMaskGroupState } from "./canvas/useMaskGroupState";
import ObjectsLayer from "./canvas/ObjectsLayer";
import GuidesLayer from "./canvas/GuidesLayer";
import { getSnappedPosition, type Guide } from "./canvas/useSnap";
import CellEditor from "@/components/CellEditor";
import ZoomControls from "./ZoomControls";

type EditorCanvasProps = {
  catalogSize?: string;
};

const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
  const stageRef = useRef<Konva.Stage>(null);
  const layerRef = useRef<Konva.Layer>(null);
  const activeGuideIdsRef = useRef<string[]>([]);
  const stageWrapRef = useRef<HTMLDivElement>(null);

  const {
    tool,
    objects,
    guides,
    selectedObjectId,
    selectedObjectIds,
    selectedCellId,
    editingCell,
    setStageRef,
    setLayerRef,
    setGuides,
    zoom,
  } = useEditorStore();

  const { transformerRef, handleStageMouseDown, handleStageMouseMove, handleStageMouseUp } = useDrawingHandlers();
  const stageSize = useStageSize(catalogSize);
  useKeyboardMovement();

  const { handleSelect, handleCellClick, handleCellDblClick } = useSelectionHandlers();
  const { handleObjectUpdate, handleGroupWithMask, handleUngroupFromMask, handleCellEditorSave, handleCellEditorCancel } =
    useObjectHandlers();

  const { isGroupedWithMask, maskObject, canGroup, canUngroup, selectedObject } = useMaskGroupState(selectedObjectId);

  useTransformHandlers(transformerRef, layerRef);

  const [activeGuideIds, setActiveGuideIds] = useState<string[]>([]);
  const [selectedGuideId, setSelectedGuideId] = useState<string | null>(null);
  const [draftGuide, setDraftGuide] = useState<{
    orientation: Guide["orientation"];
    position: number;
  } | null>(null);

  useEffect(() => {
    if (stageRef.current) {
      setStageRef(stageRef);
    }
    if (layerRef.current) {
      setLayerRef(layerRef);
    }
  }, [setStageRef, setLayerRef]);


  const finalScale = stageSize.scale * zoom;
  const updateActiveGuides = (nextActiveGuideIds: string[]) => {
    const prev = activeGuideIdsRef.current;
    const changed =
      prev.length !== nextActiveGuideIds.length ||
      prev.some((id, index) => id !== nextActiveGuideIds[index]);

    if (changed) {
      activeGuideIdsRef.current = nextActiveGuideIds;
      setActiveGuideIds(nextActiveGuideIds);
    }
  };

  const handleGuidePositionChange = (id: string, position: number) => {
    setGuides(
      guides.map((guide) =>
        guide.id === id
          ? {
            ...guide,
            position,
          }
          : guide,
      ),
    );
  };

  const addGuide = (orientation: Guide["orientation"], position: number) => {
    const id = `guide-${orientation}-${crypto.randomUUID()}`;
    setGuides([...guides, { id, orientation, position }]);
    setSelectedGuideId(id);
  };

  const removeGuide = (id: string) => {
    setGuides(guides.filter((guide) => guide.id !== id));
    setActiveGuideIds((prev) => prev.filter((activeId) => activeId !== id));
    setSelectedGuideId((prev) => (prev === id ? null : prev));
  };

  const handleGuideDragEnd = (id: string, position: number, shouldRemove: boolean) => {
    if (shouldRemove) {
      removeGuide(id);
      return;
    }
    handleGuidePositionChange(id, position);
  };

  useEffect(() => {
    const handleDeleteGuide = (e: KeyboardEvent) => {
      if (!selectedGuideId) return;
      const target = e.target as HTMLElement;
      if (
        target?.tagName === "INPUT" ||
        target?.tagName === "TEXTAREA" ||
        target?.isContentEditable
      ) {
        return;
      }

      if (e.key === "Delete" || e.key === "Backspace") {
        e.preventDefault();
        removeGuide(selectedGuideId);
      }
    };

    window.addEventListener("keydown", handleDeleteGuide);
    return () => {
      window.removeEventListener("keydown", handleDeleteGuide);
    };
  }, [selectedGuideId]);

  const startRulerGuideDrag = (orientation: Guide["orientation"]) => {
    const updateFromPointer = (event: MouseEvent) => {
      const rect = stageWrapRef.current?.getBoundingClientRect();
      if (!rect) return null;
      const rawPos =
        orientation === "vertical"
          ? (event.clientX - rect.left) / finalScale
          : (event.clientY - rect.top) / finalScale;
      return rawPos;
    };

    const updateDraft = (event: MouseEvent) => {
      const pointerPos = updateFromPointer(event);
      if (pointerPos === null) return;
      const boundedPos =
        orientation === "vertical"
          ? Math.max(0, Math.min(stageSize.width, pointerPos))
          : Math.max(0, Math.min(stageSize.height, pointerPos));
      setDraftGuide({ orientation, position: boundedPos });
    };

    const handleMouseMove = (event: MouseEvent) => {
      updateDraft(event);
    };

    const handleMouseUp = (event: MouseEvent) => {
      const rect = stageWrapRef.current?.getBoundingClientRect();
      if (!rect) {
        setDraftGuide(null);
        return;
      }

      const isInside =
        event.clientX >= rect.left &&
        event.clientX <= rect.right &&
        event.clientY >= rect.top &&
        event.clientY <= rect.bottom;

      if (isInside) {
        const pointerPos = updateFromPointer(event);
        if (pointerPos !== null) {
          const boundedPos = orientation === "vertical"
            ? Math.max(0, Math.min(stageSize.width, pointerPos))
            : Math.max(0, Math.min(stageSize.height, pointerPos));
          addGuide(orientation, boundedPos);
        }
      }

      setDraftGuide(null);
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("mouseup", handleMouseUp);
    };

    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("mouseup", handleMouseUp, { once: true });
  };

  const handleDragMove = (e: Konva.KonvaEventObject<DragEvent>) => {
    const node = e.target;
    if (!node || node.name() === "guide-line") return;

    const snapped = getSnappedPosition(node, guides);

    if (node.x() !== snapped.position.x || node.y() !== snapped.position.y) {
      node.position(snapped.position);
      node.getLayer()?.batchDraw();
    }

    updateActiveGuides(snapped.activeGuideIds);
  };

  const handleDragEnd = () => {
    updateActiveGuides([]);
  };

  const handleStageMouseDownWithGuideReset = (e: Konva.KonvaEventObject<MouseEvent>) => {
    if (e.target?.name() !== "guide-line") {
      setSelectedGuideId(null);
    }
    handleStageMouseDown(e);
  };

  return (
    <div className="flex-1 flex items-center justify-center pb-8 overflow-auto relative">
      <div className="mt-8">
        <div
          className="relative select-none"
          style={{
            width: stageSize.width * finalScale,
            height: stageSize.height * finalScale,
          }}
        >
          <div
            className="absolute -top-6 left-0 h-6 bg-slate-100 border-b border-slate-300 cursor-col-resize"
            style={{ width: stageSize.width * finalScale }}
            onMouseDown={(e) => {
              e.preventDefault();
              startRulerGuideDrag("vertical");
            }}
            title="Drag to create vertical guide"
          />
          <div
            className="absolute top-0 -left-6 w-6 bg-slate-100 border-r border-slate-300 cursor-row-resize"
            style={{ height: stageSize.height * finalScale }}
            onMouseDown={(e) => {
              e.preventDefault();
              startRulerGuideDrag("horizontal");
            }}
            title="Drag to create horizontal guide"
          />
          <div className="absolute -top-6 -left-6 w-6 h-6 bg-slate-200 border border-slate-300" />
          <div ref={stageWrapRef} className="shadow-lg">
            <Stage
              ref={stageRef}
              width={stageSize.width * finalScale}
              height={stageSize.height * finalScale}
              scaleX={finalScale}
              scaleY={finalScale}
              onMouseDown={handleStageMouseDownWithGuideReset}
              onMouseMove={handleStageMouseMove}
              onMouseUp={handleStageMouseUp}
              onDragMove={handleDragMove}
              onDragEnd={handleDragEnd}
            >
              <Layer listening={false}>
                <Rect
                  x={0}
                  y={0}
                  width={stageSize.width}
                  height={stageSize.height}
                  fill="#ffffff"
                  listening={false}
                />
              </Layer>

              <ObjectsLayer
                layerRef={layerRef}
                objects={objects}
                selectedObjectIds={selectedObjectIds}
                selectedCellId={selectedCellId}
                tool={tool}
                transformerRef={transformerRef}
                selectedObject={selectedObject}
                isGroupedWithMask={isGroupedWithMask}
                maskObject={maskObject}
                canGroup={canGroup}
                canUngroup={canUngroup}
                onSelect={handleSelect}
                onUpdate={handleObjectUpdate}
                onCellClick={handleCellClick}
                onCellDblClick={handleCellDblClick}
                onGroup={handleGroupWithMask}
                onUngroup={handleUngroupFromMask}
              />
              <GuidesLayer
                guides={guides}
                stageWidth={stageSize.width}
                stageHeight={stageSize.height}
                activeGuideIds={activeGuideIds}
                selectedGuideId={selectedGuideId}
                draftGuide={draftGuide}
                onGuideSelect={setSelectedGuideId}
                onGuideDragEnd={handleGuideDragEnd}
              />
            </Stage>
          </div>
        </div>
      </div>
      {editingCell && (
        <CellEditor
          x={editingCell.x}
          y={editingCell.y}
          width={editingCell.width}
          height={editingCell.height}
          value={editingCell.value}
          onSave={handleCellEditorSave}
          onCancel={handleCellEditorCancel}
        />
      )}
      <ZoomControls />
    </div>
  );
};

export default EditorCanvas;