App.tsx

import React, { useState, useEffect } from 'react';
import Sidebar from './components/Sidebar';
import Header from './components/Header';
import Dashboard from './components/Dashboard';
import RefugeeRegistrationForm from './components/RefugeeRegistrationForm';
import RefugeeExperienceForm from './components/RefugeeExperienceForm';
import AnalyticsDashboard from './components/AnalyticsDashboard';
import { Page, Refugee } from './types';
import ProtectionDashboard from './components/ProtectionDashboard';
import HealthDashboard from './components/HealthDashboard';
import EducationDashboard from './components/EducationDashboard';
import LivelihoodDashboard from './components/LivelihoodDashboard';
import AidDistributionDashboard from './components/AidDistributionDashboard';
// Fix: Changed to a named import to resolve module resolution error.
import { ResettlementDashboard } from './components/ResettlementDashboard';
import RefugeeDatabase from './components/RefugeePortal';
import JobsDashboard from './components/JobsDashboard';
import Modal from './components/Modal';
import RefugeeDetailView from './components/RefugeeDetailView';
import NotificationsPage from './components/NotificationsPage';
import LoginPage from './components/LoginPage';
import SignUpPage from './components/SignUpPage';
import { LanguageProvider } from './contexts/LanguageContext';
import { useLanguage } from './hooks/useLanguage';
import AIAssistant from './components/AIAssistant';
import { ThemeProvider } from './contexts/ThemeContext';

const App: React.FC = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [authPage, setAuthPage] = useState<'login' | 'signup'>('login');
  const [activePage, setActivePage] = useState<Page>('dashboard');
  const [selectedRefugee, setSelectedRefugee] = useState<Refugee | null>(null);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  
  const { language } = useLanguage();

  const handleLogout = () => {
    setIsAuthenticated(false);
    setAuthPage('login');
  };

  useEffect(() => {
    document.documentElement.lang = language;
    document.documentElement.dir = language === 'ar' ? 'rtl' : 'ltr';
  }, [language]);


  const renderContent = () => {
    switch (activePage) {
      case 'dashboard':
        return <Dashboard setActivePage={setActivePage} setSelectedRefugee={setSelectedRefugee} />;
      case 'register':
        return <RefugeeRegistrationForm />;
      case 'assessment':
        return <RefugeeExperienceForm />;
      case 'analytics':
        return <AnalyticsDashboard />;
      case 'protection':
        return <ProtectionDashboard setSelectedRefugee={setSelectedRefugee} />;
      case 'health':
        return <HealthDashboard setSelectedRefugee={setSelectedRefugee} />;
      case 'education':
        return <EducationDashboard setSelectedRefugee={setSelectedRefugee} />;
      case 'livelihood':
        return <LivelihoodDashboard setSelectedRefugee={setSelectedRefugee} />;
      case 'aid':
        return <AidDistributionDashboard setSelectedRefugee={setSelectedRefugee} />;
      case 'resettlement':
        return <ResettlementDashboard setSelectedRefugee={setSelectedRefugee} />;
      case 'database':
        return <RefugeeDatabase setSelectedRefugee={setSelectedRefugee} />;
      case 'notifications':
        return <NotificationsPage setActivePage={setActivePage} />;
      case 'jobs':
        return <JobsDashboard />;
      default:
        return <Dashboard setActivePage={setActivePage} setSelectedRefugee={setSelectedRefugee} />;
    }
  };
  
  if (!isAuthenticated) {
    if (authPage === 'login') {
      return (
        <LoginPage 
          onLoginSuccess={() => setIsAuthenticated(true)}
          onNavigateToSignUp={() => setAuthPage('signup')}
        />
      );
    }
    return (
      <SignUpPage
        onSignUpSuccess={() => setIsAuthenticated(true)}
        onNavigateToLogin={() => setAuthPage('login')}
      />
    );
  }

  return (
    <div className="flex h-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans overflow-hidden">
      <Sidebar 
        activePage={activePage} 
        setActivePage={setActivePage} 
        isOpen={isSidebarOpen} 
        onClose={() => setIsSidebarOpen(false)}
        onLogout={handleLogout}
      />
      <div className="flex-1 flex flex-col overflow-hidden">
        <Header 
            setSelectedRefugee={setSelectedRefugee} 
            onMenuClick={() => setIsSidebarOpen(true)} 
            setActivePage={setActivePage}
        />
        <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-black p-4 md:p-8">
          {renderContent()}
        </main>
      </div>
      <Modal title="Refugee Details" isOpen={!!selectedRefugee} onClose={() => setSelectedRefugee(null)} size="xl">
        {selectedRefugee && <RefugeeDetailView refugee={selectedRefugee} />}
      </Modal>
      <AIAssistant />
    </div>
  );
};

const AppWrapper: React.FC = () => {
    return (
        <ThemeProvider>
            <LanguageProvider>
                <App />
            </LanguageProvider>
        </ThemeProvider>
    );
};

export default AppWrapper;