// Original glass interaction; legacy slot adapted from shadcn/ui (MIT).
"use client";
import {
  useEffect,
  useLayoutEffect,
  useImperativeHandle,
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
} from "react";
import { Toggle as Primitive } from "./_ynrlib/radix-ui.js";

export type ToggleProps = ComponentProps<typeof Primitive.Root> & {
  size?: "xs" | "sm" | "md" | "lg";
};
type Gesture = {
  id: number;
  x: number;
  y: number;
  start: number;
  position: number;
  travel: number;
  dragged: boolean;
};
const clamp = (value: number) => Math.max(0, Math.min(1, value));

/** Keeps the existing pressed API. asChild retains the original slotted button. */
export function Toggle(props: ToggleProps) {
  if (props.asChild) {
    const { className = "", size: _size, ...rest } = props;
    return (
      <Primitive.Root
        {...rest}
        className={`ynr-toggle-group-item ynr-toggle--legacy ${className}`}
      />
    );
  }
  return <GlassToggle {...props} />;
}

function GlassToggle({
  pressed,
  size = "lg",
  defaultPressed = false,
  onPressedChange,
  disabled = false,
  className = "",
  children,
  style,
  ref,
  asChild: _asChild,
  onPointerDown,
  onPointerMove,
  onPointerUp,
  onPointerCancel,
  onLostPointerCapture,
  onKeyDown,
  onKeyUp,
  onClick,
  onBlur,
  type = "button",
  ...props
}: ToggleProps) {
  const [internalPressed, setInternalPressed] = useState(defaultPressed);
  const isPressed = pressed ?? internalPressed;
  const [phase, setPhase] = useState<"rest" | "held" | "travel">("rest");
  const frame = useRef<number | null>(null);
  const root = useRef<HTMLButtonElement>(null);
  const gesture = useRef<Gesture | null>(null);
  const key = useRef<string | null>(null);
  const settleTimer = useRef<ReturnType<typeof setTimeout> | undefined>(
    undefined,
  );
  const ignoreClick = useRef(false);
  useImperativeHandle(ref, () => root.current!, []);

  function clearDrag() {
    if (frame.current !== null) cancelAnimationFrame(frame.current);
    frame.current = null;
    root.current?.style.removeProperty("--toggle-drag-progress");
    root.current?.removeAttribute("data-dragging");
  }
  function suppressClick() {
    ignoreClick.current = true;
  }
  function finish() {
    clearTimeout(settleTimer.current);
    clearDrag();
    if (globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
      setPhase("rest");
    } else {
      setPhase("travel");
      settleTimer.current = setTimeout(() => setPhase("rest"), 120);
    }
  }
  function cancel() {
    const id = gesture.current?.id;
    gesture.current = null;
    key.current = null;
    suppressClick();
    finish();
    if (id !== undefined && root.current?.hasPointerCapture(id)) {
      root.current.releasePointerCapture(id);
    }
  }
  function commit(next: boolean) {
    finish();
    if (next === isPressed || disabled) return;
    if (pressed === undefined) setInternalPressed(next);
    onPressedChange?.(next);
  }
  function hold() {
    clearTimeout(settleTimer.current);
    setPhase("held");
  }

  useEffect(() => {
    // External changes or disabling during a gesture abandon only the draft.
    if (gesture.current || key.current) cancel();
  }, [disabled, isPressed, size]);
  useEffect(() => {
    function interrupt() {
      if (gesture.current || key.current) cancel();
    }
    window.addEventListener("blur", interrupt);
    return () => {
      window.removeEventListener("blur", interrupt);
      clearTimeout(settleTimer.current);
      if (frame.current !== null) cancelAnimationFrame(frame.current);
    };
  }, []);

  // React owns committed state; pointer movement only updates one frame-coalesced CSS value.
  useLayoutEffect(() => {
    if (!gesture.current) clearDrag();
  });
  const variables = {
    "--toggle-progress": isPressed ? 1 : 0,
    ...style,
  } as CSSProperties;

  return (
    <button
      {...props}
      ref={root}
      type={type}
      role="switch"
      aria-checked={isPressed}
      disabled={disabled}
      className={`ynr-toggle ${className}`}
      data-state={isPressed ? "on" : "off"}
      data-phase={phase}
      data-size={size}
      style={variables}
      onPointerDown={(event) => {
        onPointerDown?.(event);
        if (
          event.defaultPrevented ||
          disabled ||
          event.button !== 0 ||
          !event.isPrimary ||
          gesture.current
        )
          return;
        ignoreClick.current = false;
        // Own pointer focus so Safari's default mouse action cannot blur a held switch.
        event.preventDefault();
        event.currentTarget.dataset.pointerFocus = "true";
        event.currentTarget.focus({ preventScroll: true });
        const bounds = event.currentTarget.getBoundingClientRect();
        const start = isPressed ? 1 : 0;
        gesture.current = {
          id: event.pointerId,
          x: event.clientX,
          y: event.clientY,
          start,
          position: start,
          travel: (bounds.width * 26) / 74,
          dragged: false,
        };
        event.currentTarget.setPointerCapture(event.pointerId);
        hold();
      }}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        const current = gesture.current;
        if (
          !current ||
          current.id !== event.pointerId ||
          event.defaultPrevented
        )
          return;
        const delta = event.clientX - current.x;
        if (Math.abs(delta) > Math.min(3, current.travel * 0.15))
          current.dragged = true;
        if (!current.dragged) return;
        current.position = clamp(current.start + delta / current.travel);
        if (frame.current === null)
          frame.current = requestAnimationFrame(() => {
            frame.current = null;
            if (gesture.current !== current || !root.current) return;
            root.current.dataset.dragging = "true";
            root.current.style.setProperty(
              "--toggle-drag-progress",
              String(current.position),
            );
          });
      }}
      onPointerUp={(event) => {
        onPointerUp?.(event);
        const current = gesture.current;
        if (!current || current.id !== event.pointerId) return;
        if (
          event.defaultPrevented ||
          disabled ||
          Math.abs(event.clientY - current.y) > 70
        ) {
          cancel();
          return;
        }
        const bounds = event.currentTarget.getBoundingClientRect();
        const inside =
          event.clientX >= bounds.left &&
          event.clientX <= bounds.right &&
          event.clientY >= bounds.top &&
          event.clientY <= bounds.bottom;
        gesture.current = null;
        if (current.dragged) {
          suppressClick();
          commit(current.position >= 0.5);
        } else if (!inside) {
          cancel();
        }
      }}
      onPointerCancel={(event) => {
        onPointerCancel?.(event);
        cancel();
      }}
      onLostPointerCapture={(event) => {
        onLostPointerCapture?.(event);
        if (gesture.current) cancel();
      }}
      onKeyDown={(event) => {
        delete event.currentTarget.dataset.pointerFocus;
        onKeyDown?.(event);
        if (event.defaultPrevented || disabled) return;
        if (event.key === "Escape") {
          cancel();
          return;
        }
        if (event.key !== " " && event.key !== "Enter") return;
        event.preventDefault();
        if (event.repeat || gesture.current) return;
        key.current = event.key;
        hold();
      }}
      onKeyUp={(event) => {
        onKeyUp?.(event);
        if (event.key !== key.current) return;
        if (event.defaultPrevented || disabled) {
          cancel();
          return;
        }
        event.preventDefault();
        key.current = null;
        root.current?.click();
      }}
      onClick={(event) => {
        onClick?.(event);
        if (event.defaultPrevented) finish();
        const suppressed = ignoreClick.current && event.detail !== 0;
        ignoreClick.current = false;
        if (
          !event.defaultPrevented &&
          !disabled &&
          !suppressed &&
          !gesture.current &&
          !key.current
        )
          commit(!isPressed);
      }}
      onBlur={(event) => {
        delete event.currentTarget.dataset.pointerFocus;
        onBlur?.(event);
        if (gesture.current || key.current) cancel();
      }}
    >
      <span className="ynr-toggle__track" aria-hidden="true">
        <span className="ynr-toggle__fill" />
      </span>
      <span className="ynr-toggle__position" aria-hidden="true">
        <span className="ynr-toggle__thumb">
          <span className="ynr-toggle__refraction">
            <span>
              <span className="ynr-toggle__fill" />
            </span>
          </span>
        </span>
      </span>
      {children && <span className="ynr-toggle__label">{children}</span>}
    </button>
  );
}