'use client';

import { useState, useEffect } from 'react';
import Card from '@/components/ui/Card';
import StandingsTable from '@/components/leagues/StandingsTable';
import type { Standing } from '@gridpilot/racing/domain/entities/Standing';
import type { Driver } from '@gridpilot/racing/domain/entities/Driver';
import { getStandingRepository, getDriverRepository } from '@/lib/di-container';

export default function LeagueStandingsPage({ params }: { params: { id: string } }) {
  const leagueId = params.id;

  const [standings, setStandings] = useState<Standing[]>([]);
  const [drivers, setDrivers] = useState<Driver[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const loadData = async () => {
    try {
      const standingRepo = getStandingRepository();
      const driverRepo = getDriverRepository();

      const allStandings = await standingRepo.findAll();
      const leagueStandings = allStandings.filter((s) => s.leagueId === leagueId);
      setStandings(leagueStandings);

      const allDrivers = await driverRepo.findAll();
      setDrivers(allDrivers);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load standings');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [leagueId]);

  if (loading) {
    return (
      <div className="text-center text-gray-400">
        Loading standings...
      </div>
    );
  }

  if (error) {
    return (
      <div className="text-center text-warning-amber">
        {error}
      </div>
    );
  }

  return (
    <Card>
      <h2 className="text-xl font-semibold text-white mb-4">Standings</h2>
      <StandingsTable standings={standings} drivers={drivers} leagueId={leagueId} />
    </Card>
  );
}