import { Stack, Typography } from '@mui/material';
import type { TLineItemExpanded } from '@blocklet/payment-types';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { INTERVAL_LOCALE_KEY } from '../../utils/format';

interface TrialInfoProps {
  trial: {
    active: boolean;
    days: number;
    afterTrialPrice: string | null;
    afterTrialInterval: string | null;
  };
  mode: string;
  items: TLineItemExpanded[];
}

export default function TrialInfo({ trial, mode, items }: TrialInfoProps) {
  const { t } = useLocaleContext();

  // Trial: "Then X/month after trial"
  if (trial.active && trial.afterTrialPrice) {
    return (
      <Stack
        direction="row"
        justifyContent="space-between"
        alignItems="center"
        sx={{ borderTop: '1px solid', borderColor: 'divider', pt: 1, mt: 1 }}>
        <Typography sx={{ color: 'text.secondary', fontSize: 14 }}>{t('common.nextCharge')}</Typography>
        <Typography sx={{ fontSize: 16, color: 'text.secondary' }}>
          {trial.afterTrialPrice}
          {trial.afterTrialInterval ? ` ${t(INTERVAL_LOCALE_KEY[trial.afterTrialInterval] || '')}` : ''}
        </Typography>
      </Stack>
    );
  }

  // Metered next charge (non-trial)
  if (!trial.active && ['subscription', 'setup'].includes(mode)) {
    const meteredItem = items.find(
      (item: any) => ((item as any).upsell_price || item.price)?.recurring?.usage_type === 'metered'
    );
    if (!meteredItem) return null;
    const meteredInterval = ((meteredItem as any).upsell_price || meteredItem.price)?.recurring?.interval;
    if (!meteredInterval) return null;
    const recurringText = t('common.per', { interval: t(`common.${meteredInterval}`) });
    return (
      <Stack
        direction="row"
        justifyContent="space-between"
        alignItems="center"
        sx={{ borderTop: '1px solid', borderColor: 'divider', pt: 1, mt: 1 }}>
        <Typography sx={{ color: 'text.secondary', fontSize: 14, fontWeight: 600 }}>
          {t('common.nextCharge')}
        </Typography>
        <Typography sx={{ fontSize: 16, color: 'text.secondary' }}>
          {t('payment.checkout.metered', { recurring: recurringText })}
        </Typography>
      </Stack>
    );
  }

  return null;
}