import { useState, useEffect } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { Progress } from '../ui/progress';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '../ui/dialog';
import {
  BarChart3,
  TrendingUp,
  TrendingDown,
  AlertTriangle,
  Package,
  ShoppingCart,
  RotateCcw,
  Activity,
  DollarSign,
  Percent,
  Calendar,
  Download,
  Filter,
  RefreshCw,
  ArrowUp,
  ArrowDown,
  Minus,
  Eye,
  Layers,
  Clock,
  Target,
  Award,
  AlertCircle,
  FileText,
  MapPin,
  Leaf,
  Lightbulb,
} from 'lucide-react';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip as RechartsTooltip,
  Legend,
  ResponsiveContainer,
  LineChart,
  Line,
  PieChart,
  Pie,
  Cell,
  AreaChart,
  Area,
  ComposedChart,
  Scatter,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  Radar,
} from 'recharts';

interface AssetReportProps {
  activePath?: string;
}

interface KPIMetric {
  id: string;
  label: string;
  value: string | number;
  unit: string;
  trend: 'up' | 'down' | 'stable';
  trendValue: string;
  icon: any;
  color: string;
  description: string;
}

interface InventoryLevel {
  category: string;
  current: number;
  min: number;
  max: number;
  optimal: number;
  status: '正常' | '偏低' | '偏高' | '预警';
}

interface CategoryDistribution {
  name: string;
  value: number;
  percentage: number;
  color: string;
}

interface InventoryAge {
  range: string;
  count: number;
  value: number;
  risk: '低' | '中' | '高';
}

interface ConsumptionTrend {
  month: string;
  consumption: number;
  cost: number;
  lastYear?: number;
}

interface TopConsumer {
  name: string;
  type: '地块' | '作物';
  totalCost: number;
  totalQuantity: number;
  items: number;
  trend: 'up' | 'down' | 'stable';
  percentage: number;
}

