'use client';
import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
import { useTranslations } from 'next-intl';
import { NotificationBell } from '@/components/notifications';
import { ROUTES } from '@/constants';
import { LinkToPage } from '@/utils';
import { useSupportUnreadTotal } from '@/services/tickets';
import MobileShell from './MobileShell';

/**
 * Nurse app shell — the "نمای پرستار" workspace. Four bottom-nav destinations, one per group the
 * sidebar used to hide behind a hamburger: امروز (the operational home), حرفهٔ من, مالی, and a
 * بیشتر hub carrying support, notifications and settings. The identity card that lived in the
 * drawer header now opens from that hub, where it can be read rather than glanced at.
 * @layout NurseLayout
 */
const NurseLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
  const t = useTranslations('nav');
  const supportUnreadTotal = useSupportUnreadTotal();

  const tabs: Array<LinkToPage> = useMemo(
    () => [
      {
        title: t('group_today'),
        path: ROUTES.NURSE,
        icon: 'today',
      },
      {
        title: t('group_profession'),
        path: ROUTES.NURSE_PRACTICE,
        icon: 'practice',
        matchPaths: [
          ROUTES.NURSE_PROFILE,
          ROUTES.NURSE_SERVICES,
          ROUTES.NURSE_COVERAGE,
          ROUTES.NURSE_VERIFICATION,
        ],
      },
      {
        title: t('group_finance'),
        path: ROUTES.NURSE_FINANCE,
        icon: 'earnings',
        matchPaths: [ROUTES.NURSE_EARNINGS, ROUTES.NURSE_BANK],
      },
      {
        title: t('more'),
        path: ROUTES.NURSE_MORE,
        icon: 'more',
        matchPaths: [ROUTES.NURSE_SUPPORT_TICKETS, ROUTES.NURSE_NOTIFICATIONS],
        badgeCount: supportUnreadTotal ?? undefined,
      },
    ],
    [t, supportUnreadTotal]
  );

  return (
    <MobileShell name="Nurse" tabs={tabs} headerActions={<NotificationBell role="nurse" />}>
      {children}
    </MobileShell>
  );
};

export default NurseLayout;