'use client';

import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Activity, Timer, Trophy, Users, type LucideIcon } from 'lucide-react';

interface LeagueHeaderPanelProps {
  viewData: LeagueDetailViewData;
}

export function LeagueHeaderPanel({ viewData }: LeagueHeaderPanelProps) {
  return (
    <Card variant="outline" p={6} position="relative" overflow="hidden" className="bg-graphite-black">
      {/* Background Accent */}
      <Stack 
        position="absolute" 
        top={0} 
        right={0} 
        w="300px" 
        h="full" 
        bg="bg-gradient-to-l from-primary-blue/5 to-transparent" 
        pointerEvents="none"
      >{null}</Stack>
      
      <Stack direction={{ base: 'col', md: 'row' }} justify="between" align="center" gap={6}>
        <Stack gap={2}>
          <Stack direction="row" align="center" gap={3}>
            <Stack p={2} bg="bg-primary-blue/10" rounded="md" border borderColor="border-primary-blue/20">
              <Icon icon={Trophy} size={6} color="text-primary-blue" />
            </Stack>
            <Heading level={1} letterSpacing="tight">
              {viewData.name}
            </Heading>
          </Stack>
          <Text color="text-gray-400" size="sm" maxWidth="42rem">
            {viewData.description}
          </Text>
        </Stack>

        <Stack direction="row" gap={8} wrap>
          <StatItem 
            icon={Users} 
            label="Members" 
            value={viewData.info.membersCount.toString()} 
            color="text-primary-blue"
          />
          <StatItem 
            icon={Timer} 
            label="Races" 
            value={viewData.info.racesCount.toString()} 
            color="text-neon-aqua"
          />
          <StatItem 
            icon={Activity} 
            label="Avg SOF" 
            value={(viewData.info.avgSOF ?? 0).toString()} 
            color="text-performance-green"
          />
        </Stack>
      </Stack>
    </Card>
  );
}

function StatItem({ icon, label, value, color }: { icon: LucideIcon, label: string, value: string, color: string }) {
  return (
    <Stack gap={1}>
      <Stack direction="row" align="center" gap={1.5}>
        <Icon icon={icon} size={3.5} color="text-gray-500" />
        <Text size="xs" color="text-gray-500" weight="medium" letterSpacing="wider" block>
          {label.toUpperCase()}
        </Text>
      </Stack>
      <Text size="xl" weight="bold" color={color} lineHeight="none">
        {value}
      </Text>
    </Stack>
  );
}