/**
 * filekorolheader: 设备类型表格组件 - 数据列表展示组件
 * 功能：设备类型列表展示、操作按钮、参数模板链接、分类标签
 * 路径：/ai-crop-model/data-sense-center/device-type/components
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn语义化样式
 */

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Eye, Edit, Trash2, Settings } from 'lucide-react';
import { DeviceTypeState, DeviceType } from './deviceTypeReducer';

interface DeviceTypeTableProps {
  state: DeviceTypeState;
  onEdit: (deviceType: DeviceType) => void;
  onView: (deviceType: DeviceType) => void;
  onViewParams: (deviceType: DeviceType) => void;
  onDelete: (id: string) => void;
}

export function DeviceTypeTable({ state, onEdit, onView, onViewParams, onDelete }: DeviceTypeTableProps) {
  const getProtocolColor = (protocol?: string) => {
    const colors: Record<string, string> = {
      'LoRaWAN': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
      'MQTT': 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
      'Modbus RTU': 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
      'HTTP': 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
    };
    return colors[protocol || ''] || 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
  };

  const getCategoryColor = (category?: string) => {
    const colors: Record<string, string> = {
      '环境监测': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
      '气象监测': 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
      '灌溉控制': 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
      '土壤监测': 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
    };
    return colors[category || ''] || 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
  };

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>类型名称</TableHead>
          <TableHead>品牌</TableHead>
          <TableHead>型号</TableHead>
          <TableHead>描述</TableHead>
          <TableHead>参数模板</TableHead>
          <TableHead className="text-right">操作</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {state.deviceTypes.length === 0 ? (
          <TableRow>
            <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
              暂无数据
            </TableCell>
          </TableRow>
        ) : (
          state.deviceTypes.map(type => (
            <TableRow key={type.id}>
              <TableCell className="font-medium">{type.name}</TableCell>
              <TableCell>{type.manufacturer || '-'}</TableCell>
              <TableCell>{type.model || '-'}</TableCell>
              <TableCell className="max-w-md">
                <div className="truncate">
                  {type.description || '-'}
                </div>
              </TableCell>
              <TableCell>
                {(type.parameterDefinitions?.length || 0) > 0 ? (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onViewParams(type)}
                    className="text-primary hover:text-primary/80 p-1 h-auto"
                  >
                    <Eye className="w-4 h-4 mr-1" />
                    <span className="text-sm">{type.parameterDefinitions.length} 个参数</span>
                  </Button>
                ) : (
                  <span className="text-muted-foreground text-sm">未定义</span>
                )}
              </TableCell>
              <TableCell className="text-right">
                <div className="flex justify-end gap-2">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onView(type)}
                    title="查看"
                    className="p-1 h-auto"
                  >
                    <Eye className="w-4 h-4" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onEdit(type)}
                    title="编辑"
                    className="p-1 h-auto"
                  >
                    <Edit className="w-4 h-4" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onDelete(type.id)}
                    title="删除"
                    className="p-1 h-auto"
                  >
                    <Trash2 className="w-4 h-4 text-destructive" />
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          ))
        )}
      </TableBody>
    </Table>
  );
}