"use client";

import type {
  CSSProperties,
  KeyboardEvent as ReactKeyboardEvent,
  PointerEvent as ReactPointerEvent,
} from "react";

import { cn } from "~/lib/utils";

import {
  BROWSER_VIEWPORT_RESIZE_RAIL_SIZE,
  type BrowserViewportLayout,
  type BrowserViewportResizeDirection,
} from "./browserViewportLayout";

interface Props {
  readonly layout: BrowserViewportLayout;
  readonly activeDirection: BrowserViewportResizeDirection | null;
  readonly onPointerDown: (
    direction: BrowserViewportResizeDirection,
    event: ReactPointerEvent<HTMLButtonElement>,
  ) => void;
  readonly onKeyDown: (
    direction: BrowserViewportResizeDirection,
    event: ReactKeyboardEvent<HTMLButtonElement>,
  ) => void;
}

type HandleKind = "horizontal" | "vertical" | "corner";

const EDGE_BUTTON_CLASS =
  "group absolute z-20 touch-none border-0 bg-transparent p-0 outline-none before:absolute before:-inset-1 before:content-[''] focus-visible:bg-foreground/[0.04]";
const EDGE_GRIP_CLASS =
  "pointer-events-none absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-muted-foreground/55 transition-colors duration-150 group-hover:text-foreground/85 group-focus-visible:text-foreground group-active:text-foreground";

function ResizeHandle(props: {
  readonly direction: BrowserViewportResizeDirection;
  readonly label: string;
  readonly kind: HandleKind;
  readonly cursorClassName: string;
  readonly style: CSSProperties;
  readonly active: boolean;
  readonly mirrorCorner?: boolean;
  readonly onPointerDown: Props["onPointerDown"];
  readonly onKeyDown: Props["onKeyDown"];
}) {
  const {
    direction,
    label,
    kind,
    cursorClassName,
    style,
    active,
    mirrorCorner = false,
    onPointerDown,
    onKeyDown,
  } = props;
  return (
    <button
      type="button"
      aria-label={`${label}. Use arrow keys to resize.`}
      className={cn(EDGE_BUTTON_CLASS, kind === "corner" && "z-30", cursorClassName)}
      style={style}
      onPointerDown={(event) => onPointerDown(direction, event)}
      onKeyDown={(event) => onKeyDown(direction, event)}
    >
      <span
        className={cn(
          EDGE_GRIP_CLASS,
          kind === "vertical" && "h-8 w-1.5",
          kind === "horizontal" && "h-1.5 w-8",
          kind === "corner" && "size-3",
          active && "text-foreground",
        )}
      >
        {kind === "vertical" ? (
          <span className="flex gap-px" aria-hidden="true">
            <span className="h-6 w-px rounded-full bg-current" />
            <span className="h-6 w-px rounded-full bg-current" />
          </span>
        ) : kind === "horizontal" ? (
          <span className="flex flex-col gap-px" aria-hidden="true">
            <span className="h-px w-6 rounded-full bg-current" />
            <span className="h-px w-6 rounded-full bg-current" />
          </span>
        ) : (
          <span
            className={cn("relative block size-3", mirrorCorner && "-scale-x-100")}
            aria-hidden="true"
          >
            <span className="absolute bottom-[3px] left-0 h-px w-3 -rotate-45 rounded-full bg-current" />
            <span className="absolute bottom-0 left-[5px] h-px w-2 -rotate-45 rounded-full bg-current" />
          </span>
        )}
      </span>
    </button>
  );
}

export function BrowserViewportResizeHandles({
  layout,
  activeDirection,
  onPointerDown,
  onKeyDown,
}: Props) {
  const left = layout.viewportX;
  const top = layout.viewportY;
  const right = left + layout.viewportWidth;
  const bottom = top + layout.viewportHeight;
  const railSize = BROWSER_VIEWPORT_RESIZE_RAIL_SIZE;

  const shared = { activeDirection, onPointerDown, onKeyDown };
  return (
    <>
      <ResizeHandle
        direction="west"
        label="Resize browser viewport from left edge"
        kind="vertical"
        cursorClassName="cursor-ew-resize"
        style={{ left: left - railSize, top, width: railSize, height: layout.viewportHeight }}
        active={shared.activeDirection === "west"}
        onPointerDown={shared.onPointerDown}
        onKeyDown={shared.onKeyDown}
      />
      <ResizeHandle
        direction="east"
        label="Resize browser viewport from right edge"
        kind="vertical"
        cursorClassName="cursor-ew-resize"
        style={{ left: right, top, width: railSize, height: layout.viewportHeight }}
        active={shared.activeDirection === "east"}
        onPointerDown={shared.onPointerDown}
        onKeyDown={shared.onKeyDown}
      />
      <ResizeHandle
        direction="south"
        label="Resize browser viewport from bottom edge"
        kind="horizontal"
        cursorClassName="cursor-ns-resize"
        style={{ left, top: bottom, width: layout.viewportWidth, height: railSize }}
        active={shared.activeDirection === "south"}
        onPointerDown={shared.onPointerDown}
        onKeyDown={shared.onKeyDown}
      />
      <ResizeHandle
        direction="southwest"
        label="Resize browser viewport from bottom-left corner"
        kind="corner"
        cursorClassName="cursor-nesw-resize"
        style={{ left: left - railSize, top: bottom, width: railSize, height: railSize }}
        active={shared.activeDirection === "southwest"}
        mirrorCorner
        onPointerDown={shared.onPointerDown}
        onKeyDown={shared.onKeyDown}
      />
      <ResizeHandle
        direction="southeast"
        label="Resize browser viewport from bottom-right corner"
        kind="corner"
        cursorClassName="cursor-nwse-resize"
        style={{ left: right, top: bottom, width: railSize, height: railSize }}
        active={shared.activeDirection === "southeast"}
        onPointerDown={shared.onPointerDown}
        onKeyDown={shared.onKeyDown}
      />
    </>
  );
}