'use client';

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

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

export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceSidebarProps) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
      {/* Upcoming This Week */}
      <Panel 
        title="Next Up" 
        description="This week"
      >
        {upcomingRaces.length === 0 ? (
          <div style={{ padding: '1rem 0', textAlign: 'center' }}>
            <Text size="sm" variant="low">No races scheduled this week</Text>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
            {upcomingRaces.map((race) => (
              <SidebarRaceItem
                key={race.id}
                race={{
                  id: race.id,
                  track: race.track,
                  scheduledAt: race.scheduledAt
                }}
                onClick={() => onRaceClick(race.id)}
              />
            ))}
          </div>
        )}
      </Panel>

      {/* Recent Results */}
      <Panel 
        title="Recent Results" 
      >
        {recentResults.length === 0 ? (
          <div style={{ padding: '1rem 0', textAlign: 'center' }}>
            <Text size="sm" variant="low">No completed races yet</Text>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
            {recentResults.map((race) => (
              <SidebarRaceItem
                key={race.id}
                race={{
                  id: race.id,
                  track: race.track,
                  scheduledAt: race.scheduledAt
                }}
                onClick={() => onRaceClick(race.id)}
              />
            ))}
          </div>
        )}
      </Panel>

      {/* Quick Actions */}
      <Panel title="Quick Actions">
        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
          <SidebarActionLink
            href={routes.public.leagues}
            icon={Users}
            label="Browse Leagues"
          />
          <SidebarActionLink
            href={routes.public.leaderboards}
            icon={Trophy}
            label="View Leaderboards"
          />
        </div>
      </Panel>
    </div>
  );
}