'use client';
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { Stack, Typography } from '@mui/material';
import AppAlert from '@/components/common/AppAlert';
import AppIcon from '@/components/common/AppIcon';
import { formatShamsiDate } from '@/utils';
import type { RefundChannel } from '@/services/refunds/types';

export interface RefundEtaBannerProps {
  channel: RefundChannel;
  /** Populated for `bnpl_revert` (the ~7–10 business-day window); a date `YYYY-MM-DD`. */
  eta: string | null;
}

/** Per-channel title/body i18n keys + the icon glyph. One branch drives all three refund channels. */
const CHANNEL_COPY: Record<RefundChannel, { titleKey: string; bodyKey: string; icon: string }> = {
  psp_card: { titleKey: 'eta_card_title', bodyKey: 'eta_card_body', icon: 'payment' },
  bnpl_revert: { titleKey: 'eta_bnpl_title', bodyKey: 'eta_bnpl_body', icon: 'schedule' },
  manual: { titleKey: 'eta_manual_title', bodyKey: 'eta_manual_body', icon: 'bank' },
};

/**
 * How the refund reaches the customer, told honestly per channel. For `bnpl_revert` it surfaces the
 * `expected_customer_refund_eta` and the ~7–10 business-day window in plain language (the money returns
 * *through the provider*, never instantly) — the phase's load-bearing BNPL honesty rule. `psp_card` shows
 * the card-refund wording; `manual` the manual-transfer wording. Info tone (never error), tokens only.
 * @component RefundEtaBanner
 */
const RefundEtaBanner: FunctionComponent<RefundEtaBannerProps> = ({ channel, eta }) => {
  const t = useTranslations('refunds');
  const locale = useLocale();
  const copy = CHANNEL_COPY[channel];

  return (
    <AppAlert
      severity="info"
      variant="outlined"
      icon={<AppIcon icon={copy.icon} size={20} color="var(--bal-primary)" />}
      data-testid="refund-eta-banner"
      data-channel={channel}
      sx={{
        marginY: 0,
        borderColor: 'var(--bal-primary)',
        color: 'var(--bal-primary)',
        backgroundColor: 'var(--bal-primary-soft)',
      }}
    >
      <Stack sx={{ gap: 0.5 }}>
        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
          {t(copy.titleKey)}
        </Typography>
        <Typography variant="body2">{t(copy.bodyKey)}</Typography>
        {channel === 'bnpl_revert' && (
          <Typography variant="caption" sx={{ fontWeight: 500 }} data-testid="refund-eta-window">
            {t('eta_business_days')}
            {eta ? ` · ${t('eta_expected_label', { date: formatShamsiDate(eta, locale) })}` : ''}
          </Typography>
        )}
      </Stack>
    </AppAlert>
  );
};

export default RefundEtaBanner;
