import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { vi, describe, it, expect } from 'vitest';
import { CancelOrderDialog } from '../cancel-order-dialog';

const storeCancel = vi.fn().mockResolvedValue({ data: {} });
vi.mock('@/lib/api', () => ({
  api: { orders: { storeCancel: (...a: unknown[]) => storeCancel(...a) } },
}));

function wrap(node: React.ReactNode) {
  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  return <QueryClientProvider client={qc}>{node}</QueryClientProvider>;
}

describe('CancelOrderDialog', () => {
  it('submits reason + note to storeCancel', async () => {
    render(wrap(<CancelOrderDialog storeId="s1" orderId="o1" />));
    // Trigger button
    fireEvent.click(screen.getByRole('button', { name: /^Cancel order$/ }));
    // Dialog now open — change reason + note
    fireEvent.change(screen.getByLabelText(/Reason/i), { target: { value: 'item_damaged' } });
    fireEvent.change(screen.getByLabelText(/Note/i), { target: { value: 'water damage' } });
    // The confirm button inside the dialog — last "Cancel order" button in the DOM
    const confirmButtons = screen.getAllByRole('button', { name: /^Cancel order$|^Cancelling…$/ });
    // We expect 2: the opener (still present under the trigger) and the confirm inside the dialog
    fireEvent.click(confirmButtons[confirmButtons.length - 1]);
    await waitFor(() =>
      expect(storeCancel).toHaveBeenCalledWith('s1', 'o1', { reason: 'item_damaged', note: 'water damage' }),
    );
  });
});