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

import { notFound } from 'next/navigation';
import { PageWrapper } from '@/components/shared/state/PageWrapper';
import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
import { LEAGUE_SERVICE_TOKEN, LEAGUE_MEMBERSHIP_SERVICE_TOKEN } from '@/lib/di/tokens';
import type { LeagueService } from '@/lib/services/leagues/LeagueService';
import type { LeagueMembershipService } from '@/lib/services/leagues/LeagueMembershipService';
import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
import type { LeagueMembership } from '@/lib/types/LeagueMembership';
import { SessionGateway } from '@/lib/gateways/SessionGateway';
import { ContainerManager } from '@/lib/di/container';

interface LeagueWithRole {
  league: LeagueSummaryViewModel;
  membership: LeagueMembership;
}

interface ProfileLeaguesData {
  ownedLeagues: LeagueWithRole[];
  memberLeagues: LeagueWithRole[];
}

async function fetchProfileLeaguesData(): Promise<ProfileLeaguesData | null> {
  try {
    // Get current driver ID from session
    const sessionGateway = new SessionGateway();
    const session = await sessionGateway.getSession();
    
    if (!session?.user?.primaryDriverId) {
      return null;
    }
    
    const currentDriverId = session.user.primaryDriverId;

    // Fetch leagues using PageDataFetcher
    const leagues = await PageDataFetcher.fetch<LeagueService, 'getAllLeagues'>(
      LEAGUE_SERVICE_TOKEN,
      'getAllLeagues'
    );

    if (!leagues) {
      return null;
    }

    // Get membership service from container
    const container = ContainerManager.getInstance().getContainer();
    const membershipService = container.get<LeagueMembershipService>(LEAGUE_MEMBERSHIP_SERVICE_TOKEN);

    // Fetch memberships for each league
    const memberships = await Promise.all(
      leagues.map(async (league) => {
        await membershipService.fetchLeagueMemberships(league.id);
        const membership = membershipService.getMembership(league.id, currentDriverId);
        
        return membership ? { league, membership } : null;
      })
    );

    // Filter and categorize leagues
    const owned: LeagueWithRole[] = [];
    const member: LeagueWithRole[] = [];

    for (const entry of memberships) {
      if (!entry || !entry.membership || entry.membership.status !== 'active') {
        continue;
      }

      if (entry.membership.role === 'owner') {
        owned.push(entry);
      } else {
        member.push(entry);
      }
    }

    return { ownedLeagues: owned, memberLeagues: member };
  } catch (error) {
    console.error('Failed to fetch profile leagues data:', error);
    return null;
  }
}

// Template component
function ProfileLeaguesTemplate({ data }: { data: ProfileLeaguesData }) {
  return (
    <div className="max-w-6xl mx-auto space-y-8">
      <div>
        <h1 className="text-3xl font-bold text-white mb-2">Manage leagues</h1>
        <p className="text-gray-400 text-sm">
          View leagues you own and participate in, and jump into league admin tools.
        </p>
      </div>

      {/* Leagues You Own */}
      <div className="bg-charcoal rounded-lg border border-charcoal-outline p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold text-white">Leagues you own</h2>
          {data.ownedLeagues.length > 0 && (
            <span className="text-xs text-gray-400">
              {data.ownedLeagues.length} {data.ownedLeagues.length === 1 ? 'league' : 'leagues'}
            </span>
          )}
        </div>

        {data.ownedLeagues.length === 0 ? (
          <p className="text-sm text-gray-400">
            You don't own any leagues yet in this session.
          </p>
        ) : (
          <div className="space-y-3">
            {data.ownedLeagues.map(({ league }) => (
              <div
                key={league.id}
                className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
              >
                <div>
                  <h3 className="text-white font-medium">{league.name}</h3>
                  <p className="text-xs text-gray-400 mt-1 line-clamp-2">
                    {league.description}
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <a
                    href={`/leagues/${league.id}`}
                    className="text-sm text-gray-300 hover:text-white underline-offset-2 hover:underline"
                  >
                    View
                  </a>
                  <a href={`/leagues/${league.id}?tab=admin`}>
                    <button className="bg-primary hover:bg-primary/90 text-white text-xs px-3 py-1.5 rounded transition-colors">
                      Manage
                    </button>
                  </a>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Leagues You're In */}
      <div className="bg-charcoal rounded-lg border border-charcoal-outline p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold text-white">Leagues you're in</h2>
          {data.memberLeagues.length > 0 && (
            <span className="text-xs text-gray-400">
              {data.memberLeagues.length} {data.memberLeagues.length === 1 ? 'league' : 'leagues'}
            </span>
          )}
        </div>

        {data.memberLeagues.length === 0 ? (
          <p className="text-sm text-gray-400">
            You're not a member of any other leagues yet.
          </p>
        ) : (
          <div className="space-y-3">
            {data.memberLeagues.map(({ league, membership }) => (
              <div
                key={league.id}
                className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
              >
                <div>
                  <h3 className="text-white font-medium">{league.name}</h3>
                  <p className="text-xs text-gray-400 mt-1 line-clamp-2">
                    {league.description}
                  </p>
                  <p className="text-xs text-gray-500 mt-1">
                    Your role:{' '}
                    {membership.role.charAt(0).toUpperCase() + membership.role.slice(1)}
                  </p>
                </div>
                <a
                  href={`/leagues/${league.id}`}
                  className="text-sm text-gray-300 hover:text-white underline-offset-2 hover:underline"
                >
                  View league
                </a>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default async function ProfileLeaguesPage() {
  const data = await fetchProfileLeaguesData();

  if (!data) {
    notFound();
  }

  return (
    <PageWrapper
      data={data}
      Template={ProfileLeaguesTemplate}
      loading={{ variant: 'skeleton', message: 'Loading your leagues...' }}
      errorConfig={{ variant: 'full-screen' }}
      empty={{
        title: 'No leagues found',
        description: 'You are not a member of any leagues yet.',
      }}
    />
  );
}