"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 { 
  Ban, 
  CheckCircle, 
  AlertTriangle, 
  Search, 
  Filter, 
  Calendar, 
  Clock, 
  User, 
  Users, 
  Shield, 
  Mail, 
  Globe, 
  Hash, 
  Eye, 
  EyeOff, 
  RefreshCw, 
  ArrowLeft, 
  X, 
  Plus, 
  Edit, 
  Trash2, 
  Download, 
  Upload,
  TrendingUp,
  TrendingDown,
  Activity,
  Zap,
  Star,
  Crown,
  Settings,
  BarChart3,
  Database,
  Coins,
  Home,
  DollarSign,
  MapPin,
  Car,
  MoreHorizontal
} from 'lucide-react'

interface AccountBan {
  ID: number
  Nombre: string
  Email: string | null
  IP: string | null
  OtakuN_N: number
  ReasonBanUwU: string | null
  MomentBan: string | null
  FueBan: string | null
  JotoOtaku: number
  VIP: number
}

interface CharacterBan {
  ID: number
  characterName: string
  accountId: number
  accountName: string
  OtakuN_N: number
  ReasonBanUwU: string | null
  MomentBan: string | null
  FueBan: string | null
  TimeBanUwU: string | null
}

interface BanStats {
  totalAccountBans: number
  totalCharacterBans: number
  activeAccountBans: number
  activeCharacterBans: number
  tempBans: number
  permanentBans: number
  bansToday: number
  bansThisWeek: number
}

