"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Info } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { toast } from "@/components/ui/use-toast"

export default function NewPaymentCodePage() {
  const router = useRouter()
  const [formData, setFormData] = useState({
    name: "",
    amount: "",
    description: "",
    paymentMethod: "wechat",
    amountType: "fixed",
    enableDistribution: false,
    distributionType: "percentage",
    distributionValue: "",
    enableRedPacket: false,
    redPacketAmount: "",
    enableAutoWelcome: false,
    welcomeMessage: "",
    tags: [],
  })

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

  const handleSubmit = () => {
    // 表单验证
    if (!formData.name) {
      toast({
        title: "请输入付款码名称",
        variant: "destructive",
      })
      return
    }

    if (formData.amountType === "fixed" && !formData.amount) {
      toast({
        title: "请输入付款金额",
        variant: "destructive",
      })
      return
    }

    // 模拟API调用
    setTimeout(() => {
      toast({
        title: "付款码创建成功",
        description: "您可以在付款码列表中查看和管理",
      })
      router.push("/scenarios/payment")
    }, 1000)
  }

  return (
    <div className="flex flex-col min-h-screen bg-gray-50">
      {/* 头部 */}
      <header className="sticky top-0 z-10 bg-white border-b">
        <div className="flex items-center justify-between h-14 px-4">
          <div className="flex items-center">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="ml-2 text-lg font-medium">新建付款码</h1>
          </div>
        </div>
      </header>

      {/* 表单内容 */}
      <div className="flex-1 p-4 pb-20">
        <Card className="mb-4">
          <CardContent className="p-4 space-y-4">
            <h2 className="font-medium">基本信息</h2>

            <div className="space-y-2">
              <Label htmlFor="name">付款码名称</Label>
              <Input
                id="name"
                placeholder="请输入付款码名称"
                value={formData.name}
                onChange={(e) => handleChange("name", e.target.value)}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="paymentMethod">支付方式</Label>
              <Select value={formData.paymentMethod} onValueChange={(value) => handleChange("paymentMethod", value)}>
                <SelectTrigger id="paymentMethod">
                  <SelectValue placeholder="选择支付方式" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="wechat">微信支付</SelectItem>
                  <SelectItem value="alipay">支付宝</SelectItem>
                  <SelectItem value="both">微信和支付宝</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label>金额设置</Label>
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Info className="h-4 w-4 text-gray-400" />
                    </TooltipTrigger>
                    <TooltipContent>
                      <p className="w-[200px] text-xs">
                        固定金额：生成固定金额的付款码
                        <br />
                        自由金额：用户可自行输入支付金额
                      </p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </div>
              <RadioGroup
                value={formData.amountType}
                onValueChange={(value) => handleChange("amountType", value)}
                className="flex flex-col space-y-1"
              >
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="fixed" id="fixed" />
                  <Label htmlFor="fixed">固定金额</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="free" id="free" />
                  <Label htmlFor="free">自由金额</Label>
                </div>
              </RadioGroup>
            </div>

            {formData.amountType === "fixed" && (
              <div className="space-y-2">
                <Label htmlFor="amount">付款金额 (元)</Label>
                <Input
                  id="amount"
                  type="number"
                  step="0.01"
                  placeholder="请输入付款金额"
                  value={formData.amount}
                  onChange={(e) => handleChange("amount", e.target.value)}
                />
              </div>
            )}

            <div className="space-y-2">
              <Label htmlFor="description">付款描述</Label>
              <Textarea
                id="description"
                placeholder="请输入付款描述，用户支付时可见"
                value={formData.description}
                onChange={(e) => handleChange("description", e.target.value)}
                rows={3}
              />
            </div>
          </CardContent>
        </Card>

        <Card className="mb-4">
          <CardContent className="p-4 space-y-4">
            <h2 className="font-medium">高级设置</h2>

            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <Label htmlFor="enableDistribution">启用分销返利</Label>
                <p className="text-xs text-gray-500">开启后，用户付款可触发分销返利</p>
              </div>
              <Switch
                id="enableDistribution"
                checked={formData.enableDistribution}
                onCheckedChange={(checked) => handleChange("enableDistribution", checked)}
              />
            </div>

            {formData.enableDistribution && (
              <div className="space-y-4 pl-4 border-l-2 border-blue-100">
                <div className="space-y-2">
                  <Label htmlFor="distributionType">返利类型</Label>
                  <Select
                    value={formData.distributionType}
                    onValueChange={(value) => handleChange("distributionType", value)}
                  >
                    <SelectTrigger id="distributionType">
                      <SelectValue placeholder="选择返利类型" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="percentage">比例返利</SelectItem>
                      <SelectItem value="fixed">固定金额</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="distributionValue">
                    {formData.distributionType === "percentage" ? "返利比例 (%)" : "返利金额 (元)"}
                  </Label>
                  <Input
                    id="distributionValue"
                    type="number"
                    step={formData.distributionType === "percentage" ? "1" : "0.01"}
                    placeholder={formData.distributionType === "percentage" ? "例如：10" : "例如：5"}
                    value={formData.distributionValue}
                    onChange={(e) => handleChange("distributionValue", e.target.value)}
                  />
                </div>
              </div>
            )}

            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <Label htmlFor="enableRedPacket">启用红包奖励</Label>
                <p className="text-xs text-gray-500">开启后，用户付款可获得红包奖励</p>
              </div>
              <Switch
                id="enableRedPacket"
                checked={formData.enableRedPacket}
                onCheckedChange={(checked) => handleChange("enableRedPacket", checked)}
              />
            </div>

            {formData.enableRedPacket && (
              <div className="space-y-2 pl-4 border-l-2 border-blue-100">
                <Label htmlFor="redPacketAmount">红包金额 (元)</Label>
                <Input
                  id="redPacketAmount"
                  type="number"
                  step="0.01"
                  placeholder="例如：5"
                  value={formData.redPacketAmount}
                  onChange={(e) => handleChange("redPacketAmount", e.target.value)}
                />
              </div>
            )}

            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <Label htmlFor="enableAutoWelcome">自动欢迎语</Label>
                <p className="text-xs text-gray-500">开启后，用户付款成功后自动发送欢迎语</p>
              </div>
              <Switch
                id="enableAutoWelcome"
                checked={formData.enableAutoWelcome}
                onCheckedChange={(checked) => handleChange("enableAutoWelcome", checked)}
              />
            </div>

            {formData.enableAutoWelcome && (
              <div className="space-y-2 pl-4 border-l-2 border-blue-100">
                <Label htmlFor="welcomeMessage">欢迎语内容</Label>
                <Textarea
                  id="welcomeMessage"
                  placeholder="请输入欢迎语内容"
                  value={formData.welcomeMessage}
                  onChange={(e) => handleChange("welcomeMessage", e.target.value)}
                  rows={3}
                />
              </div>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4 space-y-4">
            <h2 className="font-medium">客户标签设置</h2>
            <p className="text-sm text-gray-500">设置通过此付款码添加的客户自动打上的标签</p>

            <div className="flex flex-wrap gap-2">
              <Button variant="outline" size="sm" className="rounded-full">
                付款客户
              </Button>
              <Button variant="outline" size="sm" className="rounded-full">
                高价值
              </Button>
              <Button variant="outline" size="sm" className="rounded-full">
                已成交
              </Button>
              <Button variant="outline" size="sm" className="rounded-full text-blue-500">
                + 添加标签
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 底部操作栏 */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t p-4 flex justify-between">
        <Button variant="outline" onClick={() => router.back()}>
          取消
        </Button>
        <Button onClick={handleSubmit}>创建付款码</Button>
      </div>
    </div>
  )
}