import { useEffect, useState } from 'react'
import { X } from 'lucide-react'

/**
 * 验收测试弹窗 — 全屏加载 acceptance-test.html，支持验收人姓名、自动统计、按姓名保存、下载结果
 */
export default function AcceptanceTestModal({ open, onClose }: { open: boolean; onClose: () => void }) {
  const [show, setShow] = useState(false)

  useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden'
      requestAnimationFrame(() => setShow(true))
    } else {
      document.body.style.overflow = ''
      setShow(false)
    }
    return () => {
      document.body.style.overflow = ''
    }
  }, [open])

  if (!open) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div
        className={`fixed inset-0 bg-black/50 transition-opacity duration-200 ${show ? 'opacity-100' : 'opacity-0'}`}
        onClick={onClose}
      />
      <div
        className={`relative bg-white rounded-lg shadow-xl w-full h-[95vh] transition-all duration-200 ${
          show ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
        }`}
      >
        {/* 弹窗头部 */}
        <div className="flex items-center justify-between px-4 py-2.5 border-b border-gray-200">
          <h3 className="font-medium text-gray-900 text-sm">验收测试清单</h3>
          <button
            onClick={onClose}
            className="text-gray-500 hover:text-gray-700 p-1 rounded-md hover:bg-gray-100 transition-colors"
            aria-label="关闭"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
        {/* iframe 加载验收测试页面 — 带版本参数防止缓存 */}
        <iframe
          src={`/acceptance-test.html?v=${__APP_VERSION__}`}
          className="w-full"
          style={{ height: 'calc(95vh - 42px)', border: 'none' }}
          title="验收测试清单"
        />
      </div>
    </div>
  )
}
