// @vitest-environment jsdom
/**
 * Component tests for BrowserSettingsForm (settings batch A).
 *
 * Focus: this form writes to TWO different config roots — `tools.*` (page/action
 * timeouts) and `browser.*` (channel, sessions). Verifies the correct dotted
 * path is used for each, number coercion, select changes, and the
 * executablePath empty -> undefined contract.
 */
import '../../test/dom-setup';
import { describe, it, expect, vi } from 'vitest';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { renderWithProviders, renderStatefulForm } from '../../test/render-helpers';
import { BrowserSettingsForm } from './BrowserSettingsForm';

function render(config: any = {}) {
  const onChange = vi.fn();
  renderWithProviders(
    <BrowserSettingsForm config={config} onChange={onChange} overriddenByEnv={{}} />,
  );
  return { onChange };
}

function renderStateful(config: any = {}) {
  const onChange = vi.fn();
  const utils = renderStatefulForm(BrowserSettingsForm, config, { onChangeSpy: onChange });
  return { onChange, ...utils };
}

describe('BrowserSettingsForm', () => {
  it('renders defaults for both tools.* and browser.* fields', () => {
    render({});
    // Page timeout default 60000 (tools.*) and channel select default chromium (browser.*).
    expect(screen.getByDisplayValue('60000')).toBeInTheDocument();
    const selects = screen.getAllByRole('combobox') as HTMLSelectElement[];
    expect(selects[0]).toHaveValue('chromium');
  });

  it('writes the page timeout under the tools.* root as a number', async () => {
    const { getConfig } = renderStateful({ tools: { browserPageTimeout: 60000 } });
    const pageTimeout = screen.getByDisplayValue('60000');
    await userEvent.clear(pageTimeout);
    await userEvent.type(pageTimeout, '90000');
    expect(getConfig().tools.browserPageTimeout).toBe(90000);
  });

  it('writes the browser channel under the browser.* root', async () => {
    const { onChange } = render({ browser: { channel: 'chromium' } });
    const channel = screen.getAllByRole('combobox')[0];
    await userEvent.selectOptions(channel, 'chrome');
    expect(onChange).toHaveBeenCalledWith('browser.channel', 'chrome');
  });

  it('serializes executablePath to undefined when emptied', async () => {
    const { onChange } = render({ browser: { executablePath: '/usr/bin/chrome' } });
    const exec = screen.getByDisplayValue('/usr/bin/chrome');
    await userEvent.clear(exec);
    expect(onChange).toHaveBeenLastCalledWith('browser.executablePath', undefined);
  });

  it('serializes idle TTL to undefined when emptied, number when set', async () => {
    const { getConfig } = renderStateful({ browser: { taskSessionIdleTtl: 120 } });
    const ttl = screen.getByDisplayValue('120');
    await userEvent.clear(ttl);
    expect(getConfig().browser.taskSessionIdleTtl).toBeUndefined();
    await userEvent.type(ttl, '300');
    expect(getConfig().browser.taskSessionIdleTtl).toBe(300);
  });
});
