"use client"

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import ProtectedRoute from '@/components/ProtectedRoute'
import Header from '@/components/Header'
import { useAuth } from '@/contexts/AuthContext'
import { authFetch } from '@/lib/fetchAuth'
import { useLocale, useTranslations } from 'next-intl'
import { Button } from '@/components/ui/button'
import { 
  Shield, 
  Users, 
  Search, 
  Settings, 
  Database, 
  BarChart3, 
  Ban, 
  Coins, 
  Activity, 
  Eye, 
  EyeOff, 
  Mail, 
  Globe, 
  Calendar, 
  Phone, 
  User, 
  Hash, 
  Crown, 
  Star, 
  AlertTriangle,
  CheckCircle,
  Clock,
  MapPin,
  Car,
  Home,
  DollarSign,
  TrendingUp,
  Zap,
  Filter,
  MoreHorizontal,
  ArrowLeft,
  RefreshCw,
  Download,
  Upload,
  Trash2,
  Edit,
  Plus,
  X
} from 'lucide-react'

interface AccountInfo {
  id: number
  username: string
  email: string | null
  ip: string | null
  registerDate: string | null
  lastLogin: string | null
  adminLevel: number
  adminRole: string
  vip: number
  discordUsername: string | null
  discordId: string | null
  discordAvatar: string | null
  discordLinkedAt: string | null
  mtaSerial: string | null
  totalMoney: number
  characterCount: number
  vehicleCount: number
  interiorCount: number
  profilePhoto: string | null
}

interface AdminStats {
  totalAccounts: number
  adminAccounts: number
  vipAccounts: number
  discordLinked: number
  totalMoney: number
  totalCharacters: number
  totalVehicles: number
  totalInteriors: number
}

