'use client';

import React from 'react';
import { LandingHero } from '@/ui/LandingHero';
import { AlternatingSection } from '@/ui/AlternatingSection';
import { FeatureGrid } from '@/ui/FeatureGrid';
import { DiscordCTA } from '@/ui/DiscordCTA';
import { FAQ } from '@/components/landing/FAQ';
import { Footer } from '@/ui/Footer';
import { CareerProgressionMockup } from '@/components/mockups/CareerProgressionMockup';
import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
import { CompanionAutomationMockup } from '@/components/mockups/CompanionAutomationMockup';
import { SimPlatformMockup } from '@/components/mockups/SimPlatformMockup';
import { Card } from '@/ui/Card';
import { Button } from '@/ui/Button';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Image } from '@/ui/Image';
import { Link } from '@/ui/Link';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { Surface } from '@/ui/Surface';
import { getMediaUrl } from '@/lib/utilities/media';
import { routes } from '@/lib/routing/RouteConfig';
import { FeatureItem, ResultItem, StepItem } from '@/ui/LandingItems';
import { ModeGuard } from '@/components/shared/ModeGuard';

export interface HomeViewData {
  isAlpha: boolean;
  upcomingRaces: Array<{
    id: string;
    track: string;
    car: string;
    formattedDate: string;
  }>;
  topLeagues: Array<{
    id: string;
    name: string;
    description: string;
  }>;
  teams: Array<{
    id: string;
    name: string;
    description: string;
    logoUrl?: string;
  }>;
}

interface HomeTemplateProps {
  viewData: HomeViewData;
}

