wzdj/app/admin/settings/page.tsx

"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { ArrowLeft, Save, Settings, Shield, Globe, CreditCard, Hotel, Ticket } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function AdminSettingsPage() {
  const router = useRouter()
  const [settings, setSettings] = useState({
    siteName: "玩值电竞",
    siteDescription: "专业游戏电竞社交平台",
    contactEmail: "support@wanzhi.com",
    contactPhone: "400-888-8888",
    enableRegistration: true,
    enablePawn: true,
    enableLive: true,
    enableMall: true,
    maintenanceMode: false,
    minPawnAmount: 5000,
    maxPawnPeriod: 30,
    pawnFeeRate: 0.05,
    rechargeBonus: 0.1,
    vipDiscount: 0.9,
  })

  const handleSave = () => {
    localStorage.setItem("admin_settings", JSON.stringify(settings))
    alert("设置已保存")
  }

  return (
    <div className="p-4 lg:p-6 max-w-[1600px] mx-auto">
      {/* 顶部导航 */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-4">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => router.push("/admin")}
            className="text-slate-500 hover:text-slate-800"
          >
            <ArrowLeft className="w-5 h-5" />
          </Button>
          <h1 className="text-2xl font-bold text-slate-800">系统设置</h1>
        </div>
        <Button onClick={handleSave} className="bg-indigo-500 text-white hover:bg-indigo-600 shadow-md">
          <Save className="w-4 h-4 mr-2" />
          保存设置
        </Button>
      </div>

      <Tabs defaultValue="general" className="space-y-6">
        <TabsList className="admin-glass rounded-xl border border-slate-200/80 bg-white/80">
          <TabsTrigger value="general" className="data-[state=active]:bg-indigo-500 data-[state=active]:text-white">
            <Settings className="w-4 h-4 mr-2" />
            基础设置
          </TabsTrigger>
          <TabsTrigger value="features" className="data-[state=active]:bg-indigo-500 data-[state=active]:text-white">
            <Shield className="w-4 h-4 mr-2" />
            功能开关
          </TabsTrigger>
          <TabsTrigger value="pawn" className="data-[state=active]:bg-indigo-500 data-[state=active]:text-white">
            <CreditCard className="w-4 h-4 mr-2" />
            典当配置
          </TabsTrigger>
          <TabsTrigger value="payment" className="data-[state=active]:bg-indigo-500 data-[state=active]:text-white">
            <Globe className="w-4 h-4 mr-2" />
            支付配置
          </TabsTrigger>
          <TabsTrigger value="channels" className="data-[state=active]:bg-indigo-500 data-[state=active]:text-white">
            <Hotel className="w-4 h-4 mr-2" />
            渠道配置
          </TabsTrigger>
        </TabsList>

        <TabsContent value="general">
          <Card className="admin-glass rounded-2xl border border-slate-200/80 shadow-lg overflow-hidden">
            <CardHeader>
              <CardTitle className="text-slate-800">基础信息</CardTitle>
              <CardDescription className="text-slate-500">配置平台基本信息</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-slate-600 mb-1 block">平台名称</label>
                  <Input
                    value={settings.siteName}
                    onChange={(e) => setSettings({ ...settings, siteName: e.target.value })}
                    className="bg-white border-slate-200 text-slate-800"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600 mb-1 block">平台描述</label>
                  <Input
                    value={settings.siteDescription}
                    onChange={(e) => setSettings({ ...settings, siteDescription: e.target.value })}
                    className="bg-white border-slate-200 text-slate-800"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600 mb-1 block">联系邮箱</label>
                  <Input
                    value={settings.contactEmail}
                    onChange={(e) => setSettings({ ...settings, contactEmail: e.target.value })}
                    className="bg-white border-slate-200 text-slate-800"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-600 mb-1 block">客服电话</label>
                  <Input
                    value={settings.contactPhone}
                    onChange={(e) => setSettings({ ...settings, contactPhone: e.target.value })}
                    className="bg-white border-slate-200 text-slate-800"
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="features">
          <Card className="admin-glass rounded-2xl border border-slate-200/80 shadow-lg overflow-hidden">
            <CardHeader>
              <CardTitle className="text-slate-800">功能开关</CardTitle>
              <CardDescription className="text-slate-500">控制平台功能模块</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-slate-800 font-medium">用户注册</p>
                  <p className="text-slate-500 text-sm">允许新用户注册账号</p>
                </div>
                <Switch
                  checked={settings.enableRegistration}
                  onCheckedChange={(v) => setSettings({ ...settings, enableRegistration: v })}
                />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-slate-800 font-medium">账号典当</p>
                  <p className="text-slate-500 text-sm">开启游戏账号典当功能</p>
                </div>
                <Switch
                  checked={settings.enablePawn}
                  onCheckedChange={(v) => setSettings({ ...settings, enablePawn: v })}
                />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-slate-800 font-medium">直播功能</p>
                  <p className="text-slate-500 text-sm">开启直播观看和互动</p>
                </div>
                <Switch
                  checked={settings.enableLive}
                  onCheckedChange={(v) => setSettings({ ...settings, enableLive: v })}
                />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-slate-800 font-medium">商城功能</p>
                  <p className="text-slate-500 text-sm">开启商城购物功能</p>
                </div>
                <Switch
                  checked={settings.enableMall}
                  onCheckedChange={(v) => setSettings({ ...settings, enableMall: v })}
                />
              </div>
              <div className="flex items-center justify-between border-t border-slate-200 pt-6">
                <div>
                  <p className="text-red-600 font-medium">维护模式</p>
                  <p className="text-slate-500 text-sm">开启后用户将无法访问平台</p>
                </div>
                <Switch
                  checked={settings.maintenanceMode}
                  onCheckedChange={(v) => setSettings({ ...settings, maintenanceMode: v })}
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="pawn">
          <Card className="admin-glass rounded-2xl border border-slate-200/80 shadow-lg overflow-hidden">
            <CardHeader>
              <CardTitle className="text-slate-800">典当配置</CardTitle>
              <CardDescription className="text-slate-500">配置账号典当业务参数</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-slate-500 mb-1 block">最低典当金额 (元)</label>
                  <Input
                    type="number"
                    value={settings.minPawnAmount}
                    onChange={(e) => setSettings({ ...settings, minPawnAmount: Number(e.target.value) })}
                    className="bg-white border-slate-200 text-slate-800"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-500 mb-1 block">最长典当期限 (天)</label>
                  <Input
                    type="number"
                    value={settings.maxPawnPeriod}
                    onChange={(e) => setSettings({ ...settings, maxPawnPeriod: Number(e.target.value) })}
                    className="bg-white border-slate-200 text-slate-800"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-500 mb-1 block">服务费率</label>
                  <Input
                    type="number"
                    step="0.01"
                    value={settings.pawnFeeRate}
                    onChange={(e) => setSettings({ ...settings, pawnFeeRate: Number(e.target.value) })}
                    className="bg-white border-slate-200 text-slate-800"
                  />
                  <p className="text-slate-500 text-xs mt-1">当前费率: {(settings.pawnFeeRate * 100).toFixed(1)}%</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="payment">
          <Card className="admin-glass rounded-2xl border border-slate-200/80 shadow-lg overflow-hidden">
            <CardHeader>
              <CardTitle className="text-slate-800">支付配置</CardTitle>
              <CardDescription className="text-slate-500">配置充值和支付参数</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-slate-500 mb-1 block">充值赠送比例</label>
                  <Input
                    type="number"
                    step="0.01"
                    value={settings.rechargeBonus}
                    onChange={(e) => setSettings({ ...settings, rechargeBonus: Number(e.target.value) })}
                    className="bg-white border-slate-200 text-slate-800"
                  />
                  <p className="text-slate-500 text-xs mt-1">充值送 {(settings.rechargeBonus * 100).toFixed(0)}%</p>
                </div>
                <div>
                  <label className="text-sm text-slate-500 mb-1 block">VIP折扣</label>
                  <Input
                    type="number"
                    step="0.01"
                    value={settings.vipDiscount}
                    onChange={(e) => setSettings({ ...settings, vipDiscount: Number(e.target.value) })}
                    className="bg-white border-slate-200 text-slate-800"
                  />
                  <p className="text-slate-500 text-xs mt-1">VIP享 {(settings.vipDiscount * 10).toFixed(1)} 折</p>
                </div>
              </div>
              <div className="border-t border-slate-200 pt-4">
                <h4 className="text-slate-800 font-medium mb-3">支付渠道</h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <Card className="admin-glass rounded-2xl border border-slate-200/80 shadow-lg overflow-hidden p-4">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-emerald-500/20 rounded-lg flex items-center justify-center">
                        <CreditCard className="w-5 h-5 text-emerald-400" />
                      </div>
                      <div>
                        <p className="text-slate-800 font-medium">微信支付</p>
                        <p className="text-emerald-400 text-xs">已开通</p>
                      </div>
                    </div>
                  </Card>
                  <Card className="admin-glass rounded-2xl border border-slate-200/80 shadow-lg overflow-hidden p-4">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-sky-500/20 rounded-lg flex items-center justify-center">
                        <CreditCard className="w-5 h-5 text-sky-400" />
                      </div>
                      <div>
                        <p className="text-slate-800 font-medium">支付宝</p>
                        <p className="text-sky-400 text-xs">已开通</p>
                      </div>
                    </div>
                  </Card>
                  <Card className="admin-glass rounded-2xl border border-slate-200/80 shadow-lg overflow-hidden p-4">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-amber-500/20 rounded-lg flex items-center justify-center">
                        <CreditCard className="w-5 h-5 text-amber-600" />
                      </div>
                      <div>
                        <p className="text-slate-800 font-medium">币支付</p>
                        <p className="text-amber-600 text-xs">已开通</p>
                      </div>
                    </div>
                  </Card>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="channels">
          <Card className="admin-glass rounded-2xl border border-slate-200/80 shadow-lg overflow-hidden">
            <CardHeader>
              <CardTitle className="text-slate-800">渠道配置</CardTitle>
              <CardDescription className="text-slate-500">美团酒店/网咖、游戏点卡供货与平台互通</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between p-4 rounded-lg bg-slate-800/50 border border-slate-200">
                <div className="flex items-center gap-3">
                  <Hotel className="w-8 h-8 text-amber-600" />
                  <div>
                    <p className="text-slate-800 font-medium">美团酒店 · 网咖</p>
                    <p className="text-slate-500 text-sm">对接美团酒店直连平台，同步 POI 与房态。需配置环境变量：MEITUAN_PARTNER_ID、MEITUAN_CLIENT_SECRET、MEITUAN_AES_KEY</p>
                  </div>
                </div>
                <span className="text-slate-500 text-sm">后台「酒店/网咖」页可同步</span>
              </div>
              <div className="flex items-center justify-between p-4 rounded-lg bg-slate-800/50 border border-slate-200">
                <div className="flex items-center gap-3">
                  <Ticket className="w-8 h-8 text-sky-400" />
                  <div>
                    <p className="text-slate-800 font-medium">游戏点卡 · 福禄</p>
                    <p className="text-slate-500 text-sm">福禄开放平台供货/直充，与平台点卡订单互通</p>
                  </div>
                </div>
                <Link href="/admin/points/channels">
                  <Button variant="outline" size="sm" className="border-blue-200 text-sky-400 hover:bg-blue-50">去配置</Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}