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 { Register } from "./pages/Register";
import { CalendarPage } from "./pages/Calendar";
import { TeamPage } from "./pages/Team";
import { FinancePage } from "./pages/Finance";
import { SettingsPage } from "./pages/Settings";
import { AlbumsPage } from "./pages/Albums";
import { AuthProvider, useAuth } from "./contexts/AuthContext";
import { DataProvider } from "./contexts/DataContext";
import { Construction } from "lucide-react";

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

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

  const renderPage = () => {
    if (currentPage === "home")
      return (
        <Home onEnter={() => setCurrentPage(user ? "dashboard" : "login")} />
      );
    if (currentPage === "login") return user ? <Dashboard /> : <Login />;
    if (currentPage === "register") return user ? <Dashboard /> : <Register onNavigate={setCurrentPage} />;

    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" />;

      case "calendar":
        return <CalendarPage />;

      case "team":
        return <TeamPage />;

      case "finance":
        return <FinancePage />;

      case "settings":
        return <SettingsPage />;

      case "albums":
        return <AlbumsPage />;

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

  return (
    <div className="min-h-screen bg-white">
      <Navbar onNavigate={setCurrentPage} currentPage={currentPage} />
      <main>{renderPage()}</main>

      {currentPage === "home" && (
        <footer className="bg-brand-black text-white py-20">
          <div className="w-full max-w-[1400px] mx-auto px-8 sm:px-12 lg:px-20">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-16 lg:gap-24 mb-20">
              {/* Logo e Descrição */}
              <div className="lg:col-span-1">
                <h3 className="text-2xl font-serif font-bold mb-4" style={{color: '#B9CF33'}}>
                  Photum Formaturas
                </h3>
                <p className="text-gray-400 text-sm leading-relaxed">
                  Eternizando momentos únicos com excelência e profissionalismo desde 2020.
                </p>
              </div>

              {/* Serviços */}
              <div>
                <h4 className="font-bold text-white mb-4 uppercase tracking-wider text-sm">Serviços</h4>
                <ul className="space-y-3 text-gray-400 text-sm">
                  <li>
                    <a href="#" className="hover:text-brand-gold transition-colors">
                      Fotografia de Eventos
                    </a>
                  </li>
                  <li>
                    <a href="#" className="hover:text-brand-gold transition-colors">
                      Álbuns Personalizados
                    </a>
                  </li>
                  <li>
                    <a href="#" className="hover:text-brand-gold transition-colors">
                      Gestão de Formaturas
                    </a>
                  </li>
                  <li>
                    <a href="#" className="hover:text-brand-gold transition-colors">
                      Cobertura Completa
                    </a>
                  </li>
                </ul>
              </div>

              {/* Links Úteis */}
              <div>
                <h4 className="font-bold text-white mb-4 uppercase tracking-wider text-sm">Links Úteis</h4>
                <ul className="space-y-3 text-gray-400 text-sm">
                  <li>
                    <a href="#" onClick={() => setCurrentPage('login')} className="hover:text-brand-gold transition-colors">
                      Área do Cliente
                    </a>
                  </li>
                  <li>
                    <a href="#" onClick={() => setCurrentPage('register')} className="hover:text-brand-gold transition-colors">
                      Cadastre sua Formatura
                    </a>
                  </li>
                  <li>
                    <a href="#" className="hover:text-brand-gold transition-colors">
                      Portfólio
                    </a>
                  </li>
                  <li>
                    <a href="#" className="hover:text-brand-gold transition-colors">
                      FAQ
                    </a>
                  </li>
                </ul>
              </div>

              {/* Contato */}
              <div>
                <h4 className="font-bold text-white mb-4 uppercase tracking-wider text-sm">Contato</h4>
                <ul className="space-y-3 text-gray-400 text-sm">
                  <li className="flex items-center gap-2">
                    <span>📧</span>
                    <a href="mailto:contato@photum.com.br" className="hover:text-brand-gold transition-colors">
                      contato@photum.com.br
                    </a>
                  </li>
                  <li className="flex items-center gap-2">
                    <span>📱</span>
                    <span>(11) 99999-9999</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <span>📍</span>
                    <span>São Paulo, SP</span>
                  </li>
                  <li className="flex gap-4 mt-4">
                    <a href="#" className="hover:text-brand-gold transition-colors text-xl">
                      📷
                    </a>
                    <a href="#" className="hover:text-brand-gold transition-colors text-xl">
                      👥
                    </a>
                    <a href="#" className="hover:text-brand-gold transition-colors text-xl">
                      ▶️
                    </a>
                  </li>
                </ul>
              </div>
            </div>

            {/* Bottom Bar */}
            <div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">
              <p>&copy; 2025 PhotumFormaturas. Todos os direitos reservados.</p>
              <div className="flex space-x-8 mt-4 md:mt-0">
                <a href="#" className="hover:text-brand-gold transition-colors">
                  Política de Privacidade
                </a>
                <a href="#" className="hover:text-brand-gold transition-colors">
                  Termos de Uso
                </a>
                <a href="#" className="hover:text-brand-gold transition-colors">
                  LGPD
                </a>
              </div>
            </div>
          </div>
        </footer>
      )}
    </div>
  );
};

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

export default App;