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 { TeamPage } from "./pages/Team";
import { FinancePage } from "./pages/Finance";
import { SettingsPage } from "./pages/Settings";
import { CourseManagement } from "./pages/CourseManagement";
import { InspirationPage } from "./pages/Inspiration";
import { PrivacyPolicy } from "./pages/PrivacyPolicy";
import { TermsOfUse } from "./pages/TermsOfUse";
import { LGPD } from "./pages/LGPD";
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 onNavigate={setCurrentPage} />;
    if (currentPage === "register")
      return user ? <Dashboard /> : <Register onNavigate={setCurrentPage} />;
    if (currentPage === "privacy")
      return <PrivacyPolicy onNavigate={setCurrentPage} />;
    if (currentPage === "terms")
      return <TermsOfUse onNavigate={setCurrentPage} />;
    if (currentPage === "lgpd") return <LGPD onNavigate={setCurrentPage} />;

    if (!user) return <Login onNavigate={setCurrentPage} />;

    switch (currentPage) {
      case "dashboard":
      case "events":
        return <Dashboard initialView="list" />;

      case "request-event":
        return <Dashboard initialView="create" />;

      case "inspiration":
        return <InspirationPage />;

      case "team":
        return <TeamPage />;

      case "finance":
        return <FinancePage />;

      case "settings":
        return <SettingsPage />;

      case "courses":
        return <CourseManagement />;

      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-gradient-to-br from-brand-purple to-brand-purple/90 text-brand-black py-12 sm:py-16 md:py-20">
          <div className="w-full max-w-[1600px] mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 md:gap-10 lg:gap-12 xl:gap-16 mb-8 sm:mb-12 md:mb-16">
              {/* Logo e Descrição */}
              <div className="lg:col-span-1 text-center sm:text-left">
                <div className="flex flex-col items-center sm:items-start">
                  <img
                    src="/logo.png"
                    alt="Photum Formaturas"
                    className="h-24 sm:h-28 md:h-32 lg:h-36 mb-4 md:mb-6"
                  />
                  <p className="text-brand-black/80 text-xs sm:text-sm md:text-base leading-relaxed">
                    Eternizando momentos únicos com excelência e
                    profissionalismo desde 2020.
                  </p>
                </div>
              </div>

              {/* Serviços */}
              <div>
                <h4 className="font-bold text-brand-black mb-4 md:mb-6 uppercase tracking-wider text-sm sm:text-base md:text-lg">
                  Serviços
                </h4>
                <ul className="space-y-2 md:space-y-3 text-brand-black/70 text-sm sm:text-base md:text-lg">
                  <li>Fotografia de Formatura</li>
                  <li>Cerimônia de Colação</li>
                  <li>Ensaios de Turma</li>
                </ul>
              </div>

              {/* Links Úteis */}
              <div>
                <h4 className="font-bold text-brand-black mb-4 md:mb-6 uppercase tracking-wider text-sm sm:text-base md:text-lg">
                  Links Úteis
                </h4>
                <ul className="space-y-2 md:space-y-3 text-brand-black/70 text-sm sm:text-base md:text-lg">
                  <li>
                    <a
                      href="#"
                      onClick={() => setCurrentPage("login")}
                      className="hover:text-brand-black transition-colors"
                    >
                      Área do Cliente
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      onClick={() => setCurrentPage("register")}
                      className="hover:text-brand-black transition-colors"
                    >
                      Cadastre sua Formatura
                    </a>
                  </li>
                </ul>
              </div>

              {/* Contato */}
              <div>
                <h4 className="font-bold text-brand-black mb-4 md:mb-6 uppercase tracking-wider text-sm sm:text-base md:text-lg">
                  Contato
                </h4>
                <ul className="space-y-3 md:space-y-4 text-brand-black/70 text-sm sm:text-base md:text-lg">
                  <li className="flex items-center gap-2 md:gap-3">
                    <svg
                      className="w-5 h-5 md:w-6 md:h-6 flex-shrink-0"
                      fill="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
                    </svg>
                    <a
                      href="mailto:contato@photum.com.br"
                      className="hover:text-brand-black transition-colors break-all"
                    >
                      contato@photum.com.br
                    </a>
                  </li>
                  <li className="flex items-start gap-2 md:gap-3">
                    <svg
                      className="w-5 h-5 md:w-6 md:h-6 flex-shrink-0 mt-0.5"
                      fill="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 12h2c0-4.97-4.03-9-9-9v2c3.87 0 7 3.13 7 7zm-4 0h2c0-2.76-2.24-5-5-5v2c1.66 0 3 1.34 3 3z" />
                    </svg>
                    <div>
                      <p>(19) 3405 5024</p>
                      <p>(19) 3621 4621</p>
                    </div>
                  </li>
                  <li className="flex items-center gap-2 md:gap-3">
                    <svg
                      className="w-5 h-5 md:w-6 md:h-6 flex-shrink-0"
                      fill="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
                    </svg>
                    <span>Americana, SP</span>
                  </li>
                  <li className="flex gap-4 md:gap-5 mt-4 md:mt-6">
                    <a
                      href="#"
                      className="hover:text-brand-black transition-colors"
                    >
                      <svg
                        className="w-7 h-7 md:w-8 md:h-8"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                      </svg>
                    </a>
                    <a
                      href="#"
                      className="hover:text-brand-black transition-colors"
                    >
                      <svg
                        className="w-7 h-7 md:w-8 md:h-8"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
                      </svg>
                    </a>
                    <a
                      href="#"
                      className="hover:text-brand-black transition-colors"
                    >
                      <svg
                        className="w-7 h-7 md:w-8 md:h-8"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                      </svg>
                    </a>
                  </li>
                </ul>
              </div>
            </div>

            {/* Bottom Bar */}
            <div className="border-t border-black/20 pt-6 md:pt-8 flex flex-col md:flex-row justify-between items-center text-xs sm:text-sm md:text-base text-brand-black/60 gap-4">
              <p>&copy; 2025 PhotumFormaturas. Todos os direitos reservados.</p>
              <div className="flex flex-wrap justify-center gap-4 sm:gap-6 md:gap-8">
                <a
                  href="#"
                  onClick={() => setCurrentPage("privacy")}
                  className="hover:text-brand-black transition-colors"
                >
                  Política de Privacidade
                </a>
                <a
                  href="#"
                  onClick={() => setCurrentPage("terms")}
                  className="hover:text-brand-black transition-colors"
                >
                  Termos de Uso
                </a>
                <a
                  href="#"
                  onClick={() => setCurrentPage("lgpd")}
                  className="hover:text-brand-black transition-colors"
                >
                  LGPD
                </a>
              </div>
            </div>
          </div>
        </footer>
      )}
    </div>
  );
};

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

export default App;
