'use client'

import { useEffect } from 'react'
import { LoadingSpinner } from './loading-spinner'
import { cn } from '@/lib/utils'

interface FullScreenLoadingProps {
  isVisible: boolean
  message?: string
  onComplete?: () => void
}

export function FullScreenLoading({ 
  isVisible, 
  message = '正在处理中...',
  onComplete 
}: FullScreenLoadingProps) {
  // 禁止页面滚动
  useEffect(() => {
    if (isVisible) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = 'unset'
    }

    return () => {
      document.body.style.overflow = 'unset'
    }
  }, [isVisible])

  // 自动调用完成回调
  useEffect(() => {
    if (!isVisible && onComplete) {
      const timer = setTimeout(onComplete, 300) // 等待退出动画完成
      return () => clearTimeout(timer)
    }
  }, [isVisible, onComplete])

  if (!isVisible) return null

  return (
    <div className={cn(
      "fixed inset-0 z-[9999] flex items-center justify-center",
      "bg-black/50 backdrop-blur-sm",
      "animate-in fade-in duration-200"
    )}>
      <div className={cn(
        "bg-background rounded-lg border border-border shadow-2xl",
        "p-8 mx-4 max-w-sm w-full",
        "animate-in zoom-in-95 duration-200"
      )}>
        <div className="flex flex-col items-center space-y-4">
          <LoadingSpinner size="lg" />
          <div className="text-center">
            <p className="text-foreground font-medium">{message}</p>
            <p className="text-sm text-muted-foreground mt-1">
              请稍候...
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default FullScreenLoading