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

const NetworkTest: React.FC = () => {
  const { prizes, loadPrizes } = useAppStore();
  const [networkInfo, setNetworkInfo] = useState({
    url: '',
    hostname: '',
    protocol: '',
    port: '',
    userAgent: ''
  });

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

    // 加载奖项数据
    console.log('NetworkTest - 开始加载奖项数据');
    loadPrizes();
  }, [loadPrizes]);

  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-6xl 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-8">
          <h2 className="text-xl font-bold text-white mb-4">网络环境信息</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div className="text-white/80">
              <strong>完整URL:</strong> {networkInfo.url}
            </div>
            <div className="text-white/80">
              <strong>主机名:</strong> {networkInfo.hostname}
            </div>
            <div className="text-white/80">
              <strong>协议:</strong> {networkInfo.protocol}
            </div>
            <div className="text-white/80">
              <strong>端口:</strong> {networkInfo.port || '默认'}
            </div>
            <div className="text-white/80 col-span-full">
              <strong>用户代理:</strong> {networkInfo.userAgent}
            </div>
          </div>
        </div>

        {/* 奖项数据状态 */}
        <div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 mb-8">
          <h2 className="text-xl font-bold text-white mb-4">奖项数据状态</h2>
          <div className="text-white/80">
            <p><strong>奖项总数:</strong> {prizes.length}</p>
            <p><strong>活跃奖项:</strong> {prizes.filter(p => p.is_active).length}</p>
            <p><strong>数据加载状态:</strong> {prizes.length > 0 ? '✅ 已加载' : '❌ 未加载或为空'}</p>
          </div>
          
          {/* 详细奖项信息 */}
          {prizes.length > 0 && (
            <div className="mt-4">
              <h3 className="text-lg font-semibold text-white mb-2">奖项详情:</h3>
              <div className="space-y-2 max-h-40 overflow-y-auto">
                {prizes.map((prize, index) => (
                  <div key={prize.id} className="text-xs text-white/70 bg-white/5 p-2 rounded">
                    <span className="font-medium">{index + 1}. {prize.name}</span>
                    <span className="ml-2">({prize.is_active ? '活跃' : '非活跃'})</span>
                    <span className="ml-2">剩余: {prize.remainingQuantity}/{prize.totalQuantity}</span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* PrizeDisplay组件测试 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <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-sm text-white/80 space-y-2">
              <p>请打开浏览器开发者工具查看控制台日志</p>
              <p>关键日志前缀:</p>
              <ul className="list-disc list-inside ml-4 space-y-1">
                <li>PrizeDisplay 渲染 - 组件渲染信息</li>
                <li>Store loadPrizes - 状态管理信息</li>
                <li>SharedDatabase getAllPrizes - 数据库操作信息</li>
              </ul>
              
              <div className="mt-4 p-3 bg-white/5 rounded">
                <p className="font-medium">测试步骤:</p>
                <ol className="list-decimal list-inside ml-4 space-y-1 mt-2">
                  <li>在localhost:5173访问此页面</li>
                  <li>在192.168.1.42:5173访问此页面</li>
                  <li>对比两个环境下的显示效果和控制台日志</li>
                  <li>检查PrizeDisplay组件是否正常显示</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default NetworkTest;