'use client';
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { Stack, Typography } from '@mui/material';
import StatusChip from '../StatusChip';
import Money from '@/components/common/Money';
import SurfaceCard from '@/components/common/SurfaceCard';
import { formatShamsiDate } from '@/utils';
import { installmentStatusKind, type BnplInstallmentRow, type BnplInstallmentStatus } from '@/services/bnpl/types';

export interface InstallmentScheduleRowProps {
  row: BnplInstallmentRow;
  /** Render the provider-reported status chip (D5 Wallet). The D4 schedule preview omits it. */
  showStatus?: boolean;
}

/** i18n key for each provider-reported installment status (labels are keys off the code, never derived). */
const STATUS_LABEL_KEY: Record<BnplInstallmentStatus, string> = {
  paid: 'status_paid',
  due_soon: 'status_due_soon',
  upcoming: 'status_upcoming',
  overdue: 'status_overdue',
};

/**
 * One repayment row — the down-payment (due «امروز») or an installment (Shamsi due date), with the
 * **served** amount (Toman via the money util). Reused by the D4 schedule table and the D5 Wallet due list;
 * `showStatus` adds the provider-reported status chip (D5). No money is computed here — display only.
 * @component InstallmentScheduleRow
 */
const InstallmentScheduleRow: FunctionComponent<InstallmentScheduleRowProps> = ({ row, showStatus = false }) => {
  const t = useTranslations('bnpl');
  const locale = useLocale();

  const label =
    row.kind === 'down_payment' ? t('down_payment') : t('installment_n', { n: row.sequence });
  const dueLabel = row.kind === 'down_payment' ? t('today') : formatShamsiDate(`${row.dueDate}T00:00:00`, locale);

  return (
    <SurfaceCard padding="sm" data-row-kind={row.kind}>
      <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1.5 }}>
        <Stack sx={{ gap: 0.25 }}>
          <Typography variant="body2" sx={{ fontWeight: 700 }}>
            {label}
          </Typography>
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {dueLabel}
          </Typography>
        </Stack>
        <Stack sx={{ alignItems: 'flex-end', gap: 0.5 }}>
          <Money
            amountIrr={row.amountIrr}
            hideUnit
            size="sm"
            tone={row.kind === 'down_payment' ? 'emphasis' : 'default'}
            sx={{ fontWeight: 700 }}
          />
          {showStatus && row.status ? (
            <StatusChip status={installmentStatusKind(row.status)} label={t(STATUS_LABEL_KEY[row.status])} />
          ) : null}
        </Stack>
      </Stack>
    </SurfaceCard>
  );
};

export default InstallmentScheduleRow;