'use client';

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { toast } from 'sonner';
import {
  GitBranch,
  Plus,
  CheckCircle,
  Download,
  RefreshCw,
  BarChart3,
} from 'lucide-react';
import {
  LineChart as ReLineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip as RechartsTooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';

interface ModelService {
  id: string;
  name: string;
  version: string;
  lastUpdateTime: string;
}

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

export function VersionManageDialog({ open, onOpenChange, model }: VersionManageDialogProps) {
  const handleSwitchVersion = (version: string) => {
    toast.success(`已切换到版本 ${version}`);
  };

  const handleDownloadVersion = (version: string) => {
    toast.success(`开始下载版本 ${version}`);
  };

  if (!model) return null;

  // 模拟版本数据
  const versions = [
    { version: 'v2.3.1', date: '2024-10-10', accuracy: 94.5, inference: 120, status: '当前', desc: '优化推理性能，提升准确率' },
    { version: 'v2.3.0', date: '2024-09-15', accuracy: 93.8, inference: 135, status: '已归档', desc: '增加新特征，改进模型结构' },
    { version: 'v2.2.0', date: '2024-08-20', accuracy: 92.5, inference: 145, status: '已归档', desc: '数据集扩充，重新训练' },
    { version: 'v2.1.0', date: '2024-07-10', accuracy: 91.2, inference: 150, status: '已归档', desc: '修复已知问题，提升稳定性' },
  ];

  // 版本性能对比数据
  const performanceData = [
    { version: 'v2.1.0', 准确率: 91.2, 推理时间: 150 },
    { version: 'v2.2.0', 准确率: 92.5, 推理时间: 145 },
    { version: 'v2.3.0', 准确率: 93.8, 推理时间: 135 },
    { version: 'v2.3.1', 准确率: 94.5, 推理时间: 120 },
  ];

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>版本管理 - {model.name}</DialogTitle>
          <DialogDescription>
            管理模型的所有版本，支持版本切换和回滚
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          {/* 当前版本 */}
          <Card className="p-4 bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200 dark:from-blue-950 dark:to-purple-950 dark:border-blue-800">
            <div className="flex items-center justify-between">
              <div>
                <h4 className="flex items-center gap-2">
                  <GitBranch className="w-4 h-4 text-blue-600 dark:text-blue-400" />
                  当前版本
                </h4>
                <p className="text-2xl mt-2 font-mono">{model.version}</p>
                <p className="text-xs text-muted-foreground mt-1">
                  最后更新: {model.lastUpdateTime}
                </p>
              </div>
              <Badge className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">生产环境</Badge>
            </div>
          </Card>

          {/* 版本列表 */}
          <Card>
            <div className="p-4 border-b">
              <div className="flex items-center justify-between">
                <h4>历史版本</h4>
                <Button size="sm" className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
                  <Plus className="w-3 h-3 mr-1" />
                  发布新版本
                </Button>
              </div>
            </div>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>版本号</TableHead>
                  <TableHead>发布时间</TableHead>
                  <TableHead>准确率</TableHead>
                  <TableHead>推理时间</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>描述</TableHead>
                  <TableHead>操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {versions.map((ver) => (
                  <TableRow key={ver.version}>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        {ver.status === '当前' && <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />}
                        <code className="font-mono">{ver.version}</code>
                      </div>
                    </TableCell>
                    <TableCell className="text-sm">{ver.date}</TableCell>
                    <TableCell>
                      <span className="text-green-600 dark:text-green-400">{ver.accuracy}%</span>
                    </TableCell>
                    <TableCell>{ver.inference}ms</TableCell>
                    <TableCell>
                      <Badge className={ver.status === '当前' ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300' : 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'}>
                        {ver.status}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-xs text-muted-foreground">
                      {ver.desc}
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        {ver.status !== '当前' && (
                          <Button size="sm" variant="outline" onClick={() => handleSwitchVersion(ver.version)}>
                            <RefreshCw className="w-3 h-3" />
                          </Button>
                        )}
                        <Button size="sm" variant="outline" onClick={() => handleDownloadVersion(ver.version)}>
                          <Download className="w-3 h-3" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Card>

          {/* 版本对比 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <BarChart3 className="w-4 h-4 text-purple-600 dark:text-purple-400" />
              版本性能对比
            </h4>
            <ResponsiveContainer width="100%" height={250}>
              <ReLineChart data={performanceData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="version" />
                <YAxis yAxisId="left" />
                <YAxis yAxisId="right" orientation="right" />
                <RechartsTooltip />
                <Legend />
                <Line yAxisId="left" type="monotone" dataKey="准确率" stroke="#10b981" strokeWidth={2} />
                <Line yAxisId="right" type="monotone" dataKey="推理时间" stroke="#3b82f6" strokeWidth={2} />
              </ReLineChart>
            </ResponsiveContainer>
          </Card>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
          <Button className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">
            <Download className="w-4 h-4 mr-2" />
            导出版本历史
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}