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

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { DeviceParameterState } from './deviceParameterReducer';
import { BarChart3, Settings, Database, TrendingUp } from 'lucide-react';

interface DeviceParameterStatsProps {
  state: DeviceParameterState;
}

export function DeviceParameterStats({ state }: DeviceParameterStatsProps) {
  const { deviceTypes, selectedType } = state;

  // 计算统计数据
  const totalParams = deviceTypes.reduce((sum, type) => sum + (type.parameterDefinitions?.length || 0), 0);
  const typesWithParams = deviceTypes.filter(type => (type.parameterDefinitions?.length || 0) > 0).length;
  const currentTypeParams = selectedType?.parameterDefinitions?.length || 0;

  // 参数类型统计
  const paramTypeStats = deviceTypes.reduce((acc, type) => {
    type.parameterDefinitions?.forEach(param => {
      acc[param.type] = (acc[param.type] || 0) + 1;
    });
    return acc;
  }, {} as Record<string, number>);

  const getParamTypeLabel = (type: string) => {
    const labels: Record<string, string> = {
      'number': '数字',
      'string': '文本',
      'boolean': '布尔',
      'select': '选择'
    };
    return labels[type] || type;
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 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>
            <div className="text-sm text-green-600 dark:text-green-400 font-medium">
              设备类型总数
            </div>
            <div className="text-2xl font-bold text-green-700 dark:text-green-300 mt-1">
              {deviceTypes.length}
            </div>
          </div>
          <div className="text-green-500 dark:text-green-400">
            <Settings className="w-8 h-8" />
          </div>
        </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>
            <div className="text-sm text-orange-600 dark:text-orange-400 font-medium">
              已配置模板
            </div>
            <div className="text-2xl font-bold text-orange-700 dark:text-orange-300 mt-1">
              {typesWithParams} / {deviceTypes.length}
            </div>
            <div className="text-xs text-orange-600 dark:text-orange-400 mt-1">
              {deviceTypes.length > 0 ? Math.round((typesWithParams / deviceTypes.length) * 100) : 0}%
            </div>
          </div>
          <div className="text-orange-500 dark:text-orange-400">
            <TrendingUp className="w-8 h-8" />
          </div>
        </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>
            <div className="text-sm text-purple-600 dark:text-purple-400 font-medium">
              当前类型参数
            </div>
            <div className="text-2xl font-bold text-purple-700 dark:text-purple-300 mt-1">
              {currentTypeParams}
            </div>
            <div className="text-xs text-purple-600 dark:text-purple-400 mt-1">
              {selectedType?.name || '未选择'}
            </div>
          </div>
          <div className="text-purple-500 dark:text-purple-400">
            <BarChart3 className="w-8 h-8" />
          </div>
        </div>
      </Card>
    </div>
  );
}