'use client';

import { routes } from '@/lib/routing/RouteConfig';
import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
import {
  Award,
  Clock,
  Flag,
  Flame,
  Globe,
  Sparkles,
  Target,
  Timer,
  Trophy,
  Users,
} from 'lucide-react';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { LeaguesTemplate } from '@/templates/LeaguesTemplate';
import { LEAGUE_CATEGORIES, CategoryId } from '@/lib/config/leagueCategories';
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';

export function LeaguesPageClient({ viewData }: ClientWrapperProps<LeaguesViewData>) {
  const router = useRouter();
  const [searchQuery, setSearchQuery] = useState('');
  const [activeCategory, setActiveCategory] = useState<CategoryId>('all');

  const filteredLeagues = viewData.leagues.filter((league) => {
    const matchesSearch = !searchQuery || 
      league.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      (league.description ?? '').toLowerCase().includes(searchQuery.toLowerCase());
    
    const category = LEAGUE_CATEGORIES.find(c => c.id === activeCategory);
    const matchesCategory = !category || category.filter(league);

    return matchesSearch && matchesCategory;
  });

  return (
    <LeaguesTemplate
      viewData={viewData}
      searchQuery={searchQuery}
      onSearchChange={setSearchQuery}
      activeCategory={activeCategory}
      onCategoryChange={setActiveCategory}
      filteredLeagues={filteredLeagues}
      categories={LEAGUE_CATEGORIES}
      onCreateLeague={() => router.push(routes.league.create)}
      onLeagueClick={(id) => router.push(routes.league.detail(id))}
      onClearFilters={() => { setSearchQuery(''); setActiveCategory('all'); }}
    />
  );
}