'use client';

import React from 'react';
import { ExternalLink } from 'lucide-react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Image } from '@/ui/Image';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import JoinTeamButton from '@/components/teams/JoinTeamButton';
import { getMediaUrl } from '@/lib/utilities/media';

interface TeamHeroProps {
  team: {
    id: string;
    name: string;
    tag: string | null;
    description?: string;
    category?: string | null;
    createdAt?: string;
    leagues: any[];
  };
  memberCount: number;
  onUpdate: () => void;
}

export function TeamHero({ team, memberCount, onUpdate }: TeamHeroProps) {
  return (
    <Card>
      <Stack direction="row" align="start" justify="between" wrap gap={6}>
        <Stack direction="row" align="start" gap={6} wrap style={{ flex: 1 }}>
          <Surface variant="muted" rounded="lg" padding={1} style={{ width: '6rem', height: '6rem', overflow: 'hidden', backgroundColor: '#262626' }}>
            <Image
              src={getMediaUrl('team-logo', team.id)}
              alt={team.name}
              width={96}
              height={96}
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            />
          </Surface>
          
          <Box style={{ flex: 1, minWidth: 0 }}>
            <Stack direction="row" align="center" gap={3} mb={2}>
              <Heading level={1}>{team.name}</Heading>
              {team.tag && (
                <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: '#262626', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
                  <Text size="xs" color="text-gray-300">[{team.tag}]</Text>
                </Surface>
              )}
            </Stack>

            <Text color="text-gray-300" block mb={4} style={{ maxWidth: '42rem' }}>{team.description}</Text>

            <Stack direction="row" align="center" gap={4} wrap style={{ fontSize: '0.875rem', color: '#9ca3af' }}>
              <Text size="sm">{memberCount} {memberCount === 1 ? 'member' : 'members'}</Text>
              {team.category && (
                <Stack direction="row" align="center" gap={1.5}>
                  <Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', backgroundColor: '#a855f7' }} />
                  <Text size="sm" color="text-purple-400">{team.category}</Text>
                </Stack>
              )}
              {team.createdAt && (
                <Text size="sm">
                  Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
                </Text>
              )}
              {team.leagues && team.leagues.length > 0 && (
                <Text size="sm">
                  Active in {team.leagues.length} {team.leagues.length === 1 ? 'league' : 'leagues'}
                </Text>
              )}
            </Stack>
          </Box>
        </Stack>

        <JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
      </Stack>
    </Card>
  );
}
