gridpilot.gg/apps/website/app/leagues/page.tsx

'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import LeagueCard from '@/components/leagues/LeagueCard';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import Input from '@/components/ui/Input';
import type { LeagueSummaryDTO } from '@gridpilot/racing/application/dto/LeagueSummaryDTO';
import { getGetAllLeaguesWithCapacityAndScoringQuery } from '@/lib/di-container';

export default function LeaguesPage() {
  const router = useRouter();
  const [leagues, setLeagues] = useState<LeagueSummaryDTO[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [sortBy, setSortBy] = useState('name');

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

  const loadLeagues = async () => {
    try {
      const query = getGetAllLeaguesWithCapacityAndScoringQuery();
      const allLeagues = await query.execute();
      setLeagues(allLeagues);
    } catch (error) {
      console.error('Failed to load leagues:', error);
    } finally {
      setLoading(false);
    }
  };

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

  const filteredLeagues = leagues
    .filter((league) => {
      const matchesSearch =
        league.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        league.description.toLowerCase().includes(searchQuery.toLowerCase());
      return matchesSearch;
    })
    .sort((a, b) => {
      switch (sortBy) {
        case 'name':
          return a.name.localeCompare(b.name);
        case 'recent':
          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
        default:
          return 0;
      }
    });

  if (loading) {
    return (
      <div className="max-w-6xl mx-auto">
        <div className="text-center text-gray-400">Loading leagues...</div>
      </div>
    );
  }

  return (
    <div className="max-w-6xl mx-auto">
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold text-white mb-2">Leagues</h1>
            <p className="text-gray-400">
              {leagues.length === 0
                ? 'Create your first league to get started'
                : `${leagues.length} ${leagues.length === 1 ? 'league' : 'leagues'} available`}
            </p>
          </div>
          
          <Button
            variant="primary"
            onClick={() => router.push('/leagues/create')}
          >
            Create League
          </Button>
        </div>

        {leagues.length > 0 && (
          <Card className="mb-8">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-400 mb-2">
                  Search Leagues
                </label>
                <Input
                  type="text"
                  placeholder="Search by name or description..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-400 mb-2">
                  Sort By
                </label>
                <select
                  className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
                  value={sortBy}
                  onChange={(e) => setSortBy(e.target.value)}
                >
                  <option value="name">Name</option>
                  <option value="recent">Most Recent</option>
                </select>
              </div>
            </div>
          </Card>
        )}

        {leagues.length === 0 ? (
          <Card className="text-center py-12">
            <div className="text-gray-400">
              <svg
                className="mx-auto h-12 w-12 text-gray-600 mb-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
                />
              </svg>
              <h3 className="text-lg font-medium text-white mb-2">No leagues yet</h3>
              <p className="text-sm mb-4">
                Create one to get started. Alpha data resets on page reload.
              </p>
              <Button
                variant="primary"
                onClick={() => setShowCreateForm(true)}
              >
                Create Your First League
              </Button>
            </div>
          </Card>
        ) : (
          <>
            <div className="mb-4">
              <p className="text-sm text-gray-400">
                {filteredLeagues.length} {filteredLeagues.length === 1 ? 'league' : 'leagues'} found
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredLeagues.map((league) => (
                <LeagueCard
                  key={league.id}
                  league={league}
                  onClick={() => handleLeagueClick(league.id)}
                />
              ))}
            </div>
            {filteredLeagues.length === 0 && (
              <div className="text-center py-12">
                <p className="text-gray-400">No leagues found matching your search.</p>
              </div>
            )}
          </>
        )}
      </div>
    );
  }