import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import UploadInput from '../workspace/UploadInput';
import { useVideoUpload } from '../../hooks/video/useVideoUpload';
import { useAuth } from '../../hooks/auth/useAuth';
import { useNavigate } from 'react-router-dom';

const Hero = () => {
  const { t } = useTranslation(['common', 'home']);
  const navigate = useNavigate();
  const { isAuthenticated } = useAuth();
  const { handleUploadSuccess, handleDownloadSuccess } = useVideoUpload();

  // 延迟装饰元素的加载，优化 LCP
  const [decorationsReady, setDecorationsReady] = useState(false);

  useEffect(() => {
    // 使用 requestAnimationFrame 在下一帧加载装饰元素
    // 确保关键内容（标题、副标题、上传框）先渲染
    requestAnimationFrame(() => {
      setDecorationsReady(true);
    });
  }, []);

  // 验证用户是否已登录的处理函数
  const handleAuthCheck = (action: () => Promise<void>) => {
    if (!isAuthenticated) {
      navigate('/login', { state: { from: '/', message: t('login_required_for_upload') } });
      return Promise.resolve();
    }
    return action();
  };

  // 封装上传和下载成功的处理函数
  const handleAuthenticatedUpload = (
    uploadId: string,
    fileName: string,
    fileSize: number,
    fileType: string,
    duration?: number,
    filePath?: string,
    videoUrl?: string,
    projectId?: string
  ) => {
    return handleAuthCheck(() => handleUploadSuccess(uploadId, fileName, fileSize, fileType, duration, filePath, videoUrl, projectId));
  };

  const handleAuthenticatedDownload = (
    downloadId: string,
    fileName: string,
    fileType: string,
    filePath: string,
    videoUrl?: string,
    projectId?: string
  ) => {
    return handleAuthCheck(() => handleDownloadSuccess(downloadId, fileName, fileType, filePath, videoUrl, projectId));
  };

  return (
    <section className="relative pt-32 pb-20 bg-gradient-to-br from-purple-50 via-white to-pink-50 dark:from-gray-950 dark:via-purple-950/30 dark:to-gray-950 overflow-hidden">
      {/* 简化的装饰性背景元素 - 减少数量和尺寸，延迟加载 */}
      {decorationsReady && (
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          {/* 减少到 2 个装饰元素，尺寸从 600px 减小到 400px */}
          <div
            className="absolute top-0 left-1/4 w-80 h-80 bg-purple-500/10 dark:bg-purple-500/20 rounded-full blur-3xl"
            style={{
              animation: 'pulse 8s ease-in-out infinite',
              willChange: 'opacity'
            }}
          />
          <div
            className="absolute bottom-0 right-1/4 w-96 h-96 bg-pink-500/10 dark:bg-pink-500/20 rounded-full blur-3xl"
            style={{
              animation: 'pulse 10s ease-in-out infinite 2s',
              willChange: 'opacity'
            }}
          />
        </div>
      )}

      {/* 微妙的网格背景 - 延迟加载 */}
      {decorationsReady && (
        <div
          className="absolute inset-0 opacity-[0.02] dark:opacity-[0.03] pointer-events-none"
          style={{
            backgroundImage: `
              linear-gradient(to right, rgb(147, 51, 234) 1px, transparent 1px),
              linear-gradient(to bottom, rgb(147, 51, 234) 1px, transparent 1px)
            `,
            backgroundSize: '80px 80px'
          }}
        />
      )}

      {/* 关键内容：立即渲染，无条件显示，优化 LCP */}
      <div className="relative text-center">
        <div className="relative flex flex-col items-center w-full px-6">
          <div className="max-w-4xl mx-auto">
            {/* 主标题 - 渐变动画立即启用 */}
            <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold mb-6 leading-tight">
              <span
                className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-600 to-purple-600 dark:from-purple-400 dark:via-pink-400 dark:to-purple-400 animate-gradient"
                style={{ willChange: 'background-position' }}
              >
                {t('welcome')}
              </span>
            </h1>

            {/* 副标题 */}
            <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-16 max-w-3xl mx-auto leading-relaxed font-medium">
              {t('hero_desc')}
            </p>

            {/* 上传输入框 - 简化装饰效果 */}
            <div className="max-w-3xl mx-auto">
              <div className="relative">
                {/* 光晕效果 - 仅在装饰元素加载后显示 */}
                {decorationsReady && (
                  <div className="absolute -inset-4 bg-gradient-to-r from-purple-600/20 via-pink-600/20 to-purple-600/20 rounded-3xl blur-2xl opacity-50" />
                )}

                <div className="relative bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl rounded-2xl p-8 shadow-2xl border border-gray-200/50 dark:border-gray-700/50">
                  <UploadInput
                    onUploadSuccess={handleAuthenticatedUpload}
                    onDownloadSuccess={handleAuthenticatedDownload}
                    isAuthenticated={isAuthenticated}
                  />
                </div>
              </div>
            </div>

            {/* 信任指标 */}
            <div className="mt-16 flex flex-wrap justify-center items-center gap-8 text-sm text-gray-500 dark:text-gray-400">
              <div className="flex items-center gap-2">
                <div className="flex -space-x-2">
                  <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 border-2 border-white dark:border-gray-900" />
                  <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-cyan-400 border-2 border-white dark:border-gray-900" />
                  <div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-400 to-purple-400 border-2 border-white dark:border-gray-900" />
                </div>
                <span className="font-medium">
                  {t('hero_trust_served')} <span className="text-purple-600 dark:text-purple-400 font-bold">50,000+</span> {t('hero_trust_creators')}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-2xl">⚡</span>
                <span className="font-medium">
                  {t('hero_trust_processed')} <span className="text-purple-600 dark:text-purple-400 font-bold">1M+</span> {t('hero_trust_videos')}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 渐变动画样式 - 使用 will-change 优化性能 */}
      <style dangerouslySetInnerHTML={{
        __html: `
        @keyframes gradient {
          0%, 100% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
        }
        
        .animate-gradient {
          background-size: 200% auto;
          animation: gradient 3s ease infinite;
        }
      `}} />
    </section>
  );
};

export default Hero;