import { FeedList } from '@/components/feed/FeedList';
import { LatestResultsSidebar } from '@/components/races/LatestResultsSidebar';
import { UpcomingRacesSidebar } from '@/components/races/UpcomingRacesSidebar';
import { Card } from '@/ui/Card';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Section } from '@/ui/Section';
import { Text } from '@/ui/Text';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';

interface FeedItemData {
  id: string;
  type: string;
  headline: string;
  body?: string;
  timestamp: string;
  formattedTime: string;
  ctaHref?: string;
  ctaLabel?: string;
}

type FeedUpcomingRace = {
  id: string;
  track: string;
  car: string;
  scheduledAt: string | Date;
};

type FeedLatestResult = {
  raceId: string;
  track: string;
  car: string;
  winnerName: string;
  scheduledAt: string | Date;
};

interface FeedLayoutProps {
  feedItems: FeedItemData[];
  upcomingRaces: FeedUpcomingRace[];
  latestResults: FeedLatestResult[];
}

export function FeedLayout({
  feedItems,
  upcomingRaces,
  latestResults
}: FeedLayoutProps) {
  const formattedUpcomingRaces = upcomingRaces.map(r => ({
    ...r,
    formattedDate: DateDisplay.formatShort(r.scheduledAt),
  }));

  const formattedLatestResults = latestResults.map(r => ({
    ...r,
    formattedDate: DateDisplay.formatShort(r.scheduledAt),
  }));

  return (
    <Section className="mt-16 mb-20">
      <Container>
        <Grid cols={1} lgCols={3} gap={8}>
          <Stack gap={4} className="lg:col-span-2">
            <Stack direction="row" align="baseline" justify="between" gap={4}>
              <Stack>
                <Heading level={2} weight="semibold" color="text-white">Activity</Heading>
                <Text size="sm" color="text-gray-400">
                  See what your friends and leagues are doing right now.
                </Text>
              </Stack>
            </Stack>
            <Card className="bg-iron-gray/80">
              <FeedList items={feedItems} />
            </Card>
          </Stack>
          <Stack as="aside" gap={6}>
            <UpcomingRacesSidebar races={formattedUpcomingRaces} />
            <LatestResultsSidebar results={formattedLatestResults} />
          </Stack>
        </Grid>
      </Container>
    </Section>
  );
}