'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 { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { toast } from 'sonner';
import { CheckCircle, Upload } from 'lucide-react';

interface ModelService {
  id: string;
  name: string;
  version: string;
  type: string;
  format: string;
  description: string;
  accessLevel: string;
  tags: string[];
  dependencies: string[];
}

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

export function ModelEditDialog({ open, onOpenChange, model }: ModelEditDialogProps) {
  const handleSaveEdit = () => {
    toast.success('模型信息已更新');
    onOpenChange(false);
  };

  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">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label>模型名称</Label>
              <Input defaultValue={model.name} />
            </div>
            <div>
              <Label>模型版本</Label>
              <Input defaultValue={model.version} />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label>模型类型</Label>
              <Select defaultValue={model.type}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="作物生长预测">作物生长预测</SelectItem>
                  <SelectItem value="病虫害识别">病虫害识别</SelectItem>
                  <SelectItem value="产量预估">产量预估</SelectItem>
                  <SelectItem value="土壤分析">土壤分析</SelectItem>
                  <SelectItem value="灌溉优化">灌溉优化</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>模型格式</Label>
              <Select defaultValue={model.format}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="ONNX">ONNX</SelectItem>
                  <SelectItem value="TensorFlow">TensorFlow</SelectItem>
                  <SelectItem value="PyTorch">PyTorch</SelectItem>
                  <SelectItem value="Scikit-learn">Scikit-learn</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div>
            <Label>模型描述</Label>
            <Textarea defaultValue={model.description} rows={3} placeholder="描述模型的功能、适用场景等..." />
          </div>

          <div>
            <Label>模型文件</Label>
            <div className="border-2 border-dashed rounded-lg p-6 text-center">
              <Upload className="w-8 h-8 mx-auto text-muted-foreground mb-2" />
              <p className="text-sm text-muted-foreground mb-1">
                点击上传或拖拽模型文件到此区域
              </p>
              <p className="text-xs text-muted-foreground">
                支持 .onnx, .h5, .pb, .pt 等格式
              </p>
            </div>
          </div>

          <div>
            <Label>依赖包</Label>
            <Textarea defaultValue={model.dependencies.join('\n')} rows={3} placeholder="每行一个依赖，如：tensorflow==2.13.0" />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label>访问权限</Label>
              <Select defaultValue={model.accessLevel}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="公开">公开</SelectItem>
                  <SelectItem value="私有">私有</SelectItem>
                  <SelectItem value="团队共享">团队共享</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>标签</Label>
              <Input defaultValue={model.tags.join(', ')} placeholder="用逗号分隔，如：深度学习,CNN" />
            </div>
          </div>
        </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" onClick={handleSaveEdit}>
            <CheckCircle className="w-4 h-4 mr-2" />
            保存更改
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}