'use client';

import { Card } from '@/components/ui/card';
import { MapPin, Layers, BarChart3, Droplets } from 'lucide-react';
import { SoilDataStatistics } from './soilDataReducer';

interface StatisticsCardsProps {
  statistics: SoilDataStatistics | null;
}

export default function StatisticsCards({ statistics }: StatisticsCardsProps) {
  if (!statistics) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {[1, 2, 3, 4].map((i) => (
          <Card key={i} className="p-4 animate-pulse">
            <div className="flex items-center justify-between">
              <div className="space-y-2">
                <div className="h-4 bg-muted rounded w-20"></div>
                <div className="h-6 bg-muted rounded w-12"></div>
              </div>
              <div className="w-10 h-10 bg-muted rounded"></div>
            </div>
          </Card>
        ))}
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <Card className="p-4 bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-muted-foreground">采样点总数</p>
            <p className="mt-2 text-2xl text-green-600 dark:text-green-400 font-semibold">
              {statistics.totalPoints}
            </p>
          </div>
          <MapPin className="w-10 h-10 text-green-600 dark:text-green-400 opacity-50" />
        </div>
      </Card>

      <Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-muted-foreground">覆盖地块</p>
            <p className="mt-2 text-2xl text-blue-600 dark:text-blue-400 font-semibold">
              {statistics.totalFields} 个
            </p>
          </div>
          <Layers className="w-10 h-10 text-blue-600 dark:text-blue-400 opacity-50" />
        </div>
      </Card>

      <Card className="p-4 bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-muted-foreground">分层样本</p>
            <p className="mt-2 text-2xl text-purple-600 dark:text-purple-400 font-semibold">
              {statistics.totalLayers} 层
            </p>
          </div>
          <BarChart3 className="w-10 h-10 text-purple-600 dark:text-purple-400 opacity-50" />
        </div>
      </Card>

      <Card className="p-4 bg-orange-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-muted-foreground">平均pH值</p>
            <p className="mt-2 text-2xl text-orange-600 dark:text-orange-400 font-semibold">
              {statistics.averagePH.toFixed(1)}
            </p>
          </div>
          <Droplets className="w-10 h-10 text-orange-600 dark:text-orange-400 opacity-50" />
        </div>
      </Card>
    </div>
  );
}