"use client";

import type { PreviewViewportSetting, PreviewViewportSize } from "@t3tools/contracts";
import {
  useCallback,
  useEffect,
  useRef,
  useState,
  type KeyboardEvent as ReactKeyboardEvent,
  type PointerEvent as ReactPointerEvent,
} from "react";

import { commitBrowserViewportChange } from "./browserViewportActions";
import {
  browserViewportSettingKey,
  resizeBrowserViewportFromRail,
  resizeFreeformViewport,
  resolveBrowserDeviceViewportArea,
  resolveBrowserDeviceViewportLayout,
  resolveBrowserViewportLayout,
  type BrowserViewportResizeDirection,
} from "./browserViewportLayout";

interface ViewportDrag extends PreviewViewportSize {
  readonly sourceKey: string;
  readonly direction: BrowserViewportResizeDirection;
}

const KEYBOARD_RESIZE_COMMIT_DELAY_MS = 150;

export function useBrowserViewportResize(options: {
  readonly tabId: string;
  readonly viewport: PreviewViewportSetting;
  readonly zoomFactor: number;
  readonly containerSize: PreviewViewportSize;
  readonly deviceToolbarVisible: boolean;
  readonly aspectRatio: number | null;
}) {
  const { tabId, viewport, zoomFactor, containerSize, deviceToolbarVisible, aspectRatio } = options;
  const dragCleanupRef = useRef<(() => void) | null>(null);
  const dragVersionRef = useRef(0);
  const keyboardCommitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const keyboardViewportRef = useRef<ViewportDrag | null>(null);
  const [dragViewport, setDragViewport] = useState<ViewportDrag | null>(null);
  const sourceViewportKey = browserViewportSettingKey(viewport);
  const sourceViewportKeyRef = useRef(sourceViewportKey);
  sourceViewportKeyRef.current = sourceViewportKey;
  const activeDrag = dragViewport?.sourceKey === sourceViewportKey ? dragViewport : null;
  const effectiveViewport = activeDrag
    ? ({
        _tag: "freeform",
        width: activeDrag.width,
        height: activeDrag.height,
      } as const satisfies PreviewViewportSetting)
    : viewport;
  const normalizedZoomFactor = Number.isFinite(zoomFactor) && zoomFactor > 0 ? zoomFactor : 1;
  const viewportContainerSize = deviceToolbarVisible
    ? resolveBrowserDeviceViewportArea(containerSize)
    : containerSize;
  const layout =
    deviceToolbarVisible && effectiveViewport._tag !== "fill"
      ? resolveBrowserDeviceViewportLayout(containerSize, effectiveViewport, zoomFactor)
      : resolveBrowserViewportLayout(containerSize, effectiveViewport, zoomFactor);

  useEffect(
    () => () => {
      dragVersionRef.current += 1;
      dragCleanupRef.current?.();
      if (keyboardCommitTimerRef.current !== null) {
        clearTimeout(keyboardCommitTimerRef.current);
      }
      keyboardCommitTimerRef.current = null;
      keyboardViewportRef.current = null;
    },
    [],
  );

  useEffect(() => {
    const pending = keyboardViewportRef.current;
    if (!pending || pending.sourceKey === sourceViewportKey) return;
    if (keyboardCommitTimerRef.current !== null) {
      clearTimeout(keyboardCommitTimerRef.current);
      keyboardCommitTimerRef.current = null;
    }
    keyboardViewportRef.current = null;
  }, [sourceViewportKey]);

  const commitViewportChange = useCallback(
    (next: PreviewViewportSetting) => {
      dragVersionRef.current += 1;
      dragCleanupRef.current?.();
      if (keyboardCommitTimerRef.current !== null) {
        clearTimeout(keyboardCommitTimerRef.current);
        keyboardCommitTimerRef.current = null;
      }
      keyboardViewportRef.current = null;
      setDragViewport(null);
      return commitBrowserViewportChange(tabId, next);
    },
    [tabId],
  );

  const clearDrag = () => setDragViewport(null);
  const commitDrag = (next: PreviewViewportSetting) => {
    const version = ++dragVersionRef.current;
    const clearIfCurrent = () => {
      if (dragVersionRef.current === version) clearDrag();
    };
    void commitBrowserViewportChange(tabId, next).then(clearIfCurrent, clearIfCurrent);
  };

  const handleResizeKeyDown = (
    direction: BrowserViewportResizeDirection,
    event: ReactKeyboardEvent<HTMLButtonElement>,
  ) => {
    if (effectiveViewport._tag === "fill") return;
    const controlsWidth = direction.includes("east") || direction.includes("west");
    const controlsHeight = direction.includes("north") || direction.includes("south");
    const step = (event.shiftKey ? 50 : 10) * normalizedZoomFactor;
    const delta =
      event.key === "ArrowLeft" && controlsWidth
        ? { x: -step, y: 0 }
        : event.key === "ArrowRight" && controlsWidth
          ? { x: step, y: 0 }
          : event.key === "ArrowUp" && controlsHeight
            ? { x: 0, y: -step }
            : event.key === "ArrowDown" && controlsHeight
              ? { x: 0, y: step }
              : null;
    if (!delta) return;
    event.preventDefault();
    event.stopPropagation();
    const pending = keyboardViewportRef.current;
    const base = pending?.sourceKey === sourceViewportKey ? pending : effectiveViewport;
    const next = resizeFreeformViewport(
      base,
      delta,
      zoomFactor,
      direction,
      aspectRatio ?? undefined,
    );
    if (next.width === base.width && next.height === base.height) return;
    const keyboardViewport = { sourceKey: sourceViewportKey, ...next, direction };
    keyboardViewportRef.current = keyboardViewport;
    setDragViewport(keyboardViewport);
    if (keyboardCommitTimerRef.current !== null) {
      clearTimeout(keyboardCommitTimerRef.current);
    }
    keyboardCommitTimerRef.current = setTimeout(() => {
      keyboardCommitTimerRef.current = null;
      const latest = keyboardViewportRef.current;
      if (!latest || latest.sourceKey !== sourceViewportKeyRef.current) return;
      keyboardViewportRef.current = null;
      commitDrag({ _tag: "freeform", width: latest.width, height: latest.height });
    }, KEYBOARD_RESIZE_COMMIT_DELAY_MS);
  };

  const handleResizePointerDown = (
    direction: BrowserViewportResizeDirection,
    event: ReactPointerEvent<HTMLButtonElement>,
  ) => {
    if (effectiveViewport._tag === "fill") return;
    event.preventDefault();
    event.stopPropagation();
    if (keyboardCommitTimerRef.current !== null) {
      clearTimeout(keyboardCommitTimerRef.current);
      keyboardCommitTimerRef.current = null;
    }
    keyboardViewportRef.current = null;
    dragCleanupRef.current?.();
    dragVersionRef.current += 1;
    const pointerId = event.pointerId;
    const target = event.currentTarget;
    const startX = event.clientX;
    const startY = event.clientY;
    const startWidth = effectiveViewport.width;
    const startHeight = effectiveViewport.height;
    const dragZoomFactor = normalizedZoomFactor * layout.viewportScale;
    let latest = { width: startWidth, height: startHeight };
    setDragViewport({
      sourceKey: sourceViewportKey,
      width: startWidth,
      height: startHeight,
      direction,
    });
    try {
      target.setPointerCapture(pointerId);
    } catch {
      // Window listeners below keep the drag functional when capture is unavailable.
    }

    const sourceChanged = () => sourceViewportKeyRef.current !== sourceViewportKey;
    const move = (moveEvent: PointerEvent) => {
      if (moveEvent.pointerId !== pointerId) return;
      if (sourceChanged()) {
        cleanup();
        dragVersionRef.current += 1;
        clearDrag();
        return;
      }
      moveEvent.preventDefault();
      const { width, height } = resizeBrowserViewportFromRail(
        { width: startWidth, height: startHeight },
        {
          x: moveEvent.clientX - startX,
          y: moveEvent.clientY - startY,
        },
        viewportContainerSize,
        dragZoomFactor,
        direction,
        aspectRatio ?? undefined,
      );
      latest = { width, height };
      setDragViewport({ sourceKey: sourceViewportKey, width, height, direction });
    };
    function cleanup() {
      window.removeEventListener("pointermove", move);
      window.removeEventListener("pointerup", finish);
      window.removeEventListener("pointercancel", cancel);
      dragCleanupRef.current = null;
      try {
        target.releasePointerCapture(pointerId);
      } catch {
        // The browser may already have released capture on pointerup.
      }
    }
    function finish(upEvent: PointerEvent) {
      if (upEvent.pointerId !== pointerId) return;
      cleanup();
      if (sourceChanged() || (latest.width === startWidth && latest.height === startHeight)) {
        clearDrag();
        return;
      }
      commitDrag({
        _tag: "freeform",
        width: latest.width,
        height: latest.height,
      });
    }
    function cancel(cancelEvent: PointerEvent) {
      if (cancelEvent.pointerId !== pointerId) return;
      cleanup();
      dragVersionRef.current += 1;
      clearDrag();
    }
    dragCleanupRef.current = cleanup;
    window.addEventListener("pointermove", move, { passive: false });
    window.addEventListener("pointerup", finish);
    window.addEventListener("pointercancel", cancel);
  };

  return {
    activeDrag,
    commitViewportChange,
    effectiveViewport,
    handleResizeKeyDown,
    handleResizePointerDown,
    layout,
  };
}