export default function AdminPage() {
  const { user, loading: authLoading } = useAuth()
  const router = useRouter()
  const locale = useLocale()
  const t = useTranslations('admin')
  const [isAdmin, setIsAdmin] = useState<boolean>(false)
  const [adminRole, setAdminRole] = useState<string>('')
  const [loading, setLoading] = useState<boolean>(true)
  const [accounts, setAccounts] = useState<AccountInfo[]>([])
  const [stats, setStats] = useState<AdminStats>({
    totalAccounts: 0,
    adminAccounts: 0,
    vipAccounts: 0,
    discordLinked: 0,
    totalMoney: 0,
    totalCharacters: 0,
    totalVehicles: 0,
    totalInteriors: 0
  })
  const [query, setQuery] = useState('')
  const [selectedAccount, setSelectedAccount] = useState<AccountInfo | null>(null)
  const [showIP, setShowIP] = useState<boolean>(false)
  const [refreshing, setRefreshing] = useState<boolean>(false)
  const [currentPage, setCurrentPage] = useState<number>(1)
  const [accountsPerPage] = useState<number>(15)

  useEffect(() => {
    if (authLoading) return
    if (!user) {
      router.push(`/${locale}/login`)
      return
    }

    checkAdminAccess(user.id)
  }, [authLoading, user])

  useEffect(() => {
    if (isAdmin) {
      fetchAllAccounts()
    }
  }, [isAdmin])

  const checkAdminAccess = async (userId: number) => {
    try {
      const res = await authFetch(`/api/admin/is-admin`)
      const data = await res.json()
      setIsAdmin(!!data?.isAdmin)
      setAdminRole(data?.adminRole || '')
    } catch (error) {
      console.error('Admin check error:', error)
    } finally {
      setLoading(false)
    }
  }

  const fetchAllAccounts = async () => {
    try {
      setRefreshing(true)
      const res = await authFetch('/api/admin/accounts-detailed?limit=100')
    const data = await res.json()
    if (data?.success) {
      setAccounts(data.accounts)
      calculateStats(data.accounts)
      }
    } catch (error) {
      console.error('Error fetching accounts:', error)
    } finally {
      setRefreshing(false)
    }
  }

  const calculateStats = (accountsData: AccountInfo[]) => {
    const adminCount = accountsData.filter(a => a.adminLevel >= 4).length
    const vipCount = accountsData.filter(a => a.vip > 0).length
    const discordCount = accountsData.filter(a => a.discordUsername).length
    const totalMoney = accountsData.reduce((sum, a) => sum + a.totalMoney, 0)
    const totalCharacters = accountsData.reduce((sum, a) => sum + a.characterCount, 0)
    const totalVehicles = accountsData.reduce((sum, a) => sum + a.vehicleCount, 0)
    const totalInteriors = accountsData.reduce((sum, a) => sum + a.interiorCount, 0)
      
      setStats({
        totalAccounts: accountsData.length,
        adminAccounts: adminCount,
      vipAccounts: vipCount,
      discordLinked: discordCount,
      totalMoney,
      totalCharacters,
      totalVehicles,
      totalInteriors
    })
  }

  const searchAccounts = async () => {
    if (!query.trim()) { 
      fetchAllAccounts()
      return 
    }
    try {
      const res = await authFetch(`/api/admin/accounts-detailed?query=${encodeURIComponent(query)}&limit=100`)
    const data = await res.json()
    if (data?.success) {
      setAccounts(data.accounts)
      calculateStats(data.accounts)
      }
    } catch (error) {
      console.error('Search error:', error)
    }
  }


  const getAdminBadge = (level: number) => {
    switch (level) {
      case 1: return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-600/20 text-blue-400 border border-blue-600/30"><Shield className="w-3 h-3" /> Soporte</span>
      case 2: return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-green-600/20 text-green-400 border border-green-600/30"><Shield className="w-3 h-3" /> Moderador</span>
      case 3: return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-purple-600/20 text-purple-400 border border-purple-600/30"><Shield className="w-3 h-3" /> Moderador Global</span>
      case 4: return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-orange-600/20 text-orange-400 border border-orange-600/30"><Crown className="w-3 h-3" /> Administrador</span>
      case 5: return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-red-600/20 text-red-400 border border-red-600/30"><Crown className="w-3 h-3" /> Admin General</span>
      case 10: return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-yellow-600/20 text-yellow-400 border border-yellow-600/30"><Crown className="w-3 h-3" /> Director</span>
      default: return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-gray-600/20 text-gray-400 border border-gray-600/30"><User className="w-3 h-3" /> Player</span>
    }
  }

  const getVipBadge = (vipLevel: number) => {
    switch (vipLevel) {
      case 1: return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-gray-600/20 text-gray-300 border border-gray-500/30"><Star className="w-3 h-3" /> Silver VIP</span>
      case 2: return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-600/20 text-amber-300 border border-amber-500/30"><Star className="w-3 h-3" /> Gold VIP</span>
      case 3: return <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-600/20 text-blue-300 border border-blue-500/30"><Star className="w-3 h-3" /> Diamond VIP</span>
      default: return null
    }
  }

  const formatMoney = (amount: number) => {
    if (amount >= 1_000_000) return `$${(amount / 1_000_000).toFixed(1)}M`
    if (amount >= 1_000) return `$${(amount / 1_000).toFixed(0)}K`
    return `$${amount.toLocaleString()}`
  }

  const formatDate = (dateString: string | null) => {
    if (!dateString) return t('never')
    
    // Debug: show the raw value temporarily
    console.log('Raw date:', dateString)
    
    // Handle DD/MM/YYYY format (like 13/10/2025)
    if (dateString.includes('/')) {
      const parts = dateString.split('/')
      if (parts.length === 3) {
        const day = parts[0]
        const month = parts[1]
        const year = parts[2]
        // Create date in MM/DD/YYYY format for JavaScript Date
        const jsDate = new Date(`${month}/${day}/${year}`)
        
        if (!isNaN(jsDate.getTime())) {
          return jsDate.toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
          })
        }
      }
    }
    
    // Handle MySQL datetime format (YYYY-MM-DD HH:MM:SS)
    let date: Date
    if (dateString.includes(' ')) {
      // MySQL datetime format - extract only the date part
      const datePart = dateString.split(' ')[0]
      date = new Date(datePart)
    } else {
      // Try parsing as regular date
      date = new Date(dateString)
    }
    
    // Check if date is valid
    if (isNaN(date.getTime())) {
      // Show raw value for debugging
      return dateString
    }
    
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    })
  }

  const maskIP = (ip: string | null) => {
    if (!ip) return '—'
    if (!showIP) return ip.replace(/\d/g, 'x')
    return ip
  }

  // Pagination logic
  const totalPages = Math.ceil(accounts.length / accountsPerPage)
  const startIndex = (currentPage - 1) * accountsPerPage
  const endIndex = startIndex + accountsPerPage
  const currentAccounts = accounts.slice(startIndex, endIndex)

  const goToPage = (page: number) => {
    setCurrentPage(page)
  }

  const goToPreviousPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1)
    }
  }

  const goToNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1)
    }
  }

  if (loading) {
    return (
    <ProtectedRoute>
        <main className="min-h-screen pt-16 bg-gradient-to-b from-[#1E1E2E] via-[#002647] to-[#1E1E2E] flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#0087FF] mx-auto mb-4"></div>
            <p className="text-[#8ab4ff] text-lg">{t('checking')}</p>
          </div>
      </main>
    </ProtectedRoute>
  )
  }

  if (!isAdmin) {
  return (
    <ProtectedRoute>
        <main className="min-h-screen pt-16 bg-gradient-to-b from-[#1E1E2E] via-[#002647] to-[#1E1E2E] flex items-center justify-center">
          <div className="text-center max-w-md mx-auto px-6">
            <div className="w-20 h-20 bg-red-600/20 rounded-2xl flex items-center justify-center mx-auto mb-6 border border-red-600/30">
              <AlertTriangle className="w-10 h-10 text-red-400" />
            </div>
            <h1 className="text-2xl font-bold text-white mb-2">{t('accessDenied.title')}</h1>
            <p className="text-gray-400 mb-6">{t('accessDenied.message')}</p>
            <Button 
              onClick={() => router.push(`/${locale}/dashboard`)}
              className="bg-[#0087FF] hover:bg-[#0072d1] text-white px-6 py-2 rounded-xl"
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              {t('accessDenied.back')}
            </Button>
          </div>
        </main>
      </ProtectedRoute>
    )
  }

  return (
    <ProtectedRoute>
      <>
        <Header />
        <main className="min-h-screen pt-16 bg-gradient-to-b from-[#1E1E2E] via-[#002647] to-[#1E1E2E]">
          <section className="container mx-auto px-6 py-8">
            {/* Header */}
            <div className="flex items-center justify-between mb-8">
              <div>
                <h1 className="text-4xl font-bold text-white mb-2">{t('title')}</h1>
                <p className="text-gray-400 text-lg">{t('welcome', { username: user?.username || '', role: adminRole })}</p>
              </div>
              <div className="flex items-center gap-3">
                <Button 
                  onClick={() => router.push(`/${locale}/admin/sqlautosave`)}
                  className="bg-green-600/20 hover:bg-green-600/30 text-green-400 border border-green-600/30"
                >
                  <Database className="w-4 h-4 mr-2" />
                  SQL Auto Save
                </Button>
                <Button 
                  onClick={() => router.push(`/${locale}/admin/bans`)}
                  className="bg-red-600/20 hover:bg-red-600/30 text-red-400 border border-red-600/30"
                >
                  <Ban className="w-4 h-4 mr-2" />
                  {t('banManagement')}
                </Button>
                <Button 
                  onClick={fetchAllAccounts}
                  disabled={refreshing}
                  className="bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30"
                >
                  <RefreshCw className={`w-4 h-4 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
                  {t('refresh')}
                </Button>
              <Button 
                onClick={() => router.push(`/${locale}/dashboard`)}
                variant="outline"
                  className="border-[#0087FF]/30 text-[#8ab4ff] hover:bg-[#0087FF]/10"
              >
                <ArrowLeft className="w-4 h-4 mr-2" />
                  {t('dashboard')}
              </Button>
              </div>
            </div>

            {/* Stats Cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
              <div className="bg-gradient-to-br from-[#0f1620] to-[#0c1320] rounded-2xl p-6 border border-[#0087FF]/20 shadow-lg">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-gray-400 text-sm mb-1">{t('stats.totalAccounts')}</p>
                    <p className="text-3xl font-bold text-white">{stats.totalAccounts}</p>
                  </div>
                  <div className="w-12 h-12 bg-blue-600/20 rounded-xl flex items-center justify-center">
                    <Users className="w-6 h-6 text-blue-400" />
                  </div>
                </div>
              </div>

              <div className="bg-gradient-to-br from-[#0f1620] to-[#0c1320] rounded-2xl p-6 border border-[#0087FF]/20 shadow-lg">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-gray-400 text-sm mb-1">{t('stats.adminAccounts')}</p>
                    <p className="text-3xl font-bold text-emerald-400">{stats.adminAccounts}</p>
                  </div>
                  <div className="w-12 h-12 bg-emerald-600/20 rounded-xl flex items-center justify-center">
                    <Shield className="w-6 h-6 text-emerald-400" />
                  </div>
                </div>
              </div>

              <div className="bg-gradient-to-br from-[#0f1620] to-[#0c1320] rounded-2xl p-6 border border-[#0087FF]/20 shadow-lg">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-gray-400 text-sm mb-1">{t('stats.vipAccounts')}</p>
                    <p className="text-3xl font-bold text-yellow-400">{stats.vipAccounts}</p>
                  </div>
                  <div className="w-12 h-12 bg-yellow-600/20 rounded-xl flex items-center justify-center">
                    <Star className="w-6 h-6 text-yellow-400" />
                  </div>
                </div>
              </div>

              <div className="bg-gradient-to-br from-[#0f1620] to-[#0c1320] rounded-2xl p-6 border border-[#0087FF]/20 shadow-lg">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-gray-400 text-sm mb-1">{t('stats.totalWealth')}</p>
                    <p className="text-3xl font-bold text-emerald-400">{formatMoney(stats.totalMoney)}</p>
                  </div>
                  <div className="w-12 h-12 bg-emerald-600/20 rounded-xl flex items-center justify-center">
                    <DollarSign className="w-6 h-6 text-emerald-400" />
                  </div>
                </div>
              </div>
            </div>

            {/* Account Management */}
            <div className="bg-gradient-to-br from-[#0f1620] to-[#0c1320] rounded-2xl p-6 border border-[#0087FF]/20 shadow-lg">
              <div className="flex items-center justify-between mb-6">
                <div>
                  <h2 className="text-2xl font-bold text-white mb-1">{t('accounts.title')}</h2>
                  <p className="text-gray-400">{t('accounts.description')}</p>
                </div>
                <div className="flex items-center gap-2">
                </div>
              </div>
              
              {/* Search */}
              <div className="flex items-center gap-3 mb-6">
                <div className="flex-1 relative">
                  <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                  <input
                    type="text"
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    placeholder={t('searchPlaceholder')}
                    className="w-full pl-10 pr-4 py-3 bg-[#0c1320]/80 border border-[#0087FF]/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-[#0087FF] focus:ring-0"
                  />
                </div>
                  <Button 
                    onClick={searchAccounts} 
                  className="bg-[#0087FF] hover:bg-[#0072d1] text-white px-6 py-3 rounded-xl"
                  >
                  <Search className="w-4 h-4 mr-2" />
                    {t('search')}
                  </Button>
                </div>

              {/* Accounts List */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                {currentAccounts.map((account) => (
                  <div
                    key={account.id}
                    className="bg-gradient-to-r from-[#0c1320]/60 to-[#0a0f1a]/60 rounded-xl p-4 border border-[#0087FF]/10 hover:border-[#0087FF]/30 transition-all duration-300 cursor-pointer group"
                    onClick={() => setSelectedAccount(account)}
                  >
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-[#0087FF]/30 flex-shrink-0">
                        {account.profilePhoto ? (
                          <img
                            src={account.profilePhoto}
                            alt={account.username}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          <div className="w-full h-full bg-gradient-to-br from-[#0087FF]/20 to-[#8ab4ff]/10 flex items-center justify-center">
                            <User className="w-6 h-6 text-[#8ab4ff]" />
                          </div>
                        )}
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="text-sm font-bold text-white truncate group-hover:text-[#8ab4ff] transition-colors">{account.username}</h3>
                          {getAdminBadge(account.adminLevel)}
                          {getVipBadge(account.vip)}
                        </div>
                        <div className="flex items-center gap-1 text-xs text-gray-400">
                          <Hash className="w-3 h-3" />
                          <span>{t('accounts.columns.id')} {account.id}</span>
                        </div>
                        <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
                          <Eye className="w-3 h-3" />
                          <span>{t('accounts.clickToView')}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              {/* Pagination */}
              {totalPages > 1 && (
                <div className="flex items-center justify-between">
                  <div className="text-sm text-gray-400">
                    {t('pagination.showing', { start: startIndex + 1, end: Math.min(endIndex, accounts.length), total: accounts.length })}
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      onClick={goToPreviousPage}
                      disabled={currentPage === 1}
                      className="bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30 disabled:opacity-50"
                    >
                      {t('pagination.previous')}
                    </Button>
                    
                    <div className="flex items-center gap-1">
                      {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                        const pageNum = Math.max(1, Math.min(totalPages - 4, currentPage - 2)) + i
                        if (pageNum > totalPages) return null
                        return (
                          <Button
                            key={pageNum}
                            onClick={() => goToPage(pageNum)}
                            className={`w-8 h-8 p-0 text-xs ${
                              currentPage === pageNum
                                ? 'bg-[#0087FF] text-white'
                                : 'bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30'
                            }`}
                          >
                            {pageNum}
                          </Button>
                        )
                      })}
                    </div>

                    <Button
                      onClick={goToNextPage}
                      disabled={currentPage === totalPages}
                      className="bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30 disabled:opacity-50"
                    >
                      {t('pagination.next')}
                    </Button>
                  </div>
                </div>
              )}
            </div>
          </section>
        </main>

        {/* Account Detail Modal */}
        {selectedAccount && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setSelectedAccount(null)}></div>
            <div className="relative bg-gradient-to-br from-[#0f1c30] to-[#0c1728] rounded-3xl border border-[#1c3e6e] p-6 md:p-8 max-w-4xl w-full max-h-[90vh] overflow-y-auto shadow-[0_0_60px_-12px_rgba(0,135,255,0.35)]">
              <button
                onClick={() => setSelectedAccount(null)}
                className="absolute top-4 right-4 p-2 text-[#9dbdf3] hover:text-white hover:bg-[#0e223f] rounded-xl transition-colors"
                aria-label="Close"
              >
                <X className="w-5 h-5" />
              </button>

              {/* Header */}
              <div className="flex items-start gap-4 md:gap-6 mb-6">
                <div className="w-20 h-20 rounded-full overflow-hidden border-2 border-[#0087FF]/30 flex-shrink-0">
                  {selectedAccount.profilePhoto ? (
                    <img
                      src={selectedAccount.profilePhoto}
                      alt={selectedAccount.username}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <div className="w-full h-full bg-gradient-to-br from-[#0087FF]/20 to-[#8ab4ff]/10 flex items-center justify-center">
                      <User className="w-10 h-10 text-[#8ab4ff]" />
                    </div>
                  )}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <h2 className="text-2xl md:text-3xl font-bold text-white truncate">{selectedAccount.username}</h2>
                    {getAdminBadge(selectedAccount.adminLevel)}
                    {getVipBadge(selectedAccount.vip)}
                  </div>
                  <div className="flex items-center gap-3 text-xs text-[#9cbdf5] flex-wrap">
                    <span className="inline-flex items-center gap-1"><Hash className="w-3 h-3" /> {t('accounts.columns.id')} #{selectedAccount.id}</span>
                  </div>
                </div>
              </div>

              {/* Stats Grid */}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div className="rounded-xl border border-[#224a80] bg-[#133055]/60 p-4">
                  <p className="text-sm text-[#9cbdf5] mb-1">{t('accounts.details.totalMoney')}</p>
                  <p className="text-2xl font-bold text-emerald-400">{formatMoney(selectedAccount.totalMoney)}</p>
                </div>
                <div className="rounded-xl border border-[#224a80] bg-[#133055]/60 p-4">
                  <p className="text-sm text-[#9cbdf5] mb-1">{t('accounts.details.characters')}</p>
                  <p className="text-2xl font-bold text-purple-400">{selectedAccount.characterCount}</p>
                </div>
                <div className="rounded-xl border border-[#224a80] bg-[#133055]/60 p-4">
                  <p className="text-sm text-[#9cbdf5] mb-1">{t('accounts.details.vehicles')}</p>
                  <p className="text-2xl font-bold text-blue-400">{selectedAccount.vehicleCount}</p>
                </div>
                <div className="rounded-xl border border-[#224a80] bg-[#133055]/60 p-4">
                  <p className="text-sm text-[#9cbdf5] mb-1">{t('accounts.details.interiors')}</p>
                  <p className="text-2xl font-bold text-cyan-400">{selectedAccount.interiorCount}</p>
                </div>
              </div>

              {/* Account Details */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4">
                <div className="flex items-center justify-between border-b border-white/10 py-2">
                  <span className="text-[#8fb8ff] text-sm flex items-center gap-2"><Mail className="w-4 h-4" /> {t('accounts.details.email')}</span>
                  <span className="text-white text-sm font-medium">{selectedAccount.email || '—'}</span>
                </div>
                <div className="flex items-center justify-between border-b border-white/10 py-2">
                  <span className="text-[#8fb8ff] text-sm flex items-center gap-2"><Globe className="w-4 h-4" /> {t('accounts.details.ipAddress')}</span>
                  <div className="flex items-center gap-2">
                    <span className="text-white text-sm font-medium">{maskIP(selectedAccount.ip)}</span>
                    <button
                      onClick={() => setShowIP(!showIP)}
                      className="p-1 text-[#8fb8ff] hover:text-white hover:bg-[#0087FF]/20 rounded transition-colors"
                      title={showIP ? t('accounts.details.hideIp') : t('accounts.details.showIp')}
                    >
                      {showIP ? <EyeOff className="w-3 h-3" /> : <Eye className="w-3 h-3" />}
                    </button>
                  </div>
                </div>
                <div className="flex items-center justify-between border-b border-white/10 py-2">
                  <span className="text-[#8fb8ff] text-sm flex items-center gap-2">
                    <svg viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
                      <path d="M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.127.094.253.194.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.419-.019 1.333-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1568 2.4189Z"/>
                    </svg>
                    {t('accounts.details.discord')}
                  </span>
                  <div className="flex items-center gap-2">
                    {selectedAccount.discordUsername ? (
                      <div className="flex items-center gap-2">
                        {selectedAccount.discordAvatar && (
                          <img
                            src={`https://cdn.discordapp.com/avatars/${selectedAccount.discordId}/${selectedAccount.discordAvatar}.png?size=32`}
                            alt="Discord Avatar"
                            className="w-6 h-6 rounded-full"
                            onError={(e) => {
                              const target = e.currentTarget as HTMLImageElement
                              target.style.display = 'none'
                            }}
                          />
                        )}
                        <span className="text-white text-sm font-medium">{selectedAccount.discordUsername}</span>
                      </div>
                    ) : (
                      <span className="text-gray-400 text-sm font-medium">{t('accounts.details.notLinked')}</span>
                    )}
                  </div>
                </div>
                <div className="flex items-center justify-between border-b border-white/10 py-2">
                  <span className="text-[#8fb8ff] text-sm flex items-center gap-2"><Calendar className="w-4 h-4" /> {t('accounts.details.registrationDate')}</span>
                  <span className="text-white text-sm font-medium">{formatDate(selectedAccount.registerDate)}</span>
                </div>
                <div className="flex items-center justify-between border-b border-white/10 py-2">
                  <span className="text-[#8fb8ff] text-sm flex items-center gap-2"><Clock className="w-4 h-4" /> {t('accounts.details.lastLogin')}</span>
                  <span className="text-white text-sm font-medium">{formatDate(selectedAccount.lastLogin)}</span>
                </div>
                <div className="flex items-center justify-between border-b border-white/10 py-2">
                  <span className="text-[#8fb8ff] text-sm flex items-center gap-2"><Shield className="w-4 h-4" /> {t('accounts.details.adminLevel')}</span>
                  <span className="text-white text-sm font-medium">{selectedAccount.adminLevel} - {selectedAccount.adminRole}</span>
                </div>
                <div className="flex items-center justify-between border-b border-white/10 py-2">
                  <span className="text-[#8fb8ff] text-sm flex items-center gap-2"><Star className="w-4 h-4" /> {t('accounts.details.vipStatus')}</span>
                  <span className="text-white text-sm font-medium">{selectedAccount.vip === 0 ? t('accounts.details.noVip') : t('accounts.details.vipLevel', { level: selectedAccount.vip })}</span>
                </div>
                {selectedAccount.discordLinkedAt && (
                  <div className="flex items-center justify-between border-b border-white/10 py-2">
                    <span className="text-[#8fb8ff] text-sm flex items-center gap-2">
                      <svg viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
                        <path d="M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.127.094.253.194.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.419-.019 1.333-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1568 2.4189Z"/>
                      </svg>
                      {t('accounts.details.discordLinked')}
                    </span>
                    <span className="text-white text-sm font-medium">{formatDate(selectedAccount.discordLinkedAt)}</span>
                </div>
              )}
            </div>

              {/* Actions */}
              <div className="mt-6 pt-4 border-t border-white/10">
                <div className="flex items-center gap-3">
                  <Button
                    onClick={() => setSelectedAccount(null)}
                    className="bg-gray-600/20 hover:bg-gray-600/30 text-gray-300 border border-gray-600/30"
                  >
                    {t('accounts.details.close')}
                  </Button>
                </div>
          </div>
        </div>
      </div>
        )}

      </>
    </ProtectedRoute>
  )
}