"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ChevronLeft } from "lucide-react"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "@/app/lib/utils"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Switch } from "@/components/ui/switch"
import { Card } from "@/components/ui/card"

// 模拟标签数据
const tagOptions = [
  { value: "new_user", label: "新用户" },
  { value: "low_activity", label: "低活跃度" },
  { value: "high_spending", label: "高消费" },
  { value: "high_activity", label: "高活跃度" },
  { value: "potential", label: "潜在客户" },
  { value: "purchase_intent", label: "有购买意向" },
  { value: "holiday_consumer", label: "节日消费" },
  { value: "promotion_sensitive", label: "促销敏感" },
  { value: "tech_savvy", label: "科技爱好者" },
  { value: "luxury_buyer", label: "奢侈品买家" },
  { value: "price_sensitive", label: "价格敏感" },
  { value: "brand_loyal", label: "品牌忠诚" },
]

// 模拟区域数据
const regionOptions = [
  { value: "nationwide", label: "全国" },
  { value: "beijing", label: "北京" },
  { value: "shanghai", label: "上海" },
  { value: "guangzhou", label: "广州" },
  { value: "shenzhen", label: "深圳" },
  { value: "hangzhou", label: "杭州" },
  { value: "chengdu", label: "成都" },
  { value: "wuhan", label: "武汉" },
  { value: "east_china", label: "华东地区" },
  { value: "south_china", label: "华南地区" },
  { value: "north_china", label: "华北地区" },
  { value: "central_china", label: "华中地区" },
  { value: "tier_1", label: "一线城市" },
  { value: "tier_2", label: "二线城市" },
  { value: "tier_3", label: "三线城市" },
]

// 模拟设备数据
const deviceOptions = [
  { id: "1", name: "设备 A-001", status: "online" },
  { id: "2", name: "设备 B-002", status: "online" },
  { id: "3", name: "设备 C-003", status: "offline" },
  { id: "4", name: "设备 D-004", status: "online" },
  { id: "5", name: "设备 E-005", status: "online" },
]

type RuleType = "trafficPackage" | "distributionRule"

export default function NewDistributionPage() {
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(1)
  const [ruleType, setRuleType] = useState<RuleType>("trafficPackage")
  const [name, setName] = useState("")
  const [selectedTags, setSelectedTags] = useState<string[]>([])
  const [selectedRegions, setSelectedRegions] = useState<string[]>([])
  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
  const [selectAllDevices, setSelectAllDevices] = useState(false)
  const [deviceAddQuantity, setDeviceAddQuantity] = useState("10")
  const [price, setPrice] = useState("")
  const [tagsOpen, setTagsOpen] = useState(false)
  const [regionsOpen, setRegionsOpen] = useState(false)
  const [devicesOpen, setDevicesOpen] = useState(false)
  const [autoAdd, setAutoAdd] = useState(false)

  // 当选择"全部设备"时，自动选中所有设备
  const handleSelectAllDevices = (value: boolean) => {
    setSelectAllDevices(value)
    if (value) {
      setSelectedDevices(deviceOptions.map((device) => device.id))
    } else {
      setSelectedDevices([])
    }
  }

  const handleNext = () => {
    if (name.trim()) {
      setCurrentStep(2)
    } else {
      alert("请填写名称")
    }
  }

  const handlePrevious = () => {
    setCurrentStep(1)
  }

  const handleSubmit = () => {
    // 在实际应用中，这里会发送API请求保存数据
    console.log({
      ruleType,
      name,
      tags: selectedTags,
      regions: selectedRegions,
      devices: selectAllDevices ? "all" : selectedDevices,
      deviceAddQuantity: Number.parseInt(deviceAddQuantity),
      price: Number.parseFloat(price),
      autoAdd,
    })

    // 返回到列表页
    router.push("/workspace/pricing")
  }

  return (
    <div className="flex flex-col min-h-screen bg-gray-50">
      {/* 顶部栏 */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <Button variant="ghost" size="icon" onClick={() => router.push("/workspace/pricing")} className="mr-2">
            <ChevronLeft className="h-5 w-5" />
          </Button>
          <h1 className="text-lg font-medium">新建分发</h1>
          <div className="w-10"></div> {/* 占位，保持标题居中 */}
        </div>
      </header>

      {/* 进度条 */}
      <div className="bg-white border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center">
            <div className="flex-1">
              <div className="flex items-center">
                <div
                  className={`rounded-full h-8 w-8 flex items-center justify-center ${
                    currentStep >= 1 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
                  }`}
                >
                  1
                </div>
                <div className={`h-1 flex-1 mx-2 ${currentStep >= 2 ? "bg-blue-600" : "bg-gray-200"}`}></div>
                <div
                  className={`rounded-full h-8 w-8 flex items-center justify-center ${
                    currentStep >= 2 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
                  }`}
                >
                  2
                </div>
              </div>
            </div>
          </div>
          <div className="flex mt-2">
            <div className="flex-1 text-center text-sm font-medium">选择规则类型</div>
            <div className="flex-1 text-center text-sm font-medium">设置规则</div>
          </div>
        </div>
      </div>

      {/* 主内容区 */}
      <main className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {currentStep === 1 ? (
          <div className="space-y-6">
            <div className="space-y-4">
              <h2 className="text-lg font-medium">选择规则类型</h2>

              <RadioGroup
                value={ruleType}
                onValueChange={(value) => setRuleType(value as RuleType)}
                className="grid grid-cols-1 md:grid-cols-2 gap-4"
              >
                <Card
                  className={`p-4 cursor-pointer border-2 ${ruleType === "trafficPackage" ? "border-blue-500" : "border-transparent"}`}
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="trafficPackage" id="trafficPackage" />
                    <Label htmlFor="trafficPackage" className="cursor-pointer flex-1">
                      创建流量包
                    </Label>
                  </div>
                  <p className="mt-2 text-sm text-gray-500 pl-6">按照用户标签和地区创建流量包</p>
                </Card>
                <Card
                  className={`p-4 cursor-pointer border-2 ${ruleType === "distributionRule" ? "border-blue-500" : "border-transparent"}`}
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="distributionRule" id="distributionRule" />
                    <Label htmlFor="distributionRule" className="cursor-pointer flex-1">
                      创建分发规则
                    </Label>
                  </div>
                  <p className="mt-2 text-sm text-gray-500 pl-6">创建流量自动分发规则</p>
                </Card>
              </RadioGroup>
            </div>

            <div className="space-y-2">
              <Label htmlFor="name">{ruleType === "trafficPackage" ? "流量包名称" : "分发规则名称"}</Label>
              <Input
                id="name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder={ruleType === "trafficPackage" ? "请输入流量包名称" : "请输入分发规则名称"}
                required
              />
            </div>

            <div className="flex justify-end pt-4">
              <Button type="button" onClick={handleNext}>
                下一步
              </Button>
            </div>
          </div>
        ) : (
          <div className="space-y-6">
            <div>
              <h2 className="text-lg font-medium mb-4">设置规则</h2>

              {/* 用户标签选择 */}
              <div className="space-y-2 mb-6">
                <Label>用户标签</Label>
                <Popover open={tagsOpen} onOpenChange={setTagsOpen}>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      role="combobox"
                      aria-expanded={tagsOpen}
                      className="w-full justify-between h-auto min-h-10"
                    >
                      {selectedTags.length > 0 ? (
                        <div className="flex flex-wrap gap-1 py-1">
                          {selectedTags.map((tag) => (
                            <Badge key={tag} variant="secondary" className="mr-1">
                              {tagOptions.find((t) => t.value === tag)?.label}
                              <button
                                className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
                                onMouseDown={(e) => {
                                  e.preventDefault()
                                  e.stopPropagation()
                                  setSelectedTags(selectedTags.filter((t) => t !== tag))
                                }}
                              >
                                ✕
                              </button>
                            </Badge>
                          ))}
                        </div>
                      ) : (
                        <span className="text-muted-foreground">选择用户标签</span>
                      )}
                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-full p-0">
                    <Command>
                      <CommandInput placeholder="搜索标签..." />
                      <CommandList>
                        <CommandEmpty>未找到相关标签</CommandEmpty>
                        <CommandGroup>
                          <ScrollArea className="h-60">
                            {tagOptions.map((tag) => (
                              <CommandItem
                                key={tag.value}
                                value={tag.value}
                                onSelect={() => {
                                  setSelectedTags(
                                    selectedTags.includes(tag.value)
                                      ? selectedTags.filter((t) => t !== tag.value)
                                      : [...selectedTags, tag.value],
                                  )
                                }}
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    selectedTags.includes(tag.value) ? "opacity-100" : "opacity-0",
                                  )}
                                />
                                {tag.label}
                              </CommandItem>
                            ))}
                          </ScrollArea>
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
              </div>

              {/* 用户区域选择 */}
              <div className="space-y-2 mb-6">
                <Label>用户区域</Label>
                <Popover open={regionsOpen} onOpenChange={setRegionsOpen}>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      role="combobox"
                      aria-expanded={regionsOpen}
                      className="w-full justify-between h-auto min-h-10"
                    >
                      {selectedRegions.length > 0 ? (
                        <div className="flex flex-wrap gap-1 py-1">
                          {selectedRegions.map((region) => (
                            <Badge key={region} variant="outline" className="mr-1 bg-amber-50">
                              {regionOptions.find((r) => r.value === region)?.label}
                              <button
                                className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
                                onMouseDown={(e) => {
                                  e.preventDefault()
                                  e.stopPropagation()
                                  setSelectedRegions(selectedRegions.filter((r) => r !== region))
                                }}
                              >
                                ✕
                              </button>
                            </Badge>
                          ))}
                        </div>
                      ) : (
                        <span className="text-muted-foreground">选择用户区域</span>
                      )}
                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-full p-0">
                    <Command>
                      <CommandInput placeholder="搜索区域..." />
                      <CommandList>
                        <CommandEmpty>未找到相关区域</CommandEmpty>
                        <CommandGroup>
                          <ScrollArea className="h-60">
                            {regionOptions.map((region) => (
                              <CommandItem
                                key={region.value}
                                value={region.value}
                                onSelect={() => {
                                  setSelectedRegions(
                                    selectedRegions.includes(region.value)
                                      ? selectedRegions.filter((r) => r !== region.value)
                                      : [...selectedRegions, region.value],
                                  )
                                }}
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    selectedRegions.includes(region.value) ? "opacity-100" : "opacity-0",
                                  )}
                                />
                                {region.label}
                              </CommandItem>
                            ))}
                          </ScrollArea>
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
              </div>

              {/* 设备设置 */}
              <div className="space-y-4 mb-6">
                <h3 className="font-medium">设备范围设置</h3>

                <div className="flex items-center space-x-2">
                  <Switch id="selectAll" checked={selectAllDevices} onCheckedChange={handleSelectAllDevices} />
                  <Label htmlFor="selectAll">选择所有设备</Label>
                </div>

                {!selectAllDevices && (
                  <div className="space-y-2">
                    <Label>选择指定设备</Label>
                    <Popover open={devicesOpen} onOpenChange={setDevicesOpen}>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          role="combobox"
                          aria-expanded={devicesOpen}
                          className="w-full justify-between h-auto min-h-10"
                        >
                          {selectedDevices.length > 0 ? (
                            <div className="flex flex-wrap gap-1 py-1">
                              {selectedDevices.map((deviceId) => (
                                <Badge key={deviceId} variant="outline" className="mr-1">
                                  {deviceOptions.find((d) => d.id === deviceId)?.name}
                                  <button
                                    className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
                                    onMouseDown={(e) => {
                                      e.preventDefault()
                                      e.stopPropagation()
                                      setSelectedDevices(selectedDevices.filter((d) => d !== deviceId))
                                    }}
                                  >
                                    ✕
                                  </button>
                                </Badge>
                              ))}
                            </div>
                          ) : (
                            <span className="text-muted-foreground">选择设备</span>
                          )}
                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-full p-0">
                        <Command>
                          <CommandInput placeholder="搜索设备..." />
                          <CommandList>
                            <CommandEmpty>未找到相关设备</CommandEmpty>
                            <CommandGroup>
                              <ScrollArea className="h-60">
                                {deviceOptions.map((device) => (
                                  <CommandItem
                                    key={device.id}
                                    value={device.id}
                                    onSelect={() => {
                                      setSelectedDevices(
                                        selectedDevices.includes(device.id)
                                          ? selectedDevices.filter((d) => d !== device.id)
                                          : [...selectedDevices, device.id],
                                      )
                                    }}
                                  >
                                    <Check
                                      className={cn(
                                        "mr-2 h-4 w-4",
                                        selectedDevices.includes(device.id) ? "opacity-100" : "opacity-0",
                                      )}
                                    />
                                    {device.name}
                                    <span
                                      className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
                                        device.status === "online"
                                          ? "bg-green-100 text-green-800"
                                          : "bg-gray-100 text-gray-800"
                                      }`}
                                    >
                                      {device.status === "online" ? "在线" : "离线"}
                                    </span>
                                  </CommandItem>
                                ))}
                              </ScrollArea>
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                  </div>
                )}
              </div>

              {/* 单设备添加数量 */}
              <div className="space-y-2 mb-6">
                <Label htmlFor="deviceAddQuantity">单设备添加数量</Label>
                <Input
                  id="deviceAddQuantity"
                  type="number"
                  min="1"
                  value={deviceAddQuantity}
                  onChange={(e) => setDeviceAddQuantity(e.target.value)}
                  required
                />
              </div>

              {/* 价格设置 */}
              <div className="space-y-2 mb-6">
                <Label htmlFor="price">价格（元/人次）</Label>
                <div className="relative">
                  <span className="absolute left-3 top-1/2 transform -translate-y-1/2">¥</span>
                  <Input
                    id="price"
                    type="number"
                    step="0.01"
                    min="0"
                    value={price}
                    onChange={(e) => setPrice(e.target.value)}
                    placeholder="0.00"
                    className="pl-8"
                    required
                  />
                </div>
              </div>

              {/* 自动添加设置 */}
              <div className="flex items-center space-x-2 mb-6">
                <Switch id="autoAdd" checked={autoAdd} onCheckedChange={setAutoAdd} />
                <Label htmlFor="autoAdd">自动添加</Label>
              </div>
            </div>

            {/* 按钮组 */}
            <div className="flex justify-between pt-4">
              <Button type="button" variant="outline" onClick={handlePrevious}>
                上一步
              </Button>
              <Button type="button" onClick={handleSubmit}>
                确认
              </Button>
            </div>
          </div>
        )}
      </main>
    </div>
  )
}
