import { screen } from '@testing-library/react';
import { renderWithProviders as render } from '../../../test/render';
import { describe, it, expect, vi } from 'vitest';
import { TemplatePage } from './TemplatePage';
import React from 'react';
import { LayoutProvider } from '../../../contexts/LayoutContext';

// Mock react-router
vi.mock('react-router-dom', () => ({
  useLocation: () => ({ pathname: '/' }),
  useNavigate: () => vi.fn(),
  Link: ({ to, children, ...props }: any) => (
    <a href={to} {...props}>
      {children}
    </a>
  ),
}));

// Mock assistant
vi.mock('../../assistant/xertica-assistant/xertica-assistant', () => ({
  XerticaAssistant: () => <div data-testid="assistant">Assistant</div>,
}));

// Mock navigation (moved from root routes.tsx)
vi.mock('../../shared/navigation', () => ({
  routes: [],
  getRouteByPath: vi.fn(path => ({ path, label: 'Test Route' })),
  isValidRoute: vi.fn(() => true),
}));

// Mock AuthContext so the component can consume useAuth without a real provider
vi.mock('../../../contexts/AuthContext', () => ({
  useAuth: () => ({
    user: { email: 'user@example.com' },
    isLoading: false,
    login: vi.fn(),
    logout: vi.fn(),
  }),
}));

describe('TemplatePage', () => {
  it('renders layout components correctly', () => {
    render(
      <LayoutProvider>
        <TemplatePage />
      </LayoutProvider>
    );

    expect(screen.getByTestId('assistant')).toBeInTheDocument();
    // Verification of Sidebar and Content
    expect(document.querySelector('svg')).toBeInTheDocument();
  });
});