'use client';
import { FunctionComponent } from 'react';
import { useTranslations } from 'next-intl';
import { ButtonBase, Divider, Stack, Typography } from '@mui/material';
import Money from '@/components/common/Money';
import { parseIrr } from '@/utils';
import type { BnplPlanOption } from '@/services/bnpl/types';

export interface BnplPlanCardProps {
  plan: BnplPlanOption;
  /** The order's card-payable gross (D1 «مبلغ قابل پرداخت») — the interest-free baseline the fee delta
   * below compares against. Both figures are served; the delta is their exact BigInt difference, the same
   * "exact remainder of served amounts" pattern the invoice page uses — never a computed rate. */
  orderAmountIrr: string;
  selected: boolean;
  onSelect: (planId: string) => void;
}

/**
 * D2 installment-plan option card (terracotta financial accent). Shows the plan term / installment count,
 * the **served** monthly amount, a plain پیش‌پرداخت (امروز) amount row, and مجموع بازپرداخت with the fee
 * delta vs. paying in full made explicit in Toman (never a percent-only label, never a `LinearProgress` bar
 * standing in for a static fact). Single-select: the selected card gets the terracotta `--bal-secondary`
 * border + soft tint. Labels are i18n keys off the served fields; money is display-only.
 * @component BnplPlanCard
 */
const BnplPlanCard: FunctionComponent<BnplPlanCardProps> = ({ plan, orderAmountIrr, selected, onSelect }) => {
  const t = useTranslations('bnpl');

  const termLabel =
    plan.termMonths != null
      ? t('plan_term_months', { months: plan.termMonths })
      : t('plan_installments', { count: plan.installmentCount });
  const feeIrr = (parseIrr(plan.totalIrr) - parseIrr(orderAmountIrr)).toString();
  const hasFee = plan.feePercent > 0 && parseIrr(feeIrr) > BigInt(0);

  return (
    <ButtonBase
      data-plan-id={plan.planId}
      data-selected={selected}
      aria-pressed={selected}
      onClick={() => onSelect(plan.planId)}
      sx={{
        display: 'block',
        width: '100%',
        textAlign: 'start',
        borderRadius: 'var(--bal-radius-md)',
        p: 1.75,
        border: '1px solid',
        borderColor: selected ? 'var(--bal-secondary)' : 'divider',
        borderWidth: selected ? 2 : 1,
        backgroundColor: selected ? 'var(--bal-secondary-soft)' : 'transparent',
      }}
    >
      <Stack sx={{ gap: 1.25 }}>
        <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>
          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
            {termLabel}
          </Typography>
          <Stack sx={{ alignItems: 'flex-end', gap: 0.25 }}>
            <Money amountIrr={plan.monthlyAmountIrr} tone="emphasis" size="md" sx={{ fontWeight: 800 }} />
            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
              {t('monthly')}
            </Typography>
          </Stack>
        </Stack>

        <Divider />

        <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t('down_payment')}
          </Typography>
          <Money amountIrr={plan.downPaymentIrr} size="sm" sx={{ fontWeight: 700 }} />
        </Stack>

        <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t('total_repayment')}
          </Typography>
          <Stack sx={{ alignItems: 'flex-end', gap: 0.25 }}>
            <Money amountIrr={plan.totalIrr} tone="emphasis" size="sm" sx={{ fontWeight: 700 }} />
            {hasFee ? (
              <Stack direction="row" sx={{ gap: 0.25, alignItems: 'baseline' }}>
                <Typography variant="caption" sx={{ color: 'var(--bal-money-emphasis)', fontWeight: 500 }}>
                  +
                </Typography>
                <Money amountIrr={feeIrr} size="sm" sx={{ color: 'var(--bal-money-emphasis)', fontWeight: 500 }} />
                <Typography variant="caption" sx={{ color: 'var(--bal-money-emphasis)', fontWeight: 500 }}>
                  {t('plan_fee_amount_suffix')}
                </Typography>
              </Stack>
            ) : (
              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
                {t('plan_interest_free')}
              </Typography>
            )}
          </Stack>
        </Stack>
      </Stack>
    </ButtonBase>
  );
};

export default BnplPlanCard;
