import React, { useState, useEffect } from 'react';
import { Navbar } from './components/Navbar';
import { Home } from './pages/Home';
import { Dashboard } from './pages/Dashboard';
import { Login } from './pages/Login';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import { DataProvider } from './contexts/DataContext';
import { Construction } from 'lucide-react'; // Placeholder icon

const AppContent: React.FC = () => {
  const { user } = useAuth();
  const [currentPage, setCurrentPage] = useState('home');

  useEffect(() => {
    if (user && currentPage === 'login') {
      setCurrentPage('dashboard');
    }
  }, [user, currentPage]);

  // Simple Router Logic
  const renderPage = () => {
    if (currentPage === 'home') return <Home onEnter={() => setCurrentPage(user ? 'dashboard' : 'login')} />;
    if (currentPage === 'login') return user ? <Dashboard /> : <Login />;
    
    // Protected Routes Check
    if (!user) return <Login />;

    switch (currentPage) {
      case 'dashboard':
      case 'events':
        return <Dashboard initialView="list" />;
      
      case 'request-event':
        return <Dashboard initialView="create" />;
      
      case 'uploads':
        return <Dashboard initialView="uploads" />;

      // Placeholder routes for future implementation
      case 'team':
      case 'finance':
      case 'settings':
      case 'albums':
      case 'calendar':
        return (
           <div className="min-h-screen bg-white pt-32 px-4 text-center fade-in">
              <div className="max-w-md mx-auto bg-gray-50 p-12 rounded-lg border border-gray-100 shadow-sm">
                  <div className="mx-auto w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-6 text-gray-400">
                    <Construction size={32} />
                  </div>
                  <h2 className="text-2xl font-serif font-bold mb-3 text-brand-black capitalize">
                    {currentPage === 'team' ? 'Equipe & Fotógrafos' : 
                     currentPage === 'finance' ? 'Financeiro' :
                     currentPage === 'calendar' ? 'Agenda' :
                     currentPage}
                  </h2>
                  <p className="text-gray-500 mb-8 leading-relaxed">
                    Esta funcionalidade está em desenvolvimento e estará disponível em breve no seu painel.
                  </p>
                  <button 
                      onClick={() => setCurrentPage('dashboard')}
                      className="px-6 py-2 bg-brand-black text-white rounded-sm hover:bg-gray-800 transition-colors font-medium text-sm"
                  >
                      Voltar ao Dashboard
                  </button>
              </div>
           </div>
        );

      default:
        // Fallback
        return <Dashboard initialView="list" />;
    }
  };

  return (
    <div className="min-h-screen bg-white">
      <Navbar 
        onNavigate={setCurrentPage}
        currentPage={currentPage}
      />
      <main>
        {renderPage()}
      </main>
      
      {/* Footer only on Home */}
      {currentPage === 'home' && (
        <footer className="bg-white border-t border-gray-100 py-12">
          <div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">
            <p>&copy; 2024 PhotumManager. Todos os direitos reservados.</p>
            <div className="flex space-x-6 mt-4 md:mt-0">
               <a href="#" className="hover:text-brand-black">Política de Privacidade</a>
               <a href="#" className="hover:text-brand-black">Termos de Uso</a>
               <a href="#" className="hover:text-brand-black">Instagram</a>
            </div>
          </div>
        </footer>
      )}
    </div>
  );
};

function App() {
  return (
    <AuthProvider>
      <DataProvider>
        <AppContent />
      </DataProvider>
    </AuthProvider>
  );
}

export default App;