import { Outlet } from 'react-router-dom';
import { Header } from './Header';
import { Sidebar } from './Sidebar';
import { SkipToContent, useFocusVisible } from '@/components/a11y/AccessibilityComponents';
import { analytics, usePageViewTracking, usePerformanceTracking } from '@/components/analytics/analytics-service';
import { useEffect } from 'react';
import { useAuth } from '@/contexts/AuthContext';

export function Layout() {
  // Initialize accessibility features
  useFocusVisible();
  
  // Track page views
  usePageViewTracking();
  
  // Track performance
  usePerformanceTracking();

  const { user } = useAuth();

  // Set user ID for analytics
  useEffect(() => {
    if (user) {
      analytics.setUserId(user.id);
    } else {
      analytics.setUserId(null);
    }
  }, [user]);

  return (
    <div className="min-h-screen bg-background">
      <SkipToContent />
      <Header />
      <div className="flex">
        <Sidebar />
        <main 
          id="main-content"
          className="flex-1 p-6 overflow-auto"
          tabIndex={-1}
          role="main"
          aria-label="Main content"
        >
          <Outlet />
        </main>
      </div>
    </div>
  );
}
