'use client';
import { FunctionComponent, ReactNode } from 'react';
import { useTranslations } from 'next-intl';
import { Paper, Stack, Typography } from '@mui/material';
import Money from '@/components/common/Money';
import type { MoneyTone } from '@/components/common/Money';
import type { BookingViewerRole } from '@/services/bookings/types';

export interface BookingMoneySummaryProps {
  /** IRR digit-strings; `gross = commission + payout`, guaranteed server-side. **Never** summed/re-split here. */
  grossPriceIrr: string;
  balinyaarCommissionIrr: string;
  nursePayoutAmount: string;
  /** Drives the payout row label (nurse sees «درآمد شما»; customer sees «سهم پرستار»). */
  viewerRole: BookingViewerRole;
}

/**
 * The confirmed booking money summary: service cost / Balinyaar fee (کارمزد) / nurse payout — each
 * rendered exactly as the server sent it (IRR digit-strings) through the money util as grouped Toman.
 * **Display-only:** no client-side sum, derive, or re-split; the tax line + escrow notice are the
 * checkout surface (deferred to f9). The payout row label adapts to the viewer.
 * @component BookingMoneySummary
 */
const BookingMoneySummary: FunctionComponent<BookingMoneySummaryProps> = ({
  grossPriceIrr,
  balinyaarCommissionIrr,
  nursePayoutAmount,
  viewerRole,
}) => {
  const t = useTranslations('booking');

  return (
    <Paper elevation={0} sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1.5 }}>
        {t('money_title')}
      </Typography>
      <Stack sx={{ gap: 1 }}>
        <MoneyRow label={t('money_gross')} amountIrr={grossPriceIrr} tone="emphasis" />
        <MoneyRow label={t('money_commission')} amountIrr={balinyaarCommissionIrr} deduction />
        <MoneyRow
          label={viewerRole === 'nurse' ? t('money_nurse_earning') : t('money_payout')}
          amountIrr={nursePayoutAmount}
          tone="emphasis"
        />
      </Stack>
    </Paper>
  );
};

function MoneyRow({
  label,
  amountIrr,
  tone,
  deduction = false,
}: {
  label: string;
  amountIrr: string;
  tone?: MoneyTone;
  deduction?: boolean;
}): ReactNode {
  return (
    <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>
      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
        {label}
      </Typography>
      <Money amountIrr={amountIrr} size="sm" tone={tone} deduction={deduction} />
    </Stack>
  );
}

export default BookingMoneySummary;