/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from 'react';
import { render, screen, fireEvent, waitFor} from '@testing-library/react';
import { vi, describe, it, expect, beforeEach } from 'vitest';
import { AdminPanel } from './AdminPanel';
import { BrowserRouter } from 'react-router-dom';
import { I18nextProvider } from 'react-i18next';
import i18n from '../../i18n';

vi.mock('react-router-dom', async () => {
  const actual = await vi.importActual('react-router-dom');
  return {
    ...actual,
    Navigate: vi.fn(() => null),
  };
});

vi.mock('./SideMenu', () => ({
  default: vi.fn(() => <div data-testid="side-menu">Side Menu</div>),
}));

vi.mock('./ThemeToggle/ThemeToggle', () => ({
  ThemeToggle: vi.fn(() => <div data-testid="theme-toggle">Theme Toggle</div>),
}));

vi.mock('./Dashboard/Dashboard', () => ({
  Dashboard: vi.fn(() => <div data-testid="dashboard">Dashboard</div>),
}));

vi.mock('./Users/UsersAdmin', () => ({
  UsersAdmin: vi.fn(() => <div data-testid="users-admin">Users Admin</div>),
}));
vi.mock('./ThemeToggle/ThemeToggle', () => ({
    ThemeToggle: ({ isDarkMode, toggleTheme }) => (
      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
      <div data-testid="theme-toggle" onClick={toggleTheme}>
        Theme Toggle: {isDarkMode ? 'Dark' : 'Light'}
      </div>
    ),
  }));

const renderWithRouter = (ui, { route = '/' } = {}) => {
    window.history.pushState({}, 'Test page', route);
    return render(
      <BrowserRouter>
        <I18nextProvider i18n={i18n}>
          {ui}
        </I18nextProvider>
      </BrowserRouter>
    );
  };

  describe('AdminPanel Component', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

    it('renders correctly', () => {
      renderWithRouter(<AdminPanel />);
      expect(screen.getByText('Web Devs')).toBeInTheDocument();
      expect(screen.getByPlaceholderText('Търси ...')).toBeInTheDocument();
      expect(screen.getByTestId('theme-toggle')).toBeInTheDocument();
    });

    it('toggles side menu when menu button is clicked', async () => {
        renderWithRouter(<AdminPanel />);
        const menuButton = screen.getByTestId('menu-toggle');
        fireEvent.click(menuButton);
        await waitFor(() => {
          expect(screen.getByTestId('side-menu')).toBeInTheDocument();
        });
      });

    it('toggles profile menu when profile button is clicked', () => {
      renderWithRouter(<AdminPanel />);
      const profileButton = screen.getByRole('button', { name: 'Admin' });
      fireEvent.click(profileButton);
      expect(screen.getByText('Профил')).toBeInTheDocument();
      expect(screen.getByText('Настройки')).toBeInTheDocument();
      expect(screen.getByText('Изход')).toBeInTheDocument();
    });

    it('changes theme when theme toggle is clicked', async () => {
        renderWithRouter(<AdminPanel />);
        const themeToggle = screen.getByTestId('theme-toggle');

        expect(themeToggle.textContent).toBe('Theme Toggle: Dark');
        fireEvent.click(themeToggle);

        await waitFor(() => {
          expect(themeToggle.textContent).toBe('Theme Toggle: Light');
        }, { timeout: 2000 });

        fireEvent.click(themeToggle);

        await waitFor(() => {
          expect(themeToggle.textContent).toBe('Theme Toggle: Dark');
        }, { timeout: 2000 });
      });

      //WAIT BRANCH WITH TRANSLATION FOR ADMIN PANEL

    // it('changes language when language button is clicked', async () => {
    //   renderWithRouter(<AdminPanel />);
    //   const languageButton = screen.getByRole('button', { name: '' });
    //   fireEvent.click(languageButton);

    // });
  });