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

export interface BnplPlanCardProps {
  plan: BnplPlanOption;
  selected: boolean;
  onSelect: (planId: string) => void;
}

/** A whole-percent from a 0..1 fraction (display only — never money math). */
const asPercent = (fraction: number): number => Math.round(fraction * 100);

/**
 * D2 installment-plan option card (terracotta financial accent). Shows the plan term / installment count,
 * its interest-free / fee sub-label, the **served** monthly amount (Toman via the money util — never
 * computed here), and a down-payment indicator. 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, 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 feeLabel = plan.feePercent > 0 ? t('plan_fee', { percent: asPercent(plan.feePercent) }) : t('plan_interest_free');
  const hasDownPayment = plan.downPaymentPercent > 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: 2.5,
        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: hasDownPayment ? 1.25 : 0 }}>
        <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>
          <Stack sx={{ gap: 0.25 }}>
            <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
              {termLabel}
            </Typography>
            <Typography
              variant="caption"
              sx={{ color: plan.feePercent > 0 ? 'var(--bal-money-emphasis)' : 'text.secondary' }}
            >
              {feeLabel}
            </Typography>
          </Stack>
          <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>

        {hasDownPayment ? (
          <Box>
            <Stack direction="row" sx={{ justifyContent: 'space-between', mb: 0.5 }}>
              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
                {t('down_payment')}
              </Typography>
              <Typography variant="caption" sx={{ fontWeight: 700 }}>
                {t('down_payment_percent', { percent: asPercent(plan.downPaymentPercent) })}
              </Typography>
            </Stack>
            <LinearProgress
              variant="determinate"
              value={asPercent(plan.downPaymentPercent)}
              sx={{
                height: 6,
                borderRadius: 3,
                backgroundColor: 'var(--bal-divider)',
                '& .MuiLinearProgress-bar': { backgroundColor: 'var(--bal-secondary)' },
              }}
            />
          </Box>
        ) : null}
      </Stack>
    </ButtonBase>
  );
};

export default BnplPlanCard;
