import { getLocale, getTranslations } from 'next-intl/server';
import { Stack, Typography } from '@mui/material';
import { AppButton } from '@/components';
import AppIcon from '@/components/common/AppIcon';
import BrandMark from '@/components/auth/BrandMark';
import { ROUTES } from '@/constants';

/**
 * The branded 404 — rendered for any URL under a valid locale segment that matches no route (the
 * `[...rest]/page.tsx` catch-all calls `notFound()`, which mounts this). A Server Component: nothing here
 * is interactive besides the "go home" link, so no client boundary is needed.
 */
export default async function NotFound() {
  const locale = await getLocale();
  const t = await getTranslations('routeChrome');

  return (
    <Stack
      sx={{ alignItems: 'center', justifyContent: 'center', minHeight: '70vh', gap: 2, px: 2, textAlign: 'center' }}
    >
      <BrandMark />
      <AppIcon icon="search" size={40} color="var(--bal-text-secondary)" />
      <Typography variant="h6" component="h1">
        {t('not_found_title')}
      </Typography>
      <Typography variant="body2" sx={{ color: 'text.secondary', maxWidth: 360 }}>
        {t('not_found_body')}
      </Typography>
      <AppButton color="primary" variant="contained" to={`/${locale}${ROUTES.HOME}`}>
        {t('go_home')}
      </AppButton>
    </Stack>
  );
}
