smart-crop-ui/crop-x/src/app/(app)/ai-crop-model/model-integration/access/components/ModelDetailDialog.tsx

'use client';

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Card } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { toast } from 'sonner';
import {
  Brain,
  BarChart3,
  Link,
  Package,
  Terminal,
  CheckCircle,
  GitBranch,
  Copy,
  Eye,
} from 'lucide-react';

interface ModelService {
  id: string;
  name: string;
  version: string;
  type: string;
  format: string;
  description: string;
  author: string;
  createTime: string;
  lastUpdateTime: string;
  status: string;
  endpoint: string;
  accessLevel: string;
  tags: string[];
  accuracy?: number;
  inferenceTime?: number;
  requestCount: number;
  successRate: number;
  dependencies: string[];
}

interface ModelDetailDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  model: ModelService | null;
}

export function ModelDetailDialog({ open, onOpenChange, model }: ModelDetailDialogProps) {
  const handleCopyEndpoint = async (endpoint: string) => {
    try {
      await navigator.clipboard.writeText(endpoint);
      toast.success('端点已复制到剪贴板');
    } catch (error) {
      toast.error('复制失败，请重试');
    }
  };

  const handleTestModel = () => {
    toast.success('模型测试成功，推理正常');
  };

  const getAccessLevelIcon = (level: string) => {
    switch (level) {
      case '公开': return '🌐';
      case '私有': return '🔒';
      case '团队共享': return '👥';
      default: return '🔒';
    }
  };

  if (!model) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>模型详情 - {model.name}</DialogTitle>
          <DialogDescription>
            查看模型完整信息、元数据和运行状态
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6">
          {/* 基本信息 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Brain className="w-4 h-4 text-blue-600 dark:text-blue-400" />
              基本信息
            </h4>
            <div className="space-y-4">
              {/* 模型名称 - 大字体显示 */}
              <div className="text-center">
                <h3 className="text-2xl font-bold text-foreground mb-2">{model.name}</h3>
                <Badge variant="outline" className="text-sm">
                  <GitBranch className="w-3 h-3 mr-1" />
                  {model.version}
                </Badge>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-xs">模型类型</Label>
                  <p className="mt-1">
                    <Badge variant="outline" className="font-light">{model.type}</Badge>
                  </p>
                </div>
                <div>
                  <Label className="text-xs">模型格式</Label>
                  <p className="mt-1">{model.format}</p>
                </div>
              </div>

              <div>
                <Label className="text-xs">模型描述</Label>
                <p className="mt-1 text-sm text-muted-foreground">{model.description}</p>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-xs">访问权限</Label>
                  <p className="mt-1 flex items-center gap-2">
                    <span>{getAccessLevelIcon(model.accessLevel)}</span>
                    <span className="text-sm">{model.accessLevel}</span>
                  </p>
                </div>
                <div>
                  <Label className="text-xs">标签</Label>
                  <div className="mt-1 flex flex-wrap gap-2">
                    {model.tags.map((tag, idx) => (
                      <Badge key={idx} variant="outline" className="text-xs font-light">{tag}</Badge>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </Card>

          {/* 性能指标 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <BarChart3 className="w-4 h-4 text-green-600 dark:text-green-400" />
              性能指标
            </h4>
            <div className="grid grid-cols-4 gap-4">
              <div className="text-center p-4 bg-green-50 dark:bg-green-950 rounded-lg">
                <p className="text-xs text-muted-foreground">模型准确率</p>
                <p className="text-2xl text-green-600 dark:text-green-400 mt-1">{model.accuracy}%</p>
              </div>
              <div className="text-center p-4 bg-blue-50 dark:bg-blue-950 rounded-lg">
                <p className="text-xs text-muted-foreground">推理时间</p>
                <p className="text-2xl text-blue-600 dark:text-blue-400 mt-1">{model.inferenceTime}ms</p>
                <p className="text-xs text-blue-600 dark:text-blue-400 mt-1">平均响应</p>
              </div>
              <div className="text-center p-4 bg-purple-50 dark:bg-purple-950 rounded-lg">
                <p className="text-xs text-muted-foreground">调用次数</p>
                <p className="text-2xl text-purple-600 dark:text-purple-400 mt-1">{model.requestCount.toLocaleString()}</p>
                <p className="text-xs text-purple-600 dark:text-purple-400 mt-1">总计</p>
              </div>
              <div className="text-center p-4 bg-orange-50 dark:bg-orange-950 rounded-lg">
                <p className="text-xs text-muted-foreground">成功率</p>
                <p className="text-2xl text-orange-600 dark:text-orange-400 mt-1">{model.successRate}%</p>
              </div>
            </div>
          </Card>

          {/* API端点信息 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Link className="w-4 h-4 text-blue-600 dark:text-blue-400" />
              API端点
            </h4>
            <div className="space-y-3">
              <div>
                <Label className="text-xs">服务端点</Label>
                <div className="mt-2 flex items-center gap-2">
                  <code className="flex-1 bg-gray-900 dark:bg-gray-950 text-green-400 px-4 py-2 rounded text-sm font-mono">
                    {model.endpoint}
                  </code>
                  <Button size="sm" variant="outline" onClick={() => handleCopyEndpoint(model.endpoint)}>
                    复制
                  </Button>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-xs">请求方式</Label>
                  <p className="mt-1 text-sm">POST</p>
                </div>
                <div>
                  <Label className="text-xs">Content-Type</Label>
                  <p className="mt-1 text-sm">application/json</p>
                </div>
              </div>
            </div>
          </Card>

          {/* 依赖包列表 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Package className="w-4 h-4 text-purple-600 dark:text-purple-400" />
              依赖包 ({model.dependencies.length}个)
            </h4>
            <div className="space-y-2">
              {model.dependencies.map((dep, idx) => (
                <div key={idx} className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-900 rounded text-sm">
                  <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0" />
                  <code className="font-mono">{dep}</code>
                </div>
              ))}
            </div>
          </Card>

          {/* 调用示例 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Terminal className="w-4 h-4 text-green-600 dark:text-green-400" />
              API调用示例
            </h4>
            <div className="bg-gray-900 dark:bg-gray-950 text-green-400 p-4 rounded-lg font-mono text-sm overflow-x-auto">
              <pre>{`# Python调用示例
import requests

url = "${model.endpoint}"
headers = {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_API_KEY"
}

payload = {
    "data": [
        [25.3, 65.2, 45820, 3.2, 1013.2, 18.5, 45.3, 2.3]
    ]
}

response = requests.post(url, json=payload, headers=headers)
result = response.json()

print(f"预测结果: {result['prediction']}")
print(f"置信度: {result['confidence']}%")`}</pre>
            </div>
          </Card>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
          <Button variant="outline" onClick={handleTestModel}>
            <CheckCircle className="w-4 h-4 mr-2" />
            测试推理
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}