'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { BarChart3, Download, BarChart, PieChart } from 'lucide-react';
import { StatisticsResult } from './landStatisticsReducer';
import {
  BarChart as RechartsBarChart,
  Bar,
  PieChart as RechartsPieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';

const COLORS = ['#22c55e', '#3b82f6', '#f59e0b', '#a855f7', '#ef4444', '#14b8a6', '#f97316', '#8b5cf6'];

interface StatisticsResultsProps {
  statistics: StatisticsResult;
  chartType: 'bar' | 'pie';
  onChartTypeChange: (type: 'bar' | 'pie') => void;
  onExportData: () => void;
}

export function StatisticsResults({
  statistics,
  chartType,
  onChartTypeChange,
  onExportData
}: StatisticsResultsProps) {
  return (
    <>
      {/* 基础统计 */}
      <Card className="p-6 bg-card">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <BarChart3 className="w-5 h-5 text-green-600" />
            <h3>统计结果</h3>
          </div>
          <Button variant="outline" onClick={onExportData}>
            <Download className="w-4 h-4 mr-2" />
            导出数据
          </Button>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
          <Card className="p-4 bg-green-50 dark:bg-green-950">
            <div className="text-sm text-muted-foreground mb-1">地块总数</div>
            <div className="text-2xl text-green-600 dark:text-green-400">{statistics.totalCount}</div>
          </Card>
          <Card className="p-4 bg-blue-50 dark:bg-blue-950">
            <div className="text-sm text-muted-foreground mb-1">总面积</div>
            <div className="text-2xl text-blue-600 dark:text-blue-400">{statistics.totalArea.toFixed(2)} 亩</div>
          </Card>
          <Card className="p-4 bg-purple-50 dark:bg-purple-950">
            <div className="text-sm text-muted-foreground mb-1">平均面积</div>
            <div className="text-2xl text-purple-600 dark:text-purple-400">{statistics.avgArea.toFixed(2)} 亩</div>
          </Card>
          <Card className="p-4 bg-orange-50 dark:bg-orange-950">
            <div className="text-sm text-muted-foreground mb-1">最大面积</div>
            <div className="text-2xl text-orange-600 dark:text-orange-400">{statistics.maxArea.toFixed(2)} 亩</div>
          </Card>
          <Card className="p-4 bg-pink-50 dark:bg-pink-950">
            <div className="text-sm text-muted-foreground mb-1">最小面积</div>
            <div className="text-2xl text-pink-600 dark:text-pink-400">{statistics.minArea.toFixed(2)} 亩</div>
          </Card>
        </div>
      </Card>

      {/* 图表选择 */}
      <div className="flex items-center gap-2">
        <Button
          variant={chartType === 'bar' ? 'default' : 'outline'}
          onClick={() => onChartTypeChange('bar')}
          className={chartType === 'bar' ? 'bg-green-600 hover:bg-green-700' : ''}
        >
          <BarChart className="w-4 h-4 mr-2" />
          柱状图
        </Button>
        <Button
          variant={chartType === 'pie' ? 'default' : 'outline'}
          onClick={() => onChartTypeChange('pie')}
          className={chartType === 'pie' ? 'bg-green-600 hover:bg-green-700' : ''}
        >
          <PieChart className="w-4 h-4 mr-2" />
          饼图
        </Button>
      </div>

      {/* 土壤类型分布 */}
      <Card className="p-6 bg-card">
        <h3 className="mb-4">土壤类型分布</h3>
        {chartType === 'bar' ? (
          <ResponsiveContainer width="100%" height={300}>
            <RechartsBarChart data={statistics.soilTypeDistribution}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="count" name="地块数量" fill="#22c55e" />
              <Bar dataKey="area" name="总面积（亩）" fill="#3b82f6" />
            </RechartsBarChart>
          </ResponsiveContainer>
        ) : (
          <div className="grid grid-cols-2 gap-4">
            <div>
              <p className="text-sm text-muted-foreground mb-2 text-center">按地块数量</p>
              <ResponsiveContainer width="100%" height={250}>
                <RechartsPieChart>
                  <Pie
                    data={statistics.soilTypeDistribution}
                    dataKey="count"
                    nameKey="name"
                    cx="50%"
                    cy="50%"
                    outerRadius={80}
                    label
                  >
                    {statistics.soilTypeDistribution.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip />
                  <Legend />
                </RechartsPieChart>
              </ResponsiveContainer>
            </div>
            <div>
              <p className="text-sm text-muted-foreground mb-2 text-center">按面积</p>
              <ResponsiveContainer width="100%" height={250}>
                <RechartsPieChart>
                  <Pie
                    data={statistics.soilTypeDistribution}
                    dataKey="area"
                    nameKey="name"
                    cx="50%"
                    cy="50%"
                    outerRadius={80}
                    label
                  >
                    {statistics.soilTypeDistribution.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip />
                  <Legend />
                </RechartsPieChart>
              </ResponsiveContainer>
            </div>
          </div>
        )}
      </Card>

      {/* 种植模式分布 */}
      <Card className="p-6 bg-card">
        <h3 className="mb-4">种植模式分布</h3>
        {chartType === 'bar' ? (
          <ResponsiveContainer width="100%" height={300}>
            <RechartsBarChart data={statistics.plantingModeDistribution}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="count" name="地块数量" fill="#a855f7" />
              <Bar dataKey="area" name="总面积（亩）" fill="#f59e0b" />
            </RechartsBarChart>
          </ResponsiveContainer>
        ) : (
          <div className="grid grid-cols-2 gap-4">
            <div>
              <p className="text-sm text-muted-foreground mb-2 text-center">按地块数量</p>
              <ResponsiveContainer width="100%" height={250}>
                <RechartsPieChart>
                  <Pie
                    data={statistics.plantingModeDistribution}
                    dataKey="count"
                    nameKey="name"
                    cx="50%"
                    cy="50%"
                    outerRadius={80}
                    label
                  >
                    {statistics.plantingModeDistribution.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip />
                  <Legend />
                </RechartsPieChart>
              </ResponsiveContainer>
            </div>
            <div>
              <p className="text-sm text-muted-foreground mb-2 text-center">按面积</p>
              <ResponsiveContainer width="100%" height={250}>
                <RechartsPieChart>
                  <Pie
                    data={statistics.plantingModeDistribution}
                    dataKey="area"
                    nameKey="name"
                    cx="50%"
                    cy="50%"
                    outerRadius={80}
                    label
                  >
                    {statistics.plantingModeDistribution.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip />
                  <Legend />
                </RechartsPieChart>
              </ResponsiveContainer>
            </div>
          </div>
        )}
      </Card>

      {/* 标签分布 */}
      {statistics.tagDistribution.length > 0 && (
        <Card className="p-6 bg-card">
          <h3 className="mb-4">标签分布</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {statistics.tagDistribution.map((tag) => (
              <Card key={tag.name} className="p-4 bg-background">
                <Badge
                  style={{ backgroundColor: tag.color, color: 'white' }}
                  className="w-full justify-center mb-2"
                >
                  {tag.name}
                </Badge>
                <div className="text-center">
                  <div className="text-2xl text-green-600 dark:text-green-400">{tag.count}</div>
                  <div className="text-xs text-muted-foreground">个地块</div>
                </div>
              </Card>
            ))}
          </div>
        </Card>
      )}
    </>
  );
}