import React from 'react';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import '@testing-library/jest-dom';
import { AppLayout } from '@/shared/components/layout/AppLayout';
import { ThemeProvider } from '@/app/providers/ThemeProvider';
import { LocaleProvider } from '@/app/providers/LocaleProvider';
import i18n from '@/locales/i18n';
import { I18nextProvider } from 'react-i18next';

const mockUseMediaQuery = vi.fn(() => false);

vi.mock('@/shared/hooks/useMediaQuery', () => ({
  useMediaQuery: (query: string) => mockUseMediaQuery(query),
}));

vi.mock('@/features/auth/hooks/usePermissions', () => ({
  usePermissions: () => ({
    isReady: true,
    can: () => true,
    isSuperAdmin: true,
  }),
}));

vi.mock('@/features/auth/hooks/useVisibleNavItems', () => ({
  useVisibleNavItems: (items: unknown[]) => items,
}));

vi.mock('@/features/auth/store/authStore', () => {
  const mockState = {
    user: {
      name: 'Test User',
      roles: [{ display_name: 'Admin' }],
    },
    logout: vi.fn(),
  };
  const useAuthStore = (
    selector?: (state: typeof mockState) => unknown
  ): unknown => {
    if (typeof selector === 'function') {
      return selector(mockState);
    }
    return mockState;
  };
  return { useAuthStore };
});

vi.mock('@/features/notifications/components/NotificationBell', () => ({
  NotificationBell: () => <div data-testid="notification-bell" />,
}));

vi.mock('@/shared/components/layout/Header/GlobalSearchTrigger', () => ({
  GlobalSearchTrigger: () => <div data-testid="global-search" />,
}));

function renderAppLayout() {
  return render(
    <I18nextProvider i18n={i18n}>
      <LocaleProvider>
        <ThemeProvider>
          <MemoryRouter>
            <AppLayout>
              <p>Page content</p>
            </AppLayout>
          </MemoryRouter>
        </ThemeProvider>
      </LocaleProvider>
    </I18nextProvider>
  );
}

describe('AppLayout', () => {
  beforeEach(() => {
    mockUseMediaQuery.mockReturnValue(false);
  });

  it('renders sidebar, header, and main content', () => {
    renderAppLayout();

    expect(screen.getByTestId('app-shell')).toBeInTheDocument();
    expect(screen.getByTestId('app-sidebar')).toBeInTheDocument();
    expect(screen.getByText('Page content')).toBeInTheDocument();
  });

  it('keeps sidebar footer outside the nav scroll region', () => {
    renderAppLayout();

    const navScroll = screen.getByTestId('sidebar-nav-scroll');
    const footer = screen.getByTestId('sidebar-footer');

    expect(navScroll).toBeInTheDocument();
    expect(footer).toBeInTheDocument();
    expect(navScroll.contains(footer)).toBe(false);
    expect(footer).toHaveTextContent('Test User');
  });

  it('uses mobile drawer state when viewport is below desktop breakpoint', () => {
    mockUseMediaQuery.mockReturnValue(true);
    renderAppLayout();

    expect(screen.getByTestId('app-sidebar')).toBeInTheDocument();
    expect(screen.getByTestId('sidebar-overlay')).toBeInTheDocument();
  });
});