import { X } from "lucide-react";
import { WordViewer } from "./WordViewer";
import { useEffect } from "react";

interface WordViewerModalProps {
  isOpen: boolean;
  onClose: () => void;
  docPath: string;
  title?: string;
}

export const WordViewerModal = ({
  isOpen,
  onClose,
  docPath,
  title = "活动文稿",
}: WordViewerModalProps) => {
  // 监听 ESC 键关闭弹窗
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === "Escape" && isOpen) {
        onClose();
      }
    };

    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, [isOpen, onClose]);

  // 阻止背景滚动
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "unset";
    }

    return () => {
      document.body.style.overflow = "unset";
    };
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* 背景遮罩 */}
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* 弹窗内容 */}
      <div className="relative w-[90vw] h-[90vh] bg-white rounded-2xl shadow-2xl overflow-hidden">
        {/* 头部 */}
        <div className="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-[#82B2D6] to-[#6a9bc4] text-white">
          <h2 className="text-2xl font-bold">{title}</h2>
          <button
            onClick={onClose}
            className="p-2 hover:bg-white/20 rounded-lg transition-colors"
            aria-label="关闭"
          >
            <X size={24} />
          </button>
        </div>

        {/* 文档内容区域 */}
        <div className="h-[calc(100%-64px)] overflow-hidden">
          <WordViewer docPath={docPath} className="w-full h-full" />
        </div>
      </div>
    </div>
  );
};