"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 { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { useStore } from "@/lib/store"
import { Save, Settings, Users, DollarSign, UserCircle, Calendar, MapPin, BookOpen, Gift, X, Plus, Smartphone } 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,
      startDate: settings.authorInfo?.startDate || "2025年10月15日",
      bio: settings.authorInfo?.bio || "连续创业者,私域运营专家,每天早上6-9点在Soul派对房分享真实商业故事",
    },
  })
  const [isSaving, setIsSaving] = useState(false)
  
  // 免费章节配置
  const [freeChapters, setFreeChapters] = useState<string[]>(['preface', 'epilogue', '1.1', 'appendix-1', 'appendix-2', 'appendix-3'])
  const [newFreeChapter, setNewFreeChapter] = useState('')
  
  // 小程序配置
  const [mpConfig, setMpConfig] = useState({
    appId: 'wxb8bbb2b10dec74aa',
    apiDomain: 'https://soul.quwanzhi.com',
    buyerDiscount: 5,  // 购买者优惠比例
    referralBindDays: 30,  // 推荐绑定天数
    minWithdraw: 10,  // 最低提现金额
  })
  
  // 功能开关配置
  const [featureConfig, setFeatureConfig] = useState({
    matchEnabled: true,        // 找伙伴功能开关（默认开启）
    referralEnabled: true,     // 推广功能开关
    searchEnabled: true,       // 搜索功能开关
    aboutEnabled: true         // 关于页面开关
  })
  
  // 加载配置
  useEffect(() => {
    const loadConfig = async () => {
      try {
        const res = await fetch('/api/db/config')
        if (res.ok) {
          const data = await res.json()
          if (data.freeChapters) setFreeChapters(data.freeChapters)
          if (data.mpConfig) setMpConfig(prev => ({ ...prev, ...data.mpConfig }))
          if (data.features) setFeatureConfig(prev => ({ ...prev, ...data.features }))
        }
      } catch (e) {
        console.log('Load config error:', e)
      }
    }
    loadConfig()
  }, [])

  useEffect(() => {
    setLocalSettings({
      sectionPrice: settings.sectionPrice,
      baseBookPrice: settings.baseBookPrice,
      distributorShare: settings.distributorShare,
      authorInfo: {
        ...settings.authorInfo,
        startDate: settings.authorInfo?.startDate || "2025年10月15日",
        bio: settings.authorInfo?.bio || "连续创业者,私域运营专家,每天早上6-9点在Soul派对房分享真实商业故事",
      },
    })
  }, [settings])

  const handleSave = async () => {
    setIsSaving(true)
    try {
      updateSettings(localSettings)
      
      // 同时保存到数据库
      await fetch('/api/db/settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(localSettings)
      })
      
      // 保存免费章节和小程序配置
      const res1 = await fetch('/api/db/config', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ freeChapters, mpConfig })
      })
      const result1 = await res1.json()
      console.log('保存免费章节和小程序配置:', result1)
      
      // 保存功能开关配置
      const res2 = await fetch('/api/db/config', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          key: 'feature_config', 
          config: featureConfig,
          description: '功能开关配置'
        })
      })
      const result2 = await res2.json()
      console.log('保存功能开关配置:', result2)
      
      // 验证保存结果
      const verifyRes = await fetch('/api/db/config')
      const verifyData = await verifyRes.json()
      console.log('验证保存结果:', verifyData.features)
      
      // 立即更新本地状态
      if (verifyData.features) {
        setFeatureConfig(prev => ({ ...prev, ...verifyData.features }))
      }
      
      alert("设置已保存！\n\n找伙伴功能：" + (verifyData.features?.matchEnabled ? "✅ 开启" : "❌ 关闭"))
    } catch (error) {
      console.error('Save settings error:', error)
      alert("保存失败: " + (error as Error).message)
    } finally {
      setIsSaving(false)
    }
  }
  
  // 添加免费章节
  const addFreeChapter = () => {
    if (newFreeChapter && !freeChapters.includes(newFreeChapter)) {
      setFreeChapters([...freeChapters, newFreeChapter])
      setNewFreeChapter('')
    }
  }
  
  // 移除免费章节
  const removeFreeChapter = (chapter: string) => {
    setFreeChapters(freeChapters.filter(c => c !== chapter))
  }

  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} 
          disabled={isSaving}
          className="bg-[#38bdac] hover:bg-[#2da396] text-white"
        >
          <Save className="w-4 h-4 mr-2" />
          {isSaving ? "保存中..." : "保存设置"}
        </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">
              <UserCircle 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 flex items-center gap-1">
                  <UserCircle className="w-3 h-3" />
                  主理人名称
                </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="start-date" className="text-gray-300 flex items-center gap-1">
                  <Calendar className="w-3 h-3" />
                  开播日期
                </Label>
                <Input
                  id="start-date"
                  className="bg-[#0a1628] border-gray-700 text-white"
                  placeholder="例如: 2025年10月15日"
                  value={localSettings.authorInfo.startDate || ""}
                  onChange={(e) =>
                    setLocalSettings((prev) => ({
                      ...prev,
                      authorInfo: { ...prev.authorInfo, startDate: e.target.value },
                    }))
                  }
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="live-time" className="text-gray-300 flex items-center gap-1">
                  <Calendar className="w-3 h-3" />
                  直播时间
                </Label>
                <Input
                  id="live-time"
                  className="bg-[#0a1628] border-gray-700 text-white"
                  placeholder="例如: 06:00-09:00"
                  value={localSettings.authorInfo.liveTime}
                  onChange={(e) =>
                    setLocalSettings((prev) => ({
                      ...prev,
                      authorInfo: { ...prev.authorInfo, liveTime: e.target.value },
                    }))
                  }
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="platform" className="text-gray-300 flex items-center gap-1">
                  <MapPin className="w-3 h-3" />
                  直播平台
                </Label>
                <Input
                  id="platform"
                  className="bg-[#0a1628] border-gray-700 text-white"
                  placeholder="例如: Soul派对房"
                  value={localSettings.authorInfo.platform}
                  onChange={(e) =>
                    setLocalSettings((prev) => ({
                      ...prev,
                      authorInfo: { ...prev.authorInfo, platform: e.target.value },
                    }))
                  }
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="description" className="text-gray-300 flex items-center gap-1">
                <BookOpen className="w-3 h-3" />
                简介描述
              </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>
            <div className="space-y-2">
              <Label htmlFor="bio" className="text-gray-300">详细介绍</Label>
              <Textarea
                id="bio"
                className="bg-[#0a1628] border-gray-700 text-white min-h-[100px]"
                placeholder="输入作者详细介绍..."
                value={localSettings.authorInfo.bio || ""}
                onChange={(e) =>
                  setLocalSettings((prev) => ({
                    ...prev,
                    authorInfo: { ...prev.authorInfo, bio: e.target.value },
                  }))
                }
              />
            </div>
            
            {/* 预览卡片 */}
            <div className="mt-4 p-4 rounded-xl bg-[#0a1628] border border-[#38bdac]/30">
              <p className="text-xs text-gray-500 mb-2">预览效果</p>
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-full bg-gradient-to-br from-[#00CED1] to-[#20B2AA] flex items-center justify-center text-xl font-bold text-white">
                  {localSettings.authorInfo.name?.charAt(0) || "K"}
                </div>
                <div>
                  <p className="text-white font-semibold">{localSettings.authorInfo.name}</p>
                  <p className="text-gray-400 text-xs">{localSettings.authorInfo.description}</p>
                  <p className="text-[#38bdac] text-xs mt-1">
                    每日 {localSettings.authorInfo.liveTime} · {localSettings.authorInfo.platform}
                  </p>
                </div>
              </div>
            </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">
              <Gift className="w-5 h-5 text-[#38bdac]" />
              免费章节
            </CardTitle>
            <CardDescription className="text-gray-400">设置哪些章节对所有用户免费开放</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-wrap gap-2">
              {freeChapters.map((chapter) => (
                <Badge 
                  key={chapter} 
                  variant="secondary" 
                  className="bg-[#38bdac]/20 text-[#38bdac] border border-[#38bdac]/30 px-3 py-1 text-sm"
                >
                  {chapter}
                  <button 
                    onClick={() => removeFreeChapter(chapter)}
                    className="ml-2 hover:text-red-400"
                  >
                    <X className="w-3 h-3" />
                  </button>
                </Badge>
              ))}
            </div>
            <div className="flex gap-2">
              <Input
                className="bg-[#0a1628] border-gray-700 text-white flex-1"
                placeholder="输入章节ID，如 1.2、2.1、preface"
                value={newFreeChapter}
                onChange={(e) => setNewFreeChapter(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && addFreeChapter()}
              />
              <Button 
                onClick={addFreeChapter}
                className="bg-[#38bdac] hover:bg-[#2da396]"
              >
                <Plus className="w-4 h-4 mr-1" />
                添加
              </Button>
            </div>
            <p className="text-xs text-gray-500">
              常用ID: preface(序言), epilogue(尾声), appendix-1/2/3(附录), 1.1/1.2等(章节)
            </p>
          </CardContent>
        </Card>

        {/* 功能开关设置 */}
        <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="space-y-4">
              {/* 找伙伴功能开关 */}
              <div className="flex items-center justify-between p-4 rounded-lg bg-[#0a1628] border border-gray-700/50">
                <div className="space-y-1">
                  <div className="flex items-center gap-2">
                    <Users className="w-4 h-4 text-[#38bdac]" />
                    <Label htmlFor="match-enabled" className="text-white font-medium cursor-pointer">
                      找伙伴功能
                    </Label>
                  </div>
                  <p className="text-xs text-gray-400 ml-6">
                    控制小程序和Web端的找伙伴功能显示
                  </p>
                </div>
                <Switch
                  id="match-enabled"
                  checked={featureConfig.matchEnabled}
                  onCheckedChange={(checked) => 
                    setFeatureConfig(prev => ({ ...prev, matchEnabled: checked }))
                  }
                />
              </div>
              
              {/* 推广功能开关 */}
              <div className="flex items-center justify-between p-4 rounded-lg bg-[#0a1628] border border-gray-700/50">
                <div className="space-y-1">
                  <div className="flex items-center gap-2">
                    <Gift className="w-4 h-4 text-[#38bdac]" />
                    <Label htmlFor="referral-enabled" className="text-white font-medium cursor-pointer">
                      推广功能
                    </Label>
                  </div>
                  <p className="text-xs text-gray-400 ml-6">
                    控制推广中心的显示（我的页面入口）
                  </p>
                </div>
                <Switch
                  id="referral-enabled"
                  checked={featureConfig.referralEnabled}
                  onCheckedChange={(checked) => 
                    setFeatureConfig(prev => ({ ...prev, referralEnabled: checked }))
                  }
                />
              </div>
              
              {/* 搜索功能开关 */}
              <div className="flex items-center justify-between p-4 rounded-lg bg-[#0a1628] border border-gray-700/50">
                <div className="space-y-1">
                  <div className="flex items-center gap-2">
                    <BookOpen className="w-4 h-4 text-[#38bdac]" />
                    <Label htmlFor="search-enabled" className="text-white font-medium cursor-pointer">
                      搜索功能
                    </Label>
                  </div>
                  <p className="text-xs text-gray-400 ml-6">
                    控制首页搜索栏的显示
                  </p>
                </div>
                <Switch
                  id="search-enabled"
                  checked={featureConfig.searchEnabled}
                  onCheckedChange={(checked) => 
                    setFeatureConfig(prev => ({ ...prev, searchEnabled: checked }))
                  }
                />
              </div>
              
              {/* 关于页面开关 */}
              <div className="flex items-center justify-between p-4 rounded-lg bg-[#0a1628] border border-gray-700/50">
                <div className="space-y-1">
                  <div className="flex items-center gap-2">
                    <Settings className="w-4 h-4 text-[#38bdac]" />
                    <Label htmlFor="about-enabled" className="text-white font-medium cursor-pointer">
                      关于页面
                    </Label>
                  </div>
                  <p className="text-xs text-gray-400 ml-6">
                    控制关于页面的访问
                  </p>
                </div>
                <Switch
                  id="about-enabled"
                  checked={featureConfig.aboutEnabled}
                  onCheckedChange={(checked) => 
                    setFeatureConfig(prev => ({ ...prev, aboutEnabled: checked }))
                  }
                />
              </div>
            </div>
            
            <div className="p-3 rounded-lg bg-blue-500/10 border border-blue-500/30">
              <p className="text-xs text-blue-300">
                💡 关闭功能后，相关入口会自动隐藏。建议在功能开发完成后再开启。
              </p>
            </div>
          </CardContent>
        </Card>

        {/* 小程序配置 */}
        <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
          <CardHeader>
            <CardTitle className="text-white flex items-center gap-2">
              <Smartphone 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">AppID</Label>
                <Input
                  className="bg-[#0a1628] border-gray-700 text-white"
                  value={mpConfig.appId}
                  onChange={(e) => setMpConfig(prev => ({ ...prev, appId: e.target.value }))}
                />
              </div>
              <div className="space-y-2">
                <Label className="text-gray-300">API域名</Label>
                <Input
                  className="bg-[#0a1628] border-gray-700 text-white"
                  value={mpConfig.apiDomain}
                  onChange={(e) => setMpConfig(prev => ({ ...prev, apiDomain: e.target.value }))}
                />
              </div>
            </div>
            <div className="grid grid-cols-3 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={mpConfig.buyerDiscount}
                  onChange={(e) => setMpConfig(prev => ({ ...prev, buyerDiscount: Number(e.target.value) }))}
                />
              </div>
              <div className="space-y-2">
                <Label className="text-gray-300">推荐绑定天数</Label>
                <Input
                  type="number"
                  className="bg-[#0a1628] border-gray-700 text-white"
                  value={mpConfig.referralBindDays}
                  onChange={(e) => setMpConfig(prev => ({ ...prev, referralBindDays: Number(e.target.value) }))}
                />
              </div>
              <div className="space-y-2">
                <Label className="text-gray-300">最低提现 (元)</Label>
                <Input
                  type="number"
                  className="bg-[#0a1628] border-gray-700 text-white"
                  value={mpConfig.minWithdraw}
                  onChange={(e) => setMpConfig(prev => ({ ...prev, minWithdraw: Number(e.target.value) }))}
                />
              </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" 
                checked={featureConfig.referralEnabled}
                onCheckedChange={(checked) => setFeatureConfig(prev => ({ ...prev, referralEnabled: checked }))}
              />
            </div>
            <div className="flex items-center justify-between">
              <Label htmlFor="match-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="match-enabled" 
                checked={featureConfig.matchEnabled}
                onCheckedChange={(checked) => setFeatureConfig(prev => ({ ...prev, matchEnabled: checked }))}
              />
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}