'use client';

import React from 'react';
import { Loader2 } from 'lucide-react';
import { SmartFieldBackground } from './SmartFieldBackground';

interface LoadingScreenProps {
  message?: string;
  subMessage?: string;
  variant?: 'default' | 'auth' | 'redirect';
}

export function LoadingScreen({
  message,
  subMessage,
  variant = 'default'
}: LoadingScreenProps) {
  return (
    <div className="min-h-screen flex items-center justify-center relative overflow-hidden">
      {/* 智慧大田动态背景 - 使用登录页面相同的背景效果 */}
      <SmartFieldBackground />

      {/* 主要内容 */}
      <div className="relative z-10 text-center">
        {/* 大型加载器 */}
        <div className="relative inline-block">
          {/* 外圈 */}
          <div className="w-32 h-32 border-4 border-green-400/20 rounded-full animate-pulse"></div>
          {/* 中圈 */}
          <div className="absolute top-0 left-0 w-32 h-32 border-4 border-green-400/40 rounded-full animate-spin border-t-transparent border-r-transparent"></div>
          {/* 内圈 */}
          <div className="absolute top-4 left-4 w-24 h-24 border-4 border-green-400/60 rounded-full animate-spin border-t-transparent border-l-transparent" style={{ animationDirection: 'reverse' }}></div>
          {/* 中心 */}
          <div className="absolute top-12 left-12 w-8 h-8 bg-gradient-to-br from-green-400 to-emerald-400 rounded-full animate-pulse shadow-lg shadow-green-500/50">
            <div className="w-full h-full bg-white rounded-full animate-ping opacity-30"></div>
          </div>
          {/* Loader2 */}
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
            <Loader2 className="w-12 h-12 text-white/80 animate-spin" />
          </div>
        </div>

        {/* 加载标题 */}
        <div className="mt-16">
          <p className="text-white/90 text-xl font-medium tracking-wide drop-shadow-lg">
            正在加载智慧农业生产管理系统
          </p>
        </div>
      </div>
    </div>
  );
}