/**
 * filekorolheader: 查看参数对话框 - 参数详情展示组件
 * 功能：展示参数详细信息、参数配置、选项列表
 * 路径：/ai-crop-model/data-sense-center/device-parameter/components
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn语义化样式
 */

import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card } from '@/components/ui/card';
import { ParameterDefinition, DeviceType } from './deviceParameterReducer';
import { Eye, Settings, Hash } from 'lucide-react';

interface ViewParameterDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  viewingParam: ParameterDefinition | null;
  selectedType: DeviceType | null;
}

export function ViewParameterDialog({ open, onOpenChange, viewingParam, selectedType }: ViewParameterDialogProps) {
  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 bg-blue-50 dark:bg-blue-950',
      'string': 'border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950',
      'boolean': 'border-purple-200 dark:border-purple-800 text-purple-700 dark:text-purple-300 bg-purple-50 dark:bg-purple-950',
      'select': 'border-orange-200 dark:border-orange-800 text-orange-700 dark:text-orange-300 bg-orange-50 dark:bg-orange-950'
    };
    return colors[type] || 'border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-950';
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-xl">
            <Eye className="w-5 h-5" />
            参数详情
          </DialogTitle>
          <DialogDescription>
            查看参数的详细配置信息
          </DialogDescription>
        </DialogHeader>

        {viewingParam && (
          <div className="space-y-6">
            {/* 参数基本信息 */}
            <Card className="p-4">
              <div className="flex items-center gap-2 mb-4">
                <Hash className="w-5 h-5 text-primary" />
                <h3 className="text-lg font-medium">基本信息</h3>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <div className="text-sm text-muted-foreground mb-1">参数标识</div>
                  <div className="font-mono text-sm font-medium bg-muted p-2 rounded">
                    {viewingParam.key}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-muted-foreground mb-1">参数名称</div>
                  <div className="font-medium text-base">{viewingParam.label}</div>
                </div>
                <div>
                  <div className="text-sm text-muted-foreground mb-1">数据类型</div>
                  <Badge
                    variant="outline"
                    className={`font-light ${getParamTypeColor(viewingParam.type)}`}
                  >
                    {getParamTypeLabel(viewingParam.type)}
                  </Badge>
                </div>
                <div>
                  <div className="text-sm text-muted-foreground mb-1">是否必填</div>
                  {viewingParam.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>
                  )}
                </div>
                <div className="md:col-span-2">
                  <div className="text-sm text-muted-foreground mb-1">参数描述</div>
                  <div className="text-sm bg-muted/30 p-3 rounded">
                    {viewingParam.description || '暂无描述'}
                  </div>
                </div>
              </div>
            </Card>

            {/* 参数配置 */}
            <Card className="p-4">
              <div className="flex items-center gap-2 mb-4">
                <Settings className="w-5 h-5 text-primary" />
                <h3 className="text-lg font-medium">参数配置</h3>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <div className="text-sm text-muted-foreground mb-1">默认值</div>
                  <div className="bg-muted/30 p-3 rounded">
                    {viewingParam.type === 'boolean' ? (
                      <Badge
                        variant={viewingParam.defaultValue ? 'default' : 'secondary'}
                        className="font-light"
                      >
                        {viewingParam.defaultValue ? '是' : '否'}
                      </Badge>
                    ) : viewingParam.type === 'select' && viewingParam.options ? (
                      <div>
                        <span className="font-medium">
                          {viewingParam.options.find(opt => opt.value === viewingParam.defaultValue)?.label || viewingParam.defaultValue}
                        </span>
                        <div className="text-xs text-muted-foreground mt-1">
                          值: {viewingParam.defaultValue}
                        </div>
                      </div>
                    ) : (
                      <span className="font-medium">
                        {viewingParam.defaultValue?.toString() || '-'}
                      </span>
                    )}
                  </div>
                </div>

                {viewingParam.unit && (
                  <div>
                    <div className="text-sm text-muted-foreground mb-1">单位</div>
                    <div className="bg-muted/30 p-3 rounded font-medium">
                      {viewingParam.unit}
                    </div>
                  </div>
                )}

                {viewingParam.type === 'number' && (viewingParam.min !== undefined || viewingParam.max !== undefined) && (
                  <div className="md:col-span-2">
                    <div className="text-sm text-muted-foreground mb-1">取值范围</div>
                    <div className="bg-muted/30 p-3 rounded font-medium">
                      {viewingParam.min !== undefined && viewingParam.max !== undefined
                        ? `${viewingParam.min} ~ ${viewingParam.max}`
                        : viewingParam.min !== undefined
                        ? `≥ ${viewingParam.min}`
                        : viewingParam.max !== undefined
                        ? `≤ ${viewingParam.max}`
                        : '-'}
                      {viewingParam.unit && ` ${viewingParam.unit}`}
                    </div>
                  </div>
                )}
              </div>
            </Card>

            {/* 选择类型选项 */}
            {viewingParam.type === 'select' && viewingParam.options && (
              <Card className="p-4">
                <div className="flex items-center gap-2 mb-4">
                  <Settings className="w-5 h-5 text-primary" />
                  <h3 className="text-lg font-medium">选项列表</h3>
                  <Badge variant="outline" className="font-light">
                    {viewingParam.options.length} 个选项
                  </Badge>
                </div>
                <div className="space-y-2">
                  {viewingParam.options.map((option, index) => (
                    <div key={index} className="flex items-center justify-between p-3 bg-muted/30 rounded">
                      <div>
                        <span className="font-medium">{option.label}</span>
                        <span className="text-muted-foreground text-sm ml-2">
                          ({option.value})
                        </span>
                        {viewingParam.defaultValue === option.value && (
                          <Badge variant="default" className="ml-2 text-xs">
                            默认
                          </Badge>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </Card>
            )}

            {/* 设备信息 */}
            <Card className="p-4">
              <div className="text-sm text-muted-foreground mb-2">所属设备类型</div>
              <div className="font-medium">{selectedType?.name}</div>
              {selectedType?.manufacturer && (
                <div className="text-sm text-muted-foreground mt-1">
                  {selectedType.manufacturer} {selectedType.model ? `· ${selectedType.model}` : ''}
                </div>
              )}
            </Card>
          </div>
        )}

        <DialogFooter>
          <Button onClick={() => onOpenChange(false)}>
            关闭
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}