/**
 * MainLayout
 * 
 * Hauptlayout der Anwendung mit Sidebar und Content-Bereich.
 * Enthält den FeatureProvider für das Multi-Tenant-System.
 */

import React, { useEffect } from 'react';
import { Outlet } from 'react-router-dom';
import { FeatureProvider, useFeatureStore } from '../stores/featureStore';
import { MandateNavigation } from '../components/Navigation/MandateNavigation';
import { UserSection } from '../components/Navigation/UserSection';
import styles from './MainLayout.module.css';

// =============================================================================
// INNER LAYOUT (mit Zugriff auf Store)
// =============================================================================

const MainLayoutInner: React.FC = () => {
  const { loadFeatures, initialized, loading, error } = useFeatureStore();
  
  // Features laden beim Mount
  useEffect(() => {
    if (!initialized && !loading) {
      loadFeatures();
    }
  }, [initialized, loading, loadFeatures]);
  
  return (
    <div className={styles.mainLayout}>
      {/* Sidebar */}
      <aside className={styles.sidebar}>
        <div className={styles.logoContainer}>
          <img 
            src="/logos/poweron-logo.png" 
            alt="PowerOn" 
            className={styles.logoImage}
          />
        </div>
        
        <nav className={styles.navigation}>
          {loading && (
            <div className={styles.loadingNav}>
              Lade Navigation...
            </div>
          )}
          
          {error && (
            <div className={styles.errorNav}>
              Fehler: {error}
            </div>
          )}
          
          {initialized && !loading && (
            <MandateNavigation />
          )}
        </nav>
        
        {/* User-Bereich am unteren Rand */}
        <UserSection />
      </aside>
      
      {/* Content */}
      <main className={styles.content}>
        <Outlet />
      </main>
    </div>
  );
};

// =============================================================================
// MAIN LAYOUT (mit Provider)
// =============================================================================

export const MainLayout: React.FC = () => {
  return (
    <FeatureProvider>
      <MainLayoutInner />
    </FeatureProvider>
  );
};

export default MainLayout;
