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

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 (!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 "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:
        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-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;
