import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter } from 'react-router-dom';
import { describe, expect, it } from 'vitest';
import LeftRail from './LeftRail';
import { ThemeContext, type ThemeContextValue } from '@/contexts/ThemeContextDef';

function renderLightRail(initialEntries = ['/agent']) {
  const themeValue: ThemeContextValue = {
    theme: 'light',
    accent: 'blue',
    colorTheme: 'default-light',
    uiFont: 'system',
    monoFont: 'jetbrains',
    uiFontSize: 15,
    monoFontSize: 14,
    resolvedTheme: 'light',
    setTheme: () => {},
    setAccent: () => {},
    setColorTheme: () => {},
    setUiFont: () => {},
    setMonoFont: () => {},
    setUiFontSize: () => {},
    setMonoFontSize: () => {},
  };

  return render(
    <ThemeContext.Provider value={themeValue}>
      <MemoryRouter initialEntries={initialEntries}>
        <LeftRail />
      </MemoryRouter>
    </ThemeContext.Provider>,
  );
}

describe('LeftRail', () => {
  it('renders quick navigation buttons for agent chat and config', () => {
    renderLightRail(['/agent']);

    expect(screen.getByRole('link', { name: 'History' })).toHaveAttribute('href', '/agent/history');
    expect(screen.getByRole('link', { name: 'Agent' })).toHaveAttribute('href', '/agent');
    expect(screen.getByRole('link', { name: 'General' })).toHaveAttribute('href', '/general');
  });

  it('applies three-state interaction styles to rail buttons', async () => {
    const user = userEvent.setup();
    renderLightRail(['/agent']);

    const historyLink = screen.getByRole('link', { name: 'History' });
    expect(historyLink).toHaveStyle({ background: 'transparent' });

    await user.hover(historyLink);
    expect(historyLink).toHaveStyle({ background: 'rgba(0, 0, 0, 0.05)' });

    await user.pointer({ target: historyLink, keys: '[MouseLeft>]' });
    expect(historyLink).toHaveStyle({ background: 'rgb(55, 144, 250)' });
    await user.pointer({ target: historyLink, keys: '[/MouseLeft]' });
  });

  it('selects the chat button on the agent route', () => {
    renderLightRail(['/agent']);

    expect(screen.getByRole('link', { name: 'Agent' })).toHaveStyle({
      background: 'rgb(55, 144, 250)',
    });
    expect(screen.getByRole('link', { name: 'General' })).toHaveStyle({
      background: 'transparent',
    });
  });

  it('selects the config button on non-agent routes', () => {
    renderLightRail(['/general']);

    expect(screen.getByRole('link', { name: 'Agent' })).toHaveStyle({
      background: 'transparent',
    });
    expect(screen.getByRole('link', { name: 'General' })).toHaveStyle({
      background: 'rgb(55, 144, 250)',
    });
  });

  it('selects the config button for config-mode routes', () => {
    renderLightRail(['/model-switch']);

    expect(screen.getByRole('link', { name: 'Agent' })).toHaveStyle({
      background: 'transparent',
    });
    expect(screen.getByRole('link', { name: 'General' })).toHaveStyle({
      background: 'rgb(55, 144, 250)',
    });
  });

  it('selects history button and unselects chat on history route', () => {
    renderLightRail(['/agent/history']);

    expect(screen.getByRole('link', { name: 'Agent' })).toHaveStyle({
      background: 'transparent',
    });
    expect(screen.getByRole('link', { name: 'History' })).toHaveStyle({
      background: 'rgb(55, 144, 250)',
    });
  });

  it('marks the light-theme rail for the compact reference layout', () => {
    renderLightRail(['/agent']);

    expect(screen.getByTestId('left-rail')).toHaveAttribute('data-light-theme', 'true');
  });
});
