"use client";

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

export type ModalProps = {
  open: boolean;
  title: ReactNode;
  onClose: () => void;
  children: ReactNode;
  /** 底部操作区（取消/主按钮等） */
  footer?: ReactNode;
  /** 标题旁辅助说明 */
  description?: ReactNode;
  /** 面板最大宽度 class，默认 max-w-md */
  maxWidthClass?: string;
  /** 面板额外 class（如 max-h / flex） */
  panelClassName?: string;
  /** 点遮罩关闭；表单/确认默认 false 防误关 */
  dismissOnOverlay?: boolean;
  /** busy 时禁用关闭与 ESC */
  busy?: boolean;
  /** 叠层高度，确认框用 1100，普通 1000 */
  zIndexClass?: string;
  /** 无障碍：dialog | alertdialog */
  role?: "dialog" | "alertdialog";
  ariaLabel?: string;
  /** 自定义标题区（如带图标）；提供时覆盖默认 title 行，仍渲染关闭钮除非 hideClose */
  header?: ReactNode;
  hideClose?: boolean;
  /** 是否响应 ESC；封禁告知等不可关场景设 false */
  closeOnEscape?: boolean;
  /** 内容区额外 class */
  bodyClassName?: string;
};

/**
 * 全站弹层壳：统一遮罩、面板、标题关闭钮与 ESC。
 * 主 CTA 请用 btn-primary；危险操作用 btn-danger；取消用 btn-line。
 */
export default function Modal({
  open,
  title,
  onClose,
  children,
  footer,
  description,
  maxWidthClass = "max-w-md",
  panelClassName = "",
  dismissOnOverlay = false,
  busy = false,
  zIndexClass = "z-[1000]",
  role = "dialog",
  ariaLabel,
  header,
  hideClose = false,
  closeOnEscape = true,
  bodyClassName = "",
}: ModalProps) {
  useEffect(() => {
    if (!open || !closeOnEscape) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape" && !busy) onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, busy, onClose, closeOnEscape]);

  if (!open) return null;

  const label =
    ariaLabel || (typeof title === "string" ? title : undefined);

  return (
    <div
      className={`fixed inset-0 ${zIndexClass} flex items-center justify-center p-4`}
      style={{ background: "rgba(0,0,0,0.55)" }}
      onClick={() => {
        if (dismissOnOverlay && !busy) onClose();
      }}
      role={role}
      aria-modal="true"
      aria-label={label}
    >
      <div
        className={`w-full ${maxWidthClass} rounded-2xl j13-toast-in ${panelClassName || "p-6"}`}
        style={{ background: "var(--panel)", border: "1px solid var(--line)" }}
        onClick={(e) => e.stopPropagation()}
      >
        {header ? (
          <div className="flex items-start justify-between gap-3 mb-4">
            <div className="min-w-0 flex-1">{header}</div>
            {!hideClose && (
              <CloseButton onClick={onClose} disabled={busy} />
            )}
          </div>
        ) : (
          <div className="flex items-start justify-between gap-3 mb-4">
            <div className="min-w-0 flex-1">
              <h2
                className="text-[16px] sm:text-[18px] font-extrabold tracking-tight leading-snug"
                style={{ color: "var(--ink)" }}
              >
                {title}
              </h2>
              {description ? (
                <div className="mt-1 text-[12.5px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
                  {description}
                </div>
              ) : null}
            </div>
            {!hideClose && <CloseButton onClick={onClose} disabled={busy} />}
          </div>
        )}

        <div className={bodyClassName}>{children}</div>

        {footer ? (
          <div className="flex items-center justify-end gap-2 mt-5">{footer}</div>
        ) : null}
      </div>
    </div>
  );
}

function CloseButton({
  onClick,
  disabled,
}: {
  onClick: () => void;
  disabled?: boolean;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      aria-label="关闭"
      className="w-7 h-7 shrink-0 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] transition-colors disabled:opacity-50"
      style={{ color: "var(--ink-3)" }}
    >
      <X size={15} />
    </button>
  );
}