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

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { DeviceType } from './deviceTypeReducer';

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

export function ViewDeviceTypeDialog({ open, onOpenChange, viewingType }: ViewDeviceTypeDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>设备类型详情</DialogTitle>
        </DialogHeader>
        {viewingType && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-muted-foreground">类型名称</label>
                <div className="field-value mt-1 p-2 bg-muted rounded">{viewingType.name}</div>
              </div>
              <div>
                <label className="text-muted-foreground">品牌</label>
                <div className="field-value mt-1 p-2 bg-muted rounded">{viewingType.manufacturer || '-'}</div>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-muted-foreground">型号</label>
                <div className="field-value mt-1 p-2 bg-muted rounded">{viewingType.model || '-'}</div>
              </div>
              <div>
                <label className="text-muted-foreground">参数模板数</label>
                <div className="field-value mt-1 p-2 bg-muted rounded">
                  {viewingType.parameterDefinitions?.length || 0} 个
                </div>
              </div>
            </div>
            <div>
              <label className="text-muted-foreground">描述</label>
              <div className="field-value mt-1 p-2 bg-muted rounded">{viewingType.description || '-'}</div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-muted-foreground">创建时间</label>
                <div className="field-value mt-1 p-2 bg-muted rounded">
                  {new Date(viewingType.createdAt).toLocaleString('zh-CN')}
                </div>
              </div>
              <div>
                <label className="text-muted-foreground">更新时间</label>
                <div className="field-value mt-1 p-2 bg-muted rounded">
                  {new Date(viewingType.updatedAt).toLocaleString('zh-CN')}
                </div>
              </div>
            </div>
          </div>
        )}
        <DialogFooter>
          <Button onClick={() => onOpenChange(false)}>关闭</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}