'use client';

import React from 'react';
import { Section } from '@/ui/Section';
import { Panel } from '@/ui/Panel';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Box } from '@/ui/Box';
import { StatusBadge } from '@/ui/StatusBadge';
import { Icon } from '@/ui/Icon';
import { Trophy, Globe, Settings2, Palette, ShieldCheck, BarChart3 } from 'lucide-react';

interface LeagueIdentityPreviewProps {
  league?: {
    id: string;
    name: string;
    description: string;
  };
}

/**
 * LeagueIdentityPreview - Radically redesigned for "Modern Precision" and "Dieter Rams" style.
 * Focuses on the professional identity and deep customization options for admins.
 */
export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
  const leagueName = league?.name || 'Apex Racing League';
  const subdomain = league ? `${league.name.toLowerCase().replace(/\s+/g, '')}.gridpilot.racing` : 'apex.gridpilot.racing';

  return (
    <Section variant="default" padding="lg">
      <Stack gap={24}>
        <Stack gap={8} maxWidth="42rem">
          <Heading level={2} weight="bold">Your Brand. Your Rules.</Heading>
          <Text variant="med" size="lg" leading="relaxed">
            GridPilot is designed to be invisible where it matters, letting your league's identity take center stage. 
            Professional tools that respect your community's unique culture.
          </Text>
        </Stack>

        <Grid cols={{ base: 1, md: 2 }} gap={20}>
          {/* Your Brand - Visual Identity */}
          <Box>
            <Panel variant="muted" padding="lg">
              <Stack gap={8}>
                <Stack gap={2}>
                  <Group gap={2}>
                    <Icon icon={Palette} size={4} intent="primary" />
                    <Text variant="primary" weight="bold" uppercase size="xs">Your Brand</Text>
                  </Group>
                  <Heading level={3} weight="bold">Professional Presence</Heading>
                  <Text variant="low" size="sm">Build prestige with a dedicated home for your competition.</Text>
                </Stack>

                <Stack gap={4}>
                  <Panel variant="bordered" padding="md">
                    <Group gap={4}>
                      <Icon icon={Globe} size={5} intent="low" />
                      <Stack gap={1}>
                        <Text weight="bold">Custom Subdomains</Text>
                        <Text size="xs" variant="low">{subdomain}</Text>
                      </Stack>
                    </Group>
                  </Panel>
                  <Panel variant="bordered" padding="md">
                    <Group gap={4}>
                      <Icon icon={Trophy} size={5} intent="low" />
                      <Stack gap={1}>
                        <Text weight="bold">Live Standings</Text>
                        <Text size="xs" variant="low">Real-time updates across all car classes.</Text>
                      </Stack>
                    </Group>
                  </Panel>
                  <Panel variant="bordered" padding="md">
                    <Group gap={4}>
                      <Icon icon={BarChart3} size={5} intent="low" />
                      <Stack gap={1}>
                        <Text weight="bold">Driver Roster</Text>
                        <Text size="xs" variant="low">Detailed profiles with lifetime league stats.</Text>
                      </Stack>
                    </Group>
                  </Panel>

                  <Panel variant="elevated" padding="sm">
                    <Group gap={3}>
                      <Box width="2.5rem" height="2.5rem" bg="var(--ui-color-bg-surface)" rounded="sm" border={true} display="flex" alignItems="center" justifyContent="center">
                        <Icon icon={Trophy} size={5} intent="low" />
                      </Box>
                      <Stack gap={0}>
                        <Text weight="bold" size="sm">{leagueName}</Text>
                        <Text size="xs" variant="low">{subdomain}</Text>
                      </Stack>
                    </Group>
                  </Panel>
                </Stack>
              </Stack>
            </Panel>
          </Box>

          {/* Your Rules - Deep Customization */}
          <Box>
            <Panel variant="muted" padding="lg">
              <Stack gap={8}>
                <Stack gap={2}>
                  <Group gap={2}>
                    <Icon icon={Settings2} size={4} intent="primary" />
                    <Text variant="primary" weight="bold" uppercase size="xs">Your Rules</Text>
                  </Group>
                  <Heading level={3} weight="bold">Absolute Control</Heading>
                  <Text variant="low" size="sm">The platform adapts to your league, not the other way around.</Text>
                </Stack>

                <Stack gap={4}>
                  <Panel variant="bordered" padding="md">
                    <Group gap={4}>
                      <Icon icon={ShieldCheck} size={5} intent="low" />
                      <Stack gap={1}>
                        <Text weight="bold">Flexible Points Systems</Text>
                        <Text size="xs" variant="low">Custom points for positions, fastest laps, and incidents.</Text>
                      </Stack>
                    </Group>
                  </Panel>
                  <Panel variant="bordered" padding="md">
                    <Group gap={4}>
                      <Icon icon={Settings2} size={5} intent="low" />
                      <Stack gap={1}>
                        <Text weight="bold">Drop Weeks & Playoffs</Text>
                        <Text size="xs" variant="low">Configure complex season structures with ease.</Text>
                      </Stack>
                    </Group>
                  </Panel>
                  <Panel variant="bordered" padding="md">
                    <Group gap={4}>
                      <Icon icon={Trophy} size={5} intent="low" />
                      <Stack gap={1}>
                        <Text weight="bold">Multi-Class Support</Text>
                        <Text size="xs" variant="low">Manage GT3, GTP, and more in a single season.</Text>
                      </Stack>
                    </Group>
                  </Panel>

                  <Panel variant="elevated" padding="sm">
                    <Stack gap={2}>
                      <Text size="xs" uppercase weight="bold" variant="low">Points Configuration</Text>
                      <Group gap={2} wrap>
                        <StatusBadge variant="info">P1: 25pts</StatusBadge>
                        <StatusBadge variant="info">P2: 18pts</StatusBadge>
                        <StatusBadge variant="info">P3: 15pts</StatusBadge>
                        <StatusBadge variant="warning">INC: -1pt</StatusBadge>
                      </Group>
                    </Stack>
                  </Panel>
                </Stack>
              </Stack>
            </Panel>
          </Box>
        </Grid>
      </Stack>
    </Section>
  );
}