"use client"

import { useState } from "react"
import { Brain } from 'lucide-react'
import type { AnalysisTask, DatabaseInfo, ReportTemplate } from "@/types/ai-assistant"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { sanitizeText } from "@/lib/text-sanitize"

export default function CreateTaskDialog({
  databases,
  templates,
  onCreate,
}: {
  databases: DatabaseInfo[]
  templates: ReportTemplate[]
  onCreate: (task: AnalysisTask) => void
}) {
  const [open, setOpen] = useState(false)
  const [name, setName] = useState("")
  const [database, setDatabase] = useState("")
  const [template, setTemplate] = useState("")
  const [customPrompt, setCustomPrompt] = useState("")
  const [includeCharts, setIncludeCharts] = useState(true)
  const [includeRecommendations, setIncludeRecommendations] = useState(true)

  function submit() {
    const task: AnalysisTask = {
      id: `task_${Date.now()}`,
      name: name || "未命名任务",
      database: database || "未选择数据库",
      status: "pending",
      progress: 0,
      createdAt: new Date().toISOString(),
      description: sanitizeText(
        `${customPrompt}${
          includeCharts ? " | 包含图表" : ""
        }${includeRecommendations ? " | 包含AI建议" : ""}`,
      ),
    }
    onCreate(task)
    setOpen(false)
    setName("")
    setDatabase("")
    setTemplate("")
    setCustomPrompt("")
    setIncludeCharts(true)
    setIncludeRecommendations(true)
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button className="flex items-center gap-2">
          <Brain className="w-4 h-4" />
          创建分析任务
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>创建新的分析任务</DialogTitle>
        </DialogHeader>
        <div className="space-y-4 py-2">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="taskName">任务名称</Label>
              <Input id="taskName" value={name} onChange={(e) => setName(e.target.value)} placeholder="输入任务名称" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="database">选择数据库</Label>
              <Select value={database} onValueChange={setDatabase}>
                <SelectTrigger>
                  <SelectValue placeholder="选择要分析的数据库" />
                </SelectTrigger>
                <SelectContent>
                  {databases.map((db) => (
                    <SelectItem key={db.id} value={db.name}>
                      {db.name}（{db.type}）
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="template">报告模板</Label>
            <Select value={template} onValueChange={setTemplate}>
              <SelectTrigger>
                <SelectValue placeholder="选择报告模板" />
              </SelectTrigger>
              <SelectContent>
                {templates.map((t) => (
                  <SelectItem key={t.id} value={t.id}>
                    {t.name} - {t.category}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label htmlFor="customPrompt">自定义分析要求</Label>
            <Textarea
              id="customPrompt"
              rows={4}
              value={customPrompt}
              onChange={(e) => setCustomPrompt(e.target.value)}
              placeholder="描述希望 AI 重点分析的内容..."
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="flex items-center space-x-2">
              <Switch id="includeCharts" checked={includeCharts} onCheckedChange={setIncludeCharts} />
              <Label htmlFor="includeCharts">包含图表和可视化</Label>
            </div>
            <div className="flex items-center space-x-2">
              <Switch
                id="includeRecommendations"
                checked={includeRecommendations}
                onCheckedChange={setIncludeRecommendations}
              />
              <Label htmlFor="includeRecommendations">包含 AI 建议与推荐</Label>
            </div>
          </div>
        </div>
        <div className="flex justify-end gap-2">
          <Button variant="outline" onClick={() => setOpen(false)}>
            取消
          </Button>
          <Button onClick={submit}>开始分析</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}