/**
 * 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, DeviceParameterAction } from './deviceParameterReducer';

interface DeviceTypeSelectorProps {
  state: DeviceParameterState;
  dispatch: React.Dispatch<DeviceParameterAction>;
}

export function DeviceTypeSelector({ state, dispatch }: DeviceTypeSelectorProps) {
  const { deviceTypes, selectedType } = state;

  const handleTypeSelect = (typeId: string) => {
    const type = deviceTypes.find(t => t.id === typeId);
    if (type) {
      dispatch({ type: 'SET_SELECTED_TYPE', payload: type });
    }
  };

  return (
    <Card className="p-4 bg-card">
      <h3 className="mb-4 text-primary">设备类型列表</h3>
      {deviceTypes.length === 0 ? (
        <div className="text-center text-muted-foreground py-8">
          <div className="space-y-2">
            <div>暂无设备类型</div>
            <div className="text-sm">请先在"设备类型管理"中添加设备类型</div>
          </div>
        </div>
      ) : (
        <div className="space-y-2">
          {deviceTypes.map(type => (
            <div
              key={type.id}
              onClick={() => handleTypeSelect(type.id)}
              className={`p-3 rounded-lg cursor-pointer transition-all ${
                selectedType?.id === type.id
                  ? 'bg-primary-muted border-2 border-primary'
                  : 'bg-muted hover:bg-accent border-2 border-transparent'
              }`}
            >
              <div className="flex items-start justify-between">
                <div className="flex-1 min-w-0">
                  <h4 className="truncate font-medium">{type.name}</h4>
                  <p className="text-sm text-muted-foreground mt-1">
                    {type.manufacturer || '未知品牌'} {type.model ? `· ${type.model}` : ''}
                  </p>
                  {type.description && (
                    <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
                      {type.description}
                    </p>
                  )}
                </div>
                <Badge variant="outline" className="ml-2 font-light">
                  {type.parameterDefinitions?.length || 0}
                </Badge>
              </div>
            </div>
          ))}
        </div>
      )}
    </Card>
  );
}