gridpilot.gg/apps/website/templates/SponsorLeaguesTemplate.tsx

import { AvailableLeagueCard } from '@/components/sponsors/AvailableLeagueCard';
import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
import { ViewData } from '@/lib/contracts/view-data/ViewData';
import { routes } from '@/lib/routing/RouteConfig';
import { siteConfig } from '@/lib/siteConfig';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { GridItem } from '@/ui/GridItem';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import {
    Car,
    Megaphone,
    Search,
    Trophy,
    Users,
} from 'lucide-react';

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;
  cpm: number;
}

export type SortOption = 'rating' | 'drivers' | 'price' | 'views';
export type TierFilter = 'all' | 'premium' | 'standard' | 'starter';
export type AvailabilityFilter = 'all' | 'main' | 'secondary';

export interface SponsorLeaguesViewData extends ViewData {
  leagues: AvailableLeague[];
  stats: {
    total: number;
    mainAvailable: number;
    secondaryAvailable: number;
    totalDrivers: number;
    avgCpm: number;
  };
}

interface SponsorLeaguesTemplateProps {
  viewData: SponsorLeaguesViewData;
  filteredLeagues: AvailableLeague[];
  searchQuery: string;
  setSearchQuery: (query: string) => void;
}

export function SponsorLeaguesTemplate({ 
  viewData,
  filteredLeagues,
  searchQuery,
  setSearchQuery,
}: SponsorLeaguesTemplateProps) {
  const stats = viewData.stats;

  return (
    <Container size="lg" spacing="md">
      <Stack gap={8}>
        {/* Breadcrumb */}
        <Box>
          <Stack direction="row" align="center" gap={2}>
            <Link href={routes.sponsor.dashboard}>
              <Text size="sm" color="text-gray-400">Dashboard</Text>
            </Link>
            <Text size="sm" color="text-gray-500">/</Text>
            <Text size="sm" color="text-white">Browse Leagues</Text>
          </Stack>
        </Box>

        {/* Header */}
        <SponsorDashboardHeader 
          sponsorName="Sponsor" 
          onRefresh={() => console.log('Refresh')} 
        />

        {/* Stats Overview */}
        <Grid cols={5} gap={4}>
          <StatCard label="Leagues" value={stats.total} />
          <StatCard label="Main Slots" value={stats.mainAvailable} color="text-performance-green" />
          <StatCard label="Secondary Slots" value={stats.secondaryAvailable} color="text-primary-blue" />
          <StatCard label="Total Drivers" value={stats.totalDrivers} />
          <StatCard label="Avg CPM" value={`$${stats.avgCpm}`} color="text-warning-amber" />
        </Grid>

        {/* Filters (Simplified for template) */}
        <Card>
          <Stack gap={4}>
            <Text size="sm" color="text-gray-400">
              Use the search and filter options to find the perfect league for your brand.
            </Text>
            <Grid cols={4} gap={4}>
              <Box>
                <Input
                  placeholder="Search leagues..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  icon={<Icon icon={Search} size={4} />}
                />
              </Box>
              {/* Selects would go here, using standard Select UI if available */}
            </Grid>
          </Stack>
        </Card>

        {/* Results Count */}
        <Stack direction="row" align="center" justify="between">
          <Text size="sm" color="text-gray-400">
            Showing {filteredLeagues.length} of {viewData.leagues.length} leagues
          </Text>
          <Stack direction="row" align="center" gap={3}>
            <Link href="/teams">
              <Button variant="secondary" size="sm" icon={<Icon icon={Users} size={4} />}>
                Browse Teams
              </Button>
            </Link>
            <Link href="/drivers">
              <Button variant="secondary" size="sm" icon={<Icon icon={Car} size={4} />}>
                Browse Drivers
              </Button>
            </Link>
          </Stack>
        </Stack>

        {/* League Grid */}
        {filteredLeagues.length > 0 ? (
          <Grid cols={3} gap={6}>
            {filteredLeagues.map((league) => (
              <GridItem key={league.id} colSpan={12} mdSpan={6} lgSpan={4}>
                <AvailableLeagueCard league={league} />
              </GridItem>
            ))}
          </Grid>
        ) : (
          <Card>
            <Stack align="center" py={16} gap={4}>
              <Surface variant="muted" rounded="full" padding={4}>
                <Icon icon={Trophy} size={12} color="#525252" />
              </Surface>
              <Box textAlign="center">
                <Heading level={3}>No leagues found</Heading>
                <Text color="text-gray-400" block mt={2}>Try adjusting your filters to see more results</Text>
              </Box>
              <Button variant="secondary" onClick={() => {
                setSearchQuery('');
              }}>
                Clear Filters
              </Button>
            </Stack>
          </Card>
        )}

        {/* Platform Fee Notice */}
        <Surface variant="muted" rounded="lg" border padding={4} bg="bg-neutral-800/30">
          <Stack direction="row" align="start" gap={3}>
            <Icon icon={Megaphone} size={5} color="#3b82f6" />
            <Box>
              <Text size="sm" color="text-gray-300" weight="medium" block mb={1}>Platform Fee</Text>
              <Text size="xs" color="text-gray-500">
                A {siteConfig.fees.platformFeePercent}% platform fee applies to all sponsorship payments. {siteConfig.fees.description}
              </Text>
            </Box>
          </Stack>
        </Surface>
      </Stack>
    </Container>
  );
}

function StatCard({ label, value, color = 'text-white' }: { label: string, value: string | number, color?: string }) {
  return (
    <Card>
      <Box textAlign="center">
        <Text size="2xl" weight="bold" color={color} block mb={1}>{value}</Text>
        <Text size="sm" color="text-gray-400">{label}</Text>
      </Box>
    </Card>
  );
}