"use client"

import { useState, useEffect } 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 { useStore } from "@/lib/store"
import { Save, Settings, Users, DollarSign } from "lucide-react"

export default function SettingsPage() {
  const { settings, updateSettings } = useStore()
  const [localSettings, setLocalSettings] = useState({
    sectionPrice: settings.sectionPrice,
    baseBookPrice: settings.baseBookPrice,
    distributorShare: settings.distributorShare,
    authorInfo: settings.authorInfo,
  })

  useEffect(() => {
    setLocalSettings({
      sectionPrice: settings.sectionPrice,
      baseBookPrice: settings.baseBookPrice,
      distributorShare: settings.distributorShare,
      authorInfo: settings.authorInfo,
    })
  }, [settings])

  const handleSave = () => {
    updateSettings(localSettings)
    alert("设置已保存！")
  }

  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">系统设置</h2>
          <p className="text-gray-400 mt-1">配置全站基础参数与开关</p>
        </div>
        <Button onClick={handleSave} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
          <Save className="w-4 h-4 mr-2" />
          保存设置
        </Button>
      </div>

      <div className="space-y-6">
        {/* 基础信息 */}
        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
          <CardHeader>
            <CardTitle className="text-white flex items-center gap-2">
              <Settings className="w-5 h-5 text-[#38bdac]" />
              基础信息
            </CardTitle>
            <CardDescription className="text-gray-400">网站显示的基本信息配置</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="author-name" className="text-gray-300">
                  主理人名称
                </Label>
                <Input
                  id="author-name"
                  className="bg-[#0a1628] border-gray-700 text-white"
                  value={localSettings.authorInfo.name}
                  onChange={(e) =>
                    setLocalSettings((prev) => ({
                      ...prev,
                      authorInfo: { ...prev.authorInfo, name: e.target.value },
                    }))
                  }
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="live-time" className="text-gray-300">
                  直播时间
                </Label>
                <Input
                  id="live-time"
                  className="bg-[#0a1628] border-gray-700 text-white"
                  value={localSettings.authorInfo.liveTime}
                  onChange={(e) =>
                    setLocalSettings((prev) => ({
                      ...prev,
                      authorInfo: { ...prev.authorInfo, liveTime: e.target.value },
                    }))
                  }
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="description" className="text-gray-300">
                简介描述
              </Label>
              <Input
                id="description"
                className="bg-[#0a1628] border-gray-700 text-white"
                value={localSettings.authorInfo.description}
                onChange={(e) =>
                  setLocalSettings((prev) => ({
                    ...prev,
                    authorInfo: { ...prev.authorInfo, description: e.target.value },
                  }))
                }
              />
            </div>
          </CardContent>
        </Card>

        {/* 价格设置 */}
        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
          <CardHeader>
            <CardTitle className="text-white flex items-center gap-2">
              <DollarSign className="w-5 h-5 text-[#38bdac]" />
              价格设置
            </CardTitle>
            <CardDescription className="text-gray-400">配置书籍和章节的定价</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label className="text-gray-300">单节价格 (元)</Label>
                <Input
                  type="number"
                  className="bg-[#0a1628] border-gray-700 text-white"
                  value={localSettings.sectionPrice}
                  onChange={(e) =>
                    setLocalSettings((prev) => ({
                      ...prev,
                      sectionPrice: Number.parseFloat(e.target.value) || 1,
                    }))
                  }
                />
              </div>
              <div className="space-y-2">
                <Label className="text-gray-300">整本价格 (元)</Label>
                <Input
                  type="number"
                  className="bg-[#0a1628] border-gray-700 text-white"
                  value={localSettings.baseBookPrice}
                  onChange={(e) =>
                    setLocalSettings((prev) => ({
                      ...prev,
                      baseBookPrice: Number.parseFloat(e.target.value) || 9.9,
                    }))
                  }
                />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 分销设置 */}
        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
          <CardHeader>
            <CardTitle className="text-white flex items-center gap-2">
              <Users className="w-5 h-5 text-[#38bdac]" />
              分销设置
            </CardTitle>
            <CardDescription className="text-gray-400">配置分销比例和奖励规则</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-4">
              <div className="flex justify-between items-center">
                <Label className="text-gray-300">分销者分成比例</Label>
                <span className="text-2xl font-bold text-[#38bdac]">{localSettings.distributorShare}%</span>
              </div>
              <Slider
                value={[localSettings.distributorShare]}
                onValueChange={([value]) =>
                  setLocalSettings((prev) => ({
                    ...prev,
                    distributorShare: value,
                  }))
                }
                max={100}
                step={5}
                className="w-full"
              />
              <div className="flex justify-between text-sm text-gray-400">
                <span>作者获得: {100 - localSettings.distributorShare}%</span>
                <span>分销者获得: {localSettings.distributorShare}%</span>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 功能开关 */}
        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
          <CardHeader>
            <CardTitle className="text-white">功能开关</CardTitle>
            <CardDescription className="text-gray-400">控制系统核心模块的启用状态</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex items-center justify-between">
              <Label htmlFor="maintenance-mode" className="flex flex-col space-y-1">
                <span className="text-white">维护模式</span>
                <span className="font-normal text-xs text-gray-500">启用后前台将显示维护中页面</span>
              </Label>
              <Switch id="maintenance-mode" />
            </div>
            <div className="flex items-center justify-between">
              <Label htmlFor="payment-enabled" className="flex flex-col space-y-1">
                <span className="text-white">全站支付</span>
                <span className="font-normal text-xs text-gray-500">关闭后所有支付功能将暂停</span>
              </Label>
              <Switch id="payment-enabled" defaultChecked />
            </div>
            <div className="flex items-center justify-between">
              <Label htmlFor="referral-enabled" className="flex flex-col space-y-1">
                <span className="text-white">分销系统</span>
                <span className="font-normal text-xs text-gray-500">是否允许用户生成邀请链接</span>
              </Label>
              <Switch id="referral-enabled" defaultChecked />
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}