'use client';
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { Skeleton, Stack, Typography } from '@mui/material';
import { AppLink, EmptyState, ErrorState } from '@/components';
import RefundStatusCard from '@/components/RefundStatusCard';
import { bookingRefundStatusPath } from '@/constants';
import { useMyRefunds } from '@/services/refunds';

/**
 * The wallet «استردادها» section — every refund the customer owns (REQ-048), each rendered via the shared
 * `RefundStatusCard` (step timeline + amount + per-channel ETA) with a link back to its booking.
 */
const WalletRefunds: FunctionComponent = () => {
  const t = useTranslations('refunds');
  const tw = useTranslations('bnpl');
  const tc = useTranslations('common');
  const locale = useLocale();
  const { data: refunds, isLoading, isError, refetch } = useMyRefunds();

  if (isLoading) {
    return (
      <Stack sx={{ gap: 1.5 }}>
        <Skeleton variant="rounded" height={160} />
      </Stack>
    );
  }
  if (isError) {
    return <ErrorState message={tw('wallet_error_body')} retryLabel={tc('retry')} onRetry={() => refetch()} />;
  }
  if (!refunds || refunds.length === 0) {
    return <EmptyState icon="refunds" title={t('wallet_empty_title')} body={t('wallet_empty_body')} />;
  }

  return (
    <Stack sx={{ gap: 3 }}>
      {refunds.map((refund) => (
        <Stack key={refund.id} sx={{ gap: 1 }}>
          <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
              {t('wallet_booking_label', { id: refund.bookingId })}
            </Typography>
            <AppLink to={`/${locale}${bookingRefundStatusPath(refund.bookingId)}`} sx={{ fontSize: '0.75rem' }}>
              {t('view_refund_status')}
            </AppLink>
          </Stack>
          <RefundStatusCard refund={refund} />
        </Stack>
      ))}
    </Stack>
  );
};

export default WalletRefunds;