import React from "react";
import { Routes, Route, useLocation, Navigate } from "react-router-dom";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeView from "./pages/home/HomeView";
import Sidebar from "./components/Sidebar";
import ProductDetailView from "./pages/product-detail/ProductDetailView";
import BuySimView from "./pages/buy-sim/BuySimView";
import SupportView from "./pages/support/SupportView";
import NewsView from "./pages/news/NewsView";
import ArticleDetailView from "./pages/news/NewsDetailView";
import LoginView from "./pages/login/LoginView";
import ContactView from "./pages/contact/ContactView";
import TopLoader from "./components/TopLoader";
import CheckoutView from "./pages/checkout/CheckoutView";
import Popup from "./components/Popup";
import OrderHistoryView from "./pages/order-history/OrderHistoryView";
import OrderDetailView from "./pages/order-detail/OrderDetailView";
import CompatibilityModal from "./components/CompatibilityModal";
import QRCodeModal from "./components/QRCodeModal";

const App: React.FC = () => {
  const location = useLocation();
  const path = location.pathname;

  const isAiView = path.startsWith("/ai");
  const isPlainView = path === "/login";

  // Helper to determine if footer should be shown
  const showFooter = !isAiView && !isPlainView;

  return (
    <div
      className={`flex flex-col min-h-screen bg-white selection:bg-red-100 ${
        isAiView ? "h-screen overflow-hidden" : ""
      }`}
    >
      {!isPlainView && <Header />}

      <Popup />
      <CompatibilityModal />
      <QRCodeModal />

      <div className={`flex flex-1 ${isAiView ? "overflow-hidden" : ""}`}>
        {isAiView && <Sidebar />}

        <main
          className={`flex-1 relative flex flex-col ${
            isAiView ? "overflow-y-auto bg-slate-50" : "bg-white"
          }`}
        >
          {isAiView && (
            <div className="h-14 border-b border-slate-200 bg-white/50 backdrop-blur-md flex items-center justify-between px-6 shrink-0 z-10">
              <div className="flex items-center space-x-2">
                <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span>
                <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">
                  Assistant Active
                </span>
              </div>
              <a
                href="/"
                className="text-[10px] font-bold text-[#EE0434] hover:underline"
              >
                Back to Store
              </a>
            </div>
          )}

          <TopLoader visible={true} />

          <div className="flex-1">
            <Routes>
              <Route path="/" element={<HomeView />} />
              <Route path="/buy-sim" element={<BuySimView />} />
              <Route path="/product/:country" element={<ProductDetailView />} />
              <Route path="/checkout" element={<CheckoutView />} />
              <Route path="/support" element={<SupportView />} />
              <Route path="/news" element={<NewsView />} />
              <Route path="/news/:id" element={<ArticleDetailView />} />
              <Route path="/contact" element={<ContactView />} />
              <Route path="/login" element={<LoginView />} />
              <Route path="/order-history" element={<OrderHistoryView />} />
              <Route
                path="/order-history-detail/:id"
                element={<OrderDetailView />}
              />

              {/* Fallback */}
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </div>

          {showFooter && <Footer />}
        </main>
      </div>
    </div>
  );
};

export default App;