"use client";

import { useEffect, useRef, type ReactNode, type RefObject } from "react";
import { X } from "lucide-react";

import { Button } from "@/components/ui/Button";
import { handleTabTrap } from "@/lib/a11y/focusTrap";
import { useRestoreFocus } from "@/lib/a11y/useRestoreFocus";
import { useBodyScrollLock } from "@/lib/ui/useBodyScrollLock";
import { overlayScrim } from "@/lib/ui/variants";

interface DrawerProps {
  open: boolean;
  onClose: () => void;
  // 滑出方向：导航在左、本章助手在右。
  side?: "left" | "right";
  // 无障碍标签（role=dialog）。
  label: string;
  triggerRef?: RefObject<HTMLElement | null>;
  children: ReactNode;
}

// 移动端侧滑抽屉（<lg；遮罩点击 / Esc 关闭 + 打开聚焦具名关闭按钮）。
// 复用命令面板的 a11y 模式（CommandPalette）；桌面用静态布局，不渲染本抽屉。
export function Drawer({
  open,
  onClose,
  side = "left",
  label,
  triggerRef,
  children,
}: DrawerProps) {
  const panelRef = useRef<HTMLDivElement>(null);
  const closeRef = useRef<HTMLButtonElement>(null);

  useBodyScrollLock(open);
  useRestoreFocus(open, triggerRef);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent): void => {
      if (e.key === "Escape") {
        e.preventDefault();
        onClose();
      }
    };
    window.addEventListener("keydown", onKey);
    // 焦点陷阱首焦点落在具名关闭按钮上（而非整个面板）。
    closeRef.current?.focus();
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  const sideClass = side === "left" ? "left-0 border-r" : "right-0 border-l";

  return (
    <div className={`${overlayScrim} lg:hidden`} onClick={onClose}>
      <div
        ref={panelRef}
        role="dialog"
        aria-modal="true"
        aria-label={label}
        onClick={(e) => e.stopPropagation()}
        onKeyDown={(e) => {
          // focus trap：Tab/Shift+Tab 在抽屉内循环，不逃逸到背景（WCAG 2.1.2）。
          if (panelRef.current) handleTabTrap(panelRef.current, e);
        }}
        className={`absolute top-0 h-full w-64 max-w-[80vw] overflow-auto overscroll-contain border-line bg-panel py-4 shadow-paper outline-none ${sideClass}`}
      >
        <div className="mb-2 flex justify-end px-2">
          <Button
            ref={closeRef}
            onClick={onClose}
            aria-label={`关闭${label}`}
            variant="ghost"
            size="icon"
          >
            <X className="h-5 w-5" aria-hidden="true" />
          </Button>
        </div>
        {children}
      </div>
    </div>
  );
}