'use client';

import React from 'react';
import { Section } from '@/ui/Section';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Card } from '@/ui/Card';
import { Button } from '@/ui/Button';
import { FeatureGrid } from '@/ui/FeatureGrid';
import { Stack } from '@/ui/Stack';
import { Trophy, Users, Flag } from 'lucide-react';

interface EcosystemGridProps {
  leagues: Array<{ id: string; name: string; description: string }>;
  teams: Array<{ id: string; name: string; description: string }>;
  races: Array<{ id: string; track: string; car: string; formattedDate: string }>;
}

/**
 * EcosystemGrid - Discovery section for the live ecosystem.
 * Designed with a "grid" layout and precision details.
 * Uses ONLY UI components.
 */
export function EcosystemGrid({ leagues, teams, races }: EcosystemGridProps) {
  return (
    <Section variant="muted" padding="lg">
      <Stack direction="col" gap={16}>
        <Stack direction={{ base: 'col', md: 'row' }} align="end" justify="between" gap={8}>
          <Stack direction="col" gap={4} maxWidth="42rem">
            <Text variant="primary" weight="bold" uppercase size="xs">
              Live Ecosystem
            </Text>
            <Heading level={2} weight="bold">
              THE GRID
            </Heading>
            <Text size="lg" variant="med" block>
              Explore the leagues, teams, and races that define the GridPilot ecosystem.
            </Text>
          </Stack>
          <Button variant="secondary" size="md">
            VIEW ALL DATA
          </Button>
        </Stack>

        <FeatureGrid columns={{ base: 1, lg: 3 }} gap={8}>
          {/* Leagues Column */}
          <Stack direction="col" gap={6}>
            <Stack direction="row" align="center" gap={2} px={2}>
              <Trophy className="w-4 h-4 text-[var(--ui-color-text-low)]" />
              <Text size="sm" weight="bold" uppercase variant="low">Top Leagues</Text>
            </Stack>
            {leagues.slice(0, 3).map((league) => (
              <Card key={league.id} variant="default" padding="md">
                <Heading level={5} weight="bold">{league.name}</Heading>
                <Text size="sm" variant="low" leading="snug" block mt={2}>{league.description}</Text>
              </Card>
            ))}
          </Stack>

          {/* Teams Column */}
          <Stack direction="col" gap={6}>
            <Stack direction="row" align="center" gap={2} px={2}>
              <Users className="w-4 h-4 text-[var(--ui-color-text-low)]" />
              <Text size="sm" weight="bold" uppercase variant="low">Active Teams</Text>
            </Stack>
            {teams.slice(0, 3).map((team) => (
              <Card key={team.id} variant="default" padding="md">
                <Heading level={5} weight="bold">{team.name}</Heading>
                <Text size="sm" variant="low" leading="snug" block mt={2}>{team.description}</Text>
              </Card>
            ))}
          </Stack>

          {/* Races Column */}
          <Stack direction="col" gap={6}>
            <Stack direction="row" align="center" gap={2} px={2}>
              <Flag className="w-4 h-4 text-[var(--ui-color-text-low)]" />
              <Text size="sm" weight="bold" uppercase variant="low">Upcoming Races</Text>
            </Stack>
            {races.slice(0, 3).map((race) => (
              <Card key={race.id} variant="default" padding="md">
                <Stack direction="row" justify="between" align="start">
                  <Stack direction="col" gap={1}>
                    <Heading level={5} weight="bold">{race.track}</Heading>
                    <Text size="xs" variant="primary" weight="bold" uppercase>{race.car}</Text>
                  </Stack>
                  <Text size="xs" variant="low" mono>{race.formattedDate}</Text>
                </Stack>
              </Card>
            ))}
          </Stack>
        </FeatureGrid>
      </Stack>
    </Section>
  );
}