// src/components/Leaderboard.tsx
import React, { useState, useEffect } from 'react';
import * as apiClient from '../services/apiClient';
import { LeaderboardUser } from '../types';
import { logger } from '../services/logger.client';
import { Award, Crown, ShieldAlert } from 'lucide-react';

export const Leaderboard: React.FC = () => {
  const [leaderboard, setLeaderboard] = useState<LeaderboardUser[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const loadLeaderboard = async () => {
      setIsLoading(true);
      try {
        const response = await apiClient.fetchLeaderboard(10); // Fetch top 10 users
        if (!response.ok) {
          throw new Error('Failed to fetch leaderboard data.');
        }
        const data: LeaderboardUser[] = await response.json();
        setLeaderboard(data);
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';
        logger.error('Error fetching leaderboard:', { error: err });
        setError(errorMessage);
      } finally {
        setIsLoading(false);
      }
    };

    loadLeaderboard();
  }, []);

  const getRankIcon = (rank: string) => {
    switch (rank) {
      case '1':
        return <Crown className="w-6 h-6 text-yellow-400" />;
      case '2':
        return <Crown className="w-6 h-6 text-gray-400" />;
      case '3':
        return <Crown className="w-6 h-6 text-yellow-600" />;
      default:
        return <span className="font-semibold text-gray-500 dark:text-gray-400">{rank}</span>;
    }
  };

  if (isLoading) {
    return <div className="text-center p-8">Loading Leaderboard...</div>;
  }

  if (error) {
    return (
      <div className="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-md" role="alert">
        <div className="flex items-center">
          <ShieldAlert className="h-6 w-6 mr-3" />
          <p className="font-bold">Error: {error}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
        <Award className="w-6 h-6 mr-2 text-blue-500" />
        Top Users
      </h2>
      {leaderboard.length === 0 ? (
        <p className="text-gray-500 dark:text-gray-400">The leaderboard is currently empty. Be the first to earn points!</p>
      ) : (
        <ol className="space-y-4">
          {leaderboard.map((user) => (
            <li key={user.user_id} className="flex items-center space-x-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg transition hover:bg-gray-100 dark:hover:bg-gray-600">
              <div className="shrink-0 w-8 text-center">
                {getRankIcon(user.rank)}
              </div>
              <img
                src={user.avatar_url || `https://api.dicebear.com/8.x/initials/svg?seed=${user.full_name || user.user_id}`}
                alt={user.full_name || 'User Avatar'}
                className="w-12 h-12 rounded-full object-cover"
              />
              <div className="flex-1">
                <p className="font-semibold text-gray-800 dark:text-gray-100">{user.full_name || 'Anonymous User'}</p>
              </div>
              <div className="text-lg font-bold text-blue-600 dark:text-blue-400">
                {user.points} pts
              </div>
            </li>
          ))}
        </ol>
      )}
    </div>
  );
};

export default Leaderboard;