import React, { useState, useEffect } from 'react';
import { Menu, X } from 'lucide-react';
import { COURSE_CONTENT } from './constants';
import { Sidebar } from './components/Sidebar';
import { ContentSection } from './components/ContentSection';
import { CourseSection } from './types';

function App() {
  const [activeSection, setActiveSection] = useState<CourseSection>(COURSE_CONTENT[0].sections[0]);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 flex">
      {/* Mobile Overlay */}
      {isSidebarOpen && (
        <div 
            className="fixed inset-0 bg-black/50 z-40 md:hidden backdrop-blur-sm"
            onClick={() => setIsSidebarOpen(false)}
        />
      )}

      {/* Sidebar Navigation */}
      <Sidebar 
        content={COURSE_CONTENT} 
        activeSectionId={activeSection.id} 
        onSelectSection={setActiveSection}
        isOpen={isSidebarOpen}
        onCloseMobile={() => setIsSidebarOpen(false)}
      />

      {/* Main Content Area */}
      <main className="flex-1 md:ml-80 flex flex-col min-h-screen w-full transition-all duration-300">
        
        {/* Mobile Header */}
        <header className="md:hidden sticky top-0 z-30 bg-white/80 backdrop-blur border-b border-gray-200 px-4 py-3 flex items-center justify-between">
            <span className="font-bold text-gray-900">Ads & Analytics</span>
            <button 
                onClick={() => setIsSidebarOpen(!isSidebarOpen)}
                className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg"
            >
                {isSidebarOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
        </header>

        {/* Dynamic Content */}
        <div className="flex-1 overflow-y-auto">
            <ContentSection section={activeSection} />
            
            {/* Simple Navigation Footer for the content area */}
            <div className="max-w-4xl mx-auto px-6 pb-12 pt-6">
                <div className="h-px bg-gray-200 mb-8" />
                <div className="flex justify-between text-sm text-gray-500 italic">
                    <span>Partie: {COURSE_CONTENT.find(p => p.sections.some(s => s.id === activeSection.id))?.title}</span>
                    <span>Formation v1.0</span>
                </div>
            </div>
        </div>
      </main>
    </div>
  );
}

export default App;