'use client';
import { Skeleton, Stack, Typography } from '@mui/material';
import { useTranslations } from 'next-intl';
import { AccentCard, ErrorState, Money, NavHubList, PageHeader } from '@/components';
import type { NavHubItem } from '@/components';
import { ROUTES } from '@/constants';
import { parseIrr } from '@/utils';
import { useNurseEarningsBalance } from '@/services/payouts';

/**
 * «مالی» group root. The one number a nurse opens this tab for — the signed net payable balance —
 * is answered before any navigation, then the three money screens are one tap away. The balance is
 * **signed**: an outstanding clawback can exceed accrued earnings, and clamping it to zero would
 * quietly tell a nurse they are owed nothing when they in fact owe money back.
 */
export default function NurseFinanceScreen() {
  const t = useTranslations('hub');
  const tn = useTranslations('nav');
  const tp = useTranslations('payouts');
  const { data, isLoading, isError, refetch } = useNurseEarningsBalance();

  const items: Array<NavHubItem> = [
    {
      title: tn('earnings'),
      subtitle: t('finance_earnings_sub'),
      icon: 'earnings',
      path: ROUTES.NURSE_EARNINGS,
    },
    {
      title: tn('payouts'),
      subtitle: t('finance_payouts_sub'),
      icon: 'history',
      path: ROUTES.NURSE_EARNINGS_PAYOUTS,
    },
    {
      title: tn('bank'),
      subtitle: t('finance_bank_sub'),
      icon: 'bank',
      path: ROUTES.NURSE_BANK,
    },
  ];

  return (
    <Stack sx={{ gap: 2 }}>
      <PageHeader title={tn('group_finance')} subtitle={t('finance_subtitle')} />
      <BalanceSummary data={data} isLoading={isLoading} isError={isError} onRetry={() => refetch()} tp={tp} t={t} />
      <NavHubList items={items} />
    </Stack>
  );
}

interface BalanceSummaryProps {
  data: ReturnType<typeof useNurseEarningsBalance>['data'];
  isLoading: boolean;
  isError: boolean;
  onRetry: () => void;
  tp: ReturnType<typeof useTranslations<'payouts'>>;
  t: ReturnType<typeof useTranslations<'hub'>>;
}

function BalanceSummary({ data, isLoading, isError, onRetry, tp, t }: BalanceSummaryProps) {
  if (isLoading) return <Skeleton variant="rounded" height={104} />;
  if (isError) return <ErrorState message={t('finance_balance_error')} retryLabel={t('retry')} onRetry={onRetry} />;
  if (!data) return null;

  const net = parseIrr(data.netPayableBalanceIrr);
  const isOwed = net < BigInt(0);
  const magnitude = isOwed ? -net : net;

  return (
    <AccentCard tone={isOwed ? 'error' : 'primary'}>
      <Stack sx={{ gap: 0.5 }}>
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          {isOwed ? tp('balance_owed_label') : tp('balance_net_label')}
        </Typography>
        <Money amountIrr={String(magnitude)} size="xl" tone={isOwed ? 'error' : 'emphasis'} />
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          {tp('bucket_eligible')}: <Money amountIrr={data.eligibleTotalIrr} size="sm" component="span" />
        </Typography>
      </Stack>
    </AccentCard>
  );
}
