'use client';

import { useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { LeaguesTemplate } from '@/templates/LeaguesTemplate';
import { useServices } from '@/lib/services/ServiceProvider';
import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';

// Shared state components
import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
import { StateContainer } from '@/components/shared/state/StateContainer';
import { Trophy } from 'lucide-react';

export default function LeaguesInteractive() {
  const router = useRouter();
  const { leagueService } = useServices();

  const { data: realLeagues = [], isLoading: loading, error, retry } = useDataFetching({
    queryKey: ['allLeagues'],
    queryFn: () => leagueService.getAllLeagues(),
  });

  const handleLeagueClick = (leagueId: string) => {
    router.push(`/leagues/${leagueId}`);
  };

  const handleCreateLeagueClick = () => {
    router.push('/leagues/create');
  };

  return (
    <StateContainer
      data={realLeagues}
      isLoading={loading}
      error={error}
      retry={retry}
      config={{
        loading: { variant: 'spinner', message: 'Loading leagues...' },
        error: { variant: 'full-screen' },
        empty: {
          icon: Trophy,
          title: 'No leagues yet',
          description: 'Create your first league to start organizing races and events.',
          action: { label: 'Create League', onClick: handleCreateLeagueClick }
        }
      }}
    >
      {(leaguesData) => (
        <LeaguesTemplate
          leagues={leaguesData}
          loading={false}
          onLeagueClick={handleLeagueClick}
          onCreateLeagueClick={handleCreateLeagueClick}
        />
      )}
    </StateContainer>
  );
}