"use client";

import { useEffect, useRef, type ReactNode } from "react";

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

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

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent): void => {
      if (e.key === "Escape") {
        e.preventDefault();
        onClose();
      }
    };
    window.addEventListener("keydown", onKey);
    panelRef.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="fixed inset-0 z-50 bg-black/30 lg:hidden" onClick={onClose}>
      <div
        ref={panelRef}
        tabIndex={-1}
        role="dialog"
        aria-modal="true"
        aria-label={label}
        onClick={(e) => e.stopPropagation()}
        className={`absolute top-0 h-full w-64 max-w-[80vw] overflow-auto border-line bg-panel py-4 shadow-paper outline-none ${sideClass}`}
      >
        {children}
      </div>
    </div>
  );
}