"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { CalendarIcon, Plus, Tag, X } from "lucide-react"
import { format } from "date-fns"
import { cn } from "@/lib/utils"

export function TaskCreation() {
  const [selectedTags, setSelectedTags] = useState<string[]>([])
  const [newTag, setNewTag] = useState("")
  const [date, setDate] = useState<Date>()

  const addTag = () => {
    if (newTag && !selectedTags.includes(newTag)) {
      setSelectedTags([...selectedTags, newTag])
      setNewTag("")
    }
  }

  const removeTag = (tag: string) => {
    setSelectedTags(selectedTags.filter((t) => t !== tag))
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>创建标签任务</CardTitle>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="basic" className="space-y-4">
          <TabsList>
            <TabsTrigger value="basic">基本信息</TabsTrigger>
            <TabsTrigger value="target">目标设置</TabsTrigger>
            <TabsTrigger value="action">动作配置</TabsTrigger>
            <TabsTrigger value="schedule">计划设置</TabsTrigger>
          </TabsList>

          <TabsContent value="basic" className="space-y-4">
            <div className="grid grid-cols-1 gap-4">
              <div className="space-y-2">
                <Label htmlFor="task-name">任务名称</Label>
                <Input id="task-name" placeholder="输入任务名称" />
              </div>

              <div className="space-y-2">
                <Label htmlFor="task-description">任务描述</Label>
                <Textarea id="task-description" placeholder="输入任务描述" />
              </div>

              <div className="space-y-2">
                <Label htmlFor="platform">目标平台</Label>
                <Select>
                  <SelectTrigger id="platform">
                    <SelectValue placeholder="选择目标平台" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="jd">京东</SelectItem>
                    <SelectItem value="taobao">淘宝</SelectItem>
                    <SelectItem value="dangdang">当当网</SelectItem>
                    <SelectItem value="xiaohongshu">小红书</SelectItem>
                    <SelectItem value="zhihu">知乎</SelectItem>
                    <SelectItem value="bilibili">哔哩哔哩</SelectItem>
                    <SelectItem value="douyin">抖音</SelectItem>
                    <SelectItem value="other">其他平台</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="priority">任务优先级</Label>
                <Select defaultValue="medium">
                  <SelectTrigger id="priority">
                    <SelectValue placeholder="选择优先级" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="high">高</SelectItem>
                    <SelectItem value="medium">中</SelectItem>
                    <SelectItem value="low">低</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="target" className="space-y-4">
            <div className="grid grid-cols-1 gap-4">
              <div className="space-y-2">
                <Label>目标用户标签</Label>
                <div className="flex flex-wrap gap-2 mb-2">
                  {selectedTags.map((tag) => (
                    <Badge key={tag} variant="outline" className="flex items-center gap-1">
                      <Tag className="h-3 w-3" />
                      {tag}
                      <button onClick={() => removeTag(tag)} className="ml-1">
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  ))}
                </div>
                <div className="flex space-x-2">
                  <Input
                    placeholder="输入标签名称"
                    value={newTag}
                    onChange={(e) => setNewTag(e.target.value)}
                    onKeyDown={(e) => e.key === "Enter" && addTag()}
                  />
                  <Button type="button" size="sm" onClick={addTag}>
                    <Plus className="h-4 w-4" />
                  </Button>
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="user-segment">用户分群</Label>
                <Select>
                  <SelectTrigger id="user-segment">
                    <SelectValue placeholder="选择用户分群" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部用户</SelectItem>
                    <SelectItem value="active">活跃用户</SelectItem>
                    <SelectItem value="new">新注册用户</SelectItem>
                    <SelectItem value="high-value">高价值用户</SelectItem>
                    <SelectItem value="inactive">不活跃用户</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="user-count">目标用户数量</Label>
                <Input id="user-count" type="number" placeholder="输入目标用户数量" />
              </div>

              <div className="space-y-2">
                <Label htmlFor="sampling-method">抽样方式</Label>
                <Select defaultValue="random">
                  <SelectTrigger id="sampling-method">
                    <SelectValue placeholder="选择抽样方式" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="random">随机抽样</SelectItem>
                    <SelectItem value="stratified">分层抽样</SelectItem>
                    <SelectItem value="systematic">系统抽样</SelectItem>
                    <SelectItem value="all">全量用户</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="action" className="space-y-4">
            <div className="grid grid-cols-1 gap-4">
              <div className="space-y-2">
                <Label htmlFor="action-type">动作类型</Label>
                <Select>
                  <SelectTrigger id="action-type">
                    <SelectValue placeholder="选择动作类型" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="login">登录检测</SelectItem>
                    <SelectItem value="purchase">购买记录检测</SelectItem>
                    <SelectItem value="browse">浏览行为检测</SelectItem>
                    <SelectItem value="search">搜索行为检测</SelectItem>
                    <SelectItem value="content">内容偏好检测</SelectItem>
                    <SelectItem value="custom">自定义动作</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="action-params">动作参数</Label>
                <Textarea id="action-params" placeholder="输入动作参数（JSON格式）" />
              </div>

              <div className="space-y-2">
                <Label htmlFor="success-criteria">成功标准</Label>
                <Select>
                  <SelectTrigger id="success-criteria">
                    <SelectValue placeholder="选择成功标准" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="login-success">登录成功</SelectItem>
                    <SelectItem value="purchase-complete">完成购买</SelectItem>
                    <SelectItem value="browse-time">浏览时间超过阈值</SelectItem>
                    <SelectItem value="search-count">搜索次数超过阈值</SelectItem>
                    <SelectItem value="content-interaction">内容互动</SelectItem>
                    <SelectItem value="custom">自定义标准</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label>新增标签设置</Label>
                <div className="space-y-2">
                  <div className="flex items-center space-x-2">
                    <Input placeholder="输入新标签名称" />
                    <Select>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="标签分类" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="behavior">行为特征</SelectItem>
                        <SelectItem value="preference">偏好特征</SelectItem>
                        <SelectItem value="value">价值特征</SelectItem>
                        <SelectItem value="lifecycle">生命周期</SelectItem>
                        <SelectItem value="custom">自定义分类</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button type="button" size="sm">
                      <Plus className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>

              <div className="space-y-2">
                <div className="flex items-center space-x-2">
                  <Switch id="auto-apply" />
                  <Label htmlFor="auto-apply">自动应用标签</Label>
                </div>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="schedule" className="space-y-4">
            <div className="grid grid-cols-1 gap-4">
              <div className="space-y-2">
                <Label htmlFor="execution-mode">执行模式</Label>
                <Select defaultValue="immediate">
                  <SelectTrigger id="execution-mode">
                    <SelectValue placeholder="选择执行模式" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="immediate">立即执行</SelectItem>
                    <SelectItem value="scheduled">定时执行</SelectItem>
                    <SelectItem value="recurring">周期执行</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label>计划执行时间</Label>
                <Popover>
                  <PopoverTrigger asChild>
                    <Button
                      variant={"outline"}
                      className={cn("w-full justify-start text-left font-normal", !date && "text-muted-foreground")}
                    >
                      <CalendarIcon className="mr-2 h-4 w-4" />
                      {date ? format(date, "PPP") : "选择日期"}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0">
                    <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
                  </PopoverContent>
                </Popover>
              </div>

              <div className="space-y-2">
                <Label htmlFor="execution-time">执行时间</Label>
                <Input id="execution-time" type="time" />
              </div>

              <div className="space-y-2">
                <Label htmlFor="recurrence-pattern">重复模式</Label>
                <Select disabled={true}>
                  <SelectTrigger id="recurrence-pattern">
                    <SelectValue placeholder="选择重复模式" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="daily">每天</SelectItem>
                    <SelectItem value="weekly">每周</SelectItem>
                    <SelectItem value="monthly">每月</SelectItem>
                    <SelectItem value="custom">自定义</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <div className="flex items-center space-x-2">
                  <Switch id="notify-completion" />
                  <Label htmlFor="notify-completion">任务完成通知</Label>
                </div>
              </div>
            </div>
          </TabsContent>
        </Tabs>

        <div className="flex justify-end space-x-2 mt-6">
          <Button variant="outline">取消</Button>
          <Button>创建任务</Button>
        </div>
      </CardContent>
    </Card>
  )
}