/**
 * filekorolheader: 查看参数模板对话框 - 参数配置详情展示组件
 * 功能：展示设备类型参数定义、参数类型和配置详情
 * 路径：/ai-crop-model/data-sense-center/device-type/components
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn语义化样式
 */

import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { DeviceType } from './deviceTypeReducer';

interface ViewParamsDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  viewingParams: DeviceType | null;
}

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

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>参数模板 - {viewingParams?.name}</DialogTitle>
          <DialogDescription>
            该设备类型的参数定义
          </DialogDescription>
        </DialogHeader>
        {viewingParams && viewingParams.parameterDefinitions.length > 0 ? (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>参数标识</TableHead>
                <TableHead>参数名称</TableHead>
                <TableHead>数据类型</TableHead>
                <TableHead>必填</TableHead>
                <TableHead>默认值</TableHead>
                <TableHead>单位</TableHead>
                <TableHead>范围</TableHead>
                <TableHead>说明</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {viewingParams.parameterDefinitions.map((param, index) => (
                <TableRow key={index}>
                  <TableCell className="font-mono text-sm">{param.key}</TableCell>
                  <TableCell>{param.label}</TableCell>
                  <TableCell>
                    <Badge variant="outline">{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">是</Badge>
                    ) : (
                      <span className="text-muted-foreground">否</span>
                    )}
                  </TableCell>
                  <TableCell>
                    {param.type === 'boolean'
                      ? (param.defaultValue ? '是' : '否')
                      : (param.defaultValue?.toString() || '-')
                    }
                  </TableCell>
                  <TableCell>{param.unit || '-'}</TableCell>
                  <TableCell>
                    {param.min !== undefined && param.max !== undefined
                      ? `${param.min} ~ ${param.max}`
                      : '-'
                    }
                  </TableCell>
                  <TableCell className="max-w-xs">
                    <div className="truncate" title={param.description}>
                      {param.description || '-'}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        ) : (
          <div className="text-center text-muted-foreground py-8">
            该设备类型暂无参数定义
          </div>
        )}
        <DialogFooter>
          <Button onClick={() => onOpenChange(false)}>关闭</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}