'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Container } from '@/ui/Container';
import { Surface } from '@/ui/Surface';
import type { ProfileLeaguesViewData } from '@/lib/view-data/ProfileLeaguesViewData';
import { LeagueListItem } from '@/ui/LeagueListItem';

interface ProfileLeaguesTemplateProps {
  viewData: ProfileLeaguesViewData;
}

export function ProfileLeaguesTemplate({ viewData }: ProfileLeaguesTemplateProps) {
  return (
    <Container size="md" py={8}>
      <Stack gap={8}>
        <Box>
          <Heading level={1}>Manage leagues</Heading>
          <Text color="text-gray-400" size="sm" block mt={2}>
            View leagues you own and participate in, and jump into league admin tools.
          </Text>
        </Box>

        {/* Leagues You Own */}
        <Surface variant="muted" rounded="lg" border padding={6}>
          <Stack gap={4}>
            <Stack direction="row" align="center" justify="between">
              <Heading level={2}>Leagues you own</Heading>
              {viewData.ownedLeagues.length > 0 && (
                <Text size="xs" color="text-gray-400">
                  {viewData.ownedLeagues.length} {viewData.ownedLeagues.length === 1 ? 'league' : 'leagues'}
                </Text>
              )}
            </Stack>

            {viewData.ownedLeagues.length === 0 ? (
              <Text size="sm" color="text-gray-400">
                You don&apos;t own any leagues yet in this session.
              </Text>
            ) : (
              <Stack gap={3}>
                {viewData.ownedLeagues.map((league) => (
                  <LeagueListItem key={league.leagueId} league={league} isAdmin />
                ))}
              </Stack>
            )}
          </Stack>
        </Surface>

        {/* Leagues You're In */}
        <Surface variant="muted" rounded="lg" border padding={6}>
          <Stack gap={4}>
            <Stack direction="row" align="center" justify="between">
              <Heading level={2}>Leagues you&apos;re in</Heading>
              {viewData.memberLeagues.length > 0 && (
                <Text size="xs" color="text-gray-400">
                  {viewData.memberLeagues.length} {viewData.memberLeagues.length === 1 ? 'league' : 'leagues'}
                </Text>
              )}
            </Stack>

            {viewData.memberLeagues.length === 0 ? (
              <Text size="sm" color="text-gray-400">
                You&apos;re not a member of any other leagues yet.
              </Text>
            ) : (
              <Stack gap={3}>
                {viewData.memberLeagues.map((league) => (
                  <LeagueListItem key={league.leagueId} league={league} />
                ))}
              </Stack>
            )}
          </Stack>
        </Surface>
      </Stack>
    </Container>
  );
}