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";
import { useAppSelector } from "./hooks/useRedux";
import ScrollToTop from "./components/ScrollToTop";
import TermsView from "./pages/terms/TermsView";

const App: React.FC = () => {
  const location = useLocation();
  const loading = useAppSelector((state) => state.loading);
  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 />}
      <ScrollToTop />
      <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"
          }`}
        >
          <TopLoader />

          <div className="flex-1">
            <Routes>
              <Route path="/" element={<HomeView />} />
              <Route path="/buy-sim" element={<BuySimView />} />
              <Route
                path="/product-detail/:id"
                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="/terms" element={<TermsView />} />

              <Route
                path="/order-history-detail/:id"
                element={<OrderDetailView />}
              />
              {/* <Route
                path="/order-history-detail"
                element={<OrderDetailView />}
              /> */}
              {/* Fallback */}
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </div>

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

export default App;
