ckb-SuperAdmin/Cunkebao/app/workspace/traffic-distribution/new/components/basic-info-step.tsx

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Slider } from "@/components/ui/slider"
import { format } from "date-fns"

interface BasicInfoStepProps {
  onNext: (data: any) => void
  initialData?: any
}

export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoStepProps) {
  const [formData, setFormData] = useState({
    name: initialData.name ?? `流量分发 ${format(new Date(), "yyyyMMdd HHmm")}`,
    distributeType: initialData.distributeType ?? "1",
    maxPerDay: initialData.maxPerDay ?? 50,
    timeType: initialData.timeType ?? "2",
    startTime: initialData.startTime ?? "09:00",
    endTime: initialData.endTime ?? "18:00",
  })

  const handleChange = (field: string, value: any) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

  const handleSubmit = () => {
    onNext({
      name: formData.name,
      distributeType: Number(formData.distributeType),
      maxPerDay: formData.maxPerDay,
      timeType: Number(formData.timeType),
      startTime: formData.timeType == "2" ? formData.startTime : "09:00",
      endTime: formData.timeType == "2" ? formData.endTime : "21:00",
    })
  }

  return (
    <div className="bg-white rounded-lg p-6 shadow-sm">
      <h2 className="text-xl font-bold mb-6">基本信息</h2>

      <div className="space-y-6">
        <div className="space-y-2">
          <Label htmlFor="name" className="flex items-center">
            计划名称 <span className="text-red-500 ml-1">*</span>
          </Label>
          <Input
            id="name"
            value={formData.name}
            onChange={(e) => handleChange("name", e.target.value)}
            placeholder="请输入计划名称"
            required
          />
        </div>

        <div className="space-y-2">
          <Label>分配方式</Label>
          <RadioGroup
            value={String(formData.distributeType)}
            onValueChange={(value) => handleChange("distributeType", value)}
            className="space-y-2"
          >
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="1" id="equal" />
              <Label htmlFor="equal" className="cursor-pointer">
                均分配 <span className="text-gray-500 text-sm">(流量将均分配给所有客服)</span>
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="2" id="priority" />
              <Label htmlFor="priority" className="cursor-pointer">
                优先级分配 <span className="text-gray-500 text-sm">(按客服优先级顺序分配)</span>
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="3" id="ratio" />
              <Label htmlFor="ratio" className="cursor-pointer">
                比例分配 <span className="text-gray-500 text-sm">(按设定比例分配流量)</span>
              </Label>
            </div>
          </RadioGroup>
        </div>

        <div className="space-y-4">
          <Label>分配限制</Label>

          <div className="space-y-2">
            <div className="flex justify-between items-center">
              <span>每日最大分配量</span>
              <span className="font-medium">{formData.maxPerDay} 人/天</span>
            </div>
            <Slider
              value={[formData.maxPerDay]}
              min={1}
              max={200}
              step={1}
              onValueChange={(value) => handleChange("maxPerDay", value[0])}
              className="py-4"
            />
            <p className="text-sm text-gray-500">限制每天最多分配的流量数量</p>
          </div>

          <div className="space-y-4 pt-4">
            <Label>时间限制</Label>
            <RadioGroup
              value={String(formData.timeType)}
              onValueChange={(value) => handleChange("timeType", value)}
              className="space-y-4"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="1" id="allDay" />
                <Label htmlFor="allDay" className="cursor-pointer">
                  全天分配
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="2" id="custom" />
                <Label htmlFor="custom" className="cursor-pointer">
                  自定义时间段
                </Label>
              </div>
            </RadioGroup>

            {formData.timeType == "2" && (
              <div className="grid grid-cols-2 gap-4 pt-2">
                <div>
                  <Label htmlFor="startTime" className="mb-2 block">
                    开始时间
                  </Label>
                  <div className="relative">
                    <Input
                      id="startTime"
                      type="time"
                      value={formData.startTime}
                      onChange={(e) => handleChange("startTime", e.target.value)}
                    />
                  </div>
                </div>
                <div>
                  <Label htmlFor="endTime" className="mb-2 block">
                    结束时间
                  </Label>
                  <div className="relative">
                    <Input
                      id="endTime"
                      type="time"
                      value={formData.endTime}
                      onChange={(e) => handleChange("endTime", e.target.value)}
                    />
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="mt-8 flex justify-end">
        <Button onClick={handleSubmit} className="px-8">
          下一步 →
        </Button>
      </div>
    </div>
  )
}