import React from 'react';
import { Clock, Trophy, Users } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import { Icon } from '@/ui/Icon';
import { SidebarRaceItem } from '@/ui/SidebarRaceItem';
import { SidebarActionLink } from '@/ui/SidebarActionLink';
import type { RaceViewData } from '@/lib/view-data/RacesViewData';
import { routes } from '@/lib/routing/RouteConfig';

interface RaceSidebarProps {
  upcomingRaces: RaceViewData[];
  recentResults: RaceViewData[];
  onRaceClick: (raceId: string) => void;
}

export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceSidebarProps) {
  return (
    <Stack gap={6}>
      {/* Upcoming This Week */}
      <Card>
        <Stack gap={4}>
          <Stack direction="row" align="center" justify="between">
            <Heading level={3} icon={<Icon icon={Clock} size={4} color="rgb(59, 130, 246)" />}>
              Next Up
            </Heading>
            <Text size="xs" color="text-gray-500">This week</Text>
          </Stack>

          {upcomingRaces.length === 0 ? (
            <Box py={4} textAlign="center">
              <Text size="sm" color="text-gray-400">No races scheduled this week</Text>
            </Box>
          ) : (
            <Stack gap={3}>
              {upcomingRaces.map((race) => (
                <SidebarRaceItem
                  key={race.id}
                  race={{
                    id: race.id,
                    track: race.track,
                    scheduledAt: race.scheduledAt
                  }}
                  onClick={() => onRaceClick(race.id)}
                />
              ))}
            </Stack>
          )}
        </Stack>
      </Card>

      {/* Recent Results */}
      <Card>
        <Stack gap={4}>
          <Heading level={3} icon={<Icon icon={Trophy} size={4} color="rgb(245, 158, 11)" />}>
            Recent Results
          </Heading>

          {recentResults.length === 0 ? (
            <Box py={4} textAlign="center">
              <Text size="sm" color="text-gray-400">No completed races yet</Text>
            </Box>
          ) : (
            <Stack gap={3}>
              {recentResults.map((race) => (
                <SidebarRaceItem
                  key={race.id}
                  race={{
                    id: race.id,
                    track: race.track,
                    scheduledAt: race.scheduledAt
                  }}
                  onClick={() => onRaceClick(race.id)}
                />
              ))}
            </Stack>
          )}
        </Stack>
      </Card>

      {/* Quick Actions */}
      <Card>
        <Stack gap={4}>
          <Heading level={3}>Quick Actions</Heading>
          <Stack gap={2}>
            <SidebarActionLink
              href={routes.public.leagues}
              icon={Users}
              label="Browse Leagues"
            />
            <SidebarActionLink
              href={routes.public.leaderboards}
              icon={Trophy}
              label="View Leaderboards"
              iconColor="text-warning-amber"
              iconBgColor="bg-warning-amber/10"
            />
          </Stack>
        </Stack>
      </Card>
    </Stack>
  );
}