"use client";

import { X } from "lucide-react";
import { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore, type PointerEvent as RPointerEvent, type ReactNode } from "react";
import { createPortal } from "react-dom";
import { cn } from "./cn";
import { IconButton } from "./button";

const noop = (): (() => void) => () => {};

export interface SheetProps {
  open: boolean;
  onClose: () => void;
  title?: ReactNode;
  description?: ReactNode;
  children: ReactNode;
  footer?: ReactNode;
  /** desktop side (≥ md); mobile is always a bottom sheet */
  side?: "right" | "left";
  /** desktop width */
  width?: number;
  /** mobile: initial height as vh (default 70), drag handle allows expand/collapse */
  heightVh?: number;
  className?: string;
  /** render without backdrop (map quick-profile) so the map stays interactive */
  modal?: boolean;
  id?: string;
}

const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';

/**
 * Bottom sheet on mobile (drag handle: swipe down to close, up to expand), side drawer on ≥ md.
 * Focus trap, ESC to close, restores focus, locks body scroll when modal.
 */
export function Sheet({ open, onClose, title, description, children, footer, side = "right", width = 400, heightVh = 70, className, modal = true, id }: SheetProps) {
  const panelRef = useRef<HTMLDivElement>(null);
  const lastActive = useRef<Element | null>(null);
  const mounted = useSyncExternalStore(noop, () => true, () => false);
  const [drag, setDrag] = useState<{ startY: number; dy: number } | null>(null);
  const [expanded, setExpanded] = useState(false);
  const labelId = useId();
  const descId = useId();

  useEffect(() => {
    if (!open) return;
    lastActive.current = document.activeElement;
    const prevOverflow = document.body.style.overflow;
    if (modal) document.body.style.overflow = "hidden";
    const t = setTimeout(() => {
      const first = panelRef.current?.querySelector<HTMLElement>(FOCUSABLE);
      (first ?? panelRef.current)?.focus();
    }, 20);
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        e.stopPropagation();
        onClose();
      }
      if (e.key === "Tab" && panelRef.current) {
        const nodes = Array.from(panelRef.current.querySelectorAll<HTMLElement>(FOCUSABLE)).filter((n) => n.offsetParent !== null);
        if (!nodes.length) return;
        const first = nodes[0]!;
        const last = nodes[nodes.length - 1]!;
        if (e.shiftKey && document.activeElement === first) {
          e.preventDefault();
          last.focus();
        } else if (!e.shiftKey && document.activeElement === last) {
          e.preventDefault();
          first.focus();
        }
      }
    };
    document.addEventListener("keydown", onKey);
    return () => {
      clearTimeout(t);
      document.removeEventListener("keydown", onKey);
      if (modal) document.body.style.overflow = prevOverflow;
      setExpanded(false);
      (lastActive.current as HTMLElement | null)?.focus?.();
    };
  }, [open, onClose, modal]);

  const onPointerDown = useCallback((e: RPointerEvent<HTMLDivElement>) => {
    setDrag({ startY: e.clientY, dy: 0 });
    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
  }, []);
  const onPointerMove = useCallback((e: RPointerEvent<HTMLDivElement>) => {
    setDrag((d) => (d ? { ...d, dy: e.clientY - d.startY } : d));
  }, []);
  const onPointerUp = useCallback(() => {
    setDrag((d) => {
      if (d) {
        if (d.dy > 80) onClose();
        else if (d.dy < -60) setExpanded(true);
        else if (d.dy > 30 && expanded) setExpanded(false);
      }
      return null;
    });
  }, [onClose, expanded]);

  if (!mounted || !open) return null;

  const isDesktop = typeof window !== "undefined" && window.matchMedia("(min-width: 768px)").matches;
  const translate = drag && drag.dy > 0 && !isDesktop ? `translateY(${drag.dy}px)` : undefined;

  const node = (
    <div className={cn("fixed inset-0 z-[80] flex", !modal && "pointer-events-none")} role="presentation" data-sheet="">
      {modal && <button type="button" aria-label="Close" className="absolute inset-0 bg-ink/30 backdrop-blur-[1px] animate-fade-in dark:bg-black/50" onClick={onClose} />}
      <div
        ref={panelRef}
        id={id}
        role="dialog"
        aria-modal={modal}
        aria-labelledby={title ? labelId : undefined}
        aria-describedby={description ? descId : undefined}
        tabIndex={-1}
        style={{
          transform: translate,
          transition: drag ? "none" : undefined,
          ["--sheet-w" as string]: `${width}px`,
          ["--sheet-h" as string]: expanded ? "94dvh" : `${heightVh}dvh`,
        }}
        className={cn(
          "pointer-events-auto absolute flex flex-col border-hair bg-surface text-ink outline-none",
          // mobile: bottom sheet
          "inset-x-0 bottom-0 max-h-[94dvh] h-[var(--sheet-h)] rounded-t-md border-t animate-sheet-up",
          // desktop: side drawer
          "md:inset-y-0 md:bottom-auto md:h-auto md:max-h-none md:w-[var(--sheet-w)] md:max-w-[92vw] md:rounded-none md:border-t-0 md:animate-sheet-side",
          side === "right" ? "md:left-auto md:right-0 md:border-l" : "md:right-auto md:left-0 md:border-r",
          className,
        )}
      >
        <div className="flex touch-none justify-center pt-2 md:hidden" onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={onPointerUp} onPointerCancel={onPointerUp} aria-hidden>
          <span className="block h-1 w-10 rounded-full bg-hair-2" />
        </div>
        <div className="flex items-start justify-between gap-3 px-4 pb-2 pt-2 md:border-b md:border-hair md:py-3">
          <div className="min-w-0">
            {title && (
              <h2 id={labelId} className="truncate text-[15px] font-semibold leading-tight">
                {title}
              </h2>
            )}
            {description && (
              <p id={descId} className="mt-0.5 text-[12px] text-ink-3">
                {description}
              </p>
            )}
          </div>
          <IconButton label="Close" size="md" onClick={onClose} className="-mr-2 -mt-1">
            <X className="size-4" />
          </IconButton>
        </div>
        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-4">{children}</div>
        {footer && <div className="border-t border-hair px-4 py-3 safe-b">{footer}</div>}
      </div>
    </div>
  );
  return createPortal(node, document.body);
}