import { AppShell, Flex, Button, Box, Container } from '@pikku/mantine/core';
import '@/styles/datatable.css';
import { Link, useLocation, useNavigate, useParams } from '@tanstack/react-router';
import { IconArrowLeft } from '@tabler/icons-react';
import LanguageSelector from '@/components/ui/LanguageSelector';
import Logo from '@/components/ui/Logo';
import { useI18n } from '@/context/i18n-provider';
import { asI18n } from '@pikku/react';

interface BackOfficeLayoutProps {
  children: React.ReactNode;
}

export default function BackOfficeLayout({ children }: BackOfficeLayoutProps) {
  const t = useI18n();
  const pathname = useLocation({ select: (l) => l.pathname });
  const navigate = useNavigate();
  const params = useParams({ strict: false });
  const lang = params.lang as string;
  const isDetailPage = pathname.includes('/backoffice/candidate/');

  // Don't apply AppShell to auth pages
  if (pathname.includes('/backoffice/auth')) {
    return <>{children}</>;
  }

  return (
    <AppShell
      padding="md"
      header={{ height: 80 }}
      styles={{
        main: {
          backgroundColor: 'var(--mantine-color-gray-0)',
        }
      }}
    >
      <AppShell.Header>
        {isDetailPage ? (
          <Box style={{ borderBottom: '1px solid var(--mantine-color-gray-2)', height: '100%' }}>
            <Container size="xl" h="100%">
              <Flex align="center" justify="space-between" h="100%">
                <Button
                  variant="default"
                  leftSection={<IconArrowLeft size={16} />}
                  onClick={() => navigate({ to: `/${lang}/backoffice/candidates` })}
                >
                  {t('backoffice.navigation.backtocandidates')}
                </Button>
                <LanguageSelector />
              </Flex>
            </Container>
          </Box>
        ) : (
          <Flex align="center" justify="space-between" h="100%" px="md">
            <Logo size="sm" type={t('backoffice.navigation.adminbadge')} />

            <Flex gap="sm" align="center">
              <Button
                component={Link}
                to={`/${lang}/backoffice/candidates`}
                variant={pathname.includes('/backoffice/candidates') ? 'filled' : 'default'}
              >
                {asI18n('Candidates')}
              </Button>
              <Button
                component={Link}
                to={`/${lang}/backoffice/translations`}
                variant={pathname.includes('/backoffice/translations') ? 'filled' : 'default'}
              >
                {asI18n('Translations')}
              </Button>
              <LanguageSelector />
            </Flex>
          </Flex>
        )}
      </AppShell.Header>

      <AppShell.Main>{children}</AppShell.Main>
    </AppShell>
  );
}