import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { ReactNode } from 'react';
import { TeamLogo } from './TeamLogo';
import { TeamTag } from './TeamTag';

interface TeamHeaderPanelProps {
  teamId: string;
  name: string;
  tag?: string | null;
  description?: string;
  memberCount: number;
  activeLeaguesCount?: number;
  foundedDate?: string;
  category?: string | null;
  actions?: ReactNode;
}

export function TeamHeaderPanel({
  teamId,
  name,
  tag,
  description,
  memberCount,
  activeLeaguesCount,
  foundedDate,
  category,
  actions,
}: TeamHeaderPanelProps) {
  return (
    <Stack 
      bg="surface-charcoal" 
      border 
      borderColor="border-steel-grey" 
      p={6} 
      className="relative overflow-hidden"
    >
      {/* Instrument-grade accent corner */}
      <Stack position="absolute" top="-1px" left="-1px" w="4" h="4" borderTop borderLeft borderColor="primary-blue/40" />
      
      <Stack direction="row" align="start" justify="between" wrap gap={6}>
        <Stack direction="row" align="start" gap={6} wrap flexGrow={1}>
          {/* Logo Container */}
          <Stack 
            w="24" 
            h="24" 
            bg="base-graphite" 
            border 
            borderColor="border-steel-grey" 
            display="flex" 
            center 
            overflow="hidden"
            className="relative"
          >
            <TeamLogo teamId={teamId} alt={name} />
            {/* Corner detail */}
            <Stack position="absolute" bottom="0" right="0" w="2" h="2" bg="primary-blue/20" />
          </Stack>
          
          <Stack flexGrow={1} minWidth="0">
            <Stack direction="row" align="center" gap={3} mb={2}>
              <Heading level={1} weight="bold" className="tracking-tight">{name}</Heading>
              {tag && <TeamTag tag={tag} />}
            </Stack>

            {description && (
              <Text color="text-gray-400" block mb={4} maxWidth="42rem" size="sm" leading="relaxed">
                {description}
              </Text>
            )}

            <Stack direction="row" align="center" gap={4} wrap>
              <Stack display="flex" alignItems="center" gap={1.5}>
                <Stack w="1.5" h="1.5" bg="primary-blue" />
                <Text size="xs" color="text-gray-300" font="mono" className="uppercase tracking-wider">
                  {memberCount} {memberCount === 1 ? 'Member' : 'Members'}
                </Text>
              </Stack>
              
              {category && (
                <Stack display="flex" alignItems="center" gap={1.5}>
                  <Stack w="1.5" h="1.5" bg="telemetry-aqua" />
                  <Text size="xs" color="text-gray-300" font="mono" className="uppercase tracking-wider">
                    {category}
                  </Text>
                </Stack>
              )}

              {activeLeaguesCount !== undefined && (
                <Stack display="flex" alignItems="center" gap={1.5}>
                  <Stack w="1.5" h="1.5" bg="warning-amber" />
                  <Text size="xs" color="text-gray-300" font="mono" className="uppercase tracking-wider">
                    {activeLeaguesCount} {activeLeaguesCount === 1 ? 'League' : 'Leagues'}
                  </Text>
                </Stack>
              )}

              {foundedDate && (
                <Text size="xs" color="text-gray-500" font="mono" className="uppercase tracking-wider">
                  EST. {foundedDate}
                </Text>
              )}
            </Stack>
          </Stack>
        </Stack>

        {actions && (
          <Stack>
            {actions}
          </Stack>
        )}
      </Stack>
    </Stack>
  );
}