import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { RouteManager } from './RouteManager';

const groups = [
  { id: 'grp_1', name: 'Alpha', platform: 'whatsapp' },
  { id: 'grp_2', name: 'Beta', platform: 'whatsapp' },
];

const routes = [
  {
    id: 'rt_1',
    sourceGroupId: 'grp_1',
    targetGroupId: 'grp_2',
    sourceGroup: { name: 'Alpha' },
    targetGroup: { name: 'Beta' },
  },
];

let fetchSpy: jest.SpyInstance;

beforeEach(() => {
  fetchSpy = jest.spyOn(global, 'fetch');
});

afterEach(() => {
  jest.restoreAllMocks();
});

describe('RouteManager', () => {
  it('renders existing routes with source → target names', () => {
    render(<RouteManager groups={groups} initialRoutes={routes} />);
    expect(screen.getByText('Alpha')).toBeInTheDocument();
    expect(screen.getByText('Beta')).toBeInTheDocument();
  });

  it('renders two group select dropdowns for adding a route', () => {
    render(<RouteManager groups={groups} initialRoutes={routes} />);
    expect(screen.getAllByRole('combobox')).toHaveLength(2);
  });

  it('calls POST /api/routes when Add route is submitted', async () => {
    fetchSpy.mockResolvedValueOnce(
      new Response(
        JSON.stringify({ id: 'rt_new', sourceGroupId: 'grp_1', targetGroupId: 'grp_2', sourceGroup: { name: 'Alpha' }, targetGroup: { name: 'Beta' } }),
        { status: 201, headers: { 'Content-Type': 'application/json' } },
      ),
    );
    render(<RouteManager groups={groups} initialRoutes={[]} />);
    const [sourceSelect, targetSelect] = screen.getAllByRole('combobox');
    fireEvent.change(sourceSelect, { target: { value: 'grp_1' } });
    fireEvent.change(targetSelect, { target: { value: 'grp_2' } });
    fireEvent.click(screen.getByRole('button', { name: /add route/i }));
    await waitFor(() => {
      expect(fetchSpy).toHaveBeenCalledWith(
        '/api/routes',
        expect.objectContaining({ method: 'POST' }),
      );
    });
  });

  it('shows a delete button for each existing route', () => {
    render(<RouteManager groups={groups} initialRoutes={routes} />);
    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
  });

  it('calls DELETE /api/routes/:id when a route is deleted', async () => {
    fetchSpy.mockResolvedValueOnce(new Response(null, { status: 204 }));
    render(<RouteManager groups={groups} initialRoutes={routes} />);
    fireEvent.click(screen.getByRole('button', { name: /delete/i }));
    await waitFor(() => {
      expect(fetchSpy).toHaveBeenCalledWith(
        '/api/routes/rt_1',
        expect.objectContaining({ method: 'DELETE' }),
      );
    });
  });
});