'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 { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { Card } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { toast } from 'sonner';
import {
  Activity,
  Zap,
  Server,
  Cpu,
  BarChart3,
  Eye,
} from 'lucide-react';

interface PerformanceMetrics {
  avgResponseTime: number;
  p95ResponseTime: number;
  p99ResponseTime: number;
  qps: number;
  errorRate: number;
  cpuUsage: number;
  memoryUsage: number;
}

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

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

export function PerformanceTuneDialog({ open, onOpenChange, model, performanceMetrics }: PerformanceTuneDialogProps) {
  const handleApplyTuning = () => {
    toast.success('性能优化配置已应用');
    onOpenChange(false);
  };

  if (!model) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-5xl 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 dark:from-blue-950 dark:to-purple-950">
            <h4 className="mb-4 flex items-center gap-2">
              <Activity className="w-4 h-4 text-blue-600 dark:text-blue-400" />
              当前性能指标
            </h4>
            <div className="grid grid-cols-4 gap-4">
              <div className="p-3 bg-white dark:bg-gray-900 rounded-lg">
                <p className="text-xs text-muted-foreground">平均响应时间</p>
                <p className="text-2xl text-blue-600 dark:text-blue-400 mt-1">{performanceMetrics.avgResponseTime}ms</p>
              </div>
              <div className="p-3 bg-white dark:bg-gray-900 rounded-lg">
                <p className="text-xs text-muted-foreground">QPS</p>
                <p className="text-2xl text-green-600 dark:text-green-400 mt-1">{performanceMetrics.qps}</p>
              </div>
              <div className="p-3 bg-white dark:bg-gray-900 rounded-lg">
                <p className="text-xs text-muted-foreground">CPU使用率</p>
                <p className="text-2xl text-orange-600 dark:text-orange-400 mt-1">{performanceMetrics.cpuUsage}%</p>
              </div>
              <div className="p-3 bg-white dark:bg-gray-900 rounded-lg">
                <p className="text-xs text-muted-foreground">内存使用率</p>
                <p className="text-2xl text-purple-600 dark:text-purple-400 mt-1">{performanceMetrics.memoryUsage}%</p>
              </div>
            </div>
          </Card>

          {/* 负载均衡配置 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Zap className="w-4 h-4 text-orange-600 dark:text-orange-400" />
              负载均衡策略
            </h4>
            <div className="space-y-4">
              <div>
                <Label>负载均衡算法</Label>
                <Select defaultValue="round-robin">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="round-robin">轮询 (Round Robin)</SelectItem>
                    <SelectItem value="least-connections">最少连接 (Least Connections)</SelectItem>
                    <SelectItem value="ip-hash">IP哈希 (IP Hash)</SelectItem>
                    <SelectItem value="weighted">加权轮询 (Weighted)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>会话保持时间（秒）</Label>
                  <Input type="number" defaultValue="300" />
                </div>
                <div>
                  <Label>健康检查间隔（秒）</Label>
                  <Input type="number" defaultValue="30" />
                </div>
              </div>
              <div className="flex items-center justify-between p-3 bg-blue-50 dark:bg-blue-950 rounded-lg">
                <div>
                  <div className="font-medium">启用跨区域负载均衡</div>
                  <div className="text-xs text-muted-foreground">在多个区域间分配流量</div>
                </div>
                <Switch defaultChecked />
              </div>
            </div>
          </Card>

          {/* 缓存配置 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Server className="w-4 h-4 text-purple-600 dark:text-purple-400" />
              缓存优化
            </h4>
            <div className="space-y-4">
              <div className="flex items-center justify-between p-3 bg-purple-50 dark:bg-purple-950 rounded-lg">
                <div>
                  <div className="font-medium">启用结果缓存</div>
                  <div className="text-xs text-muted-foreground">缓存相同输入的推理结果</div>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>缓存策略</Label>
                  <Select defaultValue="lru">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="lru">LRU (最近最少使用)</SelectItem>
                      <SelectItem value="lfu">LFU (最不经常使用)</SelectItem>
                      <SelectItem value="fifo">FIFO (先进先出)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>缓存大小 (MB)</Label>
                  <Input type="number" defaultValue="1024" />
                </div>
                <div>
                  <Label>缓存过期时间（秒）</Label>
                  <Input type="number" defaultValue="3600" />
                </div>
                <div>
                  <Label>最大缓存条目</Label>
                  <Input type="number" defaultValue="10000" />
                </div>
              </div>
            </div>
          </Card>

          {/* 并发控制 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Cpu className="w-4 h-4 text-blue-600 dark:text-blue-400" />
              并发控制
            </h4>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>最大并发请求数</Label>
                <Input type="number" defaultValue="100" />
              </div>
              <div>
                <Label>每实例并发数</Label>
                <Input type="number" defaultValue="10" />
              </div>
              <div>
                <Label>请求队列长度</Label>
                <Input type="number" defaultValue="1000" />
              </div>
              <div>
                <Label>队列超时（秒）</Label>
                <Input type="number" defaultValue="60" />
              </div>
            </div>
          </Card>

          {/* 资源限制 */}
          <Card className="p-4">
            <h4 className="mb-4">资源限制优化</h4>
            <div className="grid grid-cols-2 gap-6">
              <div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm">内存限制</span>
                  <span className="font-medium">8GB</span>
                </div>
                <Progress value={performanceMetrics.memoryUsage} className="h-2" />
                <p className="text-xs text-muted-foreground mt-1">当前使用: {performanceMetrics.memoryUsage}%</p>
              </div>
              <div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm">CPU限制</span>
                  <span className="font-medium">4核</span>
                </div>
                <Progress value={performanceMetrics.cpuUsage} className="h-2" />
                <p className="text-xs text-muted-foreground mt-1">当前使用: {performanceMetrics.cpuUsage}%</p>
              </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="space-y-3">
              <p className="text-sm text-muted-foreground">
                运行压力测试以验证优化效果
              </p>
              <div className="grid grid-cols-3 gap-4">
                <div>
                  <Label>并发用户数</Label>
                  <Input type="number" defaultValue="50" />
                </div>
                <div>
                  <Label>测试持续时间（分钟）</Label>
                  <Input type="number" defaultValue="5" />
                </div>
                <div>
                  <Label>目标QPS</Label>
                  <Input type="number" defaultValue="100" />
                </div>
              </div>
              <Button variant="outline" className="w-full">
                <Activity className="w-4 h-4 mr-2" />
                开始压力测试
              </Button>
            </div>
          </Card>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button variant="outline">
            <Eye className="w-4 h-4 mr-2" />
            预览配置
          </Button>
          <Button className="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600" onClick={handleApplyTuning}>
            <Zap className="w-4 h-4 mr-2" />
            应用优化配置
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}