import './styles/globals.css';
import { ThemeProvider, AppProvider, useApp, useTheme } from './contexts';
import { Header, Tabs } from './components/layout';
import { CompliancePage } from './pages/Compliance';
import { DocsPage } from './pages/Docs';
import { StatusPage } from './pages/Status';
import { RagChatPage } from './pages/RagChat';

const PageContent = () => {
  const { activeTab } = useApp();

  switch (activeTab) {
    case 'docs':
      return <DocsPage />;
    case 'compliance':
      return <CompliancePage />;
    case 'status':
      return <StatusPage />;
    case 'rag':
      return <RagChatPage />;
    default:
      return <CompliancePage />;
  }
};

const AppContent = () => {
  const { theme } = useTheme();

  return (
    <div className="h-full flex flex-col min-h-screen" style={{ backgroundColor: theme.bg }}>
      <Header />
      <Tabs />
      <PageContent />
    </div>
  );
};

function App() {
  return (
    <ThemeProvider>
      <AppProvider>
        <AppContent />
      </AppProvider>
    </ThemeProvider>
  );
}

export default App;