/**
 * filekorolheader: 设备类型统计组件 - 统计卡片展示组件
 * 功能：显示设备类型统计数据、参数配置情况、品牌型号覆盖率、分类统计
 * 路径：/ai-crop-model/data-sense-center/device-type/components
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn语义化样式
 */

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { DeviceTypeState } from './deviceTypeReducer';

interface DeviceTypeStatsProps {
  state: DeviceTypeState;
}

export function DeviceTypeStats({ state }: DeviceTypeStatsProps) {
  const totalParams = state.deviceTypes.reduce((sum, type) => sum + (type.parameterDefinitions?.length || 0), 0);
  const typesWithParams = state.deviceTypes.filter(type => (type.parameterDefinitions?.length || 0) > 0).length;
  const typesWithManufacturer = state.deviceTypes.filter(t => t.manufacturer).length;
  const typesWithModel = state.deviceTypes.filter(t => t.model).length;

  return (
    <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
      <Card className="p-4 bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800">
        <div className="text-sm text-muted-foreground">总类型数</div>
        <div className="mt-1 text-2xl font-semibold text-green-600 dark:text-green-400">
          {state.deviceTypes.length}
        </div>
      </Card>
      <Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
        <div className="text-sm text-muted-foreground">参数模板总数</div>
        <div className="mt-1 text-2xl font-semibold text-blue-600 dark:text-blue-400">
          {totalParams}
        </div>
      </Card>
      <Card className="p-4 bg-orange-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800">
        <div className="text-sm text-muted-foreground">已配置模板</div>
        <div className="mt-1 text-2xl font-semibold text-orange-600 dark:text-orange-400">
          {typesWithParams} / {state.deviceTypes.length}
        </div>
      </Card>
      <Card className="p-4 bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800">
        <div className="text-sm text-muted-foreground">已填写品牌</div>
        <div className="mt-1 text-2xl font-semibold text-purple-600 dark:text-purple-400">
          {typesWithManufacturer}
        </div>
      </Card>
      <Card className="p-4 bg-pink-50 dark:bg-pink-950 border-pink-200 dark:border-pink-800">
        <div className="text-sm text-muted-foreground">已填写型号</div>
        <div className="mt-1 text-2xl font-semibold text-pink-600 dark:text-pink-400">
          {typesWithModel}
        </div>
      </Card>
    </div>
  );
}