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

type ModalProps = {
  open: boolean;
  onClose: () => void;
  children: ReactNode;
  size?: "sm" | "md" | "lg";
  title?: ReactNode;
  eyebrow?: string;
  subtitle?: ReactNode;
  dismissable?: boolean;
};

const sizeMap = { sm: "max-w-md", md: "max-w-2xl", lg: "max-w-4xl" };

export default function Modal({
  open,
  onClose,
  children,
  size = "md",
  title,
  eyebrow,
  subtitle,
  dismissable = true,
}: ModalProps) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape" && dismissable) onClose();
    };
    window.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [open, onClose, dismissable]);

  if (!open) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto px-4 py-8 sm:py-12 animate-overlay-fade"
      style={{ backgroundColor: "rgba(16, 16, 30, 0.6)", backdropFilter: "blur(6px)" }}
      onClick={(e) => {
        if (!dismissable) return;
        if (e.target === e.currentTarget) onClose();
      }}
    >
      <div className={`relative w-full ${sizeMap[size]} my-auto animate-scale-in`}>
        <div
          className="bg-[var(--bg-cream)] rounded-2xl overflow-hidden border border-[var(--border-muted)] relative"
          style={{ boxShadow: "0 32px 80px rgba(16, 16, 30, 0.5)" }}
        >
          {/* Decorative corner flourishes */}
          <span className="absolute top-3 left-3 w-5 h-5 border-t border-l border-[var(--gold)]/30 pointer-events-none" />
          <span className="absolute top-3 right-3 w-5 h-5 border-t border-r border-[var(--gold)]/30 pointer-events-none" />

          {(title || eyebrow) && (
            <div className="relative px-7 pt-7 pb-5 border-b border-[var(--border-muted)]">
              {eyebrow && (
                <div className="flex items-center gap-2 mb-2">
                  <span className="block w-5 h-px bg-[var(--gold)]" />
                  <span
                    className="text-[var(--gold)] text-[10px] tracking-[0.32em] uppercase"
                    style={{ fontFamily: "'Playfair Display', serif", fontWeight: 500 }}
                  >
                    {eyebrow}
                  </span>
                </div>
              )}
              {title && (
                <h3
                  className="text-[22px] text-[var(--text-primary)] leading-tight pr-8"
                  style={{ fontFamily: "'Playfair Display', serif", fontWeight: 600 }}
                >
                  {title}
                </h3>
              )}
              {subtitle && <p className="text-xs text-[var(--text-muted)] mt-1.5">{subtitle}</p>}
              <button
                type="button"
                onClick={onClose}
                className="absolute top-6 right-5 w-8 h-8 flex items-center justify-center rounded-full text-[var(--text-muted)] hover:bg-[var(--bg-paper)] hover:text-[var(--text-primary)] transition-colors"
                aria-label="关闭"
              >
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
                  <path d="M18 6L6 18M6 6l12 12" />
                </svg>
              </button>
            </div>
          )}

          <div>{children}</div>
        </div>
      </div>
    </div>
  );
}
