'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 { Textarea } from '@/components/ui/textarea';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { toast } from 'sonner';
import {
  Package,
  Plus,
  CheckCircle,
  AlertCircle,
  RefreshCw,
  Trash2,
  Clock,
  Settings,
  Download,
} from 'lucide-react';

interface ModelService {
  id: string;
  name: string;
  dependencies: string[];
}

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

export function DependencyManageDialog({ open, onOpenChange, model }: DependencyManageDialogProps) {
  const handleUpdateDependency = () => {
    toast.success('依赖已更新');
  };

  const handleRemoveDependency = (dep: string) => {
    toast.success(`依赖 ${dep} 已移除`);
  };

  const handleAddDependency = () => {
    toast.success('新依赖已添加');
  };

  if (!model) return null;

  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">
            <div className="flex items-center justify-between mb-4">
              <h4 className="flex items-center gap-2">
                <Package className="w-4 h-4 text-blue-600 dark:text-blue-400" />
                当前依赖 ({model.dependencies.length}个)
              </h4>
              <Button size="sm" variant="outline" onClick={handleAddDependency}>
                <Plus className="w-3 h-3 mr-1" />
                添加依赖
              </Button>
            </div>
            <div className="space-y-2">
              {model.dependencies.map((dep, idx) => (
                <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900 rounded-lg group">
                  <div className="flex items-center gap-3 flex-1">
                    <Package className="w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0" />
                    <code className="font-mono text-sm flex-1">{dep}</code>
                    <Badge variant="outline" className="text-xs font-light">已安装</Badge>
                  </div>
                  <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                    <Button size="sm" variant="ghost" onClick={handleUpdateDependency} title="更新版本">
                      <RefreshCw className="w-3 h-3" />
                    </Button>
                    <Button size="sm" variant="ghost" onClick={() => handleRemoveDependency(dep)} title="移除">
                      <Trash2 className="w-3 h-3" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </Card>

          {/* 依赖检查 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
              依赖健康检查
            </h4>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 bg-green-50 dark:bg-green-950 rounded-lg">
                <div className="flex items-center gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />
                  <div>
                    <div className="font-medium">所有依赖已安装</div>
                    <div className="text-xs text-muted-foreground">版本兼容性检查通过</div>
                  </div>
                </div>
                <Badge className="bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">正常</Badge>
              </div>
              <Button variant="outline" className="w-full">
                <RefreshCw className="w-4 h-4 mr-2" />
                重新检查依赖
              </Button>
            </div>
          </Card>

          {/* 依赖冲突检测 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <AlertCircle className="w-4 h-4 text-yellow-600 dark:text-yellow-400" />
              冲突检测
            </h4>
            <div className="p-4 bg-yellow-50 dark:bg-yellow-950 border border-yellow-200 dark:border-yellow-800 rounded-lg">
              <div className="flex items-start gap-3">
                <AlertCircle className="w-5 h-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" />
                <div className="flex-1">
                  <div className="font-medium text-yellow-900 dark:text-yellow-100 mb-2">发现潜在版本冲突</div>
                  <div className="text-sm text-yellow-800 dark:text-yellow-200 space-y-1">
                    <div>• numpy==1.24.0 与 tensorflow==2.13.0 可能存在兼容性问题</div>
                    <div>• 建议升级 numpy 到 1.24.3 或更高版本</div>
                  </div>
                  <Button size="sm" className="mt-3" variant="outline">
                    自动修复
                  </Button>
                </div>
              </div>
            </div>
          </Card>

          {/* 环境配置 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Settings className="w-4 h-4 text-purple-600 dark:text-purple-400" />
              环境配置
            </h4>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>Python版本</Label>
                <Select defaultValue="3.9">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="3.8">Python 3.8</SelectItem>
                    <SelectItem value="3.9">Python 3.9</SelectItem>
                    <SelectItem value="3.10">Python 3.10</SelectItem>
                    <SelectItem value="3.11">Python 3.11</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>CUDA版本</Label>
                <Select defaultValue="11.8">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">不使用CUDA</SelectItem>
                    <SelectItem value="11.7">CUDA 11.7</SelectItem>
                    <SelectItem value="11.8">CUDA 11.8</SelectItem>
                    <SelectItem value="12.0">CUDA 12.0</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </Card>

          {/* 依赖更新日志 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Clock className="w-4 h-4 text-gray-600 dark:text-gray-400" />
              更新历史
            </h4>
            <div className="space-y-2 max-h-[150px] overflow-y-auto">
              {[
                { date: '2024-10-20', action: '更新 tensorflow 2.12.0 → 2.13.0', user: '张三' },
                { date: '2024-10-15', action: '添加 opencv-python==4.8.0', user: '李四' },
                { date: '2024-10-10', action: '更新 numpy 1.23.0 → 1.24.0', user: '王五' },
              ].map((log, idx) => (
                <div key={idx} className="flex items-start gap-3 p-2 text-sm">
                  <Clock className="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" />
                  <div className="flex-1">
                    <div className="text-xs text-muted-foreground">{log.date}</div>
                    <div>{log.action}</div>
                    <div className="text-xs text-muted-foreground">by {log.user}</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
          <Button className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
            <Download className="w-4 h-4 mr-2" />
            导出依赖清单
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}