'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 { toast } from 'sonner';
import {
  Server,
  CheckCircle,
  Eye,
} from 'lucide-react';

interface DeployConfigDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function DeployConfigDialog({ open, onOpenChange }: DeployConfigDialogProps) {
  const handleDeploy = () => {
    toast.success('模型部署已启动，预计3-5分钟完成');
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl">
        <DialogHeader>
          <DialogTitle>模型部署配置</DialogTitle>
          <DialogDescription>
            配置模型的部署环境和资源分配
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          {/* 部署环境 */}
          <Card className="p-4">
            <h4 className="mb-4">部署环境</h4>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>环境类型</Label>
                <Select defaultValue="production">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="development">开发环境</SelectItem>
                    <SelectItem value="staging">测试环境</SelectItem>
                    <SelectItem value="production">生产环境</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>部署区域</Label>
                <Select defaultValue="cn-east">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="cn-east">华东</SelectItem>
                    <SelectItem value="cn-north">华北</SelectItem>
                    <SelectItem value="cn-south">华南</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </Card>

          {/* 资源配置 */}
          <Card className="p-4">
            <h4 className="mb-4">资源配置</h4>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>CPU配置</Label>
                <Select defaultValue="2">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="1">1核</SelectItem>
                    <SelectItem value="2">2核</SelectItem>
                    <SelectItem value="4">4核</SelectItem>
                    <SelectItem value="8">8核</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>内存配置</Label>
                <Select defaultValue="4">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="2">2GB</SelectItem>
                    <SelectItem value="4">4GB</SelectItem>
                    <SelectItem value="8">8GB</SelectItem>
                    <SelectItem value="16">16GB</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>GPU配置</Label>
                <Select defaultValue="none">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">不使用GPU</SelectItem>
                    <SelectItem value="t4">NVIDIA T4</SelectItem>
                    <SelectItem value="v100">NVIDIA V100</SelectItem>
                    <SelectItem value="a100">NVIDIA A100</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>副本数量</Label>
                <Input type="number" defaultValue="3" min="1" max="10" />
              </div>
            </div>
          </Card>

          {/* 自动伸缩 */}
          <Card className="p-4">
            <h4 className="mb-4">自动伸缩策略</h4>
            <div className="space-y-4">
              <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 className="grid grid-cols-2 gap-4">
                <div>
                  <Label>最小实例数</Label>
                  <Input type="number" defaultValue="2" min="1" />
                </div>
                <div>
                  <Label>最大实例数</Label>
                  <Input type="number" defaultValue="10" max="50" />
                </div>
                <div>
                  <Label>扩容阈值（CPU）</Label>
                  <Input type="number" defaultValue="70" min="0" max="100" />
                </div>
                <div>
                  <Label>缩容阈值（CPU）</Label>
                  <Input type="number" defaultValue="30" min="0" max="100" />
                </div>
              </div>
            </div>
          </Card>

          {/* 健康检查 */}
          <Card className="p-4">
            <h4 className="mb-4">健康检查</h4>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>检查间隔（秒）</Label>
                <Input type="number" defaultValue="30" />
              </div>
              <div>
                <Label>超时时间（秒）</Label>
                <Input type="number" defaultValue="10" />
              </div>
              <div>
                <Label>失败阈值</Label>
                <Input type="number" defaultValue="3" />
              </div>
              <div>
                <Label>成功阈值</Label>
                <Input type="number" defaultValue="1" />
              </div>
            </div>
          </Card>

          {/* 部署进度预估 */}
          <Card className="p-4 bg-gradient-to-r from-green-50 to-teal-50 dark:from-green-950 dark:to-teal-950">
            <div className="flex items-start gap-3">
              <Server className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
              <div className="flex-1">
                <h4 className="text-green-900 dark:text-green-100 mb-2">部署流程</h4>
                <div className="space-y-2 text-xs text-green-800 dark:text-green-200">
                  <div className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4" />
                    <span>1. 模型文件准备与验证 (~1分钟)</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4" />
                    <span>2. 容器镜像构建 (~2分钟)</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4" />
                    <span>3. 服务实例启动 (~1分钟)</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4" />
                    <span>4. 健康检查与负载均衡配置 (~1分钟)</span>
                  </div>
                  <p className="mt-2 text-green-600 dark:text-green-400">预计总时间: 3-5分钟</p>
                </div>
              </div>
            </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={handleDeploy}>
            <Server className="w-4 h-4 mr-2" />
            开始部署
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}