'use client';

import { ENTRY_FEE_DINO, MAX_ATTEMPTS } from '../shared';

interface LeaderboardEntry {
  owner: string;
  score: string;
}

interface LeaderboardProps {
  leaderboard: LeaderboardEntry[];
  loading: boolean;
  error: string | null;
  attemptsCount: number;
}

export default function Leaderboard({ leaderboard, loading, error, attemptsCount }: LeaderboardProps) {

  // Only show loading state if we have no data yet
  if (loading && leaderboard.length === 0) {
    return (
      <div className="bg-white rounded-lg shadow-lg p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-4">🏆 Leaderboard</h3>
        <div className="flex justify-center items-center py-8">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600"></div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-white rounded-lg shadow-lg p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-4">🏆 Leaderboard</h3>
        <div className="text-center py-4">
          <p className="text-red-600 text-sm">Failed to load leaderboard</p>
          <button 
            onClick={() => window.location.reload()} 
            className="mt-2 text-green-600 hover:text-green-700 text-sm underline"
          >
            Try again
          </button>
        </div>
      </div>
    );
  }

  // Sort leaderboard by score (highest first)
  const sortedLeaderboard = [...leaderboard].sort((a, b) => 
    parseInt(b.score) - parseInt(a.score)
  );

  return (
    <div className="bg-white rounded-lg shadow-lg p-6">
      <h3 className="text-xl font-bold text-gray-900 mb-4">🏆 Leaderboard</h3>
      
                                         {/* Combined Prize and Attempts Information */}
         <div className="mb-6 p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border border-green-200">
           <div className="flex items-center justify-between mb-3">
             <h4 className="font-semibold text-green-800">💰 Prize ({MAX_ATTEMPTS * ENTRY_FEE_DINO} DINO Total)</h4>
                           <div className="text-right">
                <div className="text-sm text-blue-700">🎯 Attempts Remaining:</div>
                <div className="font-bold text-blue-800 text-lg">{MAX_ATTEMPTS - attemptsCount}</div>
              </div>
           </div>
           <div className="grid grid-cols-2 gap-3 text-sm">
             <div className="flex items-center justify-between">
               <span className="text-gray-700">🥇 1st Place:</span>
               <span className="font-bold text-yellow-600">{(MAX_ATTEMPTS * ENTRY_FEE_DINO * 0.8).toFixed(1)} DINO (80%)</span>
             </div>
             <div className="flex items-center justify-between">
               <span className="text-gray-700">🥈 2nd Place:</span>
               <span className="font-bold text-gray-600">{(MAX_ATTEMPTS * ENTRY_FEE_DINO * 0.1).toFixed(1)} DINO (10%)</span>
             </div>
             <div className="flex items-center justify-between">
               <span className="text-gray-700">🥉 3rd Place:</span>
               <span className="font-bold text-orange-600">{(MAX_ATTEMPTS * ENTRY_FEE_DINO * 0.05).toFixed(1)} DINO (5%)</span>
             </div>
           </div>
           <div className="mt-3 pt-3 border-t border-green-200">
             <p className="text-xs text-blue-600 text-center">Leaderboard resets after {MAX_ATTEMPTS} attempts</p>
           </div>
         </div>
      
      {sortedLeaderboard.length === 0 ? (
        <div className="text-center py-8">
          <p className="text-gray-500">No scores yet. Be the first to play!</p>
        </div>
      ) : (
        <div className="space-y-3">
          {sortedLeaderboard.map((entry, index) => (
            <div 
              key={`${entry.owner}-${entry.score}`}
              className={`flex items-center justify-between p-3 rounded-lg ${
                index === 0 ? 'bg-yellow-50 border border-yellow-200' :
                index === 1 ? 'bg-gray-50 border border-gray-200' :
                index === 2 ? 'bg-orange-50 border border-orange-200' :
                'bg-gray-50 border border-gray-100'
              }`}
            >
              <div className="flex items-center space-x-3">
                <div className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-bold ${
                  index === 0 ? 'bg-yellow-400 text-yellow-900' :
                  index === 1 ? 'bg-gray-400 text-gray-900' :
                  index === 2 ? 'bg-orange-400 text-orange-900' :
                  'bg-gray-300 text-gray-700'
                }`}>
                  {index + 1}
                </div>
                <div>
                  <p className="font-medium text-gray-900">
                    {entry.owner.length > 20 
                      ? `${entry.owner.slice(0, 8)}...${entry.owner.slice(-8)}` 
                      : entry.owner
                    }
                  </p>
                                                        {/* Prize indicators for top 3 */}
                    {index < 3 && (
                      <div className="flex items-center space-x-1 mt-1">
                        <span className={`text-xs px-2 py-1 rounded-full ${
                          index === 0 ? 'bg-yellow-100 text-yellow-700' :
                          index === 1 ? 'bg-gray-100 text-gray-700' :
                          'bg-orange-100 text-orange-700'
                        }`}>
                          {index === 0 
                            ? `🥇 ${(MAX_ATTEMPTS * ENTRY_FEE_DINO * 0.8).toFixed(1)} DINO Prize` 
                            : index === 1 
                            ? `🥈 ${(MAX_ATTEMPTS * ENTRY_FEE_DINO * 0.1).toFixed(1)} DINO Prize` 
                            : `🥉 ${(MAX_ATTEMPTS * ENTRY_FEE_DINO * 0.05).toFixed(1)} DINO Prize`
                          }
                        </span>
                      </div>
                    )}
                </div>
              </div>
              <div className="text-right">
                <p className="text-lg font-bold text-gray-900">{entry.score}</p>
                <p className="text-xs text-gray-500">points</p>
              </div>
            </div>
          ))}
        </div>
      )}
      
             <div className="mt-4 text-center">
         <div className="flex items-center justify-center space-x-2">
           <p className="text-xs text-gray-500">
             Updates every 5 seconds • {sortedLeaderboard.length} player{sortedLeaderboard.length !== 1 ? 's' : ''}
           </p>
           {loading && leaderboard.length > 0 && (
             <div className="flex items-center space-x-1">
               <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-green-600"></div>
               <span className="text-xs text-green-600">Refreshing...</span>
             </div>
           )}
         </div>
       </div>
    </div>
  );
}