/**
 * filekorolheader: 设备参数表格组件 - 参数模板列表展示组件
 * 功能：参数列表展示、操作按钮、参数类型显示、取值范围显示
 * 路径：/ai-crop-model/data-sense-center/device-parameter/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 } from 'lucide-react';
import { DeviceParameterState } from './deviceParameterReducer';

interface DeviceParameterTableProps {
  state: DeviceParameterState;
  onEdit: (param: any) => void;
  onView: (param: any) => void;
  onDelete: (paramKey: string) => void;
}

export function DeviceParameterTable({ state, onEdit, onView, onDelete }: DeviceParameterTableProps) {
  const { selectedType } = state;

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

  const getParamTypeColor = (type: string) => {
    const colors: Record<string, string> = {
      'number': 'border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300',
      'string': 'border-green-200 dark:border-green-800 text-green-700 dark:text-green-300',
      'boolean': 'border-purple-200 dark:border-purple-800 text-purple-700 dark:text-purple-300',
      'select': 'border-orange-200 dark:border-orange-800 text-orange-700 dark:text-orange-300'
    };
    return colors[type] || 'border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-300';
  };

  return (
    <div className="p-4">
      {selectedType ? (
        <>
          <div className="flex items-center justify-between mb-4">
            <div>
              <h3 className="text-primary">{selectedType.name} - 参数配置</h3>
              <p className="text-sm text-muted-foreground mt-1">
                {selectedType.description || '暂无描述'}
              </p>
            </div>
            <Badge variant="outline" className="font-light">
              {selectedType.parameterDefinitions?.length || 0} 个参数
            </Badge>
          </div>

          {selectedType.parameterDefinitions && selectedType.parameterDefinitions.length > 0 ? (
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[150px]">参数标识</TableHead>
                    <TableHead className="w-[150px]">参数名称</TableHead>
                    <TableHead className="w-[100px]">类型</TableHead>
                    <TableHead className="w-[80px]">必填</TableHead>
                    <TableHead className="w-[120px]">默认值</TableHead>
                    <TableHead className="w-[150px]">单位/范围</TableHead>
                    <TableHead className="min-w-[200px]">说明</TableHead>
                    <TableHead className="text-right w-[120px]">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {selectedType.parameterDefinitions.map((param) => (
                    <TableRow key={param.key} className="hover:bg-muted/30">
                      <TableCell className="font-mono text-sm font-medium">
                        {param.key}
                      </TableCell>
                      <TableCell>
                        <div className="font-medium">{param.label}</div>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={`font-light ${getParamTypeColor(param.type)}`}
                        >
                          {getParamTypeLabel(param.type)}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        {param.required ? (
                          <Badge className="bg-red-50 dark:bg-red-950 text-red-600 dark:text-red-400 border-red-200 dark:border-red-800 font-light">
                            必填
                          </Badge>
                        ) : (
                          <span className="text-muted-foreground text-sm font-light">选填</span>
                        )}
                      </TableCell>
                      <TableCell>
                        {param.type === 'boolean' ? (
                          <Badge
                            variant={param.defaultValue ? 'default' : 'secondary'}
                            className="font-light"
                          >
                            {param.defaultValue ? '是' : '否'}
                          </Badge>
                        ) : param.type === 'select' && param.options ? (
                          <div className="text-sm">
                            <span className="font-medium">
                              {param.options.find(opt => opt.value === param.defaultValue)?.label || param.defaultValue}
                            </span>
                            <div className="text-xs text-muted-foreground">
                              ({param.options.length} 个选项)
                            </div>
                          </div>
                        ) : (
                          <span className="text-sm font-medium">
                            {param.defaultValue?.toString() || '-'}
                          </span>
                        )}
                      </TableCell>
                      <TableCell>
                        <div className="text-sm">
                          {param.unit && (
                            <span className="font-medium">{param.unit}</span>
                          )}
                          {param.type === 'number' && (param.min !== undefined || param.max !== undefined) && (
                            <div className="text-muted-foreground">
                              {param.min !== undefined && param.max !== undefined
                                ? `(${param.min}~${param.max})`
                                : param.min !== undefined
                                ? `(≥${param.min})`
                                : param.max !== undefined
                                ? `(≤${param.max})`
                                : ''
                              }
                            </div>
                          )}
                          {param.type === 'select' && param.options && (
                            <div className="text-muted-foreground">
                              {param.options.length} 个选项
                            </div>
                          )}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="max-w-xs">
                          <div
                            className="text-sm text-muted-foreground"
                            title={param.description}
                          >
                            {param.description || '-'}
                          </div>
                        </div>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-1">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => onView(param)}
                            title="查看详情"
                            className="p-1 h-auto hover:bg-blue-50 dark:hover:bg-blue-950"
                          >
                            <Eye className="w-4 h-4 text-blue-600 dark:text-blue-400" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => onEdit(param)}
                            title="编辑"
                            className="p-1 h-auto hover:bg-amber-50 dark:hover:bg-amber-950"
                          >
                            <Edit className="w-4 h-4 text-amber-600 dark:text-amber-400" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => onDelete(param.key)}
                            title="删除"
                            className="p-1 h-auto hover:bg-red-50 dark:hover:bg-red-950"
                          >
                            <Trash2 className="w-4 h-4 text-red-600 dark:text-red-400" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          ) : (
            <div className="text-center py-12">
              <div className="space-y-3">
                <div className="text-lg font-medium text-muted-foreground">
                  暂无参数定义
                </div>
                <div className="text-sm text-muted-foreground">
                  该设备类型尚未配置参数模板，点击"新增参数"开始配置
                </div>
              </div>
            </div>
          )}
        </>
      ) : (
        <div className="text-center py-12">
          <div className="space-y-3">
            <div className="text-lg font-medium text-muted-foreground">
              请选择设备类型
            </div>
            <div className="text-sm text-muted-foreground">
              从左侧列表中选择一个设备类型以查看和管理其参数模板
            </div>
          </div>
        </div>
      )}
    </div>
  );
}