'use client';

import { useState, useEffect, useCallback } from 'react';
import { useParams } from 'next/navigation';
import { LeagueStandingsTemplate } from '@/templates/LeagueStandingsTemplate';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
import { useServices } from '@/lib/services/ServiceProvider';
import type { LeagueMembership } from '@/lib/types/LeagueMembership';
import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import type { StandingEntryViewModel } from '@/lib/view-models/StandingEntryViewModel';

export default function LeagueStandingsInteractive() {
  const params = useParams();
  const leagueId = params.id as string;
  const currentDriverId = useEffectiveDriverId();
  const { leagueService } = useServices();

  const [standings, setStandings] = useState<StandingEntryViewModel[]>([]);
  const [drivers, setDrivers] = useState<DriverViewModel[]>([]);
  const [memberships, setMemberships] = useState<LeagueMembership[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isAdmin, setIsAdmin] = useState(false);

  const loadData = useCallback(async () => {
    try {
      const vm = await leagueService.getLeagueStandings(leagueId, currentDriverId);
      setStandings(vm.standings);
      setDrivers(vm.drivers.map((d) => new DriverViewModel({ ...d, avatarUrl: (d as any).avatarUrl ?? null })));
      setMemberships(vm.memberships);

      // Check if current user is admin
      const membership = vm.memberships.find(m => m.driverId === currentDriverId);
      setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load standings');
    } finally {
      setLoading(false);
    }
  }, [leagueId, currentDriverId, leagueService]);

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

  const handleRemoveMember = async (driverId: string) => {
    if (!confirm('Are you sure you want to remove this member?')) {
      return;
    }

    try {
      await leagueService.removeMember(leagueId, currentDriverId, driverId);
      await loadData();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to remove member');
    }
  };

  const handleUpdateRole = async (driverId: string, newRole: string) => {
    try {
      await leagueService.updateMemberRole(leagueId, currentDriverId, driverId, newRole);
      await loadData();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to update role');
    }
  };

  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 (
    <LeagueStandingsTemplate
      standings={standings}
      drivers={drivers}
      memberships={memberships}
      leagueId={leagueId}
      currentDriverId={currentDriverId}
      isAdmin={isAdmin}
      onRemoveMember={handleRemoveMember}
      onUpdateRole={handleUpdateRole}
    />
  );
}