'use client';
import { X } from 'lucide-react';
import { useEffect, useRef, type ReactNode } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';

/**
 * Sheet primitive on a native <dialog> (focus trap, Esc, inert background for free).
 * Mobile: bottom sheet with drag-to-close (swipe down ≥ 80 px). Desktop (md+): right-hand drawer
 * when `side="drawer"`, centred panel when `side="center"`.
 */
export function BottomSheet({
  open,
  onClose,
  title,
  children,
  side = 'drawer',
  labelledBy,
  className,
}: {
  open: boolean;
  onClose: () => void;
  title?: ReactNode;
  children: ReactNode;
  side?: 'drawer' | 'center' | 'full';
  labelledBy?: string;
  className?: string;
}) {
  const ref = useRef<HTMLDialogElement>(null);
  const startY = useRef<number | null>(null);

  useEffect(() => {
    const d = ref.current;
    if (!d) return;
    if (open && !d.open) {
      d.showModal();
      document.documentElement.style.overflow = 'hidden';
    } else if (!open && d.open) {
      d.close();
    }
    return () => {
      document.documentElement.style.overflow = '';
    };
  }, [open]);

  useEffect(() => {
    const d = ref.current;
    if (!d) return;
    const onCancel = (e: Event) => {
      e.preventDefault();
      onClose();
    };
    const onCloseEvt = () => {
      document.documentElement.style.overflow = '';
      if (open) onClose();
    };
    d.addEventListener('cancel', onCancel);
    d.addEventListener('close', onCloseEvt);
    return () => {
      d.removeEventListener('cancel', onCancel);
      d.removeEventListener('close', onCloseEvt);
    };
  }, [onClose, open]);

  const onPointerDown = (e: React.PointerEvent) => {
    startY.current = e.clientY;
  };
  const onPointerUp = (e: React.PointerEvent) => {
    if (startY.current != null && e.clientY - startY.current > 80) onClose();
    startY.current = null;
  };

  return (
    <dialog
      ref={ref}
      aria-labelledby={labelledBy}
      onClick={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
      className={cn(
        'm-0 max-h-none max-w-none bg-transparent p-0 text-ink backdrop:bg-ink/40 backdrop:backdrop-blur-[1px]',
        'fixed inset-0 h-full w-full',
        'open:flex open:items-end open:justify-center',
        side === 'drawer' && 'md:open:items-stretch md:open:justify-end',
        side === 'center' && 'md:open:items-center',
      )}
    >
      {open ? (
        <div
          className={cn(
            'animate-sheet relative flex w-full flex-col bg-surface shadow-sheet',
            'max-h-[92dvh] rounded-t-md',
            side === 'drawer' && 'md:h-full md:max-h-none md:w-[440px] md:rounded-none md:border-l md:border-rule',
            side === 'center' && 'md:max-h-[85vh] md:w-[560px] md:rounded-md md:border md:border-rule',
            side === 'full' && 'h-[100dvh] max-h-none rounded-none md:h-auto md:max-h-[85vh] md:w-[640px] md:self-start md:mt-[8vh] md:rounded-md md:border md:border-rule',
            className,
          )}
        >
          <div
            className="flex items-center gap-3 border-b border-rule px-4 py-3 md:px-5"
            onPointerDown={onPointerDown}
            onPointerUp={onPointerUp}
            style={{ touchAction: 'none' }}
          >
            <span aria-hidden className="absolute left-1/2 top-1.5 h-1 w-10 -translate-x-1/2 rounded-full bg-rule-strong md:hidden" />
            <div className="min-w-0 flex-1 pt-1 text-sm font-semibold md:pt-0">{title}</div>
            <button type="button" onClick={onClose} className="tap -mr-2 grid place-items-center rounded-sm text-ink-2 hover:bg-surface-2" aria-label={t('common.close')}>
              <X size={18} aria-hidden />
            </button>
          </div>
          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-6 pt-3 safe-bottom md:px-5">{children}</div>
        </div>
      ) : null}
    </dialog>
  );
}