export function HomeTemplate({ viewData }: HomeTemplateProps) {
  return (
    <Box as="main">
      <LandingHero />

      {/* Section 1: A Persistent Identity */}
      <AlternatingSection
        heading="A Persistent Identity"
        backgroundVideo="/gameplay.mp4"
        description={
          <Stack gap={4}>
            <Text>
              Your races, your seasons, your progress &mdash; finally in one place.
            </Text>
            <Stack gap={3}>
              <FeatureItem text="Lifetime stats and season history across all your leagues" />
              <FeatureItem text="Track your performance, consistency, and team contributions" />
              <FeatureItem text="Your own rating that reflects real league competition" />
            </Stack>
            <Text>
              iRacing gives you physics. GridPilot gives you a career.
            </Text>
          </Stack>
        }
        mockup={<CareerProgressionMockup />}
        layout="text-left"
      />

      <FeatureGrid />

      {/* Section 2: Results That Actually Stay */}
      <AlternatingSection
        heading="Results That Actually Stay"
        backgroundImage="/images/ff1600.jpeg"
        description={
          <Stack gap={4}>
            <Text size="sm">
              Every race you run stays with you.
            </Text>
            <Stack gap={3}>
              <ResultItem text="Your stats, your team, your story &mdash; all connected" color="#ef4444" />
              <ResultItem text="One race result updates your profile, team points, rating, and season history" color="#ef4444" />
              <ResultItem text="No more fragmented data across spreadsheets and forums" color="#ef4444" />
            </Stack>
            <Text size="sm">
              Your racing career, finally in one place.
            </Text>
          </Stack>
        }
        mockup={<RaceHistoryMockup />}
        layout="text-right"
      />

      {/* Section 3: Automatic Session Creation */}
      <AlternatingSection
        heading="Automatic Session Creation"
        description={
          <Stack gap={4}>
            <Text size="sm">
              Setting up league races used to mean clicking through iRacing&apos;s wizard 20 times.
            </Text>
            <Stack gap={3}>
              <StepItem step={1} text="Our companion app syncs with your league schedule" />
              <StepItem step={2} text="When it's race time, it creates the iRacing session automatically" />
              <StepItem step={3} text="No clicking through wizards. No manual setup" />
            </Stack>
            <Text size="sm">
              Automation instead of repetition.
            </Text>
          </Stack>
        }
        mockup={<CompanionAutomationMockup />}
        layout="text-left"
      />

      {/* Section 4: Game-Agnostic Platform */}
      <AlternatingSection
        heading="Built for iRacing. Ready for the future."
        backgroundImage="/images/lmp3.jpeg"
        description={
          <Stack gap={4}>
            <Text size="sm">
              Right now, we&apos;re focused on making iRacing league racing better.
            </Text>
            <Text size="sm">
              But sims come and go. Your leagues, your teams, your rating &mdash; those stay.
            </Text>
            <Text size="sm">
              GridPilot is built to outlast any single platform.
            </Text>
            <Text size="sm">
              When the next sim arrives, your competitive identity moves with you.
            </Text>
          </Stack>
        }
        mockup={<SimPlatformMockup />}
        layout="text-right"
      />

      {/* Alpha-only discovery section */}
      <ModeGuard feature="alpha_discovery">
        <Container size="lg" py={12}>
          <Stack gap={8}>
            <Box>
              <Heading level={2}>Discover the grid</Heading>
              <Text size="sm" color="text-gray-400" block mt={2}>
                Explore leagues, teams, and races that make up the GridPilot ecosystem.
              </Text>
            </Box>

            <Grid cols={3} gap={8}>
              {/* Top leagues */}
              <Card>
                <Stack gap={4}>
                  <Stack direction="row" align="center" justify="between">
                    <Heading level={3} fontSize="sm">Featured leagues</Heading>
                    <Link href={routes.public.leagues}>
                      <Button variant="secondary" size="sm">
                        View all
                      </Button>
                    </Link>
                  </Stack>
                  <Stack gap={3}>
                    {viewData.topLeagues.slice(0, 4).map((league) => (
                      <Box key={league.id}>
                        <Stack direction="row" align="start" gap={3}>
                          <Surface variant="muted" rounded="md" border padding={1} w="2.5rem" h="2.5rem" bg="bg-blue-500/10" borderColor="border-blue-500/30" display="flex" alignItems="center" justifyContent="center">
                            <Text size="xs" weight="bold" color="text-primary-blue">
                              {league.name.split(' ').map((word) => word[0]).join('').slice(0, 3).toUpperCase()}
                            </Text>
                          </Surface>
                          <Box flex={1} minWidth="0">
                            <Text color="text-white" block truncate>{league.name}</Text>
                            <Text size="xs" color="text-gray-400" block mt={1} truncate>{league.description}</Text>
                          </Box>
                        </Stack>
                      </Box>
                    ))}
                  </Stack>
                </Stack>
              </Card>

              {/* Teams */}
              <Card>
                <Stack gap={4}>
                  <Stack direction="row" align="center" justify="between">
                    <Heading level={3} fontSize="sm">Teams on the grid</Heading>
                    <Link href={routes.public.teams}>
                      <Button variant="secondary" size="sm">
                        Browse teams
                      </Button>
                    </Link>
                  </Stack>
                  <Stack gap={3}>
                    {viewData.teams.slice(0, 4).map(team => (
                      <Box key={team.id}>
                        <Stack direction="row" align="start" gap={3}>
                          <Surface variant="muted" rounded="md" border padding={1} w="2.5rem" h="2.5rem" overflow="hidden" bg="bg-neutral-800">
                            <Image
                              src={team.logoUrl || getMediaUrl('team-logo', team.id)}
                              alt={team.name}
                              width={40}
                              height={40}
                              objectFit="cover"
                              fullWidth
                              fullHeight
                            />
                          </Surface>
                          <Box flex={1} minWidth="0">
                            <Text color="text-white" block truncate>{team.name}</Text>
                            <Text size="xs" color="text-gray-400" block mt={1} truncate>{team.description}</Text>
                          </Box>
                        </Stack>
                      </Box>
                    ))}
                  </Stack>
                </Stack>
              </Card>

              {/* Upcoming races */}
              <Card>
                <Stack gap={4}>
                  <Stack direction="row" align="center" justify="between">
                    <Heading level={3} fontSize="sm">Upcoming races</Heading>
                    <Link href={routes.public.races}>
                      <Button variant="secondary" size="sm">
                        View schedule
                      </Button>
                    </Link>
                  </Stack>
                  {viewData.upcomingRaces.length === 0 ? (
                    <Text size="xs" color="text-gray-400">
                      No races scheduled in this demo snapshot.
                    </Text>
                  ) : (
                    <Stack gap={3}>
                      {viewData.upcomingRaces.map(race => (
                        <Box key={race.id}>
                          <Stack direction="row" align="start" justify="between" gap={3}>
                            <Box flex={1} minWidth="0">
                              <Text color="text-white" block truncate>{race.track}</Text>
                              <Text size="xs" color="text-gray-400" block mt={1} truncate>{race.car}</Text>
                            </Box>
                            <Text size="xs" color="text-gray-500">
                              {race.formattedDate}
                            </Text>
                          </Stack>
                        </Box>
                      ))}
                    </Stack>
                  )}
                </Stack>
              </Card>
            </Grid>
          </Stack>
        </Container>
      </ModeGuard>

      <DiscordCTA />
      <FAQ />
      <Footer />
    </Box>
  );
}