"use client"

import { useState, useEffect } from "react"
import { 
  Users, TrendingUp, Clock, Wallet, Search, RefreshCw, 
  CheckCircle, XCircle, Zap, Calendar, DollarSign, Link2, Eye
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

// 类型定义
interface DistributionOverview {
  todayClicks: number
  todayBindings: number
  todayConversions: number
  todayEarnings: number
  monthClicks: number
  monthBindings: number
  monthConversions: number
  monthEarnings: number
  totalClicks: number
  totalBindings: number
  totalConversions: number
  totalEarnings: number
  expiringBindings: number
  pendingWithdrawals: number
  pendingWithdrawAmount: number
  conversionRate: string
  totalDistributors: number
  activeDistributors: number
}

interface Binding {
  id: string
  referrer_id: string
  referrer_name?: string
  referrer_code: string
  referee_id: string
  referee_phone?: string
  referee_nickname?: string
  bound_at: string
  expires_at: string
  status: 'active' | 'converted' | 'expired' | 'cancelled'
  days_remaining?: number
  commission?: number
  order_amount?: number
  source?: string
}

interface Withdrawal {
  id: string
  userId?: string
  user_id?: string  // 兼容旧格式
  userNickname?: string
  user_name?: string  // 兼容旧格式
  userPhone?: string
  userAvatar?: string
  referralCode?: string
  amount: number
  method?: 'wechat' | 'alipay'
  account?: string
  name?: string
  status: 'pending' | 'success' | 'failed' | 'completed' | 'rejected'  // 支持数据库和前端状态
  wechatOpenid?: string
  transactionId?: string
  errorMessage?: string
  createdAt?: string
  created_at?: string  // 兼容旧格式
  processedAt?: string
  completed_at?: string  // 兼容旧格式
  userCommissionInfo?: {
    totalCommission: number
    withdrawnEarnings: number
    pendingWithdrawals: number
    availableAfterThis: number
  }
}

interface User {
  id: string
  nickname: string
  phone: string
  referral_code: string
  has_full_book: boolean
  earnings: number
  pending_earnings: number
  withdrawn_earnings: number
  referral_count: number
  created_at: string
}

// 订单类型（用于交易中心的订单管理标签）
interface Order {
  id: string
  userId: string
  userNickname?: string
  userPhone?: string
  productType: 'section' | 'fullbook' | 'match'  // API 返回的字段名
  type?: 'section' | 'fullbook' | 'match'  // 兼容旧字段名
  productId?: string
  sectionId?: string  // 兼容旧字段名
  bookName?: string  // 书名
  chapterTitle?: string  // 章标题
  sectionTitle?: string  // 节标题
  amount: number
  status: 'pending' | 'completed' | 'failed' | 'paid' | 'created'  // 增加更多状态
  paymentMethod?: string
  referrerEarnings?: number
  referrerId?: string | null
  referrerNickname?: string | null  // 推荐人昵称
  referrerCode?: string | null  // 推荐码
  /** 下单时记录的邀请码（订单表 referral_code） */
  referralCode?: string | null
  createdAt: string
}

export default function DistributionAdminPage() {
  // 标签页：数据概览、订单管理、绑定管理、提现审核
  const [activeTab, setActiveTab] = useState<'overview' | 'orders' | 'bindings' | 'withdrawals'>('overview')
  const [orders, setOrders] = useState<Order[]>([])
  const [overview, setOverview] = useState<DistributionOverview | null>(null)
  const [bindings, setBindings] = useState<Binding[]>([])
  const [withdrawals, setWithdrawals] = useState<Withdrawal[]>([])
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState('')
  const [statusFilter, setStatusFilter] = useState<string>('all')
  
  // 标记哪些数据已加载
  const [loadedTabs, setLoadedTabs] = useState<Set<string>>(new Set())

  // 初次加载：加载概览和用户数据
  useEffect(() => {
    loadInitialData()
  }, [])

  // 切换tab：按需加载对应tab的数据
  useEffect(() => {
    loadTabData(activeTab)
  }, [activeTab])

  // 初始加载：概览 + 用户数据
  const loadInitialData = async () => {
    console.log('[Admin] 加载初始数据...')
    
    // 加载概览数据
    try {
      const overviewRes = await fetch('/api/admin/distribution/overview')
      if (overviewRes.ok) {
        const overviewData = await overviewRes.json()
        if (overviewData.success && overviewData.overview) {
          setOverview(overviewData.overview)
          console.log('[Admin] 概览数据加载成功')
        }
      }
    } catch (error) {
      console.error('[Admin] 概览接口异常:', error)
    }

    // 加载用户数据（多个tab都需要用到）
    try {
      const usersRes = await fetch('/api/db/users')
      if (usersRes.ok) {
        const usersData = await usersRes.json()
        setUsers(usersData.users || [])
        console.log('[Admin] 用户数据加载成功')
      }
    } catch (error) {
      console.error('[Admin] 用户数据加载失败:', error)
    }
  }

  // 按需加载tab数据
  const loadTabData = async (tab: string) => {
    // 如果已加载过且不是刷新操作，跳过
    if (loadedTabs.has(tab)) {
      console.log(`[Admin] ${tab} 数据已缓存，跳过加载`)
      return
    }

    setLoading(true)
    console.log(`[Admin] 加载 ${tab} 数据...`)

    try {
      const usersArr = users  // 使用已加载的用户数据

      // 根据不同tab加载对应数据
      switch (tab) {
        case 'overview':
          // 概览tab不需要加载额外数据，已在初始化时加载
          break

        case 'orders':
          // 加载订单数据
          try {
            const ordersRes = await fetch('/api/orders')
            if (!ordersRes.ok) {
              console.error('[Admin] 订单接口错误:', ordersRes.status)
              setOrders([])
            } else {
              const ordersData = await ordersRes.json()
              if (ordersData.success && ordersData.orders) {
                const enrichedOrders = ordersData.orders.map((order: Order) => {
                  const user = usersArr.find((u: User) => u.id === order.userId)
                  const referrer = order.referrerId
                    ? usersArr.find((u: User) => u.id === order.referrerId)
                    : null
                  return {
                    ...order,
                    amount: parseFloat(order.amount as any) || 0,
                    userNickname: user?.nickname || order.userNickname || '未知用户',
                    userPhone: user?.phone || order.userPhone || '-',
                    referrerNickname: referrer?.nickname || null,
                    referrerCode: referrer?.referral_code || null,
                    type: order.productType || order.type,
                  }
                })
                setOrders(enrichedOrders)
                console.log('[Admin] 订单数据加载成功:', enrichedOrders.length, '条')
              } else {
                setOrders([])
              }
            }
          } catch (error) {
            console.error('[Admin] 加载订单数据失败:', error)
            setOrders([])
          }
          break

        case 'bindings':
          // 加载绑定数据
          try {
            const bindingsRes = await fetch('/api/db/distribution')
            if (bindingsRes.ok) {
              const bindingsData = await bindingsRes.json()
              setBindings(bindingsData.bindings || [])
              console.log('[Admin] 绑定数据加载成功:', bindingsData.bindings?.length || 0, '条')
            } else {
              setBindings([])
            }
          } catch (error) {
            console.error('[Admin] 加载绑定数据失败:', error)
            setBindings([])
          }
          break

        case 'withdrawals':
          // 加载提现数据
          try {
            console.log('[Admin] 请求提现数据...')
            const withdrawalsRes = await fetch('/api/admin/withdrawals')
            console.log('[Admin] 提现接口响应状态:', withdrawalsRes.status, withdrawalsRes.statusText)
            
            if (withdrawalsRes.ok) {
              const withdrawalsData = await withdrawalsRes.json()
              console.log('[Admin] 提现接口返回数据:', withdrawalsData)
              
              if (withdrawalsData.success) {
                // 数据映射：统一字段名
                const formattedWithdrawals = (withdrawalsData.withdrawals || []).map((w: any) => ({
                  ...w,
                  user_id: w.userId || w.user_id,
                  user_name: w.userNickname || w.user_name,
                  created_at: w.createdAt || w.created_at,
                  completed_at: w.processedAt || w.completed_at,
                  account: w.account ?? '未绑定微信号',
                  status: w.status === 'success' ? 'completed' : (w.status === 'failed' ? 'rejected' : w.status)
                }))
                setWithdrawals(formattedWithdrawals)
                console.log('[Admin] 提现数据加载成功:', formattedWithdrawals.length, '条')
              } else {
                console.error('[Admin] 提现接口返回失败:', withdrawalsData.error || withdrawalsData.message)
                alert(`获取提现记录失败: ${withdrawalsData.error || withdrawalsData.message || '未知错误'}`)
                setWithdrawals([])
              }
            } else {
              // HTTP 错误
              const errorText = await withdrawalsRes.text()
              console.error('[Admin] 提现接口HTTP错误:', withdrawalsRes.status, errorText)
              
              try {
                const errorData = JSON.parse(errorText)
                alert(`获取提现记录失败 (${withdrawalsRes.status}): ${errorData.error || errorData.message || '服务器错误'}`)
              } catch {
                alert(`获取提现记录失败 (${withdrawalsRes.status}): ${errorText || '服务器错误'}`)
              }
              
              setWithdrawals([])
            }
          } catch (error: any) {
            console.error('[Admin] 加载提现数据异常:', error)
            alert(`加载提现数据失败: ${error.message || '网络错误'}`)
            setWithdrawals([])
          }
          break
      }

      // 标记该tab已加载
      setLoadedTabs(prev => new Set(prev).add(tab))
    } catch (error) {
      console.error(`[Admin] 加载 ${tab} 数据失败:`, error)
    } finally {
      setLoading(false)
    }
  }

  const refreshCurrentTab = () => {
    setLoadedTabs((prev) => {
      const newSet = new Set(prev)
      newSet.delete(activeTab)
      return newSet
    })
    if (activeTab === 'overview') {
      loadInitialData()
    }
    loadTabData(activeTab)
  }

  const handleApproveWithdrawal = async (id: string) => {
    if (!confirm('确认审核通过并打款？')) return
    
    try {
      await fetch('/api/admin/withdrawals', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, action: 'approve' })
      })
      refreshCurrentTab()
    } catch (error) {
      console.error('Approve withdrawal error:', error)
      alert('操作失败')
    }
  }

  const handleRejectWithdrawal = async (id: string) => {
    const reason = prompt('请输入拒绝原因：')
    if (!reason) return
    
    try {
      await fetch('/api/admin/withdrawals', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, action: 'reject', errorMessage: reason })
      })
      refreshCurrentTab()
    } catch (error) {
      console.error('Reject withdrawal error:', error)
      alert('操作失败')
    }
  }

  // 获取状态徽章
  const getStatusBadge = (status: string) => {
    const styles: Record<string, string> = {
      active: 'bg-green-500/20 text-green-400',
      converted: 'bg-blue-500/20 text-blue-400',
      expired: 'bg-gray-500/20 text-gray-400',
      cancelled: 'bg-red-500/20 text-red-400',
      pending: 'bg-orange-500/20 text-orange-400',
      processing: 'bg-blue-500/20 text-blue-400',
      completed: 'bg-green-500/20 text-green-400',
      rejected: 'bg-red-500/20 text-red-400',
    }
    
    const labels: Record<string, string> = {
      active: '有效',
      converted: '已转化',
      expired: '已过期',
      cancelled: '已取消',
      pending: '待审核',
      processing: '处理中',
      completed: '已完成',
      rejected: '已拒绝',
    }
    
    return (
      <Badge className={`${styles[status] || 'bg-gray-500/20 text-gray-400'} border-0`}>
        {labels[status] || status}
      </Badge>
    )
  }

  // 过滤数据
  const filteredBindings = bindings.filter(b => {
    if (statusFilter !== 'all' && b.status !== statusFilter) return false
    if (searchTerm) {
      const term = searchTerm.toLowerCase()
      return (
        b.referee_nickname?.toLowerCase().includes(term) ||
        b.referee_phone?.includes(term) ||
        b.referrer_name?.toLowerCase().includes(term) ||
        b.referrer_code?.toLowerCase().includes(term)
      )
    }
    return true
  })

  const filteredWithdrawals = withdrawals.filter(w => {
    if (statusFilter !== 'all' && w.status !== statusFilter) return false
    if (searchTerm) {
      const term = searchTerm.toLowerCase()
      return (
        w.user_name?.toLowerCase().includes(term) ||
        w.account?.toLowerCase().includes(term)
      )
    }
    return true
  })


  return (
    <div className="p-8 max-w-7xl mx-auto">
      {/* 页面标题 */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-white">交易中心</h1>
          <p className="text-gray-400 mt-1">统一管理：订单、分销绑定、提现审核</p>
        </div>
        <Button 
          onClick={refreshCurrentTab}
          disabled={loading}
          variant="outline" 
          className="border-gray-700 text-gray-300 hover:bg-gray-800"
        >
          <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
          刷新数据
        </Button>
      </div>

      {/* Tab切换 - 交易中心：合并分销+订单+提现 */}
      <div className="flex gap-2 mb-6 border-b border-gray-700 pb-4">
        {[
          { key: 'overview', label: '数据概览', icon: TrendingUp },
          { key: 'orders', label: '订单管理', icon: DollarSign },
          { key: 'bindings', label: '绑定管理', icon: Link2 },
          { key: 'withdrawals', label: '提现审核', icon: Wallet },
        ].map(tab => (
          <button
            key={tab.key}
            onClick={() => {
              setActiveTab(tab.key as typeof activeTab)
              setStatusFilter('all')
              setSearchTerm('')
            }}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              activeTab === tab.key
                ? 'bg-[#38bdac] text-white'
                : 'text-gray-400 hover:text-white hover:bg-gray-800'
            }`}
          >
            <tab.icon className="w-4 h-4" />
            {tab.label}
          </button>
        ))}
      </div>

      {loading ? (
        <div className="flex items-center justify-center py-20">
          <RefreshCw className="w-8 h-8 text-[#38bdac] animate-spin" />
          <span className="ml-2 text-gray-400">加载中...</span>
        </div>
      ) : (
        <>
          {/* 数据概览 */}
          {activeTab === 'overview' && overview && (
            <div className="space-y-6">
              {/* 今日数据 */}
              <div className="grid grid-cols-4 gap-4">
                <Card className="bg-[#0f2137] border-gray-700/50">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-gray-400 text-sm">今日点击</p>
                        <p className="text-2xl font-bold text-white mt-1">{overview.todayClicks}</p>
                      </div>
                      <div className="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
                        <Eye className="w-6 h-6 text-blue-400" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
                
                <Card className="bg-[#0f2137] border-gray-700/50">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-gray-400 text-sm">今日绑定</p>
                        <p className="text-2xl font-bold text-white mt-1">{overview.todayBindings}</p>
                      </div>
                      <div className="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center">
                        <Link2 className="w-6 h-6 text-green-400" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
                
                <Card className="bg-[#0f2137] border-gray-700/50">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-gray-400 text-sm">今日转化</p>
                        <p className="text-2xl font-bold text-white mt-1">{overview.todayConversions}</p>
                      </div>
                      <div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center">
                        <CheckCircle className="w-6 h-6 text-purple-400" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
                
                <Card className="bg-[#0f2137] border-gray-700/50">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-gray-400 text-sm">今日佣金</p>
                        <p className="text-2xl font-bold text-[#38bdac] mt-1">¥{overview.todayEarnings.toFixed(2)}</p>
                      </div>
                      <div className="w-12 h-12 rounded-xl bg-[#38bdac]/20 flex items-center justify-center">
                        <DollarSign className="w-6 h-6 text-[#38bdac]" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

              {/* 重要提醒 */}
              <div className="grid grid-cols-2 gap-4">
                <Card className="bg-orange-500/10 border-orange-500/30">
                  <CardContent className="p-6">
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 rounded-xl bg-orange-500/20 flex items-center justify-center">
                        <Clock className="w-6 h-6 text-orange-400" />
                      </div>
                      <div className="flex-1">
                        <p className="text-orange-300 font-medium">即将过期绑定</p>
                        <p className="text-2xl font-bold text-white">{overview.expiringBindings} 个</p>
                        <p className="text-orange-300/60 text-sm">7天内到期，需关注转化</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card className="bg-blue-500/10 border-blue-500/30">
                  <CardContent className="p-6">
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
                        <Wallet className="w-6 h-6 text-blue-400" />
                      </div>
                      <div className="flex-1">
                        <p className="text-blue-300 font-medium">待审核提现</p>
                        <p className="text-2xl font-bold text-white">{overview.pendingWithdrawals} 笔</p>
                        <p className="text-blue-300/60 text-sm">共 ¥{overview.pendingWithdrawAmount.toFixed(2)}</p>
                      </div>
                      <Button 
                        onClick={() => setActiveTab('withdrawals')}
                        variant="outline" 
                        className="border-blue-500/50 text-blue-400 hover:bg-blue-500/20"
                      >
                        去审核
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </div>

              {/* 本月/累计统计 */}
              <div className="grid grid-cols-2 gap-6">
                <Card className="bg-[#0f2137] border-gray-700/50">
                  <CardHeader>
                    <CardTitle className="text-white flex items-center gap-2">
                      <Calendar className="w-5 h-5 text-[#38bdac]" />
                      本月统计
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="p-4 bg-white/5 rounded-lg">
                        <p className="text-gray-400 text-sm">点击量</p>
                        <p className="text-xl font-bold text-white">{overview.monthClicks}</p>
                      </div>
                      <div className="p-4 bg-white/5 rounded-lg">
                        <p className="text-gray-400 text-sm">绑定数</p>
                        <p className="text-xl font-bold text-white">{overview.monthBindings}</p>
                      </div>
                      <div className="p-4 bg-white/5 rounded-lg">
                        <p className="text-gray-400 text-sm">转化数</p>
                        <p className="text-xl font-bold text-white">{overview.monthConversions}</p>
                      </div>
                      <div className="p-4 bg-white/5 rounded-lg">
                        <p className="text-gray-400 text-sm">佣金</p>
                        <p className="text-xl font-bold text-[#38bdac]">¥{overview.monthEarnings.toFixed(2)}</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card className="bg-[#0f2137] border-gray-700/50">
                  <CardHeader>
                    <CardTitle className="text-white flex items-center gap-2">
                      <TrendingUp className="w-5 h-5 text-[#38bdac]" />
                      累计统计
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="p-4 bg-white/5 rounded-lg">
                        <p className="text-gray-400 text-sm">总点击</p>
                        <p className="text-xl font-bold text-white">{overview.totalClicks.toLocaleString()}</p>
                      </div>
                      <div className="p-4 bg-white/5 rounded-lg">
                        <p className="text-gray-400 text-sm">总绑定</p>
                        <p className="text-xl font-bold text-white">{overview.totalBindings.toLocaleString()}</p>
                      </div>
                      <div className="p-4 bg-white/5 rounded-lg">
                        <p className="text-gray-400 text-sm">总转化</p>
                        <p className="text-xl font-bold text-white">{overview.totalConversions}</p>
                      </div>
                      <div className="p-4 bg-white/5 rounded-lg">
                        <p className="text-gray-400 text-sm">总佣金</p>
                        <p className="text-xl font-bold text-[#38bdac]">¥{overview.totalEarnings.toFixed(2)}</p>
                      </div>
                    </div>
                    <div className="mt-4 p-4 bg-[#38bdac]/10 rounded-lg flex items-center justify-between">
                      <span className="text-gray-300">点击转化率</span>
                      <span className="text-[#38bdac] font-bold text-xl">{overview.conversionRate}%</span>
                    </div>
                  </CardContent>
                </Card>
              </div>

              {/* 推广统计 */}
              <Card className="bg-[#0f2137] border-gray-700/50">
                <CardHeader>
                  <CardTitle className="text-white flex items-center gap-2">
                    <Users className="w-5 h-5 text-[#38bdac]" />
                    推广统计
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-4 gap-4">
                    <div className="p-4 bg-white/5 rounded-lg text-center">
                      <p className="text-3xl font-bold text-white">{overview.totalDistributors}</p>
                      <p className="text-gray-400 text-sm mt-1">推广用户数</p>
                    </div>
                    <div className="p-4 bg-white/5 rounded-lg text-center">
                      <p className="text-3xl font-bold text-green-400">{overview.activeDistributors}</p>
                      <p className="text-gray-400 text-sm mt-1">有收益用户</p>
                    </div>
                    <div className="p-4 bg-white/5 rounded-lg text-center">
                      <p className="text-3xl font-bold text-[#38bdac]">90%</p>
                      <p className="text-gray-400 text-sm mt-1">佣金比例</p>
                    </div>
                    <div className="p-4 bg-white/5 rounded-lg text-center">
                      <p className="text-3xl font-bold text-orange-400">30天</p>
                      <p className="text-gray-400 text-sm mt-1">绑定有效期</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

          {/* 订单管理 - 新增标签页 */}
          {activeTab === 'orders' && (
            <div className="space-y-4">
              <div className="flex gap-4">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <Input
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    placeholder="搜索订单号、用户名、手机号..."
                    className="pl-10 bg-[#0f2137] border-gray-700 text-white"
                  />
                </div>
                <select
                  value={statusFilter}
                  onChange={(e) => setStatusFilter(e.target.value)}
                  className="px-4 py-2 bg-[#0f2137] border border-gray-700 rounded-lg text-white"
                >
                  <option value="all">全部状态</option>
                  <option value="completed">已完成</option>
                  <option value="pending">待支付</option>
                  <option value="failed">已失败</option>
                </select>
              </div>

              <Card className="bg-[#0f2137] border-gray-700/50">
                <CardContent className="p-0">
                  {orders.length === 0 ? (
                    <div className="py-12 text-center text-gray-500">暂无订单数据</div>
                  ) : (
                    <div className="overflow-x-auto">
                      <table className="w-full text-sm">
                        <thead>
                          <tr className="bg-[#0a1628] text-gray-400">
                            <th className="p-4 text-left font-medium">订单号</th>
                            <th className="p-4 text-left font-medium">用户</th>
                            <th className="p-4 text-left font-medium">商品</th>
                            <th className="p-4 text-left font-medium">金额</th>
                            <th className="p-4 text-left font-medium">支付方式</th>
                            <th className="p-4 text-left font-medium">状态</th>
                            <th className="p-4 text-left font-medium">推荐人/邀请码</th>
                            <th className="p-4 text-left font-medium">分销佣金</th>
                            <th className="p-4 text-left font-medium">下单时间</th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-700/50">
                          {orders
                            .filter(order => {
                              if (statusFilter !== 'all' && order.status !== statusFilter) return false
                              if (searchTerm) {
                                const term = searchTerm.toLowerCase()
                                return (
                                  order.id?.toLowerCase().includes(term) ||
                                  order.userNickname?.toLowerCase().includes(term) ||
                                  order.userPhone?.includes(term) ||
                                  order.sectionTitle?.toLowerCase().includes(term) ||
                                  order.chapterTitle?.toLowerCase().includes(term) ||
                                  order.bookName?.toLowerCase().includes(term) ||
                                  (order.referrerCode && order.referrerCode.toLowerCase().includes(term)) ||
                                  (order.referrerNickname && order.referrerNickname.toLowerCase().includes(term))
                                )
                              }
                              return true
                            })
                            .map(order => (
                              <tr key={order.id} className="hover:bg-[#0a1628] transition-colors">
                                <td className="p-4 font-mono text-xs text-gray-400">
                                  {order.id?.slice(0, 12)}...
                                </td>
                                <td className="p-4">
                                  <div>
                                    <p className="text-white text-sm">{order.userNickname}</p>
                                    <p className="text-gray-500 text-xs">{order.userPhone}</p>
                                  </div>
                                </td>
                                <td className="p-4">
                                  <div>
                                    <p className="text-white text-sm">
                                      {(() => {
                                        const type = order.productType || order.type
                                        if (type === 'fullbook') {
                                          return `${order.bookName || '《底层逻辑》'} - 全本`
                                        } else if (type === 'match') {
                                          return '匹配次数购买'
                                        } else {
                                          // section - 单章购买
                                          return `${order.bookName || '《底层逻辑》'} - ${order.sectionTitle || order.chapterTitle || `章节${order.productId || order.sectionId || ''}`}`
                                        }
                                      })()}
                                    </p>
                                    <p className="text-gray-500 text-xs">
                                      {(() => {
                                        const type = order.productType || order.type
                                        if (type === 'fullbook') {
                                          return '全书解锁'
                                        } else if (type === 'match') {
                                          return '功能权益'
                                        } else {
                                          return order.chapterTitle || '单章购买'
                                        }
                                      })()}
                                    </p>
                                  </div>
                                </td>
                                <td className="p-4 text-[#38bdac] font-bold">
                                  ¥{typeof order.amount === 'number' ? order.amount.toFixed(2) : parseFloat(order.amount || '0').toFixed(2)}
                                </td>
                                <td className="p-4 text-gray-300">
                                  {order.paymentMethod === 'wechat' ? '微信支付' :
                                   order.paymentMethod === 'alipay' ? '支付宝' :
                                   order.paymentMethod || '微信支付'}
                                </td>
                                <td className="p-4">
                                  {order.status === 'completed' || order.status === 'paid' ? (
                                    <Badge className="bg-green-500/20 text-green-400 border-0">已完成</Badge>
                                  ) : order.status === 'pending' || order.status === 'created' ? (
                                    <Badge className="bg-yellow-500/20 text-yellow-400 border-0">待支付</Badge>
                                  ) : (
                                    <Badge className="bg-red-500/20 text-red-400 border-0">已失败</Badge>
                                  )}
                                </td>
                                <td className="p-4 text-gray-300 text-sm">
                                  {order.referrerId || order.referralCode ? (
                                    <span title={order.referralCode || order.referrerCode || order.referrerId}>
                                      {order.referrerNickname || order.referralCode || order.referrerCode || order.referrerId?.slice(0, 8)}
                                      {(order.referralCode || order.referrerCode) ? ` (${order.referralCode || order.referrerCode})` : ''}
                                    </span>
                                  ) : '-'}
                                </td>
                                <td className="p-4 text-[#FFD700]">
                                  {order.referrerEarnings 
                                    ? `¥${(typeof order.referrerEarnings === 'number' 
                                        ? order.referrerEarnings 
                                        : parseFloat(order.referrerEarnings)).toFixed(2)}` 
                                    : '-'}
                                </td>
                                <td className="p-4 text-gray-400 text-sm">
                                  {order.createdAt ? new Date(order.createdAt).toLocaleString('zh-CN') : '-'}
                                </td>
                              </tr>
                            ))}
                        </tbody>
                      </table>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          )}

          {/* 绑定管理 */}
          {activeTab === 'bindings' && (
            <div className="space-y-4">
              <div className="flex gap-4">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <Input
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    placeholder="搜索用户昵称、手机号、推广码..."
                    className="pl-10 bg-[#0f2137] border-gray-700 text-white"
                  />
                </div>
                <select
                  value={statusFilter}
                  onChange={(e) => setStatusFilter(e.target.value)}
                  className="px-4 py-2 bg-[#0f2137] border border-gray-700 rounded-lg text-white"
                >
                  <option value="all">全部状态</option>
                  <option value="active">有效</option>
                  <option value="converted">已转化</option>
                  <option value="expired">已过期</option>
                </select>
              </div>

              <Card className="bg-[#0f2137] border-gray-700/50">
                <CardContent className="p-0">
                  {filteredBindings.length === 0 ? (
                    <div className="py-12 text-center text-gray-500">暂无绑定数据</div>
                  ) : (
                    <div className="overflow-x-auto">
                      <table className="w-full text-sm">
                        <thead>
                          <tr className="bg-[#0a1628] text-gray-400">
                            <th className="p-4 text-left font-medium">访客</th>
                            <th className="p-4 text-left font-medium">分销商</th>
                            <th className="p-4 text-left font-medium">绑定时间</th>
                            <th className="p-4 text-left font-medium">到期时间</th>
                            <th className="p-4 text-left font-medium">状态</th>
                            <th className="p-4 text-left font-medium">佣金</th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-700/50">
                          {filteredBindings.map(binding => (
                            <tr key={binding.id} className="hover:bg-[#0a1628] transition-colors">
                              <td className="p-4">
                                <div>
                                  <p className="text-white font-medium">{binding.referee_nickname || '匿名用户'}</p>
                                  <p className="text-gray-500 text-xs">{binding.referee_phone}</p>
                                </div>
                              </td>
                              <td className="p-4">
                                <div>
                                  <p className="text-white">{binding.referrer_name || '-'}</p>
                                  <p className="text-gray-500 text-xs font-mono">{binding.referrer_code}</p>
                                </div>
                              </td>
                              <td className="p-4 text-gray-400">
                                {binding.bound_at ? new Date(binding.bound_at).toLocaleDateString('zh-CN') : '-'}
                              </td>
                              <td className="p-4 text-gray-400">
                                {binding.expires_at ? new Date(binding.expires_at).toLocaleDateString('zh-CN') : '-'}
                              </td>
                              <td className="p-4">{getStatusBadge(binding.status)}</td>
                              <td className="p-4">
                                {binding.commission ? (
                                  <span className="text-[#38bdac] font-medium">¥{binding.commission.toFixed(2)}</span>
                                ) : (
                                  <span className="text-gray-500">-</span>
                                )}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          )}

          {/* 提现审核 */}
          {activeTab === 'withdrawals' && (
            <div className="space-y-4">
              <div className="flex gap-4">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <Input
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    placeholder="搜索用户名称、账号..."
                    className="pl-10 bg-[#0f2137] border-gray-700 text-white"
                  />
                </div>
                <select
                  value={statusFilter}
                  onChange={(e) => setStatusFilter(e.target.value)}
                  className="px-4 py-2 bg-[#0f2137] border border-gray-700 rounded-lg text-white"
                >
                  <option value="all">全部状态</option>
                  <option value="pending">待审核</option>
                  <option value="completed">已完成</option>
                  <option value="rejected">已拒绝</option>
                </select>
              </div>

              <Card className="bg-[#0f2137] border-gray-700/50">
                <CardContent className="p-0">
                  {filteredWithdrawals.length === 0 ? (
                    <div className="py-12 text-center text-gray-500">暂无提现记录</div>
                  ) : (
                    <div className="overflow-x-auto">
                      <table className="w-full text-sm">
                        <thead>
                          <tr className="bg-[#0a1628] text-gray-400">
                            <th className="p-4 text-left font-medium">申请人</th>
                            <th className="p-4 text-left font-medium">金额</th>
                            <th className="p-4 text-left font-medium">收款方式</th>
                            <th className="p-4 text-left font-medium">收款账号</th>
                            <th className="p-4 text-left font-medium">申请时间</th>
                            <th className="p-4 text-left font-medium">状态</th>
                            <th className="p-4 text-right font-medium">操作</th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-700/50">
                          {filteredWithdrawals.map(withdrawal => (
                            <tr key={withdrawal.id} className="hover:bg-[#0a1628] transition-colors">
                              <td className="p-4">
                                <div className="flex items-center gap-2">
                                  {withdrawal.userAvatar ? (
                                    <img src={withdrawal.userAvatar} alt="" className="w-8 h-8 rounded-full object-cover" />
                                  ) : (
                                    <div className="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center text-white text-sm font-medium">
                                      {(withdrawal.user_name || withdrawal.name || '?').slice(0, 1)}
                                    </div>
                                  )}
                                  <p className="text-white font-medium">{withdrawal.user_name || withdrawal.name}</p>
                                </div>
                              </td>
                              <td className="p-4">
                                <span className="text-[#38bdac] font-bold">¥{withdrawal.amount.toFixed(2)}</span>
                              </td>
                              <td className="p-4">
                                <Badge className={
                                  withdrawal.method === 'wechat'
                                    ? 'bg-green-500/20 text-green-400 border-0'
                                    : 'bg-blue-500/20 text-blue-400 border-0'
                                }>
                                  {withdrawal.method === 'wechat' ? '微信' : '支付宝'}
                                </Badge>
                              </td>
                              <td className="p-4">
                                <div>
                                  <p className="text-white font-mono text-xs">{withdrawal.account}</p>
                                  <p className="text-gray-500 text-xs">{withdrawal.name}</p>
                                </div>
                              </td>
                              <td className="p-4 text-gray-400">
                                {withdrawal.created_at ? new Date(withdrawal.created_at).toLocaleString('zh-CN') : '-'}
                              </td>
                              <td className="p-4">{getStatusBadge(withdrawal.status)}</td>
                              <td className="p-4 text-right">
                                {withdrawal.status === 'pending' && (
                                  <div className="flex gap-2 justify-end">
                                    <Button
                                      size="sm"
                                      onClick={() => handleApproveWithdrawal(withdrawal.id)}
                                      className="bg-[#38bdac] hover:bg-[#2da396] text-white"
                                    >
                                      <CheckCircle className="w-4 h-4 mr-1" />
                                      通过
                                    </Button>
                                    <Button
                                      size="sm"
                                      variant="outline"
                                      onClick={() => handleRejectWithdrawal(withdrawal.id)}
                                      className="border-red-500/50 text-red-400 hover:bg-red-500/20"
                                    >
                                      <XCircle className="w-4 h-4 mr-1" />
                                      拒绝
                                    </Button>
                                  </div>
                                )}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          )}

        </>
      )}
    </div>
  )
}