export function AssetReport({ activePath }: AssetReportProps) {
  const [activeTab, setActiveTab] = useState('overview');
  const [timeRange, setTimeRange] = useState('month');
  
  // 呆滞库存预警弹窗状态
  const [showIdleStockDetail180Dialog, setShowIdleStockDetail180Dialog] = useState(false);
  const [showIdleStockDetail90Dialog, setShowIdleStockDetail90Dialog] = useState(false);
  const [showIdleStockDetailHealthyDialog, setShowIdleStockDetailHealthyDialog] = useState(false);

  // 地块和作物消耗排行相关状态
  const [fieldConsumptionMonth, setFieldConsumptionMonth] = useState('2025-10');
  const [cropConsumptionMonth, setCropConsumptionMonth] = useState('2025-10');
  const [showAllFieldsDialog, setShowAllFieldsDialog] = useState(false);
  const [showAllCropsDialog, setShowAllCropsDialog] = useState(false);

  // 根据路径自动切换Tab
  useEffect(() => {
    if (activePath) {
      if (activePath.includes('/report/overview')) {
        setActiveTab('overview');
      } else if (activePath.includes('/report/inventory')) {
        setActiveTab('inventory');
      } else if (activePath.includes('/report/consumption')) {
        setActiveTab('consumption');
      }
    }
  }, [activePath]);

  // KPI指标数据
  const [kpiMetrics] = useState<KPIMetric[]>([
    {
      id: 'inventory-value',
      label: '库存总值',
      value: 285.6,
      unit: '万元',
      trend: 'up',
      trendValue: '+8.5%',
      icon: Package,
      color: 'green',
      description: '较上月增长',
    },
    {
      id: 'monthly-cost',
      label: '本月领用成本',
      value: 42.3,
      unit: '万元',
      trend: 'down',
      trendValue: '-5.2%',
      icon: ShoppingCart,
      color: 'blue',
      description: '较上月下降',
    },
    {
      id: 'turnover-rate',
      label: '库存周转率',
      value: 3.8,
      unit: '次/月',
      trend: 'up',
      trendValue: '+0.3',
      icon: RotateCcw,
      color: 'purple',
      description: '周转加快',
    },
    {
      id: 'low-stock',
      label: '低库存预警',
      value: 12,
      unit: '项',
      trend: 'down',
      trendValue: '-3',
      icon: AlertTriangle,
      color: 'orange',
      description: '需及时补货',
    },
    {
      id: 'idle-rate',
      label: '农具闲置率',
      value: 23.5,
      unit: '%',
      trend: 'stable',
      trendValue: '0%',
      icon: Activity,
      color: 'yellow',
      description: '保持稳定',
    },
    {
      id: 'roi',
      label: '资产利用率',
      value: 76.5,
      unit: '%',
      trend: 'up',
      trendValue: '+4.2%',
      icon: Target,
      color: 'teal',
      description: '利用率提升',
    },
  ]);

  // 库存水位数据
  const [inventoryLevels] = useState<InventoryLevel[]>([
    {
      category: '化肥',
      current: 850,
      min: 500,
      max: 1500,
      optimal: 1000,
      status: '正常',
    },
    {
      category: '农药',
      current: 320,
      min: 200,
      max: 800,
      optimal: 500,
      status: '偏低',
    },
    {
      category: '种子',
      current: 1200,
      min: 300,
      max: 1000,
      optimal: 650,
      status: '偏高',
    },
    {
      category: '地膜',
      current: 180,
      min: 200,
      max: 600,
      optimal: 400,
      status: '预警',
    },
    {
      category: '农具',
      current: 450,
      min: 300,
      max: 800,
      optimal: 550,
      status: '正常',
    },
  ]);

  // 品类分布数据
  const [categoryDistribution] = useState<CategoryDistribution[]>([
    { name: '化肥', value: 856000, percentage: 35.2, color: '#10b981' },
    { name: '农药', value: 428000, percentage: 17.6, color: '#3b82f6' },
    { name: '种子', value: 642000, percentage: 26.4, color: '#f59e0b' },
    { name: '地膜', value: 214000, percentage: 8.8, color: '#8b5cf6' },
    { name: '农具', value: 292000, percentage: 12.0, color: '#ec4899' },
  ]);

  // 库龄分布数据
  const [inventoryAge] = useState<InventoryAge[]>([
    { range: '0-30天', count: 45, value: 1280000, risk: '低' },
    { range: '31-60天', count: 28, value: 856000, risk: '低' },
    { range: '61-90天', count: 18, value: 428000, risk: '中' },
    { range: '91-180天', count: 12, value: 214000, risk: '中' },
    { range: '180天以上', count: 8, value: 78000, risk: '高' },
  ]);

  // 消耗趋势数据
  const [consumptionTrend] = useState<ConsumptionTrend[]>([
    { month: '5月', consumption: 3850, cost: 385000, lastYear: 3200 },
    { month: '6月', consumption: 4200, cost: 428000, lastYear: 3800 },
    { month: '7月', consumption: 5100, cost: 512000, lastYear: 4500 },
    { month: '8月', consumption: 4800, cost: 468000, lastYear: 4200 },
    { month: '9月', consumption: 3900, cost: 398000, lastYear: 3500 },
    { month: '10月', consumption: 4300, cost: 423000, lastYear: 3900 },
  ]);

  // Top消耗榜
  const [topConsumers] = useState<TopConsumer[]>([
    {
      name: '东区水稻田',
      type: '地块',
      totalCost: 135800,
      totalQuantity: 1358,
      items: 28,
      trend: 'up',
      percentage: 32.1,
    },
    {
      name: '西区玉米田',
      type: '地块',
      totalCost: 98500,
      totalQuantity: 985,
      items: 22,
      trend: 'down',
      percentage: 23.3,
    },
    {
      name: '南区蔬菜田',
      type: '地块',
      totalCost: 88200,
      totalQuantity: 882,
      items: 19,
      trend: 'up',
      percentage: 20.8,
    },
    {
      name: '北区小麦田',
      type: '地块',
      totalCost: 67300,
      totalQuantity: 673,
      items: 16,
      trend: 'stable',
      percentage: 15.9,
    },
    {
      name: '试验田',
      type: '地块',
      totalCost: 33200,
      totalQuantity: 332,
      items: 10,
      trend: 'down',
      percentage: 7.9,
    },
    {
      name: '小麦种植',
      type: '作物',
      totalCost: 128600,
      totalQuantity: 1286,
      items: 26,
      trend: 'up',
      percentage: 30.5,
    },
    {
      name: '玉米种植',
      type: '作物',
      totalCost: 105300,
      totalQuantity: 1053,
      items: 23,
      trend: 'up',
      percentage: 25.0,
    },
    {
      name: '水稻种植',
      type: '作物',
      totalCost: 92400,
      totalQuantity: 924,
      items: 20,
      trend: 'stable',
      percentage: 21.9,
    },
    {
      name: '蔬菜种植',
      type: '作物',
      totalCost: 68200,
      totalQuantity: 682,
      items: 16,
      trend: 'down',
      percentage: 16.2,
    },
    {
      name: '其他作物',
      type: '作物',
      totalCost: 26900,
      totalQuantity: 269,
      items: 8,
      trend: 'stable',
      percentage: 6.4,
    },
  ]);

  // 同比环比数据
  const comparisonData = [
    {
      category: '化肥',
      本月: 1280,
      上月: 1150,
      去年同期: 1050,
    },
    {
      category: '农药',
      本月: 856,
      上月: 920,
      去年同期: 780,
    },
    {
      category: '种子',
      本月: 642,
      上月: 580,
      去年同期: 620,
    },
    {
      category: '地膜',
      本月: 428,
      上月: 450,
      去年同期: 410,
    },
    {
      category: '农具',
      本月: 214,
      上月: 200,
      去年同期: 190,
    },
  ];

  // 周转率趋势
  const turnoverTrendData = [
    { month: '5月', 周转率: 3.2, 周转天数: 28 },
    { month: '6月', 周转率: 3.5, 周转天数: 26 },
    { month: '7月', 周转率: 3.8, 周转天数: 24 },
    { month: '8月', 周转率: 3.6, 周转天数: 25 },
    { month: '9月', 周转率: 3.9, 周转天数: 23 },
    { month: '10月', 周转率: 4.2, 周转天数: 21 },
  ];

  const COLORS = ['#10b981', '#3b82f6', '#f59e0b', '#8b5cf6', '#ec4899'];

  const getStatusColor = (status: string) => {
    switch (status) {
      case '正常': return 'bg-green-100 text-green-700';
      case '偏低': return 'bg-yellow-100 text-yellow-700';
      case '偏高': return 'bg-blue-100 text-blue-700';
      case '预警': return 'bg-red-100 text-red-700';
      default: return 'bg-gray-100 text-gray-700';
    }
  };

  const getRiskColor = (risk: string) => {
    switch (risk) {
      case '低': return 'bg-green-100 text-green-700';
      case '中': return 'bg-yellow-100 text-yellow-700';
      case '高': return 'bg-red-100 text-red-700';
      default: return 'bg-gray-100 text-gray-700';
    }
  };

  const getTrendIcon = (trend: 'up' | 'down' | 'stable') => {
    switch (trend) {
      case 'up': return <ArrowUp className="w-4 h-4 text-green-600" />;
      case 'down': return <ArrowDown className="w-4 h-4 text-red-600" />;
      case 'stable': return <Minus className="w-4 h-4 text-gray-600" />;
    }
  };

  const getKPIColor = (color: string) => {
    const colors: Record<string, string> = {
      green: 'text-green-600',
      blue: 'text-blue-600',
      purple: 'text-purple-600',
      orange: 'text-orange-600',
      yellow: 'text-yellow-600',
      teal: 'text-teal-600',
    };
    return colors[color] || 'text-gray-600';
  };

  const getKPIBgColor = (color: string) => {
    const colors: Record<string, string> = {
      green: 'bg-green-50',
      blue: 'bg-blue-50',
      purple: 'bg-purple-50',
      orange: 'bg-orange-50',
      yellow: 'bg-yellow-50',
      teal: 'bg-teal-50',
    };
    return colors[color] || 'bg-gray-50';
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2>资产可视化报表</h2>
          <p className="text-sm text-muted-foreground mt-1">
            全面洞察资产健康度，数据驱动决策优化
          </p>
        </div>
        <div className="flex gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-32">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="week">本周</SelectItem>
              <SelectItem value="month">本月</SelectItem>
              <SelectItem value="quarter">本季度</SelectItem>
              <SelectItem value="year">本年</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline">
            <RefreshCw className="w-4 h-4 mr-2" />
            刷新数据
          </Button>
          <Button variant="outline">
            <Download className="w-4 h-4 mr-2" />
            导出报表
          </Button>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="overview">全局概览核心指标</TabsTrigger>
          <TabsTrigger value="inventory">库存动态可视化</TabsTrigger>
          <TabsTrigger value="consumption">领用消耗分析</TabsTrigger>
        </TabsList>

        {/* 全局概览核心指标 */}
        <TabsContent value="overview" className="space-y-4">
          <Card className="p-4 bg-gradient-to-r from-green-50 to-blue-50 border-green-200">
            <div className="flex items-start gap-2">
              <BarChart3 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-green-900">
                <p className="mb-2">全局概览核心指标：</p>
                <ul className="space-y-1 text-xs">
                  <li>• <strong>KPI卡片</strong>: 集中展示最关键的实时业务指标</li>
                  <li>• <strong>数字趋势</strong>: 通过趋势图直观呈现指标变化</li>
                  <li>• <strong>核心指标</strong>: 库存总值、领用成本、周转率、预警数量、闲置率、资产利用率</li>
                </ul>
              </div>
            </div>
          </Card>

          {/* KPI指标卡片 - 优化版 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {kpiMetrics.map((metric) => {
              const Icon = metric.icon;
              const isNegativeTrend = (metric.id === 'monthly-cost' || metric.id === 'low-stock' || metric.id === 'idle-rate') && metric.trend === 'down';
              const isPositiveTrend = (metric.id === 'inventory-value' || metric.id === 'turnover-rate' || metric.id === 'roi') && metric.trend === 'up';
              
              return (
                <Card 
                  key={metric.id} 
                  className={`p-6 ${getKPIBgColor(metric.color)} border-l-4 hover:shadow-lg transition-all duration-300 cursor-pointer group`}
                  style={{ 
                    borderLeftColor: metric.color === 'green' ? '#10b981' :
                                     metric.color === 'blue' ? '#3b82f6' :
                                     metric.color === 'purple' ? '#8b5cf6' :
                                     metric.color === 'orange' ? '#f59e0b' :
                                     metric.color === 'yellow' ? '#eab308' :
                                     metric.color === 'teal' ? '#14b8a6' : '#6b7280'
                  }}
                >
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center justify-between mb-3">
                        <div className="flex items-center gap-2">
                          <div className={`p-2 rounded-lg ${getKPIBgColor(metric.color)} ring-1 ring-${metric.color}-200 group-hover:scale-110 transition-transform`}>
                            <Icon className={`w-5 h-5 ${getKPIColor(metric.color)}`} />
                          </div>
                          <p className="text-sm text-muted-foreground">{metric.label}</p>
                        </div>
                        <Eye className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
                      </div>
                      <div className="flex items-baseline gap-2 mb-3">
                        <span className={`text-5xl ${getKPIColor(metric.color)} group-hover:scale-105 transition-transform inline-block`}>
                          {metric.value}
                        </span>
                        <span className="text-xl text-muted-foreground">{metric.unit}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className={`flex items-center gap-1 px-2 py-1 rounded-full ${
                          isPositiveTrend || isNegativeTrend ? 'bg-green-100' :
                          metric.trend === 'stable' ? 'bg-gray-100' : 'bg-red-100'
                        }`}>
                          {getTrendIcon(isPositiveTrend || isNegativeTrend ? 'up' : 
                                       metric.trend === 'stable' ? 'stable' : 'down')}
                          <span className={`text-xs font-medium ${
                            isPositiveTrend || isNegativeTrend ? 'text-green-600' :
                            metric.trend === 'stable' ? 'text-gray-600' : 'text-red-600'
                          }`}>
                            {metric.trendValue}
                          </span>
                        </div>
                        <span className="text-xs text-muted-foreground">
                          {metric.description}
                        </span>
                      </div>
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>

          {/* 实时监控面板 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card className="p-4 bg-gradient-to-br from-green-50 to-emerald-50 border-green-200">
              <div className="flex items-center justify-between mb-2">
                <h4 className="text-sm text-green-900">今日入库</h4>
                <Package className="w-4 h-4 text-green-600" />
              </div>
              <div className="text-3xl text-green-600 mb-1">28</div>
              <div className="flex items-center gap-2 text-xs">
                <span className="text-green-700">+12</span>
                <span className="text-muted-foreground">较昨日</span>
              </div>
            </Card>
            <Card className="p-4 bg-gradient-to-br from-blue-50 to-cyan-50 border-blue-200">
              <div className="flex items-center justify-between mb-2">
                <h4 className="text-sm text-blue-900">今日出库</h4>
                <ShoppingCart className="w-4 h-4 text-blue-600" />
              </div>
              <div className="text-3xl text-blue-600 mb-1">35</div>
              <div className="flex items-center gap-2 text-xs">
                <span className="text-blue-700">+8</span>
                <span className="text-muted-foreground">较昨日</span>
              </div>
            </Card>
            <Card className="p-4 bg-gradient-to-br from-purple-50 to-violet-50 border-purple-200">
              <div className="flex items-center justify-between mb-2">
                <h4 className="text-sm text-purple-900">在用农具</h4>
                <Activity className="w-4 h-4 text-purple-600" />
              </div>
              <div className="text-3xl text-purple-600 mb-1">42</div>
              <div className="flex items-center gap-2 text-xs">
                <span className="text-purple-700">76%</span>
                <span className="text-muted-foreground">利用率</span>
              </div>
            </Card>
          </div>

          {/* 关键指标趋势图 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card className="p-4">
              <h4 className="mb-4 flex items-center gap-2">
                <TrendingUp className="w-4 h-4 text-green-600" />
                库存周转率趋势
              </h4>
              <ResponsiveContainer width="100%" height={250}>
                <ComposedChart data={turnoverTrendData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="month" />
                  <YAxis yAxisId="left" />
                  <YAxis yAxisId="right" orientation="right" />
                  <RechartsTooltip />
                  <Legend />
                  <Area
                    yAxisId="left"
                    type="monotone"
                    dataKey="周转率"
                    fill="#10b981"
                    stroke="#10b981"
                    fillOpacity={0.3}
                    name="周转率(次/月)"
                  />
                  <Line
                    yAxisId="right"
                    type="monotone"
                    dataKey="周转天数"
                    stroke="#f59e0b"
                    name="周转天数"
                  />
                </ComposedChart>
              </ResponsiveContainer>
            </Card>

            <Card className="p-4">
              <h4 className="mb-4 flex items-center gap-2">
                <DollarSign className="w-4 h-4 text-blue-600" />
                月度成本与库存对比
              </h4>
              <ResponsiveContainer width="100%" height={250}>
                <AreaChart data={consumptionTrend}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="month" />
                  <YAxis />
                  <RechartsTooltip />
                  <Legend />
                  <Area
                    type="monotone"
                    dataKey="cost"
                    stackId="1"
                    stroke="#3b82f6"
                    fill="#3b82f6"
                    fillOpacity={0.6}
                    name="领用成本(元)"
                  />
                  <Area
                    type="monotone"
                    dataKey="consumption"
                    stackId="2"
                    stroke="#10b981"
                    fill="#10b981"
                    fillOpacity={0.4}
                    name="消耗数量"
                  />
                </AreaChart>
              </ResponsiveContainer>
            </Card>
          </div>



          {/* 快速操作入口 */}
          <Card className="p-6">
            <h4 className="mb-4 flex items-center gap-2">
              <Target className="w-5 h-5 text-purple-600" />
              快速操作入口
            </h4>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
              <Button variant="outline" className="h-20 flex-col gap-2 hover:bg-green-50 hover:border-green-300">
                <ShoppingCart className="w-5 h-5 text-green-600" />
                <span className="text-xs">采购订单</span>
              </Button>
              <Button variant="outline" className="h-20 flex-col gap-2 hover:bg-orange-50 hover:border-orange-300">
                <Package className="w-5 h-5 text-orange-600" />
                <span className="text-xs">库存盘点</span>
              </Button>
              <Button variant="outline" className="h-20 flex-col gap-2 hover:bg-blue-50 hover:border-blue-300">
                <AlertTriangle className="w-5 h-5 text-blue-600" />
                <span className="text-xs">物资领用</span>
              </Button>
              <Button variant="outline" className="h-20 flex-col gap-2 hover:bg-purple-50 hover:border-purple-300">
                <RotateCcw className="w-5 h-5 text-purple-600" />
                <span className="text-xs">归还登记</span>
              </Button>
            </div>
            
            {/* 数据更新时间 */}
            <div className="mt-4 pt-4 border-t">
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <div className="flex items-center gap-1">
                  <Clock className="w-3 h-3" />
                  <span>最后更新: 2分钟前</span>
                </div>
                <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                  数据正常
                </Badge>
              </div>
            </div>
          </Card>
        </TabsContent>

        {/* 库存动态可视化 */}
        <TabsContent value="inventory" className="space-y-4">
          <Card className="p-4 bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200">
            <div className="flex items-start gap-2">
              <Layers className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-blue-900">
                <p className="mb-2">库存动态可视化：</p>
                <ul className="space-y-1 text-xs">
                  <li>• <strong>库存水位图</strong>: 直观展示各类农资的当前数量与安全库存</li>
                  <li>• <strong>品类分布</strong>: 饼图展示价值分布，识别主要资产</li>
                  <li>• <strong>库龄热力图</strong>: 分析存放时长，快速识别呆滞库存</li>
                  <li>• <strong>优化建议</strong>: 辅助优化库存结构，降低资金占用</li>
                </ul>
              </div>
            </div>
          </Card>

          {/* 库存水位图 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Activity className="w-4 h-4 text-blue-600" />
              库存水位监控
            </h4>
            <div className="space-y-4">
              {inventoryLevels.map((level) => (
                <div key={level.category} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <span className="font-medium">{level.category}</span>
                      <Badge className={getStatusColor(level.status)}>{level.status}</Badge>
                    </div>
                    <div className="text-sm text-muted-foreground">
                      当前: {level.current} | 最优: {level.optimal} | 最大: {level.max}
                    </div>
                  </div>
                  <div className="relative h-8 bg-gray-100 rounded-lg overflow-hidden">
                    {/* 最小库存线 */}
                    <div
                      className="absolute top-0 bottom-0 w-0.5 bg-red-500 z-10"
                      style={{ left: `${(level.min / level.max) * 100}%` }}
                    >
                      <div className="absolute -top-1 left-1/2 -translate-x-1/2 text-xs text-red-600 whitespace-nowrap">
                        最小
                      </div>
                    </div>
                    {/* 最优库存线 */}
                    <div
                      className="absolute top-0 bottom-0 w-0.5 bg-green-500 z-10"
                      style={{ left: `${(level.optimal / level.max) * 100}%` }}
                    >
                      <div className="absolute -top-1 left-1/2 -translate-x-1/2 text-xs text-green-600 whitespace-nowrap">
                        最优
                      </div>
                    </div>
                    {/* 当前库存 */}
                    <div
                      className={`absolute top-0 bottom-0 ${
                        level.status === '预警' ? 'bg-red-400' :
                        level.status === '偏低' ? 'bg-yellow-400' :
                        level.status === '偏高' ? 'bg-blue-400' :
                        'bg-green-400'
                      } transition-all duration-300`}
                      style={{ width: `${(level.current / level.max) * 100}%` }}
                    >
                      <div className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-white font-medium">
                        {level.current}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>

          {/* 品类分布与库龄分析 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card className="p-4">
              <h4 className="mb-4 flex items-center gap-2">
                <Package className="w-4 h-4 text-green-600" />
                品类价值分布
              </h4>
              <ResponsiveContainer width="100%" height={300}>
                <PieChart>
                  <Pie
                    data={categoryDistribution}
                    cx="50%"
                    cy="50%"
                    labelLine={false}
                    label={({ name, percentage }) => `${name}: ${percentage}%`}
                    outerRadius={100}
                    fill="#8884d8"
                    dataKey="value"
                  >
                    {categoryDistribution.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <RechartsTooltip formatter={(value: number) => `¥${value.toLocaleString()}`} />
                </PieChart>
              </ResponsiveContainer>
              <div className="mt-4 space-y-2">
                {categoryDistribution.map((item) => (
                  <div key={item.name} className="flex items-center justify-between text-sm">
                    <div className="flex items-center gap-2">
                      <div className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }} />
                      <span>{item.name}</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <span className="text-muted-foreground">¥{(item.value / 10000).toFixed(1)}万</span>
                      <span>{item.percentage}%</span>
                    </div>
                  </div>
                ))}
              </div>
            </Card>

            <Card className="p-4">
              <h4 className="mb-4 flex items-center gap-2">
                <Clock className="w-4 h-4 text-orange-600" />
                库龄热力分析
              </h4>
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={inventoryAge} layout="vertical">
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis type="number" />
                  <YAxis dataKey="range" type="category" />
                  <RechartsTooltip />
                  <Bar dataKey="count" fill="#3b82f6" name="物品数量" />
                  <Bar dataKey="value" fill="#10b981" name="库存价值(元)" />
                </BarChart>
              </ResponsiveContainer>
              <div className="mt-4 space-y-2">
                {inventoryAge.map((item) => (
                  <div key={item.range} className="flex items-center justify-between text-sm">
                    <div className="flex items-center gap-2">
                      <span>{item.range}</span>
                      <Badge className={getRiskColor(item.risk)} variant="outline">
                        {item.risk}风险
                      </Badge>
                    </div>
                    <div className="flex items-center gap-3">
                      <span className="text-muted-foreground">{item.count}项</span>
                      <span>¥{(item.value / 10000).toFixed(1)}万</span>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          </div>

          {/* 呆滞库存预警 */}
          <Card className="p-4 bg-orange-50 border-orange-200">
            <h4 className="mb-4 flex items-center gap-2">
              <AlertTriangle className="w-5 h-5 text-orange-600" />
              呆滞库存预警
            </h4>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="text-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow cursor-pointer group">
                <div className="text-4xl text-red-600 mb-2 group-hover:scale-110 transition-transform">8项</div>
                <p className="text-sm text-muted-foreground">超180天未动销</p>
                <p className="text-xs text-red-600 mt-1 mb-2">建议：清理处置</p>
                <Button 
                  variant="outline" 
                  size="sm" 
                  className="text-xs h-7"
                  onClick={() => setShowIdleStockDetail180Dialog(true)}
                >
                  查看明细
                </Button>
              </div>
              <div className="text-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow cursor-pointer group">
                <div className="text-4xl text-yellow-600 mb-2 group-hover:scale-110 transition-transform">12项</div>
                <p className="text-sm text-muted-foreground">91-180天缓慢周转</p>
                <p className="text-xs text-yellow-600 mt-1 mb-2">建议：促销消化</p>
                <Button 
                  variant="outline" 
                  size="sm" 
                  className="text-xs h-7"
                  onClick={() => setShowIdleStockDetail90Dialog(true)}
                >
                  查看明细
                </Button>
              </div>
              <div className="text-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow cursor-pointer group">
                <div className="text-4xl text-green-600 mb-2 group-hover:scale-110 transition-transform">73项</div>
                <p className="text-sm text-muted-foreground">健康周转</p>
                <p className="text-xs text-green-600 mt-1 mb-2">状态：良好</p>
                <Button 
                  variant="outline" 
                  size="sm" 
                  className="text-xs h-7"
                  onClick={() => setShowIdleStockDetailHealthyDialog(true)}
                >
                  查看明细
                </Button>
              </div>
            </div>
          </Card>

          {/* 畅销品与滞销品对比 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card className="p-6 bg-gradient-to-br from-green-50 to-emerald-50">
              <h4 className="mb-4 flex items-center gap-2">
                <TrendingUp className="w-5 h-5 text-green-600" />
                畅销品Top5
              </h4>
              <div className="space-y-3">
                {[
                  { name: '复合肥(N-P-K 15-15-15)', sales: 2850, turnover: 8.5, stock: 850, trend: 'up' },
                  { name: '有机肥(腐熟鸡粪)', sales: 2240, turnover: 7.2, stock: 620, trend: 'up' },
                  { name: '尿素(N 46%)', sales: 1980, turnover: 6.8, stock: 580, trend: 'stable' },
                  { name: '杀虫剂(吡虫啉)', sales: 1650, turnover: 5.5, stock: 300, trend: 'up' },
                  { name: '地膜(0.01mm)', sales: 1420, turnover: 4.7, stock: 450, trend: 'stable' },
                ].map((item, index) => (
                  <div key={item.name} className="flex items-center gap-3 p-3 bg-white rounded-lg hover:shadow-md transition-shadow">
                    <div className={`flex items-center justify-center w-8 h-8 rounded-full ${
                      index === 0 ? 'bg-yellow-100 text-yellow-600' :
                      index === 1 ? 'bg-gray-200 text-gray-600' :
                      index === 2 ? 'bg-orange-100 text-orange-600' :
                      'bg-green-100 text-green-600'
                    }`}>
                      <span className="font-bold text-sm">{index + 1}</span>
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <p className="text-sm font-medium truncate">{item.name}</p>
                        {item.trend === 'up' ? (
                          <ArrowUp className="w-3 h-3 text-green-600 flex-shrink-0" />
                        ) : (
                          <Minus className="w-3 h-3 text-gray-600 flex-shrink-0" />
                        )}
                      </div>
                      <div className="flex items-center gap-3 text-xs text-muted-foreground">
                        <span>销量: {item.sales}kg</span>
                        <span>周转: {item.turnover}次</span>
                        <span>库存: {item.stock}kg</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </Card>

            <Card className="p-6 bg-gradient-to-br from-red-50 to-orange-50">
              <h4 className="mb-4 flex items-center gap-2">
                <TrendingDown className="w-5 h-5 text-red-600" />
                滞销品Top5
              </h4>
              <div className="space-y-3">
                {[
                  { name: '过期除草剂(草甘膦)', sales: 45, days: 285, stock: 120, value: 8600 },
                  { name: '老款喷灌配件', sales: 68, days: 246, stock: 85, value: 12500 },
                  { name: '滞销种子(玉米)', sales: 92, days: 198, stock: 150, value: 18000 },
                  { name: '库存积压农膜', sales: 125, days: 176, stock: 200, value: 15800 },
                  { name: '淘汰农具零件', sales: 158, days: 152, stock: 95, value: 9200 },
                ].map((item, index) => (
                  <div key={item.name} className="flex items-center gap-3 p-3 bg-white rounded-lg hover:shadow-md transition-shadow">
                    <div className="flex items-center justify-center w-8 h-8 rounded-full bg-red-100 text-red-600">
                      <span className="font-bold text-sm">{index + 1}</span>
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <p className="text-sm font-medium truncate">{item.name}</p>
                        <Badge variant="outline" className="bg-red-50 text-red-600 border-red-200 text-xs">
                          {item.days}天
                        </Badge>
                      </div>
                      <div className="flex items-center gap-3 text-xs text-muted-foreground">
                        <span>销量: {item.sales}kg</span>
                        <span>库存: {item.stock}kg</span>
                        <span>价值: ¥{(item.value / 10000).toFixed(1)}万</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          </div>

          {/* 库存动态趋势 */}
          <Card className="p-6">
            <h4 className="mb-4 flex items-center gap-2">
              <Activity className="w-5 h-5 text-blue-600" />
              库存动态趋势(近6个月)
            </h4>
            <ResponsiveContainer width="100%" height={300}>
              <ComposedChart data={[
                { month: '5月', 入库: 2850, 出库: 2420, 库存: 8560 },
                { month: '6月', 入库: 3150, 出库: 2880, 库存: 8830 },
                { month: '7月', 入库: 3580, 出库: 3320, 库存: 9090 },
                { month: '8月', 入库: 2950, 出库: 3180, 库存: 8860 },
                { month: '9月', 入库: 2680, 出库: 2750, 库存: 8790 },
                { month: '10月', 入库: 3200, 出库: 2850, 库存: 9140 },
              ]}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="month" />
                <YAxis yAxisId="left" />
                <YAxis yAxisId="right" orientation="right" />
                <RechartsTooltip />
                <Legend />
                <Bar yAxisId="left" dataKey="入库" fill="#10b981" name="入库量(kg)" />
                <Bar yAxisId="left" dataKey="出库" fill="#3b82f6" name="出库量(kg)" />
                <Line yAxisId="right" type="monotone" dataKey="库存" stroke="#f59e0b" strokeWidth={3} name="库存总量(kg)" />
              </ComposedChart>
            </ResponsiveContainer>
          </Card>
        </TabsContent>

        {/* 领用消耗分析 */}
        <TabsContent value="consumption" className="space-y-4">
          <Card className="p-4 bg-gradient-to-r from-purple-50 to-pink-50 border-purple-200">
            <div className="flex items-start gap-2">
              <BarChart3 className="w-5 h-5 text-purple-600 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-purple-900">
                <p className="mb-2">领用消耗分析：</p>
                <ul className="space-y-1 text-xs">
                  <li>• <strong>消耗趋势</strong>: 趋势线图展示主要农资的消耗走势</li>
                  <li>• <strong>同比环比</strong>: 柱状图分析领用变化，识别异常波动</li>
                  <li>• <strong>领用排行</strong>: 找出消耗最大的地块或作物</li>
                  <li>• <strong>成本中心</strong>: 精准定位成本中心，优化资源配置</li>
                </ul>
              </div>
            </div>
          </Card>

          {/* 消耗趋势图 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <TrendingUp className="w-4 h-4 text-purple-600" />
              主要农资消耗趋势
            </h4>
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={consumptionTrend}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="month" />
                <YAxis yAxisId="left" />
                <YAxis yAxisId="right" orientation="right" />
                <RechartsTooltip />
                <Legend />
                <Line
                  yAxisId="left"
                  type="monotone"
                  dataKey="consumption"
                  stroke="#8b5cf6"
                  strokeWidth={2}
                  name="消耗数量"
                  dot={{ fill: '#8b5cf6', r: 4 }}
                />
                <Line
                  yAxisId="left"
                  type="monotone"
                  dataKey="lastYear"
                  stroke="#94a3b8"
                  strokeWidth={2}
                  strokeDasharray="5 5"
                  name="去年同期"
                  dot={{ fill: '#94a3b8', r: 3 }}
                />
                <Line
                  yAxisId="right"
                  type="monotone"
                  dataKey="cost"
                  stroke="#ec4899"
                  strokeWidth={2}
                  name="领用成本(元)"
                  dot={{ fill: '#ec4899', r: 4 }}
                />
              </LineChart>
            </ResponsiveContainer>
          </Card>

          {/* 同比环比分析 */}
          <Card className="p-6">
            <h4 className="mb-4 flex items-center gap-2">
              <BarChart3 className="w-5 h-5 text-blue-600" />
              领用同比环比分析
            </h4>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={comparisonData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="category" />
                <YAxis />
                <RechartsTooltip />
                <Legend />
                <Bar dataKey="本月" fill="#3b82f6" name="本月领用" />
                <Bar dataKey="上月" fill="#10b981" name="上月领用" />
                <Bar dataKey="去年同期" fill="#f59e0b" name="去年同期" />
              </BarChart>
            </ResponsiveContainer>
            <div className="mt-6 grid grid-cols-5 gap-4">
              {comparisonData.map((item) => {
                const momChange = ((item.本月 - item.上月) / item.上月 * 100).toFixed(1);
                const yoyChange = ((item.本月 - item.去年同期) / item.去年同期 * 100).toFixed(1);
                const isMomIncrease = parseFloat(momChange) > 0;
                const isYoyIncrease = parseFloat(yoyChange) > 0;
                return (
                  <div key={item.category} className="p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg hover:shadow-md transition-shadow">
                    <div className="font-medium mb-3 text-center">{item.category}</div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between text-xs">
                        <span className="text-muted-foreground">环比:</span>
                        <div className="flex items-center gap-1">
                          {isMomIncrease ? (
                            <ArrowUp className="w-3 h-3 text-red-600" />
                          ) : (
                            <ArrowDown className="w-3 h-3 text-green-600" />
                          )}
                          <span className={isMomIncrease ? 'text-red-600 font-medium' : 'text-green-600 font-medium'}>
                            {Math.abs(parseFloat(momChange))}%
                          </span>
                        </div>
                      </div>
                      <div className="flex items-center justify-between text-xs">
                        <span className="text-muted-foreground">同比:</span>
                        <div className="flex items-center gap-1">
                          {isYoyIncrease ? (
                            <ArrowUp className="w-3 h-3 text-red-600" />
                          ) : (
                            <ArrowDown className="w-3 h-3 text-green-600" />
                          )}
                          <span className={isYoyIncrease ? 'text-red-600 font-medium' : 'text-green-600 font-medium'}>
                            {Math.abs(parseFloat(yoyChange))}%
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </Card>

          {/* Top消耗排行榜 - 双栏布局 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* 地块消耗排行 */}
            <Card className="p-6">
              <div className="flex items-center justify-between mb-4">
                <h4 className="flex items-center gap-2">
                  <MapPin className="w-5 h-5 text-green-600" />
                  地块消耗Top5
                </h4>
                <div className="flex items-center gap-2">
                  <Select value={fieldConsumptionMonth} onValueChange={setFieldConsumptionMonth}>
                    <SelectTrigger className="w-32 h-7 text-xs">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="2025-10">2025年10月</SelectItem>
                      <SelectItem value="2025-09">2025年9月</SelectItem>
                      <SelectItem value="2025-08">2025年8月</SelectItem>
                      <SelectItem value="2025-07">2025年7月</SelectItem>
                      <SelectItem value="2025-06">2025年6月</SelectItem>
                      <SelectItem value="2025-05">2025年5月</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button 
                    variant="ghost" 
                    size="sm" 
                    className="text-xs h-7"
                    onClick={() => setShowAllFieldsDialog(true)}
                  >
                    查看全部
                  </Button>
                </div>
              </div>
              <div className="space-y-3">
                {topConsumers.filter(c => c.type === '地块').map((consumer, index) => (
                  <div key={consumer.name} className="flex items-center gap-3 p-3 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg hover:shadow-md transition-shadow cursor-pointer">
                    <div className={`flex items-center justify-center w-10 h-10 rounded-full font-bold ${
                      index === 0 ? 'bg-yellow-100 text-yellow-600 text-lg' :
                      index === 1 ? 'bg-gray-200 text-gray-600' :
                      index === 2 ? 'bg-orange-100 text-orange-600' :
                      'bg-green-100 text-green-600'
                    }`}>
                      {index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : index + 1}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <span className="font-medium truncate">{consumer.name}</span>
                        {getTrendIcon(consumer.trend)}
                      </div>
                      <div className="flex items-center gap-3 text-xs text-muted-foreground">
                        <span>消耗: {consumer.totalQuantity}单位</span>
                        <span>物品: {consumer.items}项</span>
                      </div>
                      <div className="mt-1">
                        <div className="flex items-center justify-between text-xs mb-1">
                          <span className="text-muted-foreground">成本占比</span>
                          <span className="font-medium">{consumer.percentage}%</span>
                        </div>
                        <div className="w-full bg-gray-200 rounded-full h-1.5">
                          <div 
                            className="bg-green-500 h-1.5 rounded-full transition-all"
                            style={{ width: `${consumer.percentage}%` }}
                          />
                        </div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-lg font-medium text-green-600">
                        ¥{(consumer.totalCost / 10000).toFixed(2)}万
                      </div>
                      <div className="text-xs text-muted-foreground">总成本</div>
                    </div>
                  </div>
                ))}
              </div>
            </Card>

            {/* 作物消耗排行 */}
            <Card className="p-6">
              <div className="flex items-center justify-between mb-4">
                <h4 className="flex items-center gap-2">
                  <Leaf className="w-5 h-5 text-emerald-600" />
                  作物消耗Top5
                </h4>
                <div className="flex items-center gap-2">
                  <Select value={cropConsumptionMonth} onValueChange={setCropConsumptionMonth}>
                    <SelectTrigger className="w-32 h-7 text-xs">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="2025-10">2025年10月</SelectItem>
                      <SelectItem value="2025-09">2025年9月</SelectItem>
                      <SelectItem value="2025-08">2025年8月</SelectItem>
                      <SelectItem value="2025-07">2025年7月</SelectItem>
                      <SelectItem value="2025-06">2025年6月</SelectItem>
                      <SelectItem value="2025-05">2025年5月</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button 
                    variant="ghost" 
                    size="sm" 
                    className="text-xs h-7"
                    onClick={() => setShowAllCropsDialog(true)}
                  >
                    查看全部
                  </Button>
                </div>
              </div>
              <div className="space-y-3">
                {topConsumers.filter(c => c.type === '作物').map((consumer, index) => (
                  <div key={consumer.name} className="flex items-center gap-3 p-3 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg hover:shadow-md transition-shadow cursor-pointer">
                    <div className={`flex items-center justify-center w-10 h-10 rounded-full font-bold ${
                      index === 0 ? 'bg-yellow-100 text-yellow-600 text-lg' :
                      index === 1 ? 'bg-gray-200 text-gray-600' :
                      index === 2 ? 'bg-orange-100 text-orange-600' :
                      'bg-blue-100 text-blue-600'
                    }`}>
                      {index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : index + 1}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <span className="font-medium truncate">{consumer.name}</span>
                        {getTrendIcon(consumer.trend)}
                      </div>
                      <div className="flex items-center gap-3 text-xs text-muted-foreground">
                        <span>消耗: {consumer.totalQuantity}单位</span>
                        <span>物品: {consumer.items}项</span>
                      </div>
                      <div className="mt-1">
                        <div className="flex items-center justify-between text-xs mb-1">
                          <span className="text-muted-foreground">成本占比</span>
                          <span className="font-medium">{consumer.percentage}%</span>
                        </div>
                        <div className="w-full bg-gray-200 rounded-full h-1.5">
                          <div 
                            className="bg-blue-500 h-1.5 rounded-full transition-all"
                            style={{ width: `${consumer.percentage}%` }}
                          />
                        </div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-lg font-medium text-blue-600">
                        ¥{(consumer.totalCost / 10000).toFixed(2)}万
                      </div>
                      <div className="text-xs text-muted-foreground">总成本</div>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          </div>

          {/* 成本中心分析 */}
          <Card className="p-6">
            <h4 className="mb-6 flex items-center gap-2">
              <DollarSign className="w-5 h-5 text-purple-600" />
              成本中心分析
            </h4>
            
            {/* 关键指标 */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
              <div className="p-4 text-center bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg hover:shadow-md transition-shadow">
                <div className="text-3xl text-blue-600 mb-2">¥42.3万</div>
                <p className="text-sm text-muted-foreground mb-2">本月总成本</p>
                <div className="flex items-center justify-center gap-1">
                  <ArrowDown className="w-4 h-4 text-green-600" />
                  <span className="text-sm text-green-600">较上月↓5.2%</span>
                </div>
              </div>
              <div className="p-4 text-center bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg hover:shadow-md transition-shadow">
                <div className="text-3xl text-purple-600 mb-2">¥338</div>
                <p className="text-sm text-muted-foreground mb-2">平均单位成本</p>
                <div className="flex items-center justify-center gap-1">
                  <ArrowUp className="w-4 h-4 text-red-600" />
                  <span className="text-sm text-red-600">较上月↑2.1%</span>
                </div>
              </div>
              <div className="p-4 text-center bg-gradient-to-br from-green-50 to-green-100 rounded-lg hover:shadow-md transition-shadow">
                <div className="text-3xl text-green-600 mb-2">35.2%</div>
                <p className="text-sm text-muted-foreground mb-2">化肥占比最高</p>
                <div className="flex items-center justify-center gap-1">
                  <Minus className="w-4 h-4 text-gray-600" />
                  <span className="text-sm text-gray-600">保持稳定</span>
                </div>
              </div>
            </div>

            {/* 成本构成分布 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h5 className="text-sm font-medium mb-4">按品类成本构成</h5>
                <div className="space-y-3">
                  {[
                    { name: '化肥', cost: 149200, percentage: 35.2, color: 'bg-green-500' },
                    { name: '种子', cost: 113800, percentage: 26.9, color: 'bg-blue-500' },
                    { name: '农药', cost: 84600, percentage: 20.0, color: 'bg-purple-500' },
                    { name: '地膜', cost: 50700, percentage: 12.0, color: 'bg-orange-500' },
                    { name: '其他', cost: 24700, percentage: 5.9, color: 'bg-gray-500' },
                  ].map((item) => (
                    <div key={item.name}>
                      <div className="flex items-center justify-between mb-1">
                        <div className="flex items-center gap-2">
                          <div className={`w-3 h-3 rounded-full ${item.color}`} />
                          <span className="text-sm font-medium">{item.name}</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <span className="text-sm text-muted-foreground">
                            ¥{(item.cost / 10000).toFixed(2)}万
                          </span>
                          <span className="text-sm font-medium">{item.percentage}%</span>
                        </div>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div 
                          className={`${item.color} h-2 rounded-full transition-all duration-500`}
                          style={{ width: `${item.percentage}%` }}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <h5 className="text-sm font-medium mb-4">按地块成本构成</h5>
                <div className="space-y-3">
                  {[
                    { name: '东区-水稻田', cost: 135800, percentage: 32.1, color: 'bg-cyan-500' },
                    { name: '西区-玉米田', cost: 98500, percentage: 23.3, color: 'bg-indigo-500' },
                    { name: '南区-蔬菜田', cost: 88200, percentage: 20.8, color: 'bg-pink-500' },
                    { name: '北区-小麦田', cost: 67300, percentage: 15.9, color: 'bg-teal-500' },
                    { name: '试验田', cost: 33200, percentage: 7.9, color: 'bg-amber-500' },
                  ].map((item) => (
                    <div key={item.name}>
                      <div className="flex items-center justify-between mb-1">
                        <div className="flex items-center gap-2">
                          <div className={`w-3 h-3 rounded-full ${item.color}`} />
                          <span className="text-sm font-medium">{item.name}</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <span className="text-sm text-muted-foreground">
                            ¥{(item.cost / 10000).toFixed(2)}万
                          </span>
                          <span className="text-sm font-medium">{item.percentage}%</span>
                        </div>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div 
                          className={`${item.color} h-2 rounded-full transition-all duration-500`}
                          style={{ width: `${item.percentage}%` }}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Card>
        </TabsContent>
      </Tabs>

      {/* 呆滞库存预警明细弹窗 - 超180天未动销 */}
      <Dialog open={showIdleStockDetail180Dialog} onOpenChange={setShowIdleStockDetail180Dialog}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-red-600">
              <AlertTriangle className="w-5 h-5" />
              超180天未动销物资明细
            </DialogTitle>
            <DialogDescription>
              以下物资已超过180天未动销，建议清理处置
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-4 mt-4">
            {/* 关键统计信息 */}
            <div className="grid grid-cols-4 gap-4">
              <Card className="p-4 bg-red-50 border-red-200">
                <div className="text-center">
                  <div className="text-3xl text-red-600 mb-1">8项</div>
                  <p className="text-xs text-muted-foreground">呆滞物资数量</p>
                </div>
              </Card>
              <Card className="p-4 bg-orange-50 border-orange-200">
                <div className="text-center">
                  <div className="text-3xl text-orange-600 mb-1">¥7.8万</div>
                  <p className="text-xs text-muted-foreground">占用资金</p>
                </div>
              </Card>
              <Card className="p-4 bg-yellow-50 border-yellow-200">
                <div className="text-center">
                  <div className="text-3xl text-yellow-600 mb-1">245天</div>
                  <p className="text-xs text-muted-foreground">最长库龄</p>
                </div>
              </Card>
              <Card className="p-4 bg-purple-50 border-purple-200">
                <div className="text-center">
                  <div className="text-3xl text-purple-600 mb-1">27.3%</div>
                  <p className="text-xs text-muted-foreground">占总库存比</p>
                </div>
              </Card>
            </div>

            {/* 物资列表 */}
            <Card className="p-4">
              <h4 className="mb-3">呆滞物资清单</h4>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left py-2 px-3 text-sm font-medium">序号</th>
                      <th className="text-left py-2 px-3 text-sm font-medium">物资名称</th>
                      <th className="text-center py-2 px-3 text-sm font-medium">库龄(天)</th>
                      <th className="text-center py-2 px-3 text-sm font-medium">库存数量</th>
                      <th className="text-center py-2 px-3 text-sm font-medium">单位</th>
                      <th className="text-right py-2 px-3 text-sm font-medium">库存价值</th>
                      <th className="text-center py-2 px-3 text-sm font-medium">风险等级</th>
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      { id: 1, name: '过期种子-玉米A型', days: 245, quantity: 150, unit: 'kg', value: 22500, risk: '极高', suggestion: '报废处理' },
                      { id: 2, name: '老旧农药-除草剂B', days: 228, quantity: 85, unit: 'L', value: 12750, risk: '极高', suggestion: '安全销毁' },
                      { id: 3, name: '淘汰地膜-薄型', days: 215, quantity: 200, unit: 'kg', value: 14000, risk: '高', suggestion: '折价处理' },
                      { id: 4, name: '滞销有机肥-特殊配方', days: 198, quantity: 300, unit: 'kg', value: 18000, risk: '高', suggestion: '促销清理' },
                      { id: 5, name: '库存积压复合肥', days: 186, quantity: 120, unit: 'kg', value: 9600, risk: '中', suggestion: '内部消化' },
                      { id: 6, name: '老款喷灌配件', days: 192, quantity: 45, unit: '套', value: 6750, risk: '中', suggestion: '捆绑销售' },
                      { id: 7, name: '过时农具零件', days: 203, quantity: 68, unit: '件', value: 5100, risk: '中', suggestion: '折价清仓' },
                      { id: 8, name: '淘汰灌溉管件', days: 188, quantity: 95, unit: '件', value: 7125, risk: '中', suggestion: '捐赠处理' },
                    ].map((item) => (
                      <tr key={item.id} className="border-b hover:bg-gray-50">
                        <td className="py-3 px-3 text-sm">{item.id}</td>
                        <td className="py-3 px-3 text-sm font-medium">{item.name}</td>
                        <td className="py-3 px-3 text-sm text-center">
                          <Badge variant="destructive" className="text-xs">
                            {item.days}天
                          </Badge>
                        </td>
                        <td className="py-3 px-3 text-sm text-center">{item.quantity}</td>
                        <td className="py-3 px-3 text-sm text-center">{item.unit}</td>
                        <td className="py-3 px-3 text-sm text-right">¥{item.value.toLocaleString()}</td>
                        <td className="py-3 px-3 text-center">
                          <Badge 
                            variant={item.risk === '极高' ? 'destructive' : 'outline'}
                            className={
                              item.risk === '高' ? 'bg-orange-100 text-orange-700 border-orange-300' :
                              item.risk === '中' ? 'bg-yellow-100 text-yellow-700 border-yellow-300' : ''
                            }
                          >
                            {item.risk}
                          </Badge>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>

            {/* 处理建议 */}
            <Card className="p-4 bg-red-50 border-red-200">
              <h4 className="mb-3 text-red-900">紧急处理建议</h4>
              <div className="space-y-2 text-sm">
                <p className="flex items-start gap-2">
                  <span className="text-red-600 flex-shrink-0">•</span>
                  <span><strong>报废处理：</strong>过期种子和老旧农药必须尽快进行报废和安全销毁，避免误用造成损失</span>
                </p>
                <p className="flex items-start gap-2">
                  <span className="text-red-600 flex-shrink-0">•</span>
                  <span><strong>折价清理：</strong>地膜、有机肥等可通过7折促销快速清理，预计可回收资金约¥4.2万</span>
                </p>
                <p className="flex items-start gap-2">
                  <span className="text-red-600 flex-shrink-0">•</span>
                  <span><strong>捐赠处理：</strong>老款配件和管件可联系周边小型农场或合作社进行捐赠，减少仓储成本</span>
                </p>
              </div>
            </Card>

            {/* 操作按钮 */}
            <div className="flex justify-end gap-2 pt-4 border-t">
              <Button variant="outline" onClick={() => setShowIdleStockDetail180Dialog(false)}>
                关闭
              </Button>
              <Button className="bg-red-600 hover:bg-red-700">
                批量处理
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* 呆滞库存预警明细弹窗 - 91-180天缓慢周转 */}
      <Dialog open={showIdleStockDetail90Dialog} onOpenChange={setShowIdleStockDetail90Dialog}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-yellow-600">
              <Clock className="w-5 h-5" />
              91-180天缓慢周转物资明细
            </DialogTitle>
            <DialogDescription>
              以下物资周转缓慢，建议促销消化
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-4 mt-4">
            {/* 关键统计信息 */}
            <div className="grid grid-cols-4 gap-4">
              <Card className="p-4 bg-yellow-50 border-yellow-200">
                <div className="text-center">
                  <div className="text-3xl text-yellow-600 mb-1">12项</div>
                  <p className="text-xs text-muted-foreground">缓周转物资</p>
                </div>
              </Card>
              <Card className="p-4 bg-orange-50 border-orange-200">
                <div className="text-center">
                  <div className="text-3xl text-orange-600 mb-1">¥15.6万</div>
                  <p className="text-xs text-muted-foreground">占用资金</p>
                </div>
              </Card>
              <Card className="p-4 bg-blue-50 border-blue-200">
                <div className="text-center">
                  <div className="text-3xl text-blue-600 mb-1">135天</div>
                  <p className="text-xs text-muted-foreground">平均库龄</p>
                </div>
              </Card>
              <Card className="p-4 bg-purple-50 border-purple-200">
                <div className="text-center">
                  <div className="text-3xl text-purple-600 mb-1">8-9折</div>
                  <p className="text-xs text-muted-foreground">建议促销力度</p>
                </div>
              </Card>
            </div>

            {/* 物资列表 */}
            <Card className="p-4">
              <h4 className="mb-3">缓周转物资清单</h4>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left py-2 px-3 text-sm font-medium">序号</th>
                      <th className="text-left py-2 px-3 text-sm font-medium">物资名称</th>
                      <th className="text-center py-2 px-3 text-sm font-medium">库龄(天)</th>
                      <th className="text-center py-2 px-3 text-sm font-medium">库存数量</th>
                      <th className="text-center py-2 px-3 text-sm font-medium">单位</th>
                      <th className="text-right py-2 px-3 text-sm font-medium">库存价值</th>
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      { id: 1, name: '复合肥-非主流配方', days: 165, quantity: 450, unit: 'kg', value: 27000, discount: '9折', recovery: 24300 },
                      { id: 2, name: '农药-低效型', days: 152, quantity: 180, unit: 'L', value: 21600, discount: '8.5折', recovery: 18360 },
                      { id: 3, name: '地膜-厚型', days: 148, quantity: 380, unit: 'kg', value: 26600, discount: '9折', recovery: 23940 },
                      { id: 4, name: '种子-小众品种', days: 138, quantity: 220, unit: 'kg', value: 19800, discount: '8折', recovery: 15840 },
                      { id: 5, name: '有机肥-散装', days: 132, quantity: 520, unit: 'kg', value: 31200, discount: '9折', recovery: 28080 },
                      { id: 6, name: '灌溉管-老款', days: 128, quantity: 150, unit: '米', value: 13500, discount: '8.5折', recovery: 11475 },
                      { id: 7, name: '喷雾器配件', days: 124, quantity: 85, unit: '套', value: 10200, discount: '8折', recovery: 8160 },
                      { id: 8, name: '农具-传统款', days: 118, quantity: 45, unit: '件', value: 9000, discount: '8折', recovery: 7200 },
                      { id: 9, name: '温室薄膜', days: 112, quantity: 280, unit: 'kg', value: 16800, discount: '9折', recovery: 15120 },
                      { id: 10, name: '肥料添加剂', days: 106, quantity: 120, unit: 'kg', value: 9600, discount: '8.5折', recovery: 8160 },
                      { id: 11, name: '杀菌剂-普通型', days: 98, quantity: 95, unit: 'L', value: 11400, discount: '9折', recovery: 10260 },
                      { id: 12, name: '育苗基质', days: 92, quantity: 350, unit: 'kg', value: 14000, discount: '9折', recovery: 12600 },
                    ].map((item) => (
                      <tr key={item.id} className="border-b hover:bg-gray-50">
                        <td className="py-3 px-3 text-sm">{item.id}</td>
                        <td className="py-3 px-3 text-sm font-medium">{item.name}</td>
                        <td className="py-3 px-3 text-sm text-center">
                          <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-300 text-xs">
                            {item.days}天
                          </Badge>
                        </td>
                        <td className="py-3 px-3 text-sm text-center">{item.quantity}</td>
                        <td className="py-3 px-3 text-sm text-center">{item.unit}</td>
                        <td className="py-3 px-3 text-sm text-right">¥{item.value.toLocaleString()}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>

            {/* 促销建议 */}
            <Card className="p-4 bg-yellow-50 border-yellow-200">
              <h4 className="mb-3 text-yellow-900">促销策略建议</h4>
              <div className="space-y-2 text-sm">
                <p className="flex items-start gap-2">
                  <span className="text-yellow-600 flex-shrink-0">•</span>
                  <span><strong>阶梯折扣：</strong>设置8-9折促销，根据库龄和库存量灵活调整，预计可回收¥15.6万中的¥13.2万</span>
                </p>
                <p className="flex items-start gap-2">
                  <span className="text-yellow-600 flex-shrink-0">•</span>
                  <span><strong>限时促销：</strong>设置30天促销期限，营造紧迫感，提升促销效果</span>
                </p>
                <p className="flex items-start gap-2">
                  <span className="text-yellow-600 flex-shrink-0">•</span>
                  <span><strong>捆绑销售：</strong>将缓周转物资与畅销品捆绑，加速库存周转</span>
                </p>
                <p className="flex items-start gap-2">
                  <span className="text-yellow-600 flex-shrink-0">•</span>
                  <span><strong>预期效益：</strong>通过促销清理，预计可节约仓储成本¥0.5万/月，资金回收率85%</span>
                </p>
              </div>
            </Card>

            {/* 操作按钮 */}
            <div className="flex justify-end gap-2 pt-4 border-t">
              <Button variant="outline" onClick={() => setShowIdleStockDetail90Dialog(false)}>
                关闭
              </Button>
              <Button className="bg-yellow-600 hover:bg-yellow-700">
                启动促销
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* 呆滞库存预警明细弹窗 - 健康周转 */}
      <Dialog open={showIdleStockDetailHealthyDialog} onOpenChange={setShowIdleStockDetailHealthyDialog}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-start gap-2 text-green-600">
              <Award className="w-5 h-5" />
              健康周转物资明细
            </DialogTitle>
            <DialogDescription>
              以下物资周转良好，保持当前库存策略
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-4 mt-4">
            {/* 关键统计信息 */}
            <div className="grid grid-cols-4 gap-4">
              <Card className="p-4 bg-green-50 border-green-200">
                <div className="text-center">
                  <div className="text-3xl text-green-600 mb-1">73项</div>
                  <p className="text-xs text-muted-foreground">健康周转物资</p>
                </div>
              </Card>
              <Card className="p-4 bg-blue-50 border-blue-200">
                <div className="text-center">
                  <div className="text-3xl text-blue-600 mb-1">¥189.5万</div>
                  <p className="text-xs text-muted-foreground">库存总值</p>
                </div>
              </Card>
              <Card className="p-4 bg-purple-50 border-purple-200">
                <div className="text-center">
                  <div className="text-3xl text-purple-600 mb-1">45天</div>
                  <p className="text-xs text-muted-foreground">平均库龄</p>
                </div>
              </Card>
              <Card className="p-4 bg-orange-50 border-orange-200">
                <div className="text-center">
                  <div className="text-3xl text-orange-600 mb-1">5.8次</div>
                  <p className="text-xs text-muted-foreground">月均周转率</p>
                </div>
              </Card>
            </div>

            {/* 物资列表（显示前15项） */}
            <Card className="p-4">
              <h4 className="mb-3">健康周转物资清单（Top 15）</h4>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left py-2 px-3 text-sm font-medium">序号</th>
                      <th className="text-left py-2 px-3 text-sm font-medium">物资名称</th>
                      <th className="text-center py-2 px-3 text-sm font-medium">库龄(天)</th>
                      <th className="text-center py-2 px-3 text-sm font-medium">库存数量</th>
                      <th className="text-center py-2 px-3 text-sm font-medium">单位</th>
                      <th className="text-right py-2 px-3 text-sm font-medium">库存价值</th>
                      <th className="text-center py-2 px-3 text-sm font-medium">周转率</th>
                      <th className="text-center py-2 px-3 text-sm font-medium">状态</th>
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      { id: 1, name: '复合肥(N-P-K 15-15-15)', days: 18, quantity: 850, unit: 'kg', value: 51000, turnover: 8.5, status: '优秀' },
                      { id: 2, name: '有机肥(腐熟鸡粪)', days: 24, quantity: 620, unit: 'kg', value: 37200, turnover: 7.2, status: '优秀' },
                      { id: 3, name: '尿素(N 46%)', days: 28, quantity: 580, unit: 'kg', value: 34800, turnover: 6.8, status: '良好' },
                      { id: 4, name: '杀虫剂(吡虫啉)', days: 32, quantity: 300, unit: 'L', value: 36000, turnover: 5.5, status: '良好' },
                      { id: 5, name: '地膜(0.01mm)', days: 38, quantity: 450, unit: 'kg', value: 31500, turnover: 4.7, status: '良好' },
                      { id: 6, name: '玉米种子-优质', days: 22, quantity: 280, unit: 'kg', value: 25200, turnover: 7.8, status: '优秀' },
                      { id: 7, name: '除草剂-高效型', days: 35, quantity: 220, unit: 'L', value: 26400, turnover: 5.2, status: '良好' },
                      { id: 8, name: '滴灌管-优质', days: 42, quantity: 1200, unit: '米', value: 108000, turnover: 4.3, status: '良好' },
                      { id: 9, name: '农膜-标准型', days: 48, quantity: 680, unit: 'kg', value: 47600, turnover: 3.8, status: '正常' },
                      { id: 10, name: '喷雾器-电动', days: 52, quantity: 45, unit: '台', value: 22500, turnover: 3.5, status: '正常' },
                      { id: 11, name: '水稻种子', days: 30, quantity: 380, unit: 'kg', value: 34200, turnover: 6.2, status: '良好' },
                      { id: 12, name: '钾肥(K2O 60%)', days: 26, quantity: 420, unit: 'kg', value: 29400, turnover: 6.8, status: '良好' },
                      { id: 13, name: '杀菌剂-广谱型', days: 44, quantity: 180, unit: 'L', value: 21600, turnover: 4.1, status: '正常' },
                      { id: 14, name: '温室覆膜', days: 36, quantity: 520, unit: 'kg', value: 36400, turnover: 5.1, status: '良好' },
                      { id: 15, name: '育苗盘-标准', days: 40, quantity: 850, unit: '个', value: 17000, turnover: 4.5, status: '正常' },
                    ].map((item) => (
                      <tr key={item.id} className="border-b hover:bg-gray-50">
                        <td className="py-3 px-3 text-sm">{item.id}</td>
                        <td className="py-3 px-3 text-sm font-medium">{item.name}</td>
                        <td className="py-3 px-3 text-sm text-center">
                          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-300 text-xs">
                            {item.days}天
                          </Badge>
                        </td>
                        <td className="py-3 px-3 text-sm text-center">{item.quantity}</td>
                        <td className="py-3 px-3 text-sm text-center">{item.unit}</td>
                        <td className="py-3 px-3 text-sm text-right">¥{item.value.toLocaleString()}</td>
                        <td className="py-3 px-3 text-sm text-center">
                          <Badge className={
                            item.turnover >= 6 ? 'bg-green-100 text-green-700' :
                            item.turnover >= 4 ? 'bg-blue-100 text-blue-700' :
                            'bg-gray-100 text-gray-700'
                          }>
                            {item.turnover}次/月
                          </Badge>
                        </td>
                        <td className="py-3 px-3 text-center">
                          <Badge className={
                            item.status === '优秀' ? 'bg-green-100 text-green-700 border-green-300' :
                            item.status === '良好' ? 'bg-blue-100 text-blue-700 border-blue-300' :
                            'bg-gray-100 text-gray-700 border-gray-300'
                          }>
                            {item.status}
                          </Badge>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <p className="text-xs text-muted-foreground mt-2 text-center">
                共73项健康周转物资，仅展示前15项
              </p>
            </Card>

            {/* 保持建议 */}
            <Card className="p-4 bg-green-50 border-green-200">
              <h4 className="mb-3 text-green-900">保持策略建议</h4>
              <div className="space-y-2 text-sm">
                <p className="flex items-start gap-2">
                  <span className="text-green-600 flex-shrink-0">•</span>
                  <span><strong>维持库存：</strong>这些物资周转健康，保持当前库存水平和补货策略即可</span>
                </p>
                <p className="flex items-start gap-2">
                  <span className="text-green-600 flex-shrink-0">•</span>
                  <span><strong>优化采购：</strong>对周转率≥6次/月的优秀物资，可适当增加备货量，避免断货</span>
                </p>
                <p className="flex items-start gap-2">
                  <span className="text-green-600 flex-shrink-0">•</span>
                  <span><strong>监控波动：</strong>持续监控周转率变化，及时发现异常并调整库存策略</span>
                </p>
                <p className="flex items-start gap-2">
                  <span className="text-green-600 flex-shrink-0">•</span>
                  <span><strong>资金效率：</strong>健康周转物资占总库存66.3%，资金利用效率良好</span>
                </p>
              </div>
            </Card>

            {/* 操作按钮 */}
            <div className="flex justify-end gap-2 pt-4 border-t">
              <Button variant="outline" onClick={() => setShowIdleStockDetailHealthyDialog(false)}>
                关闭
              </Button>
              <Button className="bg-green-600 hover:bg-green-700">
                导出报表
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* 地块消耗全部列表弹窗 */}
      <Dialog open={showAllFieldsDialog} onOpenChange={setShowAllFieldsDialog}>
        <DialogContent className="max-w-5xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-green-600">
              <MapPin className="w-5 h-5" />
              地块消耗完整排行 - {fieldConsumptionMonth}
            </DialogTitle>
            <DialogDescription>
              展示所有地块的农资消耗情况和成本分析
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4 mt-4">
            {/* 统计概览 */}
            <div className="grid grid-cols-4 gap-4">
              <Card className="p-4 bg-green-50 border-green-200">
                <div className="text-center">
                  <div className="text-2xl text-green-600 mb-1">15个</div>
                  <p className="text-xs text-muted-foreground">地块总数</p>
                </div>
              </Card>
              <Card className="p-4 bg-blue-50 border-blue-200">
                <div className="text-center">
                  <div className="text-2xl text-blue-600 mb-1">¥42.3万</div>
                  <p className="text-xs text-muted-foreground">总消耗成本</p>
                </div>
              </Card>
              <Card className="p-4 bg-purple-50 border-purple-200">
                <div className="text-center">
                  <div className="text-2xl text-purple-600 mb-1">4,230单位</div>
                  <p className="text-xs text-muted-foreground">总消耗数量</p>
                </div>
              </Card>
              <Card className="p-4 bg-orange-50 border-orange-200">
                <div className="text-center">
                  <div className="text-2xl text-orange-600 mb-1">¥2,820</div>
                  <p className="text-xs text-muted-foreground">平均成本/地块</p>
                </div>
              </Card>
            </div>

            {/* 完整列表 */}
            <Card className="p-4">
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-gray-50 border-b-2">
                    <tr>
                      <th className="text-left py-3 px-3 text-sm font-medium">排名</th>
                      <th className="text-left py-3 px-3 text-sm font-medium">地块名称</th>
                      <th className="text-center py-3 px-3 text-sm font-medium">消耗数量</th>
                      <th className="text-center py-3 px-3 text-sm font-medium">物品种类</th>
                      <th className="text-right py-3 px-3 text-sm font-medium">总成本</th>
                      <th className="text-center py-3 px-3 text-sm font-medium">成本占比</th>
                      <th className="text-center py-3 px-3 text-sm font-medium">趋势</th>
                    </tr>
                  </thead>
                  <tbody>
                    {topConsumers.filter(c => c.type === '地块').concat([
                      { name: '中区-葡萄园', type: '地块' as const, totalCost: 78500, totalQuantity: 785, items: 16, trend: 'up' as const, percentage: 18.6 },
                      { name: '东南-果园', type: '地块' as const, totalCost: 62300, totalQuantity: 623, items: 14, trend: 'stable' as const, percentage: 14.8 },
                      { name: '西北-大棚', type: '地块' as const, totalCost: 55800, totalQuantity: 558, items: 13, trend: 'down' as const, percentage: 13.2 },
                      { name: '北区-经济作物', type: '地块' as const, totalCost: 48200, totalQuantity: 482, items: 11, trend: 'up' as const, percentage: 11.4 },
                      { name: '南区-中药材田', type: '地块' as const, totalCost: 39600, totalQuantity: 396, items: 10, trend: 'stable' as const, percentage: 9.4 },
                      { name: '东北-杂粮田', type: '地块' as const, totalCost: 32800, totalQuantity: 328, items: 9, trend: 'down' as const, percentage: 7.8 },
                      { name: '西南-花卉区', type: '地块' as const, totalCost: 28500, totalQuantity: 285, items: 8, trend: 'up' as const, percentage: 6.7 },
                      { name: '中东-茶园', type: '地块' as const, totalCost: 21200, totalQuantity: 212, items: 7, trend: 'stable' as const, percentage: 5.0 },
                      { name: '北部-苗圃', type: '地块' as const, totalCost: 18600, totalQuantity: 186, items: 6, trend: 'up' as const, percentage: 4.4 },
                      { name: '南部-林地', type: '地块' as const, totalCost: 12400, totalQuantity: 124, items: 5, trend: 'down' as const, percentage: 2.9 },
                    ]).map((field, index) => (
                      <tr key={field.name} className="border-b hover:bg-gray-50">
                        <td className="py-3 px-3">
                          <div className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium ${
                            index === 0 ? 'bg-yellow-100 text-yellow-600' :
                            index === 1 ? 'bg-gray-200 text-gray-600' :
                            index === 2 ? 'bg-orange-100 text-orange-600' :
                            'bg-green-100 text-green-600'
                          }`}>
                            {index < 3 ? ['🥇', '🥈', '🥉'][index] : index + 1}
                          </div>
                        </td>
                        <td className="py-3 px-3 font-medium">{field.name}</td>
                        <td className="py-3 px-3 text-center">{field.totalQuantity}单位</td>
                        <td className="py-3 px-3 text-center">{field.items}项</td>
                        <td className="py-3 px-3 text-right text-green-600 font-medium">
                          ¥{(field.totalCost / 10000).toFixed(2)}万
                        </td>
                        <td className="py-3 px-3 text-center">
                          <Badge variant="outline" className="text-xs">
                            {field.percentage}%
                          </Badge>
                        </td>
                        <td className="py-3 px-3 text-center">
                          {getTrendIcon(field.trend)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>

            {/* 操作按钮 */}
            <div className="flex justify-end gap-2 pt-4 border-t">
              <Button variant="outline" onClick={() => setShowAllFieldsDialog(false)}>
                关闭
              </Button>
              <Button className="bg-green-600 hover:bg-green-700">
                <Download className="w-4 h-4 mr-2" />
                导出报表
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* 作物消耗全部列表弹窗 */}
      <Dialog open={showAllCropsDialog} onOpenChange={setShowAllCropsDialog}>
        <DialogContent className="max-w-5xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-emerald-600">
              <Leaf className="w-5 h-5" />
              作物消耗完整排行 - {cropConsumptionMonth}
            </DialogTitle>
            <DialogDescription>
              展示所有作物的农资消耗情况和成本分析
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4 mt-4">
            {/* 统计概览 */}
            <div className="grid grid-cols-4 gap-4">
              <Card className="p-4 bg-emerald-50 border-emerald-200">
                <div className="text-center">
                  <div className="text-2xl text-emerald-600 mb-1">12种</div>
                  <p className="text-xs text-muted-foreground">作物种类</p>
                </div>
              </Card>
              <Card className="p-4 bg-blue-50 border-blue-200">
                <div className="text-center">
                  <div className="text-2xl text-blue-600 mb-1">¥42.3万</div>
                  <p className="text-xs text-muted-foreground">总消耗成本</p>
                </div>
              </Card>
              <Card className="p-4 bg-purple-50 border-purple-200">
                <div className="text-center">
                  <div className="text-2xl text-purple-600 mb-1">4,230单位</div>
                  <p className="text-xs text-muted-foreground">总消耗数量</p>
                </div>
              </Card>
              <Card className="p-4 bg-orange-50 border-orange-200">
                <div className="text-center">
                  <div className="text-2xl text-orange-600 mb-1">¥3,525</div>
                  <p className="text-xs text-muted-foreground">平均成本/作物</p>
                </div>
              </Card>
            </div>

            {/* 完整列表 */}
            <Card className="p-4">
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-gray-50 border-b-2">
                    <tr>
                      <th className="text-left py-3 px-3 text-sm font-medium">排名</th>
                      <th className="text-left py-3 px-3 text-sm font-medium">作物名称</th>
                      <th className="text-center py-3 px-3 text-sm font-medium">消耗数量</th>
                      <th className="text-center py-3 px-3 text-sm font-medium">物品种类</th>
                      <th className="text-right py-3 px-3 text-sm font-medium">总成本</th>
                      <th className="text-center py-3 px-3 text-sm font-medium">成本占比</th>
                      <th className="text-center py-3 px-3 text-sm font-medium">趋势</th>
                    </tr>
                  </thead>
                  <tbody>
                    {topConsumers.filter(c => c.type === '作物').concat([
                      { name: '小麦种植', type: '作物' as const, totalCost: 58600, totalQuantity: 586, items: 14, trend: 'stable' as const, percentage: 13.9 },
                      { name: '花生种植', type: '作物' as const, totalCost: 46300, totalQuantity: 463, items: 12, trend: 'up' as const, percentage: 11.0 },
                      { name: '大豆种植', type: '作物' as const, totalCost: 38900, totalQuantity: 389, items: 11, trend: 'down' as const, percentage: 9.2 },
                      { name: '棉花种植', type: '作物' as const, totalCost: 32500, totalQuantity: 325, items: 10, trend: 'stable' as const, percentage: 7.7 },
                      { name: '甘蔗种植', type: '作物' as const, totalCost: 27800, totalQuantity: 278, items: 9, trend: 'up' as const, percentage: 6.6 },
                      { name: '油菜种植', type: '作物' as const, totalCost: 21400, totalQuantity: 214, items: 8, trend: 'stable' as const, percentage: 5.1 },
                      { name: '烟草种植', type: '作物' as const, totalCost: 16200, totalQuantity: 162, items: 7, trend: 'down' as const, percentage: 3.8 },
                    ]).map((crop, index) => (
                      <tr key={crop.name} className="border-b hover:bg-gray-50">
                        <td className="py-3 px-3">
                          <div className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium ${
                            index === 0 ? 'bg-yellow-100 text-yellow-600' :
                            index === 1 ? 'bg-gray-200 text-gray-600' :
                            index === 2 ? 'bg-orange-100 text-orange-600' :
                            'bg-blue-100 text-blue-600'
                          }`}>
                            {index < 3 ? ['🥇', '🥈', '🥉'][index] : index + 1}
                          </div>
                        </td>
                        <td className="py-3 px-3 font-medium">{crop.name}</td>
                        <td className="py-3 px-3 text-center">{crop.totalQuantity}单位</td>
                        <td className="py-3 px-3 text-center">{crop.items}项</td>
                        <td className="py-3 px-3 text-right text-emerald-600 font-medium">
                          ¥{(crop.totalCost / 10000).toFixed(2)}万
                        </td>
                        <td className="py-3 px-3 text-center">
                          <Badge variant="outline" className="text-xs">
                            {crop.percentage}%
                          </Badge>
                        </td>
                        <td className="py-3 px-3 text-center">
                          {getTrendIcon(crop.trend)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>

            {/* 操作按钮 */}
            <div className="flex justify-end gap-2 pt-4 border-t">
              <Button variant="outline" onClick={() => setShowAllCropsDialog(false)}>
                关闭
              </Button>
              <Button className="bg-emerald-600 hover:bg-emerald-700">
                <Download className="w-4 h-4 mr-2" />
                导出报表
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}