"use client"

import { useState, useEffect } from 'react'
import { 
  Trophy, 
  DollarSign, 
  Clock, 
  Users, 
  Crown, 
  Medal, 
  Award,
  TrendingUp,
  Star,
  Zap
} from 'lucide-react'

interface LeaderboardEntry {
  character_id: number
  character_name: string
  account_id: number
  username: string
  registerdate: string
  total_money?: number
  total_cash?: number
  total_bank?: number
  top_hours?: number
  photo_data?: string
  photo_type?: string
}

interface LeaderboardData {
  money: LeaderboardEntry[]
  hours: LeaderboardEntry[]
}

export default function Leaderboard() {
  const [leaderboardData, setLeaderboardData] = useState<LeaderboardData | null>(null)
  const [activeTab, setActiveTab] = useState<'money' | 'hours'>('money')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchLeaderboard()
  }, [])

  const fetchLeaderboard = async () => {
    try {
      setLoading(true)
      const response = await fetch('/api/leaderboard')
      if (response.ok) {
        const data = await response.json()
        setLeaderboardData(data.leaderboards)
      } else {
        console.error('Failed to fetch leaderboard')
      }
    } catch (error) {
      console.error('Error fetching leaderboard:', error)
    } finally {
      setLoading(false)
    }
  }

  const getRankIcon = (rank: number) => {
    switch (rank) {
      case 1:
        return <Crown className="w-6 h-6 text-yellow-400" />
      case 2:
        return <Medal className="w-6 h-6 text-gray-300" />
      case 3:
        return <Award className="w-6 h-6 text-amber-600" />
      default:
        return <Star className="w-4 h-4 text-gray-500" />
    }
  }

  const getRankColor = (rank: number) => {
    switch (rank) {
      case 1:
        return 'from-yellow-400 to-yellow-600'
      case 2:
        return 'from-gray-300 to-gray-500'
      case 3:
        return 'from-amber-600 to-amber-800'
      default:
        return 'from-gray-600 to-gray-800'
    }
  }

  const formatMoney = (amount: number) => {
    if (amount >= 1000000) {
      return `$${(amount / 1000000).toFixed(1)}M`
    } else if (amount >= 1000) {
      return `$${(amount / 1000).toFixed(1)}K`
    }
    return `$${amount.toLocaleString()}`
  }

  const formatHours = (hours: number) => {
    if (hours >= 24) {
      const days = Math.floor(hours / 24)
      const remainingHours = hours % 24
      return `${days}d ${remainingHours}h`
    }
    return `${hours}h`
  }

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString()
  }

  if (loading) {
    return (
      <div className="bg-black/60 backdrop-blur-sm rounded-2xl p-6 border border-gray-700/50">
        <div className="flex items-center justify-center h-32">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500"></div>
        </div>
      </div>
    )
  }

  if (!leaderboardData) {
    return (
      <div className="bg-black/60 backdrop-blur-sm rounded-2xl p-6 border border-gray-700/50">
        <div className="text-center text-gray-400">
          <Trophy className="w-12 h-12 mx-auto mb-4 text-gray-600" />
          <p>Leaderboard data unavailable</p>
        </div>
      </div>
    )
  }

  const currentData = leaderboardData[activeTab] || []

  return (
    <div className="bg-black/60 backdrop-blur-sm rounded-2xl p-6 border border-gray-700/50">
      {/* Header */}
      <div className="text-center mb-6">
        <div className="flex items-center justify-center mb-3">
          <Trophy className="w-8 h-8 text-yellow-400 mr-3" />
          <h2 className="text-2xl font-bold text-white">ECLIPSE Leaderboard</h2>
        </div>
        <div className="w-16 h-0.5 bg-gradient-to-r from-yellow-500 to-yellow-400 rounded-full mx-auto"></div>
      </div>

      {/* Tab Navigation */}
      <div className="flex space-x-3 mb-6">
        <button
          onClick={() => setActiveTab('money')}
          className={`flex items-center justify-center space-x-2 py-3 px-6 rounded-xl transition-all duration-200 font-medium ${
            activeTab === 'money'
              ? 'bg-gradient-to-r from-green-600 to-green-700 text-white shadow-lg shadow-green-500/25'
              : 'bg-gray-800/50 text-gray-400 hover:text-white hover:bg-gray-700/50 border border-gray-700/50'
          }`}
        >
          <DollarSign className="w-5 h-5" />
          <span>Total Wealth</span>
        </button>
        
        <button
          onClick={() => setActiveTab('hours')}
          className={`flex items-center justify-center space-x-2 py-3 px-6 rounded-xl transition-all duration-200 font-medium ${
            activeTab === 'hours'
              ? 'bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/25'
              : 'bg-gray-800/50 text-gray-400 hover:text-white hover:bg-gray-700/50 border border-gray-700/50'
          }`}
        >
          <Clock className="w-5 h-5" />
          <span>Top Hours</span>
        </button>
      </div>

            {/* Leaderboard Content */}
      <div className="space-y-3">
        {currentData.map((entry, index) => (
          <div
            key={`${activeTab}-${entry.character_id}`}
            className={`relative group bg-gradient-to-r ${getRankColor(index + 1)} rounded-xl p-4 border border-gray-700/30 hover:border-gray-600/50 transition-all duration-200 hover:scale-[1.02] hover:shadow-lg`}
          >
            {/* Rank Badge */}
            <div className={`absolute -top-2 -left-2 w-10 h-10 rounded-full flex items-center justify-center border-3 shadow-lg ${
              index === 0 
                ? 'bg-gradient-to-br from-yellow-400 to-yellow-600 border-yellow-300' 
                : index === 1 
                ? 'bg-gradient-to-br from-gray-300 to-gray-500 border-gray-200' 
                : 'bg-gradient-to-br from-amber-600 to-amber-800 border-amber-400'
            }`}>
              <span className="text-white font-bold text-lg drop-shadow-md">{index + 1}</span>
            </div>



            {/* Player Info */}
            <div className="flex items-center justify-between">
              <div className="flex-1">
                <div className="flex items-center space-x-3">
                  <div className="w-10 h-10 bg-gradient-to-br from-gray-700 to-gray-800 rounded-full flex items-center justify-center overflow-hidden">
                    {entry.photo_data ? (
                      <img
                        src={`data:${entry.photo_type};base64,${entry.photo_data}`}
                        alt="Profile"
                        className="w-full h-full object-cover"
                      />
                    ) : (
                      <span className="text-white font-bold text-sm">
                        {entry.username.charAt(0).toUpperCase()}
                      </span>
                    )}
                  </div>
                  <div>
                    <h3 className="text-white font-semibold text-lg mb-1">{entry.character_name}</h3>
                    <p className="text-white text-sm font-medium">Player: {entry.username}</p>
                    <p className="text-white text-xs opacity-80">Member since {formatDate(entry.registerdate)}</p>
                  </div>
                </div>
              </div>

                {/* Stats */}
                <div className="text-right">
                  {activeTab === 'money' && (
                    <div className="space-y-1">
                      <div className="text-2xl font-bold text-white">
                        {formatMoney(entry.total_money || 0)}
                      </div>
                      <div className="text-xs text-white opacity-90">
                        Cash: {formatMoney(entry.total_cash || 0)} | Bank: {formatMoney(entry.total_bank || 0)}
                      </div>
                    </div>
                  )}
                  
                  {activeTab === 'hours' && (
                    <div className="text-right">
                      <div className="text-2xl font-bold text-white">
                        {formatHours(entry.top_hours || 0)}
                      </div>
                      <div className="text-xs text-white opacity-90">Hours Played</div>
                    </div>
                  )}
                </div>
              </div>

              {/* Hover Effect */}
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div>
          </div>
        ))}
      </div>

      {/* Empty State */}
      {currentData.length === 0 && (
        <div className="text-center py-8 text-gray-400">
          <Trophy className="w-16 h-16 mx-auto mb-4 text-gray-600" />
          <p className="text-lg">No data available</p>
          <p className="text-sm">Players will appear here as they progress</p>
        </div>
      )}

      {/* Footer */}
      <div className="mt-6 pt-4 border-t border-gray-700/30 text-center">
        <p className="text-gray-500 text-sm">
          <TrendingUp className="w-4 h-4 inline mr-1" />
          Leaderboard updates in real-time
        </p>
      </div>
    </div>
  )
}