"use client"

import { useState, useEffect } from "react"
import { useStore } from "@/lib/store"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Save, RefreshCw } from "lucide-react"

export default function PaymentConfigPage() {
  const { settings, updateSettings, fetchSettings } = useStore()
  const [loading, setLoading] = useState(false)
  const [localSettings, setLocalSettings] = useState(settings.paymentMethods)

  // Sync with store on mount
  useEffect(() => {
    setLocalSettings(settings.paymentMethods)
  }, [settings.paymentMethods])

  const handleSave = async () => {
    setLoading(true)
    // Update store (and local storage)
    updateSettings({ paymentMethods: localSettings })
    
    // Simulate API call delay
    await new Promise(resolve => setTimeout(resolve, 800))
    setLoading(false)
    alert("配置已保存！")
  }

  const handleRefresh = async () => {
    setLoading(true)
    await fetchSettings()
    setLoading(false)
  }

  const updateWechat = (field: string, value: any) => {
    setLocalSettings(prev => ({
      ...prev,
      wechat: { ...prev.wechat, [field]: value }
    }))
  }

  const updateAlipay = (field: string, value: any) => {
    setLocalSettings(prev => ({
      ...prev,
      alipay: { ...prev.alipay, [field]: value }
    }))
  }

  const updateUsdt = (field: string, value: any) => {
    setLocalSettings(prev => ({
      ...prev,
      usdt: { ...prev.usdt, [field]: value }
    }))
  }

  return (
    <div className="p-8 max-w-5xl mx-auto text-white">
      <div className="flex justify-between items-center mb-8">
        <div>
          <h1 className="text-2xl font-bold mb-2">支付配置</h1>
          <p className="text-gray-400">配置微信、支付宝及USDT支付参数</p>
        </div>
        <div className="flex gap-4">
          <Button variant="outline" onClick={handleRefresh} className="border-gray-600 text-gray-300 hover:text-white bg-transparent">
            <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
            同步配置
          </Button>
          <Button onClick={handleSave} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
            <Save className="w-4 h-4 mr-2" />
            保存配置
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 gap-8">
        {/* Wechat Pay */}
        <Card className="bg-[#1e293b] border-gray-700">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <div className="space-y-1">
              <CardTitle className="text-[#07C160] flex items-center gap-2">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.269-.03-.406-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/></svg>
                微信支付
              </CardTitle>
              <CardDescription className="text-gray-400">配置微信商户号及API密钥</CardDescription>
            </div>
            <Switch 
              checked={localSettings.wechat.enabled}
              onCheckedChange={(c) => updateWechat('enabled', c)}
            />
          </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-[#0f172a] border-gray-600 text-white" 
                  placeholder="wx..." 
                  value={localSettings.wechat.websiteAppId || ''}
                  onChange={(e) => updateWechat('websiteAppId', e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label className="text-gray-300">网站应用 AppSecret</Label>
                <Input 
                  type="password"
                  className="bg-[#0f172a] border-gray-600 text-white" 
                  placeholder="......" 
                  value={localSettings.wechat.websiteAppSecret || ''}
                  onChange={(e) => updateWechat('websiteAppSecret', e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label className="text-gray-300">商户号 (MchId)</Label>
                <Input 
                  className="bg-[#0f172a] border-gray-600 text-white" 
                  placeholder="160..." 
                  value={localSettings.wechat.merchantId || ''}
                  onChange={(e) => updateWechat('merchantId', e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label className="text-gray-300">API v3 密钥</Label>
                <Input 
                  type="password"
                  className="bg-[#0f172a] border-gray-600 text-white" 
                  placeholder="......" 
                  value={localSettings.wechat.apiKey || ''}
                  onChange={(e) => updateWechat('apiKey', e.target.value)}
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label className="text-gray-300">个人收款码 URL (兜底方案)</Label>
              <Input 
                className="bg-[#0f172a] border-gray-600 text-white" 
                placeholder="/images/wechat-pay.png" 
                value={localSettings.wechat.qrCode || ''}
                onChange={(e) => updateWechat('qrCode', e.target.value)}
              />
              <p className="text-xs text-gray-500">当未配置企业支付参数时，将显示此二维码进行个人收款</p>
            </div>
          </CardContent>
        </Card>

        {/* Alipay */}
        <Card className="bg-[#1e293b] border-gray-700">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <div className="space-y-1">
              <CardTitle className="text-[#1677FF] flex items-center gap-2">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8.77 20.62l9.92-4.33c-.12-.33-.24-.66-.38-.99-.14-.33-.3-.66-.47-.99H8.08c-2.2 0-3.99-1.79-3.99-3.99V8.08c0-2.2 1.79-3.99 3.99-3.99h7.84c2.2 0 3.99 1.79 3.99 3.99v2.24h-8.66c-.55 0-1 .45-1 1s.45 1 1 1h10.66c-.18 1.73-.71 3.36-1.53 4.83l-2.76 1.2c-.74-1.69-1.74-3.24-2.93-4.6-.52-.59-1.11-1.13-1.76-1.59H4.09v4.24c0 2.2 1.79 3.99 3.99 3.99h.69v.23z"/></svg>
                支付宝
              </CardTitle>
              <CardDescription className="text-gray-400">配置支付宝PID及密钥</CardDescription>
            </div>
            <Switch 
              checked={localSettings.alipay.enabled}
              onCheckedChange={(c) => updateAlipay('enabled', c)}
            />
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label className="text-gray-300">合作者身份 (PID)</Label>
                <Input 
                  className="bg-[#0f172a] border-gray-600 text-white" 
                  placeholder="2088..." 
                  value={localSettings.alipay.partnerId || ''}
                  onChange={(e) => updateAlipay('partnerId', e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label className="text-gray-300">安全校验码 (Key)</Label>
                <Input 
                  type="password"
                  className="bg-[#0f172a] border-gray-600 text-white" 
                  placeholder="......" 
                  value={localSettings.alipay.securityKey || ''}
                  onChange={(e) => updateAlipay('securityKey', e.target.value)}
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label className="text-gray-300">个人收款码 URL (兜底方案)</Label>
              <Input 
                className="bg-[#0f172a] border-gray-600 text-white" 
                placeholder="/images/alipay.png" 
                value={localSettings.alipay.qrCode || ''}
                onChange={(e) => updateAlipay('qrCode', e.target.value)}
              />
            </div>
          </CardContent>
        </Card>

        {/* USDT */}
        <Card className="bg-[#1e293b] border-gray-700">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <div className="space-y-1">
              <CardTitle className="text-[#26A17B] flex items-center gap-2">
                <span className="font-bold">₮</span> USDT支付
              </CardTitle>
              <CardDescription className="text-gray-400">配置区块链钱包地址</CardDescription>
            </div>
            <Switch 
              checked={localSettings.usdt.enabled}
              onCheckedChange={(c) => updateUsdt('enabled', c)}
            />
          </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 
                  className="bg-[#0f172a] border-gray-600 text-white" 
                  value={localSettings.usdt.network || 'TRC20'}
                  onChange={(e) => updateUsdt('network', e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label className="text-gray-300">汇率 (USD -&gt; CNY)</Label>
                <Input 
                  type="number"
                  className="bg-[#0f172a] border-gray-600 text-white" 
                  value={localSettings.usdt.exchangeRate || 7.2}
                  onChange={(e) => updateUsdt('exchangeRate', parseFloat(e.target.value))}
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label className="text-gray-300">钱包地址</Label>
              <Input 
                className="bg-[#0f172a] border-gray-600 text-white font-mono" 
                placeholder="T..." 
                value={localSettings.usdt.address || ''}
                onChange={(e) => updateUsdt('address', e.target.value)}
              />
            </div>
          </CardContent>
        </Card>

      </div>
    </div>
  )
}