/**
 * Unit tests for CustomerLayout component
 *
 * Tests all layout functionality including:
 * - Rendering children content via Outlet
 * - Customer navigation links (Dashboard, Book, Billing, Support)
 * - Header rendering with business branding
 * - Logo/branding display
 * - Dark mode toggle
 * - User profile dropdown
 * - Notification dropdown
 * - Masquerade banner
 * - Theme toggling
 */

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent, within } from '@testing-library/react';
import { MemoryRouter, Routes, Route } from 'react-router-dom';
import React from 'react';
import CustomerLayout from '../CustomerLayout';
import { User, Business } from '../../types';

// Mock the hooks and components
vi.mock('../../hooks/useAuth', () => ({
  useStopMasquerade: () => ({
    mutate: vi.fn(),
    isPending: false,
  }),
}));

vi.mock('../../hooks/useScrollToTop', () => ({
  useScrollToTop: vi.fn(),
}));

vi.mock('../../components/MasqueradeBanner', () => ({
  default: ({ effectiveUser, originalUser, onStop }: any) => (
    <div data-testid="masquerade-banner">
      Masquerading as {effectiveUser.name}
      <button onClick={onStop}>Stop</button>
    </div>
  ),
}));

vi.mock('../../components/UserProfileDropdown', () => ({
  default: ({ user, variant }: any) => (
    <div data-testid="user-profile-dropdown" data-variant={variant}>
      {user.name}
    </div>
  ),
}));

vi.mock('../../components/NotificationDropdown', () => ({
  default: ({ variant, onTicketClick }: any) => (
    <div data-testid="notification-dropdown" data-variant={variant}>
      <button onClick={() => onTicketClick?.('ticket-123')}>Notification</button>
    </div>
  ),
}));

// Mock lucide-react icons
vi.mock('lucide-react', () => ({
  LayoutDashboard: ({ size }: { size: number }) => (
    <svg data-testid="layout-dashboard-icon" width={size} height={size} />
  ),
  CalendarPlus: ({ size }: { size: number }) => (
    <svg data-testid="calendar-plus-icon" width={size} height={size} />
  ),
  CreditCard: ({ size }: { size: number }) => (
    <svg data-testid="credit-card-icon" width={size} height={size} />
  ),
  HelpCircle: ({ size }: { size: number }) => (
    <svg data-testid="help-circle-icon" width={size} height={size} />
  ),
  Sun: ({ size }: { size: number }) => <svg data-testid="sun-icon" width={size} height={size} />,
  Moon: ({ size }: { size: number }) => <svg data-testid="moon-icon" width={size} height={size} />,
}));

describe('CustomerLayout', () => {
  const mockToggleTheme = vi.fn();

  const mockUser: User = {
    id: '1',
    name: 'John Customer',
    email: 'john@customer.com',
    role: 'customer',
  };

  const mockBusiness: Business = {
    id: '1',
    name: 'Acme Corporation',
    subdomain: 'acme',
    primaryColor: '#3b82f6',
  };

  beforeEach(() => {
    vi.clearAllMocks();
    localStorage.clear();
  });

  const renderWithRouter = (
    ui: React.ReactElement,
    { route = '/' }: { route?: string } = {}
  ) => {
    return render(
      <MemoryRouter initialEntries={[route]}>
        <Routes>
          <Route path="*" element={ui}>
            <Route
              index
              element={<div data-testid="outlet-content">Dashboard Content</div>}
            />
            <Route
              path="book"
              element={<div data-testid="outlet-content">Book Content</div>}
            />
            <Route
              path="payments"
              element={<div data-testid="outlet-content">Payments Content</div>}
            />
            <Route
              path="support"
              element={<div data-testid="outlet-content">Support Content</div>}
            />
          </Route>
        </Routes>
      </MemoryRouter>
    );
  };

  describe('Rendering', () => {
    it('renders the layout with correct structure', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      // Check for header
      expect(screen.getByRole('banner')).toBeInTheDocument();

      // Check for main content area
      expect(screen.getByRole('main')).toBeInTheDocument();
    });

    it('has proper layout classes', () => {
      const { container } = renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const layout = container.querySelector('.h-full.flex.flex-col');
      expect(layout).toBeInTheDocument();
      expect(layout).toHaveClass('bg-gray-50', 'dark:bg-gray-900');
    });
  });

  describe('Children Content (Outlet)', () => {
    it('renders children content via Outlet', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByTestId('outlet-content')).toBeInTheDocument();
      expect(screen.getByText('Dashboard Content')).toBeInTheDocument();
    });

    it('renders different routes correctly', () => {
      const { unmount } = renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />,
        { route: '/book' }
      );

      expect(screen.getByText('Book Content')).toBeInTheDocument();
      unmount();
    });
  });

  describe('Header', () => {
    it('renders header with business primary color', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const header = screen.getByRole('banner');
      expect(header).toHaveStyle({ backgroundColor: '#3b82f6' });
    });

    it('has proper header styling classes', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const header = screen.getByRole('banner');
      expect(header).toHaveClass('text-white', 'shadow-md');
    });

    it('has proper header height', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const headerInner = screen.getByRole('banner').querySelector('.h-16');
      expect(headerInner).toBeInTheDocument();
    });
  });

  describe('Branding/Logo', () => {
    it('displays business name', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByText('Acme Corporation')).toBeInTheDocument();
    });

    it('displays business logo with first letter', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const logo = screen.getByText('A');
      expect(logo).toBeInTheDocument();
      expect(logo).toHaveClass('font-bold', 'text-lg');
      expect(logo).toHaveStyle({ color: '#3b82f6' });
    });

    it('logo has correct styling', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const logo = screen.getByText('A').closest('div');
      expect(logo).toHaveClass('w-8', 'h-8', 'bg-white', 'rounded-lg');
    });

    it('displays different business names correctly', () => {
      const differentBusiness: Business = {
        id: '2',
        name: 'XYZ Services',
        subdomain: 'xyz',
        primaryColor: '#ef4444',
      };

      renderWithRouter(
        <CustomerLayout
          business={differentBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByText('XYZ Services')).toBeInTheDocument();
      expect(screen.getByText('X')).toBeInTheDocument();
    });

    it('handles single character business names', () => {
      const singleCharBusiness: Business = {
        id: '3',
        name: 'Q',
        subdomain: 'q',
        primaryColor: '#10b981',
      };

      renderWithRouter(
        <CustomerLayout
          business={singleCharBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      // Both the logo and business name display 'Q'
      const qElements = screen.getAllByText('Q');
      expect(qElements).toHaveLength(2); // Logo and business name
    });
  });

  describe('Customer Navigation', () => {
    it('renders all navigation links', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByRole('link', { name: /dashboard/i })).toBeInTheDocument();
      expect(screen.getByRole('link', { name: /book appointment/i })).toBeInTheDocument();
      expect(screen.getByRole('link', { name: /billing/i })).toBeInTheDocument();
      expect(screen.getByRole('link', { name: /support/i })).toBeInTheDocument();
    });

    it('navigation links have correct paths', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByRole('link', { name: /dashboard/i })).toHaveAttribute('href', '/');
      expect(screen.getByRole('link', { name: /book appointment/i })).toHaveAttribute(
        'href',
        '/book'
      );
      expect(screen.getByRole('link', { name: /billing/i })).toHaveAttribute(
        'href',
        '/payments'
      );
      expect(screen.getByRole('link', { name: /support/i })).toHaveAttribute('href', '/support');
    });

    it('navigation links have icons', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByTestId('layout-dashboard-icon')).toBeInTheDocument();
      expect(screen.getByTestId('calendar-plus-icon')).toBeInTheDocument();
      expect(screen.getByTestId('credit-card-icon')).toBeInTheDocument();
      expect(screen.getByTestId('help-circle-icon')).toBeInTheDocument();
    });

    it('navigation is hidden on mobile (md breakpoint)', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const nav = screen.getByRole('navigation');
      expect(nav).toHaveClass('hidden', 'md:flex');
    });

    it('navigation links have proper styling', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const dashboardLink = screen.getByRole('link', { name: /dashboard/i });
      expect(dashboardLink).toHaveClass(
        'text-sm',
        'font-medium',
        'text-white/80',
        'hover:text-white'
      );
    });
  });

  describe('Dark Mode Toggle', () => {
    it('renders dark mode toggle button', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const toggleButton = screen.getByRole('button', {
        name: /switch to dark mode/i,
      });
      expect(toggleButton).toBeInTheDocument();
    });

    it('displays Moon icon when dark mode is off', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByTestId('moon-icon')).toBeInTheDocument();
      expect(screen.queryByTestId('sun-icon')).not.toBeInTheDocument();
    });

    it('displays Sun icon when dark mode is on', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={true}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByTestId('sun-icon')).toBeInTheDocument();
      expect(screen.queryByTestId('moon-icon')).not.toBeInTheDocument();
    });

    it('calls toggleTheme when clicked', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const toggleButton = screen.getByRole('button', {
        name: /switch to dark mode/i,
      });
      fireEvent.click(toggleButton);

      expect(mockToggleTheme).toHaveBeenCalledTimes(1);
    });

    it('has proper aria-label for dark mode off', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const toggleButton = screen.getByRole('button', {
        name: 'Switch to dark mode',
      });
      expect(toggleButton).toBeInTheDocument();
    });

    it('has proper aria-label for dark mode on', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={true}
          toggleTheme={mockToggleTheme}
        />
      );

      const toggleButton = screen.getByRole('button', {
        name: 'Switch to light mode',
      });
      expect(toggleButton).toBeInTheDocument();
    });

    it('toggles multiple times correctly', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const toggleButton = screen.getByRole('button', {
        name: /switch to dark mode/i,
      });

      fireEvent.click(toggleButton);
      fireEvent.click(toggleButton);
      fireEvent.click(toggleButton);

      expect(mockToggleTheme).toHaveBeenCalledTimes(3);
    });
  });

  describe('User Profile Dropdown', () => {
    it('renders user profile dropdown', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByTestId('user-profile-dropdown')).toBeInTheDocument();
    });

    it('passes user to profile dropdown', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const dropdown = screen.getByTestId('user-profile-dropdown');
      expect(dropdown).toHaveTextContent('John Customer');
    });

    it('uses light variant for profile dropdown', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const dropdown = screen.getByTestId('user-profile-dropdown');
      expect(dropdown).toHaveAttribute('data-variant', 'light');
    });
  });

  describe('Notification Dropdown', () => {
    it('renders notification dropdown', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByTestId('notification-dropdown')).toBeInTheDocument();
    });

    it('uses light variant for notification dropdown', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const dropdown = screen.getByTestId('notification-dropdown');
      expect(dropdown).toHaveAttribute('data-variant', 'light');
    });

    it('handles ticket notification click', () => {
      const { container } = renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const dropdown = screen.getByTestId('notification-dropdown');
      const notificationButton = within(dropdown).getByText('Notification');

      fireEvent.click(notificationButton);

      // Should navigate to support page - we can't easily test navigation in this setup
      // but the component sets up the handler
      expect(dropdown).toBeInTheDocument();
    });
  });

  describe('Masquerade Banner', () => {
    it('does not show masquerade banner when no masquerade data', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.queryByTestId('masquerade-banner')).not.toBeInTheDocument();
    });

    it('shows masquerade banner when masquerade data exists', () => {
      const masqueradeStack = [
        {
          user_id: '2',
          username: 'admin',
          role: 'superuser',
        },
      ];

      localStorage.setItem('masquerade_stack', JSON.stringify(masqueradeStack));

      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByTestId('masquerade-banner')).toBeInTheDocument();
    });

    it('displays correct user in masquerade banner', () => {
      const masqueradeStack = [
        {
          user_id: '2',
          username: 'admin',
          role: 'superuser',
        },
      ];

      localStorage.setItem('masquerade_stack', JSON.stringify(masqueradeStack));

      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByText(/masquerading as john customer/i)).toBeInTheDocument();
    });

    it('handles invalid masquerade stack JSON gracefully', () => {
      localStorage.setItem('masquerade_stack', 'invalid json');

      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});

      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.queryByTestId('masquerade-banner')).not.toBeInTheDocument();
      expect(consoleErrorSpy).toHaveBeenCalled();

      consoleErrorSpy.mockRestore();
    });
  });

  describe('Main Content Area', () => {
    it('renders main content with proper classes', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const main = screen.getByRole('main');
      expect(main).toHaveClass('flex-1', 'overflow-y-auto');
    });

    it('has container with proper padding', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const main = screen.getByRole('main');
      const container = main.querySelector('.container');
      expect(container).toBeInTheDocument();
      expect(container).toHaveClass('mx-auto', 'px-4', 'sm:px-6', 'lg:px-8', 'py-8');
    });
  });

  describe('Responsive Design', () => {
    it('has responsive header padding', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const headerContainer = screen
        .getByRole('banner')
        .querySelector('.container');
      expect(headerContainer).toHaveClass('px-4', 'sm:px-6', 'lg:px-8');
    });

    it('has responsive navigation visibility', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const nav = screen.getByRole('navigation');
      expect(nav).toHaveClass('hidden', 'md:flex');
    });
  });

  describe('Integration', () => {
    it('renders all components together', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      // Header elements
      expect(screen.getByRole('banner')).toBeInTheDocument();
      expect(screen.getByText('Acme Corporation')).toBeInTheDocument();

      // Navigation
      expect(screen.getByRole('link', { name: /dashboard/i })).toBeInTheDocument();

      // User interactions
      expect(screen.getByTestId('user-profile-dropdown')).toBeInTheDocument();
      expect(screen.getByTestId('notification-dropdown')).toBeInTheDocument();

      // Content
      expect(screen.getByRole('main')).toBeInTheDocument();
      expect(screen.getByTestId('outlet-content')).toBeInTheDocument();
    });

    it('handles all props correctly', () => {
      const customBusiness: Business = {
        id: '99',
        name: 'Custom Business',
        subdomain: 'custom',
        primaryColor: '#8b5cf6',
      };

      const customUser: User = {
        id: '99',
        name: 'Custom User',
        email: 'custom@test.com',
        role: 'customer',
      };

      renderWithRouter(
        <CustomerLayout
          business={customBusiness}
          user={customUser}
          darkMode={true}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByText('Custom Business')).toBeInTheDocument();
      expect(screen.getByText('Custom User')).toBeInTheDocument();
      expect(screen.getByTestId('sun-icon')).toBeInTheDocument();
    });
  });

  describe('Edge Cases', () => {
    it('handles business with special characters in name', () => {
      const specialBusiness: Business = {
        id: '1',
        name: "O'Reilly & Sons",
        subdomain: 'oreilly',
        primaryColor: '#3b82f6',
      };

      renderWithRouter(
        <CustomerLayout
          business={specialBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(screen.getByText("O'Reilly & Sons")).toBeInTheDocument();
      expect(screen.getByText('O')).toBeInTheDocument();
    });

    it('handles very long business names', () => {
      const longNameBusiness: Business = {
        id: '1',
        name: 'Very Long Business Name That Should Still Display Properly',
        subdomain: 'longname',
        primaryColor: '#3b82f6',
      };

      renderWithRouter(
        <CustomerLayout
          business={longNameBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      expect(
        screen.getByText('Very Long Business Name That Should Still Display Properly')
      ).toBeInTheDocument();
    });

    it('handles different primary colors', () => {
      const colorVariations = ['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff'];

      colorVariations.forEach((color) => {
        const coloredBusiness: Business = {
          id: '1',
          name: 'Test Business',
          subdomain: 'test',
          primaryColor: color,
        };

        const { unmount } = renderWithRouter(
          <CustomerLayout
            business={coloredBusiness}
            user={mockUser}
            darkMode={false}
            toggleTheme={mockToggleTheme}
          />
        );

        const header = screen.getByRole('banner');
        expect(header).toHaveStyle({ backgroundColor: color });

        unmount();
      });
    });
  });

  describe('Accessibility', () => {
    it('has semantic header element', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const header = screen.getByRole('banner');
      expect(header.tagName).toBe('HEADER');
    });

    it('has semantic main element', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const main = screen.getByRole('main');
      expect(main.tagName).toBe('MAIN');
    });

    it('has semantic nav element', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const nav = screen.getByRole('navigation');
      expect(nav.tagName).toBe('NAV');
    });

    it('navigation links have accessible text', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const dashboardLink = screen.getByRole('link', { name: /dashboard/i });
      expect(dashboardLink).toHaveAccessibleName();
    });

    it('dark mode toggle has aria-label', () => {
      renderWithRouter(
        <CustomerLayout
          business={mockBusiness}
          user={mockUser}
          darkMode={false}
          toggleTheme={mockToggleTheme}
        />
      );

      const toggleButton = screen.getByRole('button', {
        name: /switch to dark mode/i,
      });
      expect(toggleButton).toHaveAttribute('aria-label');
    });
  });
});
