gridpilot.gg/apps/website/components/leagues/AvailableLeagueCard.tsx

import { CheckCircle2, Clock, Star } from 'lucide-react';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

interface AvailableLeague {
  id: string;
  name: string;
  game: string;
  drivers: number;
  avgViewsPerRace: number;
  mainSponsorSlot: { available: boolean; price: number };
  secondarySlots: { available: number; total: number; price: number };
  rating: number;
  tier: 'premium' | 'standard' | 'starter';
  nextRace?: string;
  seasonStatus: 'active' | 'upcoming' | 'completed';
  description: string;
  formattedAvgViews: string;
  formattedCpm: string;
}

interface AvailableLeagueCardProps {
  league: AvailableLeague;
}

export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
  const tierConfig = {
    premium: { icon: '⭐', label: 'Premium' },
    standard: { icon: '🏆', label: 'Standard' },
    starter: { icon: '🚀', label: 'Starter' },
  };

  const statusConfig = {
    active: { color: 'text-performance-green', bgColor: 'bg-performance-green/10', label: 'Active Season' },
    upcoming: { color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Starting Soon' },
    completed: { color: 'text-gray-400', bgColor: 'bg-gray-400/10', label: 'Season Ended' },
  };

  const config = tierConfig[league.tier];
  const status = statusConfig[league.seasonStatus];

  return (
    <Card>
      <Stack gap={4}>
        {/* Header */}
        <Stack direction="row" align="start" justify="between">
          <Box flexGrow={1}>
            <Stack direction="row" align="center" gap={2} mb={1} wrap>
              <Badge variant="primary">{config.icon} {config.label}</Badge>
              <Box px={2} py={0.5} rounded="full" className={status.bgColor}>
                <Text size="xs" weight="medium" className={status.color}>{status.label}</Text>
              </Box>
            </Stack>
            <Heading level={3}>{league.name}</Heading>
            <Text size="sm" color="text-gray-500" block mt={1}>{league.game}</Text>
          </Box>
          <Box px={2} py={1} rounded="lg" bg="bg-iron-gray/50">
            <Stack direction="row" align="center" gap={1}>
              <Icon icon={Star} size={3.5} color="text-yellow-400" />
              <Text size="sm" weight="medium" color="text-white">{league.rating}</Text>
            </Stack>
          </Box>
        </Stack>

        {/* Description */}
        <Text size="sm" color="text-gray-400" block truncate>{league.description}</Text>

        {/* Stats Grid */}
        <Box display="grid" gridCols={3} gap={2}>
          <StatItem label="Drivers" value={league.drivers} />
          <StatItem label="Avg Views" value={league.formattedAvgViews} />
          <StatItem label="CPM" value={league.formattedCpm} color="text-performance-green" />
        </Box>

        {/* Next Race */}
        {league.nextRace && (
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Clock} size={4} color="text-gray-400" />
            <Text size="sm" color="text-gray-400">Next:</Text>
            <Text size="sm" color="text-white">{league.nextRace}</Text>
          </Stack>
        )}

        {/* Sponsorship Slots */}
        <Stack gap={2}>
          <SlotRow 
            label="Main Sponsor" 
            available={league.mainSponsorSlot.available} 
            price={`$${league.mainSponsorSlot.price}/season`} 
          />
          <SlotRow 
            label="Secondary Slots" 
            available={league.secondarySlots.available > 0} 
            price={`${league.secondarySlots.available}/${league.secondarySlots.total} @ $${league.secondarySlots.price}`} 
          />
        </Stack>

        {/* Actions */}
        <Stack direction="row" gap={2}>
          <Box flexGrow={1}>
            <Link href={`/sponsor/leagues/${league.id}`} block>
              <Button variant="secondary" fullWidth size="sm">
                View Details
              </Button>
            </Link>
          </Box>
          {(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
            <Box flexGrow={1}>
              <Link href={`/sponsor/leagues/${league.id}?action=sponsor`} block>
                <Button variant="primary" fullWidth size="sm">
                  Sponsor
                </Button>
              </Link>
            </Box>
          )}
        </Stack>
      </Stack>
    </Card>
  );
}

function StatItem({ label, value, color = 'text-white' }: { label: string, value: string | number, color?: string }) {
  return (
    <Box p={2} bg="bg-iron-gray/50" rounded="lg" textAlign="center">
      <Text weight="bold" className={color}>{value}</Text>
      <Text size="xs" color="text-gray-500" block mt={1}>{label}</Text>
    </Box>
  );
}

function SlotRow({ label, available, price }: { label: string, available: boolean, price: string }) {
  return (
    <Box p={2} rounded="lg" bg="bg-iron-gray/30">
      <Stack direction="row" align="center" justify="between">
        <Stack direction="row" align="center" gap={2}>
          <Box width="2.5" height="2.5" rounded="full" bg={available ? 'bg-performance-green' : 'bg-error-red'} />
          <Text size="sm" color="text-gray-300">{label}</Text>
        </Stack>
        <Box>
          {available ? (
            <Text size="sm" weight="semibold" color="text-white">{price}</Text>
          ) : (
            <Stack direction="row" align="center" gap={1}>
              <Icon icon={CheckCircle2} size={3} color="text-gray-500" />
              <Text size="sm" color="text-gray-500">Filled</Text>
            </Stack>
          )}
        </Box>
      </Stack>
    </Box>
  );
}