import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
import { ServiceFactory } from '@/lib/services/ServiceFactory';
import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
import { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';

interface LeagueDetailStaticProps {
  leagueId: string;
}

export default async function LeagueDetailStatic({ leagueId }: LeagueDetailStaticProps) {
  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
  const leagueService = serviceFactory.createLeagueService();
  
  let viewModel: LeagueDetailPageViewModel | null = null;
  let loading = false;
  let error: string | null = null;

  try {
    loading = true;
    viewModel = await leagueService.getLeagueDetailPageData(leagueId);

    if (!viewModel) {
      error = 'League not found';
    }
  } catch (err) {
    error = err instanceof Error ? err.message : 'Failed to load league';
  } finally {
    loading = false;
  }

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

  if (error || !viewModel) {
    return (
      <div className="text-center text-warning-amber">
        {error || 'League not found'}
      </div>
    );
  }

  // Server components can't have event handlers, so we provide empty functions
  // The Interactive wrapper will add the actual handlers
  return (
    <LeagueDetailTemplate
      viewModel={viewModel}
      leagueId={leagueId}
      isSponsor={false}
      membership={null}
      currentDriverId={null}
      onMembershipChange={() => {}}
      onEndRaceModalOpen={() => {}}
      onLiveRaceClick={() => {}}
      onBackToLeagues={() => {}}
    />
  );
}