import { FunctionComponent } from 'react';
import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../theme';
import type { RefundSummary } from '@/services/refunds/types';

jest.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
  useLocale: () => 'en',
}));

import RefundStatusCard, { RefundStatusCardProps } from './RefundStatusCard';

const ComponentToTest: FunctionComponent<RefundStatusCardProps> = (props) => (
  <ThemeProvider>
    <RefundStatusCard {...props} />
  </ThemeProvider>
);

const base: RefundSummary = {
  id: 7,
  bookingId: 5001,
  refundStatus: 'succeeded',
  refundChannel: 'psp_card',
  totalRefundedIrr: '45000000',
  expectedCustomerRefundEta: null,
  externalRevertReference: null,
  refundPercentageApplied: 1,
  cancellationPolicyCode: 'free_24h',
  platformFeeRefundedIrr: '5400000',
  nursePayoutRefundedIrr: '39600000',
  createdAt: '2026-07-10T09:00:00Z',
  completedAt: '2026-07-10T09:00:00Z',
};

describe('<RefundStatusCard/> component', () => {
  it('renders the three-step stepper + a reconciling fee-leg split for a succeeded card refund', () => {
    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
    const { container } = render(<ComponentToTest refund={base} />);
    expect(container.querySelector('[data-status="succeeded"]')).toBeInTheDocument();
    expect(screen.getByText('step_submitted')).toBeInTheDocument();
    expect(screen.getByText('step_completed')).toBeInTheDocument();
    // Fee-leg split renders when the decomposition is present, reconciling to the total.
    expect(container.querySelector('[data-row="platform_fee_refunded"]')).toBeInTheDocument();
    expect(container.querySelector('[data-row="nurse_payout_refunded"]')).toBeInTheDocument();
    expect(errorSpy).not.toHaveBeenCalled();
    expect(screen.queryByTestId('refund-failed')).not.toBeInTheDocument();
    errorSpy.mockRestore();
  });

  it('shows the BNPL ETA banner while a refund is on its way', () => {
    render(
      <ComponentToTest
        refund={{
          ...base,
          refundStatus: 'processing',
          refundChannel: 'bnpl_revert',
          totalRefundedIrr: '9000000',
          expectedCustomerRefundEta: '2026-08-24',
          externalRevertReference: '••••••5002',
          platformFeeRefundedIrr: '1080000',
          nursePayoutRefundedIrr: '7920000',
          completedAt: null,
        }}
      />,
    );
    expect(screen.getByTestId('refund-status-card')).toHaveAttribute('data-status', 'processing');
    expect(screen.getByText('rstatus_on_its_way')).toBeInTheDocument();
    expect(screen.getByTestId('refund-eta-window')).toBeInTheDocument();
  });

  it('renders a contact-support failed state with no stepper, no ETA banner, and no retry control', () => {
    const { container } = render(<ComponentToTest refund={{ ...base, refundStatus: 'failed', completedAt: null }} />);
    expect(screen.getByTestId('refund-failed')).toBeInTheDocument();
    expect(screen.getByText('failed_title')).toBeInTheDocument();
    // Failed collapses the happy stepper (no fourth step) and offers no retry — retry is admin-only.
    expect(screen.queryByText('step_submitted')).not.toBeInTheDocument();
    expect(screen.queryByRole('button')).not.toBeInTheDocument();
    // No success-framed 'money is on its way' surfaces on a failed refund (BNPL-honesty rule).
    expect(screen.queryByTestId('refund-eta-banner')).not.toBeInTheDocument();
    expect(screen.queryByText('total_refunded_label')).not.toBeInTheDocument();
    expect(container.querySelector('[data-row="platform_fee_refunded"]')).not.toBeInTheDocument();
  });
});
