/**
 * filekorolheader: AI决策看板 - 智能决策生成与执行监控中心
 * 功能：决策统计展示、地图可视化、趋势分析、决策详情查看、状态管理
 * 路径：/ai-crop-model/support/dashboard
 * 规范：遵循crop-x/docs/开发项目规范.md，使用useReducer状态管理，shadcn语义化样式
 */
'use client';

import { useReducer } from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { toast } from 'sonner';
import {
  LayoutDashboard,
  RefreshCw,
  CheckCircle,
  AlertCircle,
  TrendingUp,
  Droplets,
  Bug,
  Sprout,
  Package,
  CloudRain,
  Layers,
  Activity,
  Clock,
  Info,
  Sparkles,
  Calendar,
  MapPin,
  Zap,
  CircleDot,
  Map as MapIcon,
} from 'lucide-react';
import { AIDecisionDashboardReducer, initialState, AIDecisionDashboardState, AIDecisionDashboardAction } from './components/aiDecisionDashboardReducer';
import { StatisticsCards } from './components/StatisticsCards';
import { DecisionMap } from './components/DecisionMap';
import { DecisionTrends } from './components/DecisionTrends';
import { LatestDecisions } from './components/LatestDecisions';

export default function DashboardPage() {
  const [state, dispatch] = useReducer(AIDecisionDashboardReducer, initialState);

  const handleRefresh = () => {
    dispatch({ type: 'REFRESH_DATA' });
    toast.success('数据已刷新');
  };

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <Card className="p-6 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950 dark:to-emerald-950 border-green-200 dark:border-green-800">
        <div className="flex items-start justify-between">
          <div className="flex items-start gap-3">
            <LayoutDashboard className="w-6 h-6 text-green-600 dark:text-green-400 flex-shrink-0 mt-1" />
            <div className="flex-1">
              <h2 className="mb-2">AI决策看板</h2>
              <p className="text-sm text-muted-foreground mb-3">
                实时展示AI决策生成与执行统计，监控决策效果和趋势
              </p>
              <div className="flex flex-wrap gap-2">
                <Badge variant="outline" className="bg-white dark:bg-gray-800">
                  <Sparkles className="w-3 h-3 mr-1" />
                  智能生成
                </Badge>
                <Badge variant="outline" className="bg-white dark:bg-gray-800">
                  <Activity className="w-3 h-3 mr-1" />
                  实时监控
                </Badge>
                <Badge variant="outline" className="bg-white dark:bg-gray-800">
                  <TrendingUp className="w-3 h-3 mr-1" />
                  趋势分析
                </Badge>
                <Badge variant="outline" className="bg-white dark:bg-gray-800">
                  <MapIcon className="w-3 h-3 mr-1" />
                  地图可视化
                </Badge>
              </div>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={handleRefresh}>
              <RefreshCw className="w-4 h-4 mr-1" />
              刷新
            </Button>
          </div>
        </div>
      </Card>

      {/* 核心统计卡片 */}
      <StatisticsCards stats={state.stats} />

      {/* 地图可视化 + 决策趋势图 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <DecisionMap fieldDecisions={state.fieldDecisions} />
        <DecisionTrends trendData={state.trendData} />
      </div>

      {/* 最新决策建议 */}
      <LatestDecisions latestDecisions={state.latestDecisions} />
    </div>
  );
}