// @vitest-environment jsdom
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import { AppContext, type AppContextValue } from '../context/AppContext';
import { SettingsView } from './SettingsView';

vi.mock('../tabs/SettingsTab', () => ({
  SettingsTab: () => <div>Account settings content</div>,
}));

vi.mock('../tabs/ConfigTab', () => ({
  ConfigTab: () => <div>Bot config content</div>,
}));

vi.mock('../tabs/AdminTab', () => ({
  AdminTab: () => <div>Admin panel content</div>,
}));

const appContext: AppContextValue = {
  botState: {
    settings: { isAlgoEnabled: true },
    symbols: {},
    health: { tradingLoopHealthy: true, reconciliationLoopHealthy: true, capitalInvariantViolations: 0 },
    alerts: [],
    positions: [],
    orders: [],
    history: [],
    uptime: 0,
  } as any,
  socket: null,
  connected: true,
  activeSymbol: '',
  setActiveSymbol: vi.fn(),
  isAdmin: true,
  user: { id: 'admin-1' },
  profile: { role: 'admin' },
  showBacktestTab: false,
  showMarketplaceTab: false,
  handleSignOut: vi.fn(),
};

describe('SettingsView legacy surface contrast', () => {
  it('contains legacy settings sections inside a dark contrast surface', async () => {
    const user = userEvent.setup();
    const { container } = render(
      <AppContext.Provider value={appContext}>
        <SettingsView />
      </AppContext.Provider>,
    );

    const surface = container.querySelector('.settings-legacy-surface') as HTMLDivElement;
    expect(surface).toBeInTheDocument();
    expect(surface).toHaveStyle({ color: '#F9FAFB' });
    expect(screen.getByText('Account settings content')).toBeInTheDocument();

    await user.click(screen.getByRole('button', { name: 'Bot Config' }));
    expect(screen.getByText('Bot config content')).toBeInTheDocument();

    await user.click(screen.getByRole('button', { name: 'Admin Panel' }));
    expect(screen.getByText('Admin panel content')).toBeInTheDocument();
  });

  it('hides admin-only sections for non-admin users', () => {
    render(
      <AppContext.Provider value={{ ...appContext, isAdmin: false, profile: { role: 'user' } as any }}>
        <SettingsView />
      </AppContext.Provider>,
    );

    expect(screen.getByRole('button', { name: 'Account' })).toBeInTheDocument();
    expect(screen.queryByRole('button', { name: 'Bot Config' })).not.toBeInTheDocument();
    expect(screen.queryByRole('button', { name: 'Admin Panel' })).not.toBeInTheDocument();
  });
});