'use client';
import { FunctionComponent, ReactNode, useMemo } from 'react';
import { useTranslations } from 'next-intl';
import { Box, Stack } from '@mui/material';
import { AppIconButton, ErrorBoundary, RouteFadeIn } from '@/components';
import { LinkToPage } from '@/utils';
import { usePathname, useRouter } from '@/i18n/navigation';
import AppFrame from './AppFrame';
import { BottomBar, TopBar } from './components';
import BrandLockup from './components/BrandLockup';
import { PageTitleProvider, useRouteTitle } from './routeTitle';

interface MobileShellProps {
  /** Bottom-nav destinations, 3–5 of them. By convention the last is the settings/«بیشتر» hub. */
  tabs: Array<LinkToPage>;
  /** Chrome actions for the top bar's end slot (the notification bell). Never a theme/locale toggle. */
  headerActions?: ReactNode;
  /** Distinguishes this shell's error boundary in logs (`Customer`, `Nurse`, …). */
  name: string;
  children: ReactNode;
}

/**
 * A tab's own path counts as "root" — the shell shows the brand lockup there and a back button
 * on anything deeper, which is the only navigational affordance a phone-width app needs.
 */
function useIsRootTab(tabs: Array<LinkToPage>): boolean {
  const pathname = usePathname();
  return useMemo(() => tabs.some((tab) => tab.path === pathname), [tabs, pathname]);
}

const ShellChrome: FunctionComponent<MobileShellProps> = ({ tabs, headerActions, name, children }) => {
  const tc = useTranslations('common');
  const tChrome = useTranslations('routeChrome');
  const router = useRouter();
  const title = useRouteTitle();
  const onRootTab = useIsRootTab(tabs);

  return (
    <AppFrame
      header={
        <TopBar
          align={onRootTab ? 'center' : 'start'}
          startNode={onRootTab ? undefined : <AppIconButton icon="back" title={tc('back')} onClick={() => router.back()} />}
          titleNode={onRootTab ? <BrandLockup /> : undefined}
          title={onRootTab ? undefined : (title ?? '')}
          endNode={headerActions ? <Stack direction="row" sx={{ alignItems: 'center' }}>{headerActions}</Stack> : undefined}
        />
      }
      footer={<BottomBar items={tabs} />}
    >
      <Box sx={{ px: 2, pt: 2, pb: 3 }}>
        <ErrorBoundary
          name={name}
          title={tChrome('error_title')}
          body={tChrome('error_body')}
          retryLabel={tChrome('error_retry')}
        >
          <RouteFadeIn>{children}</RouteFadeIn>
        </ErrorBoundary>
      </Box>
    </AppFrame>
  );
};

/**
 * The one authenticated shell behind every actor app (customer, nurse, admin, partner). Each
 * actor supplies its own tabs and header actions; the chrome, the frame, the error boundary, and
 * the route-title plumbing are identical, which is the point — four hand-rolled shells is how the
 * app ended up with a drawer here, a tab strip there, and a theme toggle in three top bars.
 * @layout MobileShell
 */
const MobileShell: FunctionComponent<MobileShellProps> = (props) => (
  <PageTitleProvider>
    <ShellChrome {...props} />
  </PageTitleProvider>
);

export default MobileShell;