export default function BansPage() {
  const { user, loading: authLoading } = useAuth()
  const router = useRouter()
  const locale = useLocale()
  const t = useTranslations('bans')
  const [isAdmin, setIsAdmin] = useState<boolean>(false)
  const [loading, setLoading] = useState<boolean>(true)
  const [accountBans, setAccountBans] = useState<AccountBan[]>([])
  const [characterBans, setCharacterBans] = useState<CharacterBan[]>([])
  const [allAccounts, setAllAccounts] = useState<any[]>([])
  const [allCharacters, setAllCharacters] = useState<any[]>([])
  const [stats, setStats] = useState<BanStats>({
    totalAccountBans: 0,
    totalCharacterBans: 0,
    activeAccountBans: 0,
    activeCharacterBans: 0,
    tempBans: 0,
    permanentBans: 0,
    bansToday: 0,
    bansThisWeek: 0
  })
  const [activeTab, setActiveTab] = useState<'overview' | 'account-bans' | 'character-bans' | 'create-account-ban' | 'create-character-ban'>('overview')
  const [query, setQuery] = useState('')
  const [showIP, setShowIP] = useState<boolean>(false)
  const [refreshing, setRefreshing] = useState<boolean>(false)
  const [currentPage, setCurrentPage] = useState<number>(1)
  const [itemsPerPage] = useState<number>(9)
  const [createAccountPage, setCreateAccountPage] = useState<number>(1)
  const [createCharacterPage, setCreateCharacterPage] = useState<number>(1)
  const [showBanModal, setShowBanModal] = useState<boolean>(false)
  const [banType, setBanType] = useState<'account' | 'character'>('account')
  const [banTarget, setBanTarget] = useState<any>(null)
  const [banReason, setBanReason] = useState<string>('')
  const [banDuration, setBanDuration] = useState<string>('')
  const [banDurationType, setBanDurationType] = useState<'permanent' | 'temporary'>('permanent')
  const [notification, setNotification] = useState<{type: 'success' | 'error', message: string} | null>(null)
  const [showIPs, setShowIPs] = useState<boolean>(false)

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

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

  useEffect(() => {
    if (isAdmin) {
      fetchAllBans()
    }
  }, [isAdmin, currentPage, createAccountPage, createCharacterPage])

  useEffect(() => {
    if (notification) {
      const timer = setTimeout(() => setNotification(null), 5000)
      return () => clearTimeout(timer)
    }
  }, [notification])

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

  const fetchAllBans = async () => {
    try {
      setRefreshing(true)
      const offset = (currentPage - 1) * itemsPerPage
      const accountOffset = (createAccountPage - 1) * itemsPerPage
      const characterOffset = (createCharacterPage - 1) * itemsPerPage
      
      const [accountRes, characterRes, allAccountsRes, allCharactersRes] = await Promise.all([
        authFetch(`/api/admin/account-bans?limit=${itemsPerPage}&offset=${offset}`),
        authFetch(`/api/admin/character-bans?limit=${itemsPerPage}&offset=${offset}`),
        authFetch(`/api/admin/accounts-detailed?limit=1000`), // Load all accounts for search
        authFetch(`/api/admin/characters-detailed?limit=1000`) // Load all characters for search
      ])
      
      const accountData = await accountRes.json()
      const characterData = await characterRes.json()
      const allAccountsData = await allAccountsRes.json()
      const allCharactersData = await allCharactersRes.json()
      
      if (accountData?.success) {
        setAccountBans(accountData.bans)
      }
      if (characterData?.success) {
        setCharacterBans(characterData.bans)
      }
      if (allAccountsData?.success) {
        setAllAccounts(allAccountsData.accounts)
      }
      if (allCharactersData?.success) {
        setAllCharacters(allCharactersData.characters)
      }
      
      calculateStats(accountData.bans || [], characterData.bans || [])
    } catch (error) {
      console.error('Error fetching bans:', error)
    } finally {
      setRefreshing(false)
    }
  }

  const calculateStats = (accountBansData: AccountBan[], characterBansData: CharacterBan[]) => {
    const activeAccountBans = accountBansData.filter(ban => ban.OtakuN_N > 0).length
    const activeCharacterBans = characterBansData.filter(ban => ban.OtakuN_N > 0).length
    const tempBans = characterBansData.filter(ban => ban.OtakuN_N === 1).length
    const permanentBans = accountBansData.filter(ban => ban.OtakuN_N === 2).length + 
                          characterBansData.filter(ban => ban.OtakuN_N === 2).length
    
    const today = new Date().toISOString().split('T')[0]
    const weekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
    
    const bansToday = [...accountBansData, ...characterBansData].filter(ban => 
      ban.MomentBan && ban.MomentBan.startsWith(today)
    ).length
    
    const bansThisWeek = [...accountBansData, ...characterBansData].filter(ban => 
      ban.MomentBan && ban.MomentBan >= weekAgo
    ).length

    setStats({
      totalAccountBans: accountBansData.length,
      totalCharacterBans: characterBansData.length,
      activeAccountBans,
      activeCharacterBans,
      tempBans,
      permanentBans,
      bansToday,
      bansThisWeek
    })
  }

  const resetBanModal = () => {
    setShowBanModal(false)
    setBanReason('')
    setBanDuration('')
    setBanDurationType('permanent')
    setBanTarget(null)
  }

  const handleBanAccount = async () => {
    if (!banTarget || !banReason.trim()) {
      setNotification({ type: 'error', message: t('modal.errors.provideReason') })
      return 
    }

    try {
      const res = await authFetch('/api/admin/account-bans', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          accountId: banTarget.id,
          reason: banReason,
          adminUsername: user?.username,
          banType: 2 // Permanent ban
        })
      })

      const data = await res.json()
      if (data.success) {
        setNotification({ type: 'success', message: data.message })
        resetBanModal()
        fetchAllBans()
      } else {
        setNotification({ type: 'error', message: data.error })
      }
    } catch (error) {
      console.error('Ban account error:', error)
      setNotification({ type: 'error', message: t('modal.errors.failedBanAccount') })
    }
  }

  const handleUnbanAccount = async (accountId: number) => {
    try {
      const res = await authFetch('/api/admin/account-bans', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          accountId,
          reason: 'Unbanned by admin',
          adminUsername: user?.username,
          banType: 0 // Unban
        })
      })

    const data = await res.json()
      if (data.success) {
        setNotification({ type: 'success', message: data.message })
        fetchAllBans()
      } else {
        setNotification({ type: 'error', message: data.error })
      }
    } catch (error) {
      console.error('Unban account error:', error)
      setNotification({ type: 'error', message: t('modal.errors.failedUnbanAccount') })
    }
  }

  const handleBanCharacter = async () => {
    if (!banTarget || !banReason.trim()) {
      setNotification({ type: 'error', message: t('modal.errors.provideReason') })
      return 
    }

    if (banDurationType === 'temporary' && !banDuration.trim()) {
      setNotification({ type: 'error', message: t('modal.errors.provideDuration') })
      return
    }
    
    try {
      const res = await authFetch('/api/admin/character-bans', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          characterId: banTarget.id,
          reason: banReason,
          adminUsername: user?.username,
          banType: banDurationType === 'temporary' ? 1 : 2, // 1 = temporary, 2 = permanent
          banDuration: banDurationType === 'temporary' ? banDuration : null
        })
      })

    const data = await res.json()
      if (data.success) {
        setNotification({ type: 'success', message: data.message })
        resetBanModal()
        fetchAllBans()
      } else {
        setNotification({ type: 'error', message: data.error })
      }
    } catch (error) {
      console.error('Ban character error:', error)
      setNotification({ type: 'error', message: t('modal.errors.failedBanCharacter') })
    }
  }

  const handleUnbanCharacter = async (characterId: number) => {
    try {
      const res = await authFetch('/api/admin/character-bans', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          characterId,
          reason: 'Unbanned by admin',
          adminUsername: user?.username,
          banType: 0 // Unban
        })
      })

      const data = await res.json()
      if (data.success) {
        setNotification({ type: 'success', message: data.message })
        fetchAllBans()
      } else {
        setNotification({ type: 'error', message: data.error })
      }
    } catch (error) {
      console.error('Unban character error:', error)
      setNotification({ type: 'error', message: t('modal.errors.failedUnbanCharacter') })
    }
  }

  const getBanStatusBadge = (banStatus: number) => {
    switch (banStatus) {
      case 0: 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"><CheckCircle className="w-3 h-3" /> {t('badges.active')}</span>
      case 1: 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"><Clock className="w-3 h-3" /> {t('badges.tempBanned')}</span>
      case 2: 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"><Ban className="w-3 h-3" /> {t('badges.banned')}</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" /> {t('badges.unknown')}</span>
    }
  }

  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 formatDate = (dateString: string | null) => {
    if (!dateString) return t('never')
    
    // 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]
        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(' ')) {
      const datePart = dateString.split(' ')[0]
      date = new Date(datePart)
      } else {
      date = new Date(dateString)
    }
    
    if (isNaN(date.getTime())) {
      return dateString
    }
    
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    })
  }

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

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

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

  const goToNextPage = () => {
    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] flex">
          {/* Notification */}
          {notification && (
            <div className={`fixed top-20 right-6 z-50 p-4 rounded-xl border shadow-lg transition-all duration-300 ${
              notification.type === 'success' 
                ? 'bg-green-600/20 text-green-400 border-green-600/30' 
                : 'bg-red-600/20 text-red-400 border-red-600/30'
            }`}>
              <div className="flex items-center gap-2">
                {notification.type === 'success' ? (
                  <CheckCircle className="w-5 h-5" />
                ) : (
                  <AlertTriangle className="w-5 h-5" />
                )}
                <span className="font-medium">{notification.message}</span>
          </div>
          </div>
          )}

          {/* Sidebar */}
          <div className="w-80 bg-gradient-to-b from-[#0f1620] to-[#0c1320] border-r border-[#0087FF]/20 shadow-lg">
            <div className="p-6">
              {/* Header */}
              <div className="mb-8">
                <h1 className="text-2xl font-bold text-white mb-1">{t('title')}</h1>
                <p className="text-gray-400 text-sm">{t('welcome', { username: user?.username || '' })}</p>
                <p className="text-[#8ab4ff] text-xs">{t('administrator')}</p>
              </div>

              {/* Navigation */}
              <nav className="space-y-2 mb-8">
                <button
                  onClick={() => setActiveTab('overview')}
                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 ${
                    activeTab === 'overview'
                      ? 'bg-[#0087FF] text-white shadow-lg'
                      : 'text-gray-400 hover:text-white hover:bg-[#0087FF]/20'
                  }`}
                >
                  <BarChart3 className="w-5 h-5 flex-shrink-0" />
                  <span className="font-medium">{t('overview')}</span>
                </button>

                <button
                  onClick={() => setActiveTab('account-bans')}
                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 ${
                    activeTab === 'account-bans'
                      ? 'bg-red-600 text-white shadow-lg'
                      : 'text-gray-400 hover:text-white hover:bg-red-600/20'
                  }`}
                >
                  <Ban className="w-5 h-5 flex-shrink-0" />
                  <span className="font-medium">{t('accountBans')}</span>
                </button>

                <button
                  onClick={() => setActiveTab('create-account-ban')}
                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 ${
                    activeTab === 'create-account-ban'
                      ? 'bg-red-600 text-white shadow-lg'
                      : 'text-gray-400 hover:text-white hover:bg-red-600/20'
                  }`}
                >
                  <Plus className="w-5 h-5 flex-shrink-0" />
                  <span className="font-medium">{t('createAccountBan')}</span>
                </button>

                <button
                  onClick={() => setActiveTab('character-bans')}
                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 ${
                    activeTab === 'character-bans'
                      ? 'bg-yellow-600 text-white shadow-lg'
                      : 'text-gray-400 hover:text-white hover:bg-yellow-600/20'
                  }`}
                >
                  <User className="w-5 h-5 flex-shrink-0" />
                  <span className="font-medium">{t('characterBans')}</span>
                </button>

                <button
                  onClick={() => setActiveTab('create-character-ban')}
                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 ${
                    activeTab === 'create-character-ban'
                      ? 'bg-yellow-600 text-white shadow-lg'
                      : 'text-gray-400 hover:text-white hover:bg-yellow-600/20'
                  }`}
                >
                  <Plus className="w-5 h-5 flex-shrink-0" />
                  <span className="font-medium">{t('createCharacterBan')}</span>
                </button>
              </nav>

              {/* Quick Actions */}
              <div className="space-y-2">
            <Button 
                  onClick={fetchAllBans}
                  disabled={refreshing}
                  className="w-full bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30 rounded-xl"
                >
                  <RefreshCw className={`w-4 h-4 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
                  {t('refresh')}
            </Button>
            <Button 
                  onClick={() => router.push(`/${locale}/admin`)}
                  variant="outline"
                  className="w-full border-[#0087FF]/30 text-[#8ab4ff] hover:bg-[#0087FF]/10 rounded-xl"
            >
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  {t('backToAdmin')}
            </Button>
              </div>
          </div>
        </div>

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

              <div className="bg-gradient-to-br from-[#0f1620] to-[#0c1320] rounded-2xl p-6 border border-yellow-600/20 shadow-lg">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-gray-400 text-sm mb-1">{t('stats.activeCharacterBans')}</p>
                    <p className="text-3xl font-bold text-yellow-400">{stats.activeCharacterBans}</p>
                  </div>
                  <div className="w-12 h-12 bg-yellow-600/20 rounded-xl flex items-center justify-center">
                    <User 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-orange-600/20 shadow-lg">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-gray-400 text-sm mb-1">{t('stats.temporaryBans')}</p>
                    <p className="text-3xl font-bold text-orange-400">{stats.tempBans}</p>
                  </div>
                  <div className="w-12 h-12 bg-orange-600/20 rounded-xl flex items-center justify-center">
                    <Clock className="w-6 h-6 text-orange-400" />
                  </div>
                </div>
              </div>

            </div>

            {/* Content Area */}
            <div className="bg-gradient-to-br from-[#0f1620] to-[#0c1320] rounded-2xl p-6 border border-[#0087FF]/20 shadow-lg">
              {/* Overview Tab */}
              {activeTab === 'overview' && (
                <>
                  <div className="flex items-center justify-between mb-6">
                  <div>
                      <h2 className="text-2xl font-bold text-white mb-1 flex items-center gap-2">
                        <BarChart3 className="w-6 h-6 text-[#0087FF]" />
                        {t('overviewSection.title')}
                      </h2>
                      <p className="text-gray-400">{t('overviewSection.subtitle')}</p>
                  </div>
                  </div>
              
                  {/* Recent Bans */}
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {/* All Account Bans */}
                    <div>
                      <h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
                        <Ban className="w-5 h-5 text-red-400" />
                        {t('overviewSection.allAccountBans', { count: accountBans.length })}
                      </h3>
                      <div className="space-y-3 max-h-[400px] overflow-y-auto">
                        {accountBans.map((ban) => (
                          <div key={ban.ID} className="bg-gradient-to-r from-[#0c1320]/60 to-[#0a0f1a]/60 rounded-xl p-4 border border-red-600/20">
                <div className="flex items-center justify-between">
                              <div className="flex items-center gap-3">
                                <div className="w-10 h-10 bg-gradient-to-br from-red-600/20 to-red-400/10 rounded-full flex items-center justify-center">
                                  <Ban className="w-5 h-5 text-red-400" />
                </div>
                  <div>
                                  <div className="flex items-center gap-2 mb-1">
                                    <h4 className="text-sm font-bold text-white">{ban.Nombre}</h4>
                                    {getBanStatusBadge(ban.OtakuN_N)}
                  </div>
                                  <div className="text-xs text-gray-400">
                                    {t('overviewSection.bannedBy', { admin: ban.FueBan || 'Unknown', date: formatDate(ban.MomentBan) })}
                  </div>
                </div>
                              </div>
                  <Button 
                                onClick={() => handleUnbanAccount(ban.ID)}
                    size="sm"
                                className="bg-green-600/20 hover:bg-green-600/30 text-green-400 border border-green-600/30 rounded-xl"
                  >
                                <CheckCircle className="w-3 h-3" />
                  </Button>
                            </div>
                          </div>
                        ))}
                        {accountBans.length === 0 && (
                          <div className="text-center py-8">
                            <Ban className="w-12 h-12 text-gray-600 mx-auto mb-3" />
                            <p className="text-gray-500">{t('overviewSection.noAccountBans')}</p>
                          </div>
                        )}
              </div>
            </div>

                    {/* All Character Bans */}
                    <div>
                      <h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
                        <User className="w-5 h-5 text-yellow-400" />
                        {t('overviewSection.allCharacterBans', { count: characterBans.length })}
                      </h3>
                      <div className="space-y-3 max-h-[400px] overflow-y-auto">
                        {characterBans.map((ban) => (
                          <div key={ban.ID} className="bg-gradient-to-r from-[#0c1320]/60 to-[#0a0f1a]/60 rounded-xl p-4 border border-yellow-600/20">
                            <div className="flex items-center justify-between">
                              <div className="flex items-center gap-3">
                                <div className="w-10 h-10 bg-gradient-to-br from-yellow-600/20 to-yellow-400/10 rounded-full flex items-center justify-center">
                                  <User className="w-5 h-5 text-yellow-400" />
              </div>
                                <div>
                                  <div className="flex items-center gap-2 mb-1">
                                    <h4 className="text-sm font-bold text-white">{ban.characterName}</h4>
                                    {getBanStatusBadge(ban.OtakuN_N)}
                                  </div>
                                  <div className="text-xs text-gray-400">
                                    {t('characterBansTab.account', { name: ban.accountName, id: ban.accountId })} • {formatDate(ban.MomentBan)}
                                  </div>
                                </div>
                              </div>
                            <Button
                                onClick={() => handleUnbanCharacter(ban.ID)}
                              size="sm"
                                className="bg-green-600/20 hover:bg-green-600/30 text-green-400 border border-green-600/30 rounded-xl"
                            >
                                <CheckCircle className="w-3 h-3" />
                            </Button>
                            </div>
                          </div>
                        ))}
                        {characterBans.length === 0 && (
                          <div className="text-center py-8">
                            <User className="w-12 h-12 text-gray-600 mx-auto mb-3" />
                            <p className="text-gray-500">{t('overviewSection.noCharacterBans')}</p>
                </div>
              )}
            </div>
          </div>
        </div>
                </>
              )}

              {/* Account Bans Tab */}
              {activeTab === 'account-bans' && (
                <>
                  <div className="flex items-center justify-between mb-6">
                <div>
                      <h2 className="text-2xl font-bold text-white mb-1 flex items-center gap-2">
                        <Ban className="w-6 h-6 text-red-400" />
                        {t('accountBansTab.title')}
                      </h2>
                      <p className="text-gray-400">{t('accountBansTab.subtitle')}</p>
                    </div>
                    <div className="flex items-center gap-2">
                      <Button
                        onClick={() => setShowIP(!showIP)}
                        className="bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30 rounded-xl"
                      >
                        {showIP ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                      </Button>
                    </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('accountBansTab.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>
              </div>

                  {/* Account Bans List */}
                  <div className="space-y-4 max-h-[60vh] overflow-y-auto">
                    {accountBans.filter(ban => 
                      !query || 
                      ban.Nombre.toLowerCase().includes(query.toLowerCase()) ||
                      ban.Email?.toLowerCase().includes(query.toLowerCase()) ||
                      ban.IP?.includes(query) ||
                      ban.ReasonBanUwU?.toLowerCase().includes(query.toLowerCase())
                    ).map((ban) => (
                      <div key={ban.ID} className="bg-gradient-to-r from-[#0c1320]/60 to-[#0a0f1a]/60 rounded-xl p-4 border border-red-600/20 hover:border-red-600/40 transition-all duration-200">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-4">
                            <div className="w-12 h-12 bg-gradient-to-br from-red-600/20 to-red-400/10 rounded-full flex items-center justify-center">
                              <Ban className="w-6 h-6 text-red-400" />
                            </div>
                <div>
                              <div className="flex items-center gap-2 mb-1 flex-wrap">
                                <h3 className="text-lg font-bold text-white">{ban.Nombre}</h3>
                                {getBanStatusBadge(ban.OtakuN_N)}
                                {getAdminBadge(ban.JotoOtaku)}
                                {getVipBadge(ban.VIP)}
                              </div>
                              <div className="text-sm text-gray-400">
                                <span className="inline-flex items-center gap-1 mr-4">
                                  <Hash className="w-3 h-3" />
                                  ID {ban.ID}
                            </span>
                                <span className="inline-flex items-center gap-1 mr-4">
                                  <Mail className="w-3 h-3" />
                                  {ban.Email || t('admin.accounts.details.noEmail')}
                                </span>
                                <span className="inline-flex items-center gap-1">
                                  <Globe className="w-3 h-3" />
                                  {maskIP(ban.IP)}
                                </span>
                              </div>
                              {ban.ReasonBanUwU && (
                                <div className="text-sm text-red-300 mt-1">
                                  <strong>{t('accountBansTab.reason')}</strong> {ban.ReasonBanUwU}
                                </div>
                              )}
                              <div className="text-xs text-gray-500 mt-1">
                                {t('accountBansTab.bannedBy', { admin: ban.FueBan || 'Unknown', date: formatDate(ban.MomentBan) })}
                              </div>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Button
                              onClick={() => handleUnbanAccount(ban.ID)}
                              className="bg-green-600/20 hover:bg-green-600/30 text-green-400 border border-green-600/30 rounded-xl px-4 py-2"
                  >
                              <CheckCircle className="w-4 h-4 mr-2" />
                              {t('accountBansTab.unban')}
                            </Button>
                </div>
            </div>
          </div>
                    ))}
                    {accountBans.filter(ban => 
                      !query || 
                      ban.Nombre.toLowerCase().includes(query.toLowerCase()) ||
                      ban.Email?.toLowerCase().includes(query.toLowerCase()) ||
                      ban.IP?.includes(query) ||
                      ban.ReasonBanUwU?.toLowerCase().includes(query.toLowerCase())
                    ).length === 0 && (
                      <div className="text-center py-12">
                        <Ban className="w-16 h-16 text-gray-600 mx-auto mb-4" />
                        <h3 className="text-xl font-bold text-gray-400 mb-2">{t('accountBansTab.noResults')}</h3>
                        <p className="text-gray-500">{t('accountBansTab.noResultsDesc')}</p>
                </div>
              )}
            </div>

                  {/* Pagination */}
                  {accountBans.length > 0 && (
                    <div className="flex items-center justify-between mt-6 pt-4 border-t border-white/10">
                      <div className="text-sm text-gray-400">
                        {t('accountBansTab.page', { page: currentPage, count: accountBans.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 rounded-xl"
                        >
                          {t('accountBansTab.previous')}
                        </Button>
                        <Button
                          onClick={goToNextPage}
                          disabled={accountBans.length < itemsPerPage}
                          className="bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30 disabled:opacity-50 rounded-xl"
                        >
                          {t('accountBansTab.next')}
                        </Button>
        </div>
                    </div>
                  )}
                </>
              )}

              {/* Character Bans Tab */}
              {activeTab === 'character-bans' && (
                <>
                  <div className="flex items-center justify-between mb-6">
                <div>
                      <h2 className="text-2xl font-bold text-white mb-1 flex items-center gap-2">
                        <User className="w-6 h-6 text-yellow-400" />
                        {t('characterBansTab.title')}
                      </h2>
                      <p className="text-gray-400">{t('characterBansTab.subtitle')}</p>
                </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('characterBansTab.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>
                </div>

                  {/* Character Bans List */}
                  <div className="space-y-4 max-h-[60vh] overflow-y-auto">
                    {characterBans.filter(ban => 
                      !query || 
                      ban.characterName.toLowerCase().includes(query.toLowerCase()) ||
                      ban.accountName.toLowerCase().includes(query.toLowerCase()) ||
                      ban.ReasonBanUwU?.toLowerCase().includes(query.toLowerCase())
                    ).map((ban) => (
                      <div key={ban.ID} className="bg-gradient-to-r from-[#0c1320]/60 to-[#0a0f1a]/60 rounded-xl p-4 border border-yellow-600/20 hover:border-yellow-600/40 transition-all duration-200">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-4">
                            <div className="w-12 h-12 bg-gradient-to-br from-yellow-600/20 to-yellow-400/10 rounded-full flex items-center justify-center">
                              <User className="w-6 h-6 text-yellow-400" />
                            </div>
                <div>
                              <div className="flex items-center gap-2 mb-1 flex-wrap">
                                <h3 className="text-lg font-bold text-white">{ban.characterName}</h3>
                                {getBanStatusBadge(ban.OtakuN_N)}
                </div>
                              <div className="text-sm text-gray-400">
                                <span className="inline-flex items-center gap-1 mr-4">
                                  <Hash className="w-3 h-3" />
                                  {t('characterBansTab.characterId', { id: ban.ID })}
                                </span>
                                <span className="inline-flex items-center gap-1 mr-4">
                                  <User className="w-3 h-3" />
                                  {t('characterBansTab.account', { name: ban.accountName, id: ban.accountId })}
                                </span>
                  </div>
                              {ban.ReasonBanUwU && (
                                <div className="text-sm text-yellow-300 mt-1">
                                  <strong>{t('characterBansTab.reason')}</strong> {ban.ReasonBanUwU}
                    </div>
                  )}
                              {ban.TimeBanUwU && (
                                <div className="text-sm text-blue-300 mt-1">
                                  <strong>{t('characterBansTab.duration')}</strong> {ban.TimeBanUwU}
                    </div>
                  )}
                              <div className="text-xs text-gray-500 mt-1">
                                {t('characterBansTab.bannedBy', { admin: ban.FueBan || 'Unknown', date: formatDate(ban.MomentBan) })}
                              </div>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Button
                              onClick={() => handleUnbanCharacter(ban.ID)}
                              className="bg-green-600/20 hover:bg-green-600/30 text-green-400 border border-green-600/30 rounded-xl px-4 py-2"
                            >
                              <CheckCircle className="w-4 h-4 mr-2" />
                              {t('characterBansTab.unban')}
                            </Button>
                  </div>
                </div>
                      </div>
                    ))}
                    {characterBans.filter(ban => 
                      !query || 
                      ban.characterName.toLowerCase().includes(query.toLowerCase()) ||
                      ban.accountName.toLowerCase().includes(query.toLowerCase()) ||
                      ban.ReasonBanUwU?.toLowerCase().includes(query.toLowerCase())
                    ).length === 0 && (
                      <div className="text-center py-12">
                        <User className="w-16 h-16 text-gray-600 mx-auto mb-4" />
                        <h3 className="text-xl font-bold text-gray-400 mb-2">{t('characterBansTab.noResults')}</h3>
                        <p className="text-gray-500">{t('characterBansTab.noResultsDesc')}</p>
                </div>
              )}
              </div>

                  {/* Pagination */}
                  {characterBans.length > 0 && (
                    <div className="flex items-center justify-between mt-6 pt-4 border-t border-white/10">
                      <div className="text-sm text-gray-400">
                        {t('characterBansTab.page', { page: currentPage, count: characterBans.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 rounded-xl"
                        >
                          {t('characterBansTab.previous')}
                </Button>
                <Button
                          onClick={goToNextPage}
                          disabled={characterBans.length < itemsPerPage}
                          className="bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30 disabled:opacity-50 rounded-xl"
                        >
                          {t('characterBansTab.next')}
                </Button>
            </div>
          </div>
                  )}
                </>
              )}

              {/* Create Account Ban Tab */}
              {activeTab === 'create-account-ban' && (
                <>
                  <div className="flex items-center justify-between mb-6">
                <div>
                      <h2 className="text-2xl font-bold text-white mb-1 flex items-center gap-2">
                        <Plus className="w-6 h-6 text-red-400" />
                        {t('createAccountBanTab.title')}
                      </h2>
                      <p className="text-gray-400">{t('createAccountBanTab.subtitle')}</p>
                </div>
                    <div className="flex items-center gap-2">
                      <Button
                        onClick={() => setShowIPs(!showIPs)}
                        className="bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30 rounded-xl"
                      >
                        {showIPs ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                      </Button>
                </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('createAccountBanTab.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>
                </div>

                  {/* All Accounts List */}
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                    {allAccounts.filter(account => 
                      !query || 
                      account.username.toLowerCase().includes(query.toLowerCase()) ||
                      account.email?.toLowerCase().includes(query.toLowerCase()) ||
                      account.id.toString().includes(query)
                    ).slice((createAccountPage - 1) * itemsPerPage, createAccountPage * itemsPerPage).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-red-600/30 transition-all duration-300 cursor-pointer group">
                        <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>ID {account.id}</span>
                            </div>
                            <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
                              <Mail className="w-3 h-3" />
                              <span>{account.email || t('admin.accounts.details.noEmail')}</span>
                            </div>
                            <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
                              <Globe className="w-3 h-3" />
                              <span className="font-mono">{maskIP(account.ip)}</span>
                            </div>
                          </div>
                        </div>
                        <div className="mt-3 flex justify-end">
                          {account.banStatus === 0 ? (
                            <Button
                              onClick={(e) => {
                                e.stopPropagation()
                                setBanTarget(account)
                                setBanType('account')
                                setShowBanModal(true)
                              }}
                              className="bg-red-600/20 hover:bg-red-600/30 text-red-400 border border-red-600/30 rounded-xl px-3 py-1 text-xs"
                            >
                              <Ban className="w-3 h-3 mr-1" />
                              {t('createAccountBanTab.banAccount')}
                            </Button>
                          ) : (
                            <span className="text-red-400 text-xs font-medium">{t('createAccountBanTab.alreadyBanned')}</span>
                          )}
                        </div>
                      </div>
                    ))}
                    {allAccounts.filter(account => 
                      !query || 
                      account.username.toLowerCase().includes(query.toLowerCase()) ||
                      account.email?.toLowerCase().includes(query.toLowerCase()) ||
                      account.id.toString().includes(query)
                    ).length === 0 && (
                      <div className="col-span-full text-center py-12">
                        <User className="w-16 h-16 text-gray-600 mx-auto mb-4" />
                        <h3 className="text-xl font-bold text-gray-400 mb-2">{t('createAccountBanTab.noResults')}</h3>
                        <p className="text-gray-500">{t('createAccountBanTab.noResultsDesc')}</p>
                    </div>
                  )}
              </div>

                  {/* Pagination */}
                  {allAccounts.filter(account => 
                    !query || 
                    account.username.toLowerCase().includes(query.toLowerCase()) ||
                    account.email?.toLowerCase().includes(query.toLowerCase()) ||
                    account.id.toString().includes(query)
                  ).length > itemsPerPage && (
                    <div className="flex items-center justify-between mt-6 pt-4 border-t border-white/10">
                      <div className="text-sm text-gray-400">
                        {t('createAccountBanTab.page', { page: createAccountPage, count: allAccounts.filter(account => 
                          !query || 
                          account.username.toLowerCase().includes(query.toLowerCase()) ||
                          account.email?.toLowerCase().includes(query.toLowerCase()) ||
                          account.id.toString().includes(query)
                        ).length })}
                      </div>
                      <div className="flex items-center gap-2">
                <Button
                          onClick={() => setCreateAccountPage(createAccountPage - 1)}
                          disabled={createAccountPage === 1}
                          className="bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30 disabled:opacity-50 rounded-xl"
                        >
                          {t('createAccountBanTab.previous')}
                </Button>
                <Button
                          onClick={() => setCreateAccountPage(createAccountPage + 1)}
                          disabled={createAccountPage * itemsPerPage >= allAccounts.filter(account => 
                            !query || 
                            account.username.toLowerCase().includes(query.toLowerCase()) ||
                            account.email?.toLowerCase().includes(query.toLowerCase()) ||
                            account.id.toString().includes(query)
                          ).length}
                          className="bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30 disabled:opacity-50 rounded-xl"
                        >
                          {t('createAccountBanTab.next')}
                </Button>
            </div>
          </div>
                  )}
                </>
              )}

              {/* Create Character Ban Tab */}
              {activeTab === 'create-character-ban' && (
                <>
                  <div className="flex items-center justify-between mb-6">
                <div>
                      <h2 className="text-2xl font-bold text-white mb-1 flex items-center gap-2">
                        <Plus className="w-6 h-6 text-yellow-400" />
                        {t('createCharacterBanTab.title')}
                      </h2>
                      <p className="text-gray-400">{t('createCharacterBanTab.subtitle')}</p>
                </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('createCharacterBanTab.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>
                    </div>

                  {/* All Characters List */}
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                    {allCharacters.filter(character => 
                      !query || 
                      character.characterName.toLowerCase().includes(query.toLowerCase()) ||
                      character.accountName.toLowerCase().includes(query.toLowerCase()) ||
                      character.id.toString().includes(query)
                    ).slice((createCharacterPage - 1) * itemsPerPage, createCharacterPage * itemsPerPage).map((character) => (
                      <div key={character.id} className="bg-gradient-to-r from-[#0c1320]/60 to-[#0a0f1a]/60 rounded-xl p-4 border border-[#0087FF]/10 hover:border-yellow-600/30 transition-all duration-300 cursor-pointer group">
                        <div className="flex items-center gap-3">
                          <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-yellow-600/30 flex-shrink-0">
                            <div className="w-full h-full bg-gradient-to-br from-yellow-600/20 to-yellow-400/10 flex items-center justify-center">
                              <User className="w-6 h-6 text-yellow-400" />
                    </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-yellow-400 transition-colors">{character.characterName}</h3>
                              {getBanStatusBadge(character.banStatus)}
                            </div>
                            <div className="flex items-center gap-1 text-xs text-gray-400">
                              <Hash className="w-3 h-3" />
                              <span>{t('createCharacterBanTab.characterId', { id: character.id })}</span>
                            </div>
                            <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
                              <User className="w-3 h-3" />
                              <span>{t('createCharacterBanTab.account', { name: character.accountName })}</span>
                            </div>
                            <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
                              <Hash className="w-3 h-3" />
                              <span>{t('createCharacterBanTab.accountId', { id: character.accountId })}</span>
                            </div>
                          </div>
                        </div>
                        <div className="mt-3 flex justify-end">
                          {character.banStatus === 0 ? (
                            <Button
                              onClick={(e) => {
                                e.stopPropagation()
                                setBanTarget(character)
                                setBanType('character')
                                setShowBanModal(true)
                              }}
                              className="bg-yellow-600/20 hover:bg-yellow-600/30 text-yellow-400 border border-yellow-600/30 rounded-xl px-3 py-1 text-xs"
                            >
                              <Ban className="w-3 h-3 mr-1" />
                              {t('createCharacterBanTab.banCharacter')}
                            </Button>
                          ) : (
                            <span className="text-yellow-400 text-xs font-medium">{t('createCharacterBanTab.alreadyBanned')}</span>
                          )}
                  </div>
                </div>
                    ))}
                    {allCharacters.filter(character => 
                      !query || 
                      character.characterName.toLowerCase().includes(query.toLowerCase()) ||
                      character.accountName.toLowerCase().includes(query.toLowerCase()) ||
                      character.id.toString().includes(query)
                    ).length === 0 && (
                      <div className="col-span-full text-center py-12">
                        <User className="w-16 h-16 text-gray-600 mx-auto mb-4" />
                        <h3 className="text-xl font-bold text-gray-400 mb-2">{t('createCharacterBanTab.noResults')}</h3>
                        <p className="text-gray-500">{t('createCharacterBanTab.noResultsDesc')}</p>
                    </div>
                  )}
              </div>

                  {/* Pagination */}
                  {allCharacters.filter(character => 
                    !query || 
                    character.characterName.toLowerCase().includes(query.toLowerCase()) ||
                    character.accountName.toLowerCase().includes(query.toLowerCase()) ||
                    character.id.toString().includes(query)
                  ).length > itemsPerPage && (
                    <div className="flex items-center justify-between mt-6 pt-4 border-t border-white/10">
                      <div className="text-sm text-gray-400">
                        {t('createCharacterBanTab.page', { page: createCharacterPage, count: allCharacters.filter(character => 
                          !query || 
                          character.characterName.toLowerCase().includes(query.toLowerCase()) ||
                          character.accountName.toLowerCase().includes(query.toLowerCase()) ||
                          character.id.toString().includes(query)
                        ).length })}
                      </div>
                      <div className="flex items-center gap-2">
                <Button
                          onClick={() => setCreateCharacterPage(createCharacterPage - 1)}
                          disabled={createCharacterPage === 1}
                          className="bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30 disabled:opacity-50 rounded-xl"
                        >
                          {t('createCharacterBanTab.previous')}
                </Button>
                <Button
                          onClick={() => setCreateCharacterPage(createCharacterPage + 1)}
                          disabled={createCharacterPage * itemsPerPage >= allCharacters.filter(character => 
                            !query || 
                            character.characterName.toLowerCase().includes(query.toLowerCase()) ||
                            character.accountName.toLowerCase().includes(query.toLowerCase()) ||
                            character.id.toString().includes(query)
                          ).length}
                          className="bg-[#0087FF]/20 hover:bg-[#0087FF]/30 text-[#8ab4ff] border border-[#0087FF]/30 disabled:opacity-50 rounded-xl"
                        >
                          {t('createCharacterBanTab.next')}
                </Button>
              </div>
            </div>
                  )}
                </>
              )}
                </div>
              </div>
        </main>

        {/* Ban Modal */}
        {showBanModal && banTarget && (
          <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={resetBanModal}></div>
            <div className="relative bg-gradient-to-br from-[#0f1c30] to-[#0c1728] rounded-3xl border border-[#1c3e6e] p-6 md:p-8 max-w-md w-full shadow-[0_0_60px_-12px_rgba(0,135,255,0.35)]">
              <button
                onClick={resetBanModal}
                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>

              <div className="mb-6">
                <h2 className="text-2xl font-bold text-white mb-2">
                  {banType === 'account' ? t('modal.banAccount') : t('modal.banCharacter')}
                </h2>
                <p className="text-gray-400">
                  {banType === 'account' 
                    ? t('modal.confirmBanAccount', { name: banTarget.Nombre || banTarget.username || 'Unknown' })
                    : t('modal.confirmBanCharacter', { name: banTarget.characterName || 'Unknown' })
                  }
                </p>
                </div>

              <div className="space-y-4 mb-6">
                <div>
                  <label className="block text-sm font-medium text-[#8fb8ff] mb-2">
                    {t('modal.banReason')}
                  </label>
                  <textarea
                    value={banReason}
                    onChange={(e) => setBanReason(e.target.value)}
                    placeholder={t('modal.banReasonPlaceholder')}
                    className="w-full px-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 resize-none"
                    rows={3}
                  />
              </div>
              
                {banType === 'character' && (
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-[#8fb8ff] mb-2">
                        {t('modal.banType')}
                      </label>
                      <div className="flex gap-2">
                        <button
                          type="button"
                          onClick={() => setBanDurationType('permanent')}
                          className={`flex-1 px-4 py-3 rounded-xl border transition-colors ${
                            banDurationType === 'permanent'
                              ? 'bg-red-600/20 border-red-600/50 text-red-400'
                              : 'bg-[#0c1320]/80 border-[#0087FF]/20 text-gray-300 hover:border-[#0087FF]/40'
                          }`}
                        >
                          <Ban className="w-4 h-4 inline mr-2" />
                          {t('modal.permanentBan')}
                        </button>
                        <button
                          type="button"
                          onClick={() => setBanDurationType('temporary')}
                          className={`flex-1 px-4 py-3 rounded-xl border transition-colors ${
                            banDurationType === 'temporary'
                              ? 'bg-orange-600/20 border-orange-600/50 text-orange-400'
                              : 'bg-[#0c1320]/80 border-[#0087FF]/20 text-gray-300 hover:border-[#0087FF]/40'
                          }`}
                        >
                          <Clock className="w-4 h-4 inline mr-2" />
                          {t('modal.temporaryBan')}
                        </button>
                  </div>
                    </div>

                    {banDurationType === 'temporary' && (
                      <div>
                        <label className="block text-sm font-medium text-[#8fb8ff] mb-2">
                          {t('modal.banDuration')}
                        </label>
                        <input
                          type="text"
                          value={banDuration}
                          onChange={(e) => setBanDuration(e.target.value)}
                          placeholder={t('modal.banDurationPlaceholder')}
                          className="w-full px-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"
                        />
                        <p className="text-xs text-gray-500 mt-1">
                          {t('modal.banDurationHint')}
                        </p>
          </div>
        )}
      </div>
                  )}
              </div>

              <div className="flex items-center gap-3">
                <Button
                  onClick={banType === 'account' ? handleBanAccount : handleBanCharacter}
                  className="bg-red-600/20 hover:bg-red-600/30 text-red-400 border border-red-600/30 rounded-xl"
                >
                  <Ban className="w-4 h-4 mr-2" />
                  {t('modal.confirmBan')}
                </Button>
                <Button
                  onClick={resetBanModal}
                  className="bg-gray-600/20 hover:bg-gray-600/30 text-gray-300 border border-gray-600/30 rounded-xl"
                >
                  {t('modal.cancel')}
                </Button>
              </div>
            </div>
          </div>
        )}
      </>
    </ProtectedRoute>
  )
}