"use client";
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";
import { useIsMobile, usePrefersReducedMotion } from "@/lib/client/hooks";

/**
 * BottomSheet — native-feeling mobile sheet built on Radix Dialog (focus trap, a11y, Esc).
 *
 * - drag handle + swipe-to-dismiss (pointer events; direction-locked so inner scrolling still works)
 * - snap points: `snap="content" | "half" | "full"` (max height); `expandable` lets the user drag up to full
 * - background blur, safe-area padding, `100dvh`-based sizing, keyboard-aware (`--kb`)
 *
 * Use `ResponsiveDialog` when the same content must be a centered dialog on desktop.
 */
export type SheetSnap = "content" | "half" | "full";

export interface BottomSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title?: React.ReactNode;
  description?: React.ReactNode;
  children: React.ReactNode;
  /** Sticky footer (e.g. primary action). Rendered above the safe area. */
  footer?: React.ReactNode;
  snap?: SheetSnap;
  /** Allow dragging up from `content`/`half` to `full`. */
  expandable?: boolean;
  /** Hide the visual title but keep it for screen readers. */
  hideTitle?: boolean;
  showClose?: boolean;
  className?: string;
  bodyClassName?: string;
  /** Prevent closing by tapping the overlay / swiping. */
  modal?: boolean;
  /** Remove body padding (lists that manage their own). */
  flush?: boolean;
  /** Let a fixed header (e.g. search input) sit above the scrolling body. */
  header?: React.ReactNode;
}

const SNAP_MAX: Record<SheetSnap, string> = {
  content: "max-h-[min(88dvh,calc(100dvh-var(--kb)-16px))]",
  half: "h-[min(56dvh,calc(100dvh-var(--kb)-16px))]",
  full: "h-[calc(100dvh-var(--kb)-var(--sat)-8px)]",
};

export function BottomSheet({ open, onOpenChange, title, description, children, footer, snap = "content", expandable = true, hideTitle, showClose = false, className, bodyClassName, modal = false, flush, header }: BottomSheetProps) {
  const reduced = usePrefersReducedMotion();
  const [current, setCurrent] = React.useState<SheetSnap>(snap);
  const [dragY, setDragY] = React.useState(0);
  const [dragging, setDragging] = React.useState(false);
  const bodyRef = React.useRef<HTMLDivElement>(null);
  const startY = React.useRef<number | null>(null);
  const startScrollTop = React.useRef(0);
  const axis = React.useRef<"y" | "none" | null>(null);

  React.useEffect(() => {
    if (open) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setCurrent(snap);
      setDragY(0);
    }
  }, [open, snap]);

  const onPointerDown = (e: React.PointerEvent, fromHandle: boolean) => {
    if (e.pointerType === "mouse" && !fromHandle) return;
    startY.current = e.clientY;
    startScrollTop.current = bodyRef.current?.scrollTop ?? 0;
    axis.current = fromHandle ? "y" : null;
  };
  const onPointerMove = (e: React.PointerEvent) => {
    if (startY.current === null) return;
    const dy = e.clientY - startY.current;
    if (axis.current === null) {
      // Only take over when the body is scrolled to the top and the user pulls down.
      if (Math.abs(dy) < 8) return;
      axis.current = dy > 0 && startScrollTop.current <= 0 ? "y" : "none";
    }
    if (axis.current !== "y") return;
    if (dy > 0) {
      setDragging(true);
      setDragY(dy);
    } else if (expandable && current !== "full") {
      setDragging(true);
      setDragY(Math.max(dy, -80));
    }
  };
  const onPointerUp = () => {
    if (startY.current === null) return;
    const dy = dragY;
    startY.current = null;
    axis.current = null;
    setDragging(false);
    setDragY(0);
    if (dy > 110 && !modal) onOpenChange(false);
    else if (dy < -40 && expandable && current !== "full") setCurrent("full");
    else if (dy > 60 && current === "full" && snap !== "full") setCurrent(snap);
  };

  return (
    <DialogPrimitive.Root open={open} onOpenChange={modal ? () => {} : onOpenChange}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/45 backdrop-blur-[3px] data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out" />
        <DialogPrimitive.Content
          onOpenAutoFocus={(e) => e.preventDefault()}
          className={cn(
            "fixed inset-x-0 bottom-0 z-50 flex flex-col bg-bg-elevated text-fg shadow-sheet focus:outline-none",
            "rounded-t-[22px] border-t border-border/70",
            SNAP_MAX[current],
            !dragging && !reduced && "data-[state=open]:animate-sheet-in data-[state=closed]:animate-sheet-out transition-[height,max-height] duration-300 ease-[var(--ease-out-soft)]",
            className,
          )}
          style={dragging ? { transform: `translateY(${Math.max(0, dragY)}px)` } : undefined}
          onPointerMove={onPointerMove}
          onPointerUp={onPointerUp}
          onPointerCancel={onPointerUp}
        >
          {/* Handle: always draggable */}
          <div className="shrink-0 cursor-grab touch-none select-none active:cursor-grabbing" onPointerDown={(e) => onPointerDown(e, true)} aria-hidden>
            <div className="sheet-handle" />
          </div>
          <div className={cn("shrink-0 px-5", title && !hideTitle ? "pb-2 pt-1" : "")}>
            <DialogPrimitive.Title className={cn("text-[17px] font-semibold leading-6 tracking-tight", hideTitle && "sr-only")}>{title ?? "Sheet"}</DialogPrimitive.Title>
            {description ? <DialogPrimitive.Description className={cn("mt-0.5 text-[13px] text-fg-muted", hideTitle && "sr-only")}>{description}</DialogPrimitive.Description> : null}
            {showClose ? (
              <DialogPrimitive.Close className="tap absolute right-3 top-3 rounded-full bg-bg-muted p-1.5 text-fg-muted hover:text-fg" aria-label="Close">
                <X className="size-4" />
              </DialogPrimitive.Close>
            ) : null}
          </div>
          {header ? <div className="shrink-0">{header}</div> : null}
          <div ref={bodyRef} onPointerDown={(e) => onPointerDown(e, false)} className={cn("min-h-0 flex-1 overflow-y-auto contain-scroll scrollbar-thin", flush ? "" : "px-4 pb-4", !footer && "pb-[max(16px,var(--sab))]", bodyClassName)}>
            {children}
          </div>
          {footer ? <div className="shrink-0 border-t border-border bg-bg-elevated px-4 pt-3 pb-[max(12px,var(--sab))]">{footer}</div> : null}
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}

/* ------------------------------------------------------------------------------------------------ */

export interface ResponsiveDialogProps extends Omit<BottomSheetProps, "snap" | "expandable"> {
  /** Desktop width. */
  size?: "sm" | "md" | "lg" | "xl" | "full";
  /** Mobile snap point (default content). */
  snap?: SheetSnap;
  expandable?: boolean;
  /** Desktop variant: centered dialog (default) or right side panel. */
  desktop?: "dialog" | "panel";
  /** Desktop: remove the default body padding. */
  desktopFlush?: boolean;
}

const SIZES = { sm: "sm:max-w-sm", md: "sm:max-w-lg", lg: "sm:max-w-2xl", xl: "sm:max-w-4xl", full: "sm:max-w-[min(96vw,1200px)]" };

/**
 * Bottom sheet on phones, centered dialog (or side panel) on ≥ md. One API, two native-feeling shapes.
 */
export function ResponsiveDialog({ size = "md", desktop = "dialog", desktopFlush, ...props }: ResponsiveDialogProps) {
  const isMobile = useIsMobile();
  if (isMobile) return <BottomSheet {...props} />;
  const { open, onOpenChange, title, description, children, footer, hideTitle, showClose = true, className, bodyClassName, modal, flush, header } = props;
  const isPanel = desktop === "panel";
  return (
    <DialogPrimitive.Root open={open} onOpenChange={modal ? () => {} : onOpenChange}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/40 backdrop-blur-[2px] data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out" />
        <DialogPrimitive.Content
          className={cn(
            "fixed z-50 flex flex-col border border-border bg-bg-elevated text-fg shadow-lg focus:outline-none",
            isPanel
              ? "inset-y-2 right-2 w-[min(440px,calc(100vw-16px))] rounded-2xl data-[state=open]:animate-fade-up data-[state=closed]:animate-fade-out"
              : cn("left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 rounded-2xl max-h-[min(86vh,900px)] data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out", SIZES[size]),
            className,
          )}
        >
          <div className={cn("shrink-0", title && !hideTitle ? "px-6 pt-5 pb-3" : "")}>
            <DialogPrimitive.Title className={cn("text-base font-semibold leading-6 tracking-tight", hideTitle && "sr-only")}>{title ?? "Dialog"}</DialogPrimitive.Title>
            {description ? <DialogPrimitive.Description className={cn("mt-0.5 text-sm text-fg-muted", hideTitle && "sr-only")}>{description}</DialogPrimitive.Description> : null}
          </div>
          {showClose ? (
            <DialogPrimitive.Close className="absolute right-3 top-3 rounded-md p-1.5 text-fg-subtle transition-colors hover:bg-bg-muted hover:text-fg" aria-label="Close">
              <X className="size-4" />
            </DialogPrimitive.Close>
          ) : null}
          {header ? <div className="shrink-0">{header}</div> : null}
          <div className={cn("min-h-0 flex-1 overflow-y-auto scrollbar-thin", flush || desktopFlush ? "" : "px-6 pb-6", bodyClassName)}>{children}</div>
          {footer ? <div className="shrink-0 border-t border-border px-6 py-3">{footer}</div> : null}
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}

/* ------------------------------------------------------------------------------------------------ */

export interface ActionSheetItem {
  key: string;
  label: React.ReactNode;
  icon?: React.ReactNode;
  hint?: React.ReactNode;
  onSelect: () => void;
  destructive?: boolean;
  disabled?: boolean;
  /** Renders a check mark (selection lists). */
  selected?: boolean;
}

export interface ActionSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title?: React.ReactNode;
  description?: React.ReactNode;
  items: (ActionSheetItem | "separator")[];
  /** Optional content above the list (e.g. a preview of the message). */
  children?: React.ReactNode;
  cancelLabel?: string;
}

/**
 * iOS-style action list inside a bottom sheet. Use for long-press / "more" menus on phones.
 * On desktop callers should keep using DropdownMenu; `useIsMobile()` decides.
 */
export function ActionSheet({ open, onOpenChange, title, description, items, children, cancelLabel = "Cancel" }: ActionSheetProps) {
  return (
    <BottomSheet open={open} onOpenChange={onOpenChange} title={title} description={description} hideTitle={!title} expandable={false} flush bodyClassName="px-3 pb-[max(12px,var(--sab))]">
      {children ? <div className="px-2 pb-3">{children}</div> : null}
      <div className="overflow-hidden rounded-2xl bg-bg-subtle">
        {items.map((it, i) =>
          it === "separator" ? (
            <div key={`sep-${i}`} className="h-2 bg-bg" />
          ) : (
            <button
              key={it.key}
              type="button"
              disabled={it.disabled}
              onClick={() => {
                onOpenChange(false);
                // Let the sheet start closing before running navigation-heavy handlers.
                setTimeout(it.onSelect, 10);
              }}
              className={cn(
                "flex min-h-[52px] w-full items-center gap-3 px-4 text-left text-[16px] transition-colors active:bg-bg-muted disabled:opacity-40 [&_svg]:size-[18px] [&_svg]:shrink-0",
                i > 0 && items[i - 1] !== "separator" && "border-t border-hairline",
                it.destructive ? "text-danger" : "text-fg",
              )}
            >
              <span className={cn("text-fg-muted", it.destructive && "text-danger")}>{it.icon}</span>
              <span className="min-w-0 flex-1 truncate">{it.label}</span>
              {it.hint ? <span className="text-[13px] text-fg-subtle">{it.hint}</span> : null}
              {it.selected ? <span className="text-accent">✓</span> : null}
            </button>
          ),
        )}
      </div>
      <button type="button" onClick={() => onOpenChange(false)} className="mt-2 flex min-h-[52px] w-full items-center justify-center rounded-2xl bg-bg-subtle text-[16px] font-semibold text-fg active:bg-bg-muted">
        {cancelLabel}
      </button>
    </BottomSheet>
  );
}