'use client';
import { Stack } from '@mui/material';
import { useTranslations } from 'next-intl';
import { NavHubList, PageHeader, ProfileSummary, SurfaceCard } from '@/components';
import type { NavHubItem } from '@/components';
import { SettingsPanel, SignOutRow } from '@/components/settings';
import { ROUTES } from '@/constants';
import { ActorSwitcher } from '@/layout';
import { useMe } from '@/services/auth';
import { useNurseProfile } from '@/services/profiles';
import { useUnreadCount } from '@/services/notifications';
import { useSupportUnreadTotal } from '@/services/tickets';
import { useVerificationStatus } from '@/services/verification';
import { ownBadgeState } from '@/services/verification/types';

/**
 * «بیشتر» group root — the fourth bottom-nav destination: who you are signed in as, the two
 * conversation surfaces (support, notifications), appearance/language, and sign-out. Everything
 * here used to live in the sidebar drawer's header and footer, where a preference toggle sat
 * permanently next to primary navigation.
 */
export default function NurseMoreScreen() {
  const t = useTranslations('hub');
  const tn = useTranslations('nav');

  const { data: me } = useMe();
  const { data: nurseProfile } = useNurseProfile();
  const { data: verification } = useVerificationStatus();
  const supportUnreadTotal = useSupportUnreadTotal();
  const notificationsUnread = useUnreadCount();

  const displayName = me ? [me.firstName, me.lastName].filter(Boolean).join(' ').trim() || me.phone : '';

  const items: Array<NavHubItem> = [
    {
      title: tn('support'),
      subtitle: t('more_support_sub'),
      icon: 'support',
      path: ROUTES.NURSE_SUPPORT_TICKETS,
      badgeCount: supportUnreadTotal ?? undefined,
    },
    {
      title: tn('notifications'),
      subtitle: t('more_notifications_sub'),
      icon: 'notifications',
      path: ROUTES.NURSE_NOTIFICATIONS,
      badgeCount: notificationsUnread || undefined,
    },
  ];

  return (
    <Stack sx={{ gap: 2 }}>
      <PageHeader title={t('more_title')} />

      <SurfaceCard>
        <Stack sx={{ gap: 1.5 }}>
          <ProfileSummary
            displayName={displayName}
            phone={me?.phone}
            avatarUrl={nurseProfile?.avatarUrl}
            trustState={ownBadgeState(verification)}
            loading={!me}
          />
          <ActorSwitcher target="customer" />
        </Stack>
      </SurfaceCard>

      <NavHubList items={items} />
      <SettingsPanel />
      <SignOutRow />
    </Stack>
  );
}
