emaui/libs/auth/src/lib/components/AuthShell.tsx

import type { ReactNode } from 'react';
import {
  Box,
  Center,
  Flex,
  Group,
  Stack,
  Text,
  Title,
  UnstyledButton,
  rem,
  useComputedColorScheme,
  useMantineColorScheme,
  useMantineTheme,
  type BoxProps,
} from '@mantine/core';
import { IconCheck, IconMoon, IconSun } from '@tabler/icons-react';

const LOGO_URL = '/brand/ema-white.png';

export function BrandMark({ size = 44, ...boxProps }: BoxProps & { size?: number }) {
  return (
    <Box
      component="img"
      src={LOGO_URL}
      alt="EMA"
      w={size}
      h={size}
      style={{ display: 'block', objectFit: 'contain', flexShrink: 0 }}
      {...boxProps}
    />
  );
}

function ThemeToggle() {
  const { setColorScheme } = useMantineColorScheme();
  const computed = useComputedColorScheme('light');
  const isDark = computed === 'dark';

  return (
    <UnstyledButton
      onClick={() => setColorScheme(isDark ? 'light' : 'dark')}
      aria-label="Toggle theme"
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: rem(36),
        height: rem(36),
        borderRadius: rem(10),
        border: '1px solid var(--mantine-color-default-border)',
        background: 'var(--mantine-color-body)',
        color: 'var(--mantine-color-dimmed)',
        cursor: 'pointer',
        transition: 'all 150ms ease',
      }}
    >
      {isDark ? <IconSun size={18} /> : <IconMoon size={18} />}
    </UnstyledButton>
  );
}

const FEATURES = [
  'Submit applications online, 24/7',
  'Real-time status tracking & alerts',
  'Available in English & አማርኛ',
];

interface AuthShellProps {
  children: ReactNode;
  brandTitle?: string;
  brandSubtitle?: string;
}

export function AuthShell({
  children,
  brandTitle = 'Maritime licensing, made simple.',
  brandSubtitle = 'Apply for vessel and seafarer licenses, upload documents, and track every application in one secure portal.',
}: AuthShellProps) {
  const theme = useMantineTheme();
  const heroGradient = theme.other.heroGradient as string;
  const computed = useComputedColorScheme('light');
  const isDark = computed === 'dark';

  return (
    <Box
      mih="100vh"
      style={{
        background: 'var(--mantine-color-body)',
        position: 'relative',
      }}
      p="md"
    >
      {/* Theme toggle — top-right corner */}
      <Box
        style={{
          position: 'absolute',
          top: rem(16),
          right: rem(16),
          zIndex: 10,
        }}
      >
        <ThemeToggle />
      </Box>

      <Flex
        mih="100vh"
        align="center"
        justify="center"
      >
        <Box
          mx="auto"
          maw={1280}
          w="100%"
          p={12}
          style={{
            borderRadius: rem(16),
            background: 'var(--mantine-color-body)',
            boxShadow: isDark
              ? '0 20px 60px rgba(0,0,0,0.5)'
              : '0 20px 60px rgba(0,0,0,0.15)',
            overflow: 'hidden',
          }}
        >
          <Flex direction={{ base: 'column', lg: 'row' }}>
            <Box
              w={{ base: '100%', lg: '50%' }}
              px={48}
              py={48}
              style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
            >
              {children}
            </Box>

            <Box
              visibleFrom="lg"
              w="50%"
              p="lg"
              pos="relative"
              style={{ background: heroGradient, overflow: 'hidden' }}
            >
              <Box
                pos="absolute"
                top={-80}
                right={-40}
                w={240}
                h={240}
                style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.10)' }}
              />
              <Box
                pos="absolute"
                bottom={-80}
                left={-60}
                w={220}
                h={220}
                style={{ borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}
              />

              <Stack
                gap="lg"
                pos="relative"
                style={{ zIndex: 1 }}
                h="100%"
                justify="center"
              >
                <Center>
                  <Box
                    component="img"
                    src={LOGO_URL}
                    alt="EMA Portal"
                    style={{ display: 'block', maxWidth: '60%', height: 'auto' }}
                  />
                </Center>

                <Stack gap={6}>
                  <Title order={2} c="white" fz={rem(28)} lh={1.2} fw={700}>
                    {brandTitle}
                  </Title>
                  <Text fz="sm" lh={1.6} style={{ color: 'rgba(255,255,255,0.85)' }}>
                    {brandSubtitle}
                  </Text>
                </Stack>

                <Stack gap="sm">
                  {FEATURES.map((feature) => (
                    <Group key={feature} gap="sm" wrap="nowrap">
                      <Center
                        w={22}
                        h={22}
                        style={{
                          borderRadius: '50%',
                          background: 'rgba(255,255,255,0.2)',
                          flexShrink: 0,
                        }}
                      >
                        <IconCheck size={12} color="white" stroke={2.4} />
                      </Center>
                      <Text c="white" fz="sm" fw={500}>
                        {feature}
                      </Text>
                    </Group>
                  ))}
                </Stack>

                <Text fz="xs" style={{ color: 'rgba(255,255,255,0.7)' }}>
                  © 2026 Ethiopian Maritime Authority
                </Text>
              </Stack>
            </Box>
          </Flex>
        </Box>
      </Flex>
    </Box>
  );
}