'use client';
import { FunctionComponent } from 'react';
import { useTranslations } from 'next-intl';
import { Paper, Stack, Typography } from '@mui/material';
import { AppButton, BnplPlanCard, EmptyState, Money } from '@/components';
import type { BnplPlanOption, ProviderCode } from '@/services/bnpl/types';

interface PlanStepProps {
  providerCode: ProviderCode;
  plans: BnplPlanOption[];
  selectedPlanId: string | null;
  onSelectPlan: (planId: string) => void;
  onContinue: () => void;
  onBack: () => void;
}

/**
 * D2 · انتخاب طرح اقساط — the plan selector for the chosen provider. Shows the total amount and the plan
 * options the contract returned (monthly amount + down-payment %) as a single-select terracotta card group.
 * Every amount comes through the money util from served IRR strings — the client computes nothing about
 * money. Empty plans → back to D1.
 */
const PlanStep: FunctionComponent<PlanStepProps> = ({
  providerCode,
  plans,
  selectedPlanId,
  onSelectPlan,
  onContinue,
  onBack,
}) => {
  const t = useTranslations('bnpl');
  const tc = useTranslations('common');

  if (plans.length === 0) {
    return (
      <Stack sx={{ gap: 2 }}>
        <EmptyState title={t('no_plans_title')} body={t('no_plans_body')} />
        <AppButton variant="outlined" color="primary" onClick={onBack}>
          {t('back_to_providers')}
        </AppButton>
      </Stack>
    );
  }

  // The plan total is a per-plan served figure (interest-free plans = order gross; fee plans add the fee).
  // Use the selected plan's total, falling back to the first plan's for the header before any selection.
  const shownPlan = plans.find((p) => p.planId === selectedPlanId) ?? plans[0];

  return (
    <Stack sx={{ gap: 2 }}>
      <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
        {t('plan_title', { provider: t(`provider_${providerCode}`) })}
      </Typography>

      <Paper
        elevation={0}
        sx={{ p: 1.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}
      >
        <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
            {t('total_amount')}
          </Typography>
          <Money amountIrr={shownPlan.totalIrr} tone="emphasis" size="sm" />
        </Stack>
      </Paper>

      <Stack sx={{ gap: 1 }}>
        {plans.map((plan) => (
          <BnplPlanCard
            key={plan.planId}
            plan={plan}
            selected={selectedPlanId === plan.planId}
            onSelect={onSelectPlan}
          />
        ))}
      </Stack>

      <Stack sx={{ gap: 1 }}>
        <AppButton
          color="secondary"
          variant="contained"
          size="large"
          disabled={selectedPlanId == null}
          onClick={onContinue}
        >
          {t('continue')}
        </AppButton>
        <AppButton variant="text" color="primary" onClick={onBack}>
          {tc('back')}
        </AppButton>
      </Stack>
    </Stack>
  );
};

export default PlanStep;
