// @vitest-environment jsdom
/**
 * Component tests for ToolsForm (settings batch A).
 *
 * This is the legacy grab-bag Tools form (Web / Vision / X / Maps / ... sub-tabs).
 * Focus: tab switching shows the right fields, number coercion on timeouts, the
 * userScriptsEnabled checkbox boolean, and that visibleTabs narrows the tab set.
 */
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 { ToolsForm } from './ToolsForm';

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

function renderStateful(config: any = { tools: {} }) {
  const onChange = vi.fn();
  // ToolsForm ignores overriddenByEnv; renderStatefulForm passes {} which is fine.
  const utils = renderStatefulForm(ToolsForm as any, config, { onChangeSpy: onChange });
  return { onChange, ...utils };
}

describe('ToolsForm', () => {
  it('renders the Web tab first and writes searxngUrl as a string', async () => {
    const { getConfig } = renderStateful({ tools: {} });
    // SearXNG URL is the first text input on the Web tab; SSRF editor confirms tab.
    expect(screen.getByPlaceholderText('hostname or IP address')).toBeInTheDocument();
    const textInputs = screen.getAllByRole('textbox') as HTMLInputElement[];
    await userEvent.type(textInputs[0], 'http://searx.local');
    expect(getConfig().tools.searxngUrl).toBe('http://searx.local');
  });

  it('coerces the webfetch timeout to a number', async () => {
    const { getConfig } = renderStateful({ tools: { webfetchTimeout: 30 } });
    const numbers = screen.getAllByRole('spinbutton');
    await userEvent.clear(numbers[0]);
    await userEvent.type(numbers[0], '45');
    expect(getConfig().tools.webfetchTimeout).toBe(45);
    expect(typeof getConfig().tools.webfetchTimeout).toBe('number');
  });

  it('switches to the X tab and shows X-specific fields', async () => {
    render({ tools: {} });
    // The X tab label.
    await userEvent.click(screen.getByRole('button', { name: 'X / Twitter' }));
    expect(screen.getByText('X Auth Token')).toBeInTheDocument();
    expect(screen.getByText('X ct0')).toBeInTheDocument();
  });

  it('toggles userScriptsEnabled to a boolean on the User Folder tab', async () => {
    const { onChange } = render({ tools: { userScriptsEnabled: false } });
    await userEvent.click(screen.getByRole('button', { name: 'User Folder' }));
    const checkbox = screen.getByRole('checkbox');
    await userEvent.click(checkbox);
    expect(onChange).toHaveBeenCalledWith('tools.userScriptsEnabled', true);
  });

  it('respects visibleTabs to narrow the visible sub-tabs', () => {
    render({ tools: {} }, ['web']);
    expect(screen.getByRole('button', { name: 'Web' })).toBeInTheDocument();
    expect(screen.queryByRole('button', { name: 'X / Twitter' })).toBeNull();
  });
});
