import React, { useEffect, useState } from 'react';
import { useAppStore } from '../store';
import PrizeDisplay from '../components/PrizeDisplay';

const SimpleNetworkTest: React.FC = () => {
  const { prizes, loadPrizes } = useAppStore();
  const [networkInfo, setNetworkInfo] = useState({
    url: '',
    host: '',
    userAgent: '',
    online: navigator.onLine
  });

  useEffect(() => {
    // 获取网络信息
    setNetworkInfo({
      url: window.location.href,
      host: window.location.host,
      userAgent: navigator.userAgent,
      online: navigator.onLine
    });

    // 强制输出调试信息到控制台
    console.log('=== 网络测试页面 ===');
    console.log('当前URL:', window.location.href);
    console.log('当前主机:', window.location.host);
    console.log('网络状态:', navigator.onLine ? '在线' : '离线');
    console.log('用户代理:', navigator.userAgent);
    
    // 加载奖项数据
    console.log('开始加载奖项数据...');
    loadPrizes().then(() => {
      console.log('奖项数据加载完成');
    }).catch(error => {
      console.error('奖项数据加载失败:', error);
    });
  }, [loadPrizes]);

  useEffect(() => {
    console.log('奖项数据更新:', prizes);
    console.log('活跃奖项数量:', prizes.filter(p => p.is_active).length);
  }, [prizes]);

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 p-4">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold text-white text-center mb-8">
          网络环境测试页面
        </h1>
        
        {/* 网络信息显示 */}
        <div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 mb-6">
          <h2 className="text-xl font-bold text-white mb-4">网络环境信息</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-white">
            <div>
              <strong>当前URL:</strong>
              <div className="text-sm text-white/80 break-all">{networkInfo.url}</div>
            </div>
            <div>
              <strong>主机地址:</strong>
              <div className="text-sm text-white/80">{networkInfo.host}</div>
            </div>
            <div>
              <strong>网络状态:</strong>
              <div className={`text-sm ${networkInfo.online ? 'text-green-400' : 'text-red-400'}`}>
                {networkInfo.online ? '在线' : '离线'}
              </div>
            </div>
            <div>
              <strong>奖项数量:</strong>
              <div className="text-sm text-white/80">
                总计: {prizes.length}, 活跃: {prizes.filter(p => p.is_active).length}
              </div>
            </div>
          </div>
        </div>

        {/* PrizeDisplay 组件测试 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div>
            <h2 className="text-xl font-bold text-white mb-4">PrizeDisplay 组件渲染测试</h2>
            <PrizeDisplay prizes={prizes} />
          </div>
          
          <div className="bg-white/10 backdrop-blur-md rounded-2xl p-6">
            <h2 className="text-xl font-bold text-white mb-4">调试信息</h2>
            <div className="text-white text-sm space-y-2">
              <div>请打开浏览器开发者工具查看控制台输出</div>
              <div>检查是否有错误或警告信息</div>
              <div>验证奖项数据是否正确加载</div>
              <div className="mt-4 p-3 bg-white/5 rounded">
                <strong>原始奖项数据:</strong>
                <pre className="text-xs mt-2 overflow-auto max-h-40">
                  {JSON.stringify(prizes, null, 2)}
                </pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SimpleNetworkTest;