import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { TagInput } from "./TagInput";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

export function CreateDialog({ open, onClose, onSubmit }: {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: { title: string, tags?: string[], link?: string, summary?: string, description?: string }) => Promise<void>;
}) {
  const [title, setTitle] = useState('');
  const [tags, setTags] = useState<string[]>([]);
  const [link, setLink] = useState('');
  const [summary, setSummary] = useState('');
  const [description, setDescription] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async () => {
    if (!title.trim()) {
      alert('请输入标题');
      return;
    }
    setSubmitting(true);
    try {
      await onSubmit({
        title: title.trim(),
        tags,
        link: link.trim(),
        summary: summary.trim(),
        description: description.trim(),
      });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="max-w-lg！">
        <DialogHeader>
          <DialogTitle>创建Workspace</DialogTitle>
          <DialogDescription>填写以下信息创建一个新的Workspace</DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="create-title">标题</Label>
            <Input
              id="create-title"
              value={title}
              onChange={e => setTitle(e.target.value)}
              placeholder="请输入标题"
            />
          </div>
          <div className="space-y-2">
            <Label>标签</Label>
            <TagInput value={tags} onChange={setTags} placeholder="输入标签后按回车添加" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="create-link">链接</Label>
            <Input
              id="create-link"
              value={link}
              onChange={e => setLink(e.target.value)}
              placeholder="https://..."
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="create-summary">摘要</Label>
            <Input
              id="create-summary"
              value={summary}
              onChange={e => setSummary(e.target.value)}
              placeholder="简要描述"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="create-description">描述</Label>
            <Textarea
              id="create-description"
              value={description}
              onChange={e => setDescription(e.target.value)}
              placeholder="详细描述..."
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={onClose} disabled={submitting}>取消</Button>
          <Button variant="outline" onClick={handleSubmit} disabled={submitting}>
            {submitting ? '创建中...' : '创建'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}