"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { Badge } from "@/components/ui/badge"
import { Save, Percent, Users, Wallet, Info } from "lucide-react"

type ReferralConfig = {
  distributorShare: number
  minWithdrawAmount: number
  bindingDays: number
  userDiscount: number
  enableAutoWithdraw: boolean
}

const DEFAULT_REFERRAL_CONFIG: ReferralConfig = {
  distributorShare: 90,
  minWithdrawAmount: 10,
  bindingDays: 30,
  userDiscount: 5,
  enableAutoWithdraw: false,
}

export default function ReferralSettingsPage() {
  const [config, setConfig] = useState<ReferralConfig>(DEFAULT_REFERRAL_CONFIG)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    const loadConfig = async () => {
      try {
        const res = await fetch("/api/db/config?key=referral_config")
        if (res.ok) {
          const data = await res.json()
          if (data?.success && data.config) {
            setConfig({
              distributorShare: data.config.distributorShare ?? 90,
              minWithdrawAmount: data.config.minWithdrawAmount ?? 10,
              bindingDays: data.config.bindingDays ?? 30,
              userDiscount: data.config.userDiscount ?? 5,
              enableAutoWithdraw: data.config.enableAutoWithdraw ?? false,
            })
          }
        }
      } catch (e) {
        console.error("加载 referral_config 失败:", e)
      } finally {
        setLoading(false)
      }
    }
    loadConfig()
  }, [])

  const handleSave = async () => {
    setSaving(true)
    try {
      // 确保所有字段都是正确类型（防止字符串导致计算错误）
      const safeConfig = {
        distributorShare: Number(config.distributorShare) || 0,
        minWithdrawAmount: Number(config.minWithdrawAmount) || 0,
        bindingDays: Number(config.bindingDays) || 0,
        userDiscount: Number(config.userDiscount) || 0,
        enableAutoWithdraw: Boolean(config.enableAutoWithdraw),
      }
      
      const body = {
        key: "referral_config",
        config: safeConfig,
        description: "分销 / 推广规则配置",
      }
      const res = await fetch("/api/db/config", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      })
      const data = await res.json()
      if (!res.ok || !data?.success) {
        alert("保存失败: " + (data?.error || res.statusText))
        return
      }
      
      alert("✅ 分销配置已保存成功！\n\n• 小程序与网站的推广规则会一起生效\n• 绑定关系会使用新的天数配置\n• 佣金比例会立即应用到新订单\n\n如有缓存，请刷新前台/小程序页面。")
    } catch (e: any) {
      console.error("保存 referral_config 失败:", e)
      alert("保存失败: " + (e?.message || String(e)))
    } finally {
      setSaving(false)
    }
  }

  const handleNumberChange = (field: keyof ReferralConfig) => (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseFloat(e.target.value || "0")
    setConfig((prev) => ({ ...prev, [field]: isNaN(value) ? 0 : value }))
  }

  return (
    <div className="p-8 max-w-4xl mx-auto">
      <div className="flex justify-between items-center mb-8">
        <div>
          <h2 className="text-2xl font-bold text-white flex items-center gap-2">
            <Wallet className="w-5 h-5 text-[#38bdac]" />
            推广 / 分销设置
          </h2>
          <p className="text-gray-400 mt-1">
            统一管理「好友优惠」「你得 90% 收益」「绑定期 30 天」「提现门槛」等规则，小程序和 Web 共用这套配置。
          </p>
        </div>
        <Button
          onClick={handleSave}
          disabled={saving || loading}
          className="bg-[#38bdac] hover:bg-[#2da396] text-white"
        >
          <Save className="w-4 h-4 mr-2" />
          {saving ? "保存中..." : "保存配置"}
        </Button>
      </div>

      <div className="space-y-6">
        {/* 核心规则卡片 */}
        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-white">
              <Percent className="w-4 h-4 text-[#38bdac]" />
              推广规则
            </CardTitle>
            <CardDescription className="text-gray-400">
              这三项会直接体现在小程序「推广规则」卡片上，同时影响实收佣金计算。
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="grid grid-cols-3 gap-6">
              <div className="space-y-2">
                <Label className="text-gray-300 flex items-center gap-2">
                  <Info className="w-3 h-3 text-[#38bdac]" />
                  好友优惠（%）
                </Label>
                <Input
                  type="number"
                  min={0}
                  max={100}
                  className="bg-[#0a1628] border-gray-700 text-white"
                  value={config.userDiscount}
                  onChange={handleNumberChange("userDiscount")}
                />
                <p className="text-xs text-gray-500">例如 5 表示好友立减 5%（在价格配置基础上生效）。</p>
              </div>

              <div className="space-y-2">
                <Label className="text-gray-300 flex items-center gap-2">
                  <Users className="w-3 h-3 text-[#38bdac]" />
                  推广者分成（%）
                </Label>
                <div className="flex items-center gap-4">
                  <Slider
                    className="flex-1"
                    min={10}
                    max={100}
                    step={1}
                    value={[config.distributorShare]}
                    onValueChange={([val]) => setConfig((prev) => ({ ...prev, distributorShare: val }))}
                  />
                  <Input
                    type="number"
                    min={0}
                    max={100}
                    className="w-20 bg-[#0a1628] border-gray-700 text-white text-center"
                    value={config.distributorShare}
                    onChange={handleNumberChange("distributorShare")}
                  />
                </div>
                <p className="text-xs text-gray-500">
                  实际佣金 = 订单金额 × {" "}
                  <span className="text-[#38bdac] font-mono">{config.distributorShare}%</span>，支付回调和分销统计都会用这个值。
                </p>
              </div>

              <div className="space-y-2">
                <Label className="text-gray-300 flex items-center gap-2">
                  <Users className="w-3 h-3 text-[#38bdac]" />
                  绑定有效期（天）
                </Label>
                <Input
                  type="number"
                  min={1}
                  max={365}
                  className="bg-[#0a1628] border-gray-700 text-white"
                  value={config.bindingDays}
                  onChange={handleNumberChange("bindingDays")}
                />
                <p className="text-xs text-gray-500">好友通过你的链接进来并登录后，绑定在你名下的天数。</p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 提现与自动提现 */}
        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-white">
              <Wallet className="w-4 h-4 text-[#38bdac]" />
              提现规则
            </CardTitle>
            <CardDescription className="text-gray-400">
              与「提现中心」「自动提现」相关的参数，影响推广者看到的可提现金额和最低门槛。
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="grid grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label className="text-gray-300">最低提现金额（元）</Label>
                <Input
                  type="number"
                  min={0}
                  step={1}
                  className="bg-[#0a1628] border-gray-700 text-white"
                  value={config.minWithdrawAmount}
                  onChange={handleNumberChange("minWithdrawAmount")}
                />
                <p className="text-xs text-gray-500">小程序「满 X 元可提现」展示的门槛，同时用于后端接口校验。</p>
              </div>

              <div className="space-y-2">
                <Label className="text-gray-300 flex items-center gap-2">
                  自动提现开关
                  <Badge variant="outline" className="border-[#38bdac]/40 text-[#38bdac] text-[10px]">
                    预留
                  </Badge>
                </Label>
                <div className="flex items-center gap-3 mt-1">
                  <Switch
                    checked={config.enableAutoWithdraw}
                    onCheckedChange={(checked) => setConfig((prev) => ({ ...prev, enableAutoWithdraw: checked }))}
                  />
                  <span className="text-sm text-gray-400">
                    开启后，可结合定时任务实现「收益自动打款到微信零钱」。
                  </span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 提示卡片 */}
        <Card className="bg-[#0f2137] border-gray-700/50">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-gray-200 text-sm">
              <Info className="w-4 h-4 text-[#38bdac]" />
              使用说明
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-2 text-xs text-gray-400 leading-relaxed">
            <p>
              1. 以上配置会写入 <code className="font-mono text-[11px] text-[#38bdac]">system_config.referral_config</code>，小程序「推广中心」、
              Web 推广页以及支付回调都会读取同一份配置。
            </p>
            <p>
              2. 修改后新订单立即生效；旧订单的历史佣金不会自动重算，只影响之后产生的订单。
            </p>
            <p>
              3. 如遇前端展示与实际结算不一致，优先以此处配置为准，再排查缓存和小程序版本。
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}