'use client';
import { Stack, Typography } from '@mui/material';
import { useLocale, useTranslations } from 'next-intl';
import { AccentCard, AppLink, NavHubList, PageHeader, StatusChip, TrustBadge } from '@/components';
import type { NavHubItem } from '@/components';
import { ROUTES } from '@/constants';
import { useMyVariants } from '@/services/catalog';
import { useServiceAreas } from '@/services/serviceAreas';
import { useNurseProfile } from '@/services/profiles';
import { useVerificationStatus } from '@/services/verification';
import { ownBadgeState } from '@/services/verification/types';

/**
 * «حرفهٔ من» group root — the page the bottom-nav tab lands on. It answers the question the
 * sidebar section never could ("is my listing actually live, and what's missing?") before handing
 * off to the four screens that fix it. Every number here is read off a query that already answers
 * it; nothing is derived optimistically, and a count is simply omitted until its query resolves.
 */
export default function NursePracticeScreen() {
  const t = useTranslations('hub');
  const locale = useLocale();
  const tn = useTranslations('nav');
  const { data: verification } = useVerificationStatus();
  const { data: profile } = useNurseProfile();
  const { data: variants } = useMyVariants();
  const { data: areas } = useServiceAreas();

  const activeVariants = variants?.items.filter((variant) => variant.isActive).length;
  const isAccepting = profile?.isAcceptingBookings;

  const items: Array<NavHubItem> = [
    {
      title: tn('profile'),
      subtitle: t('practice_profile_sub'),
      icon: 'account',
      path: ROUTES.NURSE_PROFILE,
    },
    {
      title: tn('services'),
      subtitle: t('practice_services_sub'),
      icon: 'services',
      path: ROUTES.NURSE_SERVICES,
      meta: activeVariants === undefined ? undefined : <MetaCount value={activeVariants} />,
    },
    {
      title: tn('coverage'),
      subtitle: t('practice_coverage_sub'),
      icon: 'coverage',
      path: ROUTES.NURSE_COVERAGE,
      meta: areas === undefined ? undefined : <MetaCount value={areas.total} />,
    },
    {
      title: tn('verification'),
      subtitle: t('practice_verification_sub'),
      icon: 'verification',
      path: ROUTES.NURSE_VERIFICATION,
    },
  ];

  return (
    <Stack sx={{ gap: 2 }}>
      <PageHeader title={tn('group_profession')} subtitle={t('practice_subtitle')} />

      <AccentCard tone={isAccepting ? 'success' : 'warning'}>
        <Stack sx={{ gap: 1.25 }}>
          <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
            <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
              {t('practice_status_title')}
            </Typography>
            <TrustBadge state={ownBadgeState(verification)} />
          </Stack>
          {isAccepting === undefined ? null : (
            <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
              <StatusChip
                status={isAccepting ? 'active' : 'neutral'}
                label={isAccepting ? t('practice_accepting_on') : t('practice_accepting_off')}
              />
              <AppLink to={`/${locale}${ROUTES.NURSE_SERVICES}`} variant="caption">
                {t('practice_accepting_manage')}
              </AppLink>
            </Stack>
          )}
        </Stack>
      </AccentCard>

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

/** A count read straight off a resolved query — never a placeholder while one is in flight. */
function MetaCount({ value }: { value: number }) {
  return (
    <Typography variant="body2" sx={{ color: 'text.secondary', fontVariantNumeric: 'tabular-nums' }}>
      {value}
    </Typography>
  );
}