import { useState, useEffect, useCallback } from 'react';

import { usePlaybasis } from '../PlaybasisProvider';
import type { Badge } from '../types';

interface UseBadgesReturn {
  badges: Badge[];
  earnedBadges: Badge[];
  allBadges: Badge[];
  loading: boolean;
  error: Error | null;
  refresh: () => Promise<void>;
}

export function useBadges(): UseBadgesReturn {
  const { client, playerId } = usePlaybasis();
  const [badges, setBadges] = useState<Badge[]>([]);
  const [allBadges, setAllBadges] = useState<Badge[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  const fetchBadges = useCallback(async () => {
    setLoading(true);
    setError(null);

    try {
      // Fetch all available badges
      const all = await client.getBadges();
      setAllBadges(all);

      // Fetch player's earned badges
      if (playerId) {
        const playerBadges = await client.getPlayerBadges(playerId);
        setBadges(playerBadges);
      }
    } catch (err) {
      setError(err instanceof Error ? err : new Error('Failed to fetch badges'));
    } finally {
      setLoading(false);
    }
  }, [client, playerId]);

  useEffect(() => {
    fetchBadges();
  }, [fetchBadges]);

  const earnedBadges = badges.filter((b) => b.isEarned);

  return {
    badges,
    earnedBadges,
    allBadges,
    loading,
    error,
    refresh: fetchBadges,
  };
}

export default useBadges;