'use client';

import React, { useState, useEffect } from 'react';
import { BarChart2, Clock, Star, Map, Camera, List, Calendar, Eye } from 'lucide-react';
import { StatCard } from '@/components/ui/stat-card';
import { LoadingSpinner } from '@/components/ui/loading-spinner';
import { AppLayout } from '@/components/layout/app-layout';
import { PageLoading } from '@/components/ui/page-loading';
import { MeteorTypePieChart } from '@/components/charts/meteor-type-pie-chart';
import { StationDistributionChart } from '@/components/charts/station-distribution-chart';
import { TimeDistributionChart } from '@/components/charts/time-distribution-chart';
import { BrightnessDistributionChart } from '@/components/charts/brightness-distribution-chart';
import { 
  getStatisticsSummary, 
  getTimeDistribution, 
  getBrightnessAnalysis,
  getRegionalDistribution,
  getCameraCorrelation,
  getMeteorEvents,
  type AnalysisData,
  type TimeDistributionData,
  type BrightnessAnalysisData
} from '@/services/analysis';

type ActiveTab = 'time' | 'brightness' | 'regional' | 'correlation' | 'events';

export default function AnalysisPage() {
  const [activeTab, setActiveTab] = useState<ActiveTab>('time');
  const [timeFrame, setTimeFrame] = useState<'hour' | 'day' | 'month'>('month');
  const [loading, setLoading] = useState(true);
  const [summaryData, setSummaryData] = useState<AnalysisData | null>(null);
  const [timeDistData, setTimeDistData] = useState<TimeDistributionData | null>(null);
  const [brightnessData, setBrightnessData] = useState<BrightnessAnalysisData | null>(null);
  const [regionalData, setRegionalData] = useState<any>(null);

  // 获取分析数据
  const fetchAnalysisData = async () => {
    setLoading(true);
    
    try {
      const [summaryResponse, timeResponse, brightnessResponse, regionalResponse] = await Promise.all([
        getStatisticsSummary(),
        getTimeDistribution(timeFrame),
        getBrightnessAnalysis(),
        getRegionalDistribution()
      ]);

      setSummaryData(summaryResponse);
      setTimeDistData(timeResponse);
      setBrightnessData(brightnessResponse);
      setRegionalData(regionalResponse);
    } catch (error) {
      console.error('获取分析数据失败:', error);
      // 如果API调用失败，使用空数据
      setSummaryData(null);
      setTimeDistData(null);
      setBrightnessData(null);
      setRegionalData(null);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchAnalysisData();
  }, []);

  // 渲染统计摘要卡片
  const renderStatCards = () => {
    if (!summaryData) return null;
    
    return (
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <StatCard
          title="总流星数"
          value={summaryData.totalDetections}
          icon={BarChart2}
          iconBg="bg-blue-500"
        />
        <StatCard
          title="平均亮度"
          value={summaryData.averageBrightness?.toFixed(1) || '--'}
          suffix="等"
          icon={Star}
          iconBg="bg-purple-500"
        />
        <StatCard
          title="最活跃月份"
          value={summaryData.mostActiveMonth?.month || '--'}
          description={summaryData.mostActiveMonth ? `${summaryData.mostActiveMonth.shower} (${summaryData.mostActiveMonth.count} 颗)` : ''}
          icon={Calendar}
          iconBg="bg-green-500"
        />
        <StatCard
          title="最活跃站点"
          value={summaryData.topStations?.[0]?.region || '--'}
          description={summaryData.topStations?.[0] ? `${summaryData.topStations[0].count} 次观测` : ''}
          icon={Camera}
          iconBg="bg-orange-500"
        />
      </div>
    );
  };

  // 渲染时间分布视图
  const renderTimeDistributionView = () => {
    const distribution = timeFrame === 'hour' ? timeDistData?.hourly :
                        timeFrame === 'month' ? timeDistData?.monthly :
                        timeDistData?.yearly;
    
    if (!timeDistData || !distribution || !Array.isArray(distribution)) {
      return (
        <div className="flex justify-center items-center h-64">
          <p className="text-gray-500 dark:text-gray-400">暂无数据</p>
        </div>
      );
    }
    
    return (
      <>
        <div className="mb-4 flex flex-wrap gap-2">
          <button 
            className={`px-3 py-1 text-sm rounded-md ${timeFrame === 'hour' ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'}`}
            onClick={() => setTimeFrame('hour')}
          >
            按小时
          </button>
          <button 
            className={`px-3 py-1 text-sm rounded-md ${timeFrame === 'day' ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'}`}
            onClick={() => setTimeFrame('day')}
          >
            按天
          </button>
          <button 
            className={`px-3 py-1 text-sm rounded-md ${timeFrame === 'month' ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'}`}
            onClick={() => setTimeFrame('month')}
          >
            按月
          </button>
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">流星时间分布</h3>
          <TimeDistributionChart data={distribution} timeFrame={timeFrame} />
          <div className="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
            总计: {distribution.reduce((acc, item) => acc + item.count, 0).toLocaleString()} 颗流星
          </div>
        </div>
      </>
    );
  };

  // 渲染亮度分析视图
  const renderBrightnessView = () => {
    if (!brightnessData || !brightnessData.brightnessDistribution || !brightnessData.brightnessStats) {
      return (
        <div className="flex justify-center items-center h-64">
          <p className="text-gray-500 dark:text-gray-400">暂无数据</p>
        </div>
      );
    }
    
    return (
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">亮度分布</h3>
          <BrightnessDistributionChart data={brightnessData.brightnessDistribution || []} />
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">亮度统计</h3>
          
          <div className="grid grid-cols-2 gap-4 mb-6">
            <div className="p-3 bg-gray-100 dark:bg-gray-750 rounded-lg">
              <p className="text-sm text-gray-500 dark:text-gray-400">平均亮度</p>
              <p className="text-xl font-bold text-gray-900 dark:text-white">
                {brightnessData.brightnessStats?.average?.toFixed(1) || '--'} <span className="text-sm font-normal">等</span>
              </p>
            </div>
            
            <div className="p-3 bg-gray-100 dark:bg-gray-750 rounded-lg">
              <p className="text-sm text-gray-500 dark:text-gray-400">中位数亮度</p>
              <p className="text-xl font-bold text-gray-900 dark:text-white">
                {brightnessData.brightnessStats?.median?.toFixed(1) || '--'} <span className="text-sm font-normal">等</span>
              </p>
            </div>
            
            <div className="p-3 bg-gray-100 dark:bg-gray-750 rounded-lg">
              <p className="text-sm text-gray-500 dark:text-gray-400">最亮流星</p>
              <p className="text-xl font-bold text-gray-900 dark:text-white">
                {brightnessData.brightnessStats?.brightest?.toFixed(1) || '--'} <span className="text-sm font-normal">等</span>
              </p>
            </div>
            
            <div className="p-3 bg-gray-100 dark:bg-gray-750 rounded-lg">
              <p className="text-sm text-gray-500 dark:text-gray-400">最暗流星</p>
              <p className="text-xl font-bold text-gray-900 dark:text-white">
                {brightnessData.brightnessStats?.dimmest?.toFixed(1) || '--'} <span className="text-sm font-normal">等</span>
              </p>
            </div>
          </div>
          
          <div className="text-sm text-gray-600 dark:text-gray-400">
            <h4 className="font-medium mb-2">亮度等级说明</h4>
            <p className="mb-1">视星等解释:</p>
            <ul className="list-disc list-inside space-y-1">
              <li>-6及以下: 超级火球</li>
              <li>-6到-4: 火球</li>
              <li>-4到-2: 很亮流星</li>
              <li>-2到0: 亮流星</li>
              <li>0到2: 普通流星</li>
              <li>2到4: 暗流星</li>
              <li>4及以上: 很暗流星</li>
            </ul>
          </div>
        </div>
      </div>
    );
  };

  if (loading) {
    return <PageLoading text="加载分析数据中..." />;
  }

  return (
    <AppLayout>
      <div className="p-4 md:p-6">
      <div className="mb-6">
        <h2 className="text-xl md:text-2xl font-bold mb-2 text-gray-900 dark:text-white">数据分析</h2>
        <p className="text-sm text-gray-600 dark:text-gray-400">深入分析流星观测数据的各项指标和趋势</p>
      </div>
      
      {/* 统计摘要卡片 */}
      {renderStatCards()}
      
      {/* 分析标签页 */}
      <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
        <div className="flex flex-wrap -mb-px">
          <button
            className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
              activeTab === 'time'
                ? 'text-blue-600 border-b-2 border-blue-600'
                : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
            onClick={() => setActiveTab('time')}
          >
            <Clock size={16} className="inline mr-1 mb-1" />
            时间分布
          </button>
          <button
            className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
              activeTab === 'brightness'
                ? 'text-blue-600 border-b-2 border-blue-600'
                : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
            onClick={() => setActiveTab('brightness')}
          >
            <Star size={16} className="inline mr-1 mb-1" />
            亮度分析
          </button>
          <button
            className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
              activeTab === 'regional'
                ? 'text-blue-600 border-b-2 border-blue-600'
                : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
            onClick={() => setActiveTab('regional')}
          >
            <Map size={16} className="inline mr-1 mb-1" />
            区域分布
          </button>
          <button
            className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
              activeTab === 'correlation'
                ? 'text-blue-600 border-b-2 border-blue-600'
                : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
            onClick={() => setActiveTab('correlation')}
          >
            <Camera size={16} className="inline mr-1 mb-1" />
            相机关联
          </button>
          <button
            className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
              activeTab === 'events'
                ? 'text-blue-600 border-b-2 border-blue-600'
                : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
            onClick={() => setActiveTab('events')}
          >
            <List size={16} className="inline mr-1 mb-1" />
            流星事件
          </button>
        </div>
      </div>
      
      {/* 内容区域 */}
      <div>
        {activeTab === 'time' && renderTimeDistributionView()}
        {activeTab === 'brightness' && renderBrightnessView()}
        {activeTab === 'regional' && (
          <div className="space-y-6">
            {regionalData && regionalData.regions && Array.isArray(regionalData.regions) ? (
              <>
                <div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                  <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">流星类型分布</h3>
                  <MeteorTypePieChart data={regionalData.meteorTypes || []} />
                </div>
                
                <div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                  <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">监测站分布</h3>
                  <StationDistributionChart data={regionalData.regions || []} />
                </div>
              </>
            ) : (
              <div className="text-center py-16">
                <Map className="text-gray-400 mb-4 mx-auto" size={48} />
                <p className="text-gray-500 dark:text-gray-400">正在加载区域分布数据...</p>
              </div>
            )}
          </div>
        )}
        {activeTab === 'correlation' && (
          <div className="text-center py-16">
            <Camera className="text-gray-400 mb-4 mx-auto" size={48} />
            <p className="text-gray-500 dark:text-gray-400">相机关联分析开发中...</p>
          </div>
        )}
        {activeTab === 'events' && (
          <div className="text-center py-16">
            <List className="text-gray-400 mb-4 mx-auto" size={48} />
            <p className="text-gray-500 dark:text-gray-400">流星事件列表开发中...</p>
          </div>
        )}
      </div>
      </div>
    </AppLayout>
  );
}