import React, { useState, useEffect, lazy, Suspense } from "react";
import { createTheme } from "@mui/material/styles";
import {
  Routes,
  Route,
  Navigate,
  useLocation,
  useNavigate
} from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Box from "@mui/material/Box";
import CircularProgress from "@mui/material/CircularProgress";
import Fab from "@mui/material/Fab";
import Tooltip from "@mui/material/Tooltip";
import SmartToyIcon from "@mui/icons-material/SmartToy";
import PaletteIcon from "@mui/icons-material/Palette";
import ScienceIcon from "@mui/icons-material/Science";

import { CarouselProvider } from "./contexts/CarouselContext.js";
import { ProductContextProvider } from "./context/ProductContext.js";
import { CategoryContextProvider } from "./context/CategoryContext.js";
import TitleUpdater from "./components/TitleUpdater.js";
import config from "./config.js";
import ScrollToTop from "./components/ScrollToTop.js";

// Import i18n
import './i18n/index.js';
import { LanguageProvider } from './i18n/withTranslation.js';
import i18n from './i18n/index.js';
//import TelemetryService from './services/telemetryService.js';

import Header from "./components/Header.js";
import Footer from "./components/Footer.js";
import MainPageLayout from "./components/MainPageLayout.js";

// TEMPORARILY DISABLE ALL LAZY LOADING TO ELIMINATE CircularProgress
import Content from "./components/Content.js";
import ProductDetail from "./components/ProductDetail.js";
import ProfilePage from "./pages/ProfilePage.js";
import ResetPassword from "./pages/ResetPassword.js";

// Lazy load admin pages - only loaded when admin users access them
const AdminPage = lazy(() => import(/* webpackChunkName: "admin" */ "./pages/AdminPage.js"));
const UsersPage = lazy(() => import(/* webpackChunkName: "admin-users" */ "./pages/UsersPage.js"));
const ServerLogsPage = lazy(() => import(/* webpackChunkName: "admin-logs" */ "./pages/ServerLogsPage.js"));

// Lazy load legal pages - rarely accessed
const Datenschutz = lazy(() => import(/* webpackChunkName: "legal" */ "./pages/Datenschutz.js"));
const AGB = lazy(() => import(/* webpackChunkName: "legal" */ "./pages/AGB.js"));
//const NotFound404 = lazy(() => import(/* webpackChunkName: "legal" */ "./pages/NotFound404.js")); <Route path="/404" element={<NotFound404 />} />
const Sitemap = lazy(() => import(/* webpackChunkName: "sitemap" */ "./pages/Sitemap.js"));
const Impressum = lazy(() => import(/* webpackChunkName: "legal" */ "./pages/Impressum.js"));
const Batteriegesetzhinweise = lazy(() => import(/* webpackChunkName: "legal" */ "./pages/Batteriegesetzhinweise.js"));
const Widerrufsrecht = lazy(() => import(/* webpackChunkName: "legal" */ "./pages/Widerrufsrecht.js"));

// Lazy load special features
const GrowTentKonfigurator = lazy(() => import(/* webpackChunkName: "konfigurator" */ "./pages/GrowTentKonfigurator.js"));
const ChatAssistant = lazy(() => import(/* webpackChunkName: "chat" */ "./components/ChatAssistant.js"));

// Lazy load separate pages that are truly different
const PresseverleihPage = lazy(() => import(/* webpackChunkName: "presseverleih" */ "./pages/PresseverleihPage.js"));
const ThcTestPage = lazy(() => import(/* webpackChunkName: "thc-test" */ "./pages/ThcTestPage.js"));

// Lazy load payment success page
const PaymentSuccess = lazy(() => import(/* webpackChunkName: "payment" */ "./components/PaymentSuccess.js"));

// Lazy load prerender component (development testing only)
const PrerenderHome = lazy(() => import(/* webpackChunkName: "prerender-home" */ "./PrerenderHome.js"));

// Import theme from separate file to reduce main bundle size
import defaultTheme from "./theme.js";
// Lazy load theme customizer for development only
const ThemeCustomizerDialog = lazy(() => import(/* webpackChunkName: "theme-customizer" */ "./components/ThemeCustomizerDialog.js"));

const deleteMessages = () => {
  console.log("Deleting messages");
  window.chatMessages = [];
};


const AppContent = ({ currentTheme, dynamicTheme, onThemeChange }) => {
  // State to manage chat visibility
  const [isChatOpen, setChatOpen] = useState(false);
  const [authVersion, setAuthVersion] = useState(0);
  // @note Theme customizer state for development mode
  const [isThemeCustomizerOpen, setThemeCustomizerOpen] = useState(false);
  // State to track active category for article pages
  const [articleCategoryId, setArticleCategoryId] = useState(null);


  // Remove duplicate theme state since it's passed as prop
  // const [dynamicTheme, setDynamicTheme] = useState(createTheme(defaultTheme));

  // Get current location
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    if (location.hash && location.hash.length > 1) {
      // Check if it's a potential order ID (starts with # and has alphanumeric characters with dashes)
      const potentialOrderId = location.hash.substring(1);
      if (/^[A-Z0-9]+-[A-Z0-9]+$/i.test(potentialOrderId)) {
        if (location.pathname !== "/profile") {
          navigate(`/profile${location.hash}`, { replace: true });
        }
      }
    }
  }, [location, navigate]);

  useEffect(() => {
    const handleLogin = () => {
      setAuthVersion((v) => v + 1);
    };
    window.addEventListener("userLoggedIn", handleLogin);
    return () => {
      window.removeEventListener("userLoggedIn", handleLogin);
    };
  }, []);

  // Clear article category when navigating away from article pages
  useEffect(() => {
    const isArticlePage = location.pathname.startsWith('/Artikel/');
    const isCategoryPage = location.pathname.startsWith('/Kategorie/');
    const isHomePage = location.pathname === '/';

    // Only clear article category when navigating to non-article pages
    // (but keep it when going from category to article)
    if (!isArticlePage && !isCategoryPage && !isHomePage) {
      setArticleCategoryId(null);
    }
  }, [location.pathname]);

  // Read article category from navigation state (when coming from product click)
  useEffect(() => {
    if (location.state && location.state.articleCategoryId !== undefined) {
      if (location.state.articleCategoryId !== null) {
        setArticleCategoryId(location.state.articleCategoryId);
      }
      // Clear the state so it doesn't persist on page refresh
      navigate(location.pathname, { replace: true, state: {} });
    }
  }, [location.state, navigate, location.pathname]);

  // Extract categoryId from pathname if on category route, or use article category
  const getCategoryId = () => {
    const match = location.pathname.match(/^\/Kategorie\/(.+)$/);
    if (match) {
      return match[1];
    }

    // For article pages, use the article category if available
    const isArticlePage = location.pathname.startsWith('/Artikel/');
    if (isArticlePage && articleCategoryId) {
      return articleCategoryId;
    }

    return null;
  };

  const categoryId = getCategoryId();

  // Handler to toggle chat visibility
  const handleChatToggle = () => {
    if (isChatOpen)
      window.messageDeletionTimeout = setTimeout(deleteMessages, 1000 * 60);
    if (!isChatOpen && window.messageDeletionTimeout)
      clearTimeout(window.messageDeletionTimeout);
    setChatOpen(!isChatOpen);
  };

  // Handler to close the chat
  const handleChatClose = () => {
    window.messageDeletionTimeout = setTimeout(deleteMessages, 1000 * 60);
    setChatOpen(false);
  };

  // @note Theme customizer handlers for development mode
  const handleThemeCustomizerToggle = () => {
    setThemeCustomizerOpen(!isThemeCustomizerOpen);
  };



  // Check if we're in development mode
  const isDevelopment = process.env.NODE_ENV === "development";

  // Check if current route is a prerender test route
  const isPrerenderTestRoute = isDevelopment && location.pathname === "/prerenderTest/home";

  // If it's a prerender test route, render it standalone without app layout
  if (isPrerenderTestRoute) {
    return (
      <LanguageProvider i18n={i18n}>
        <ThemeProvider theme={dynamicTheme}>
          <CssBaseline />
          <Suspense fallback={
            <Box
              sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                minHeight: "100vh",
              }}
            >
              <CircularProgress color="primary" />
            </Box>
          }>
            <PrerenderHome />
          </Suspense>
        </ThemeProvider>
      </LanguageProvider>
    );
  }

  // Regular app layout for all other routes
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        minHeight: "100vh",
        mb: 0,
        pb: 0,
        bgcolor: "background.default",
      }}
    >
      <TitleUpdater />
      <ScrollToTop />
      <Header active categoryId={categoryId} key={authVersion} />
      <Box sx={{ flexGrow: 1 }}>
        <Suspense fallback={
          // Use prerender fallback if available, otherwise show loading spinner
          typeof window !== "undefined" && window.__PRERENDER_FALLBACK__ ? (
            <div
              dangerouslySetInnerHTML={{
                __html: window.__PRERENDER_FALLBACK__.content,
              }}
            />
          ) : (
            <Box
              sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                minHeight: "60vh",
              }}
            >
              <CircularProgress color="primary" />
            </Box>
          )
        }>
          <CarouselProvider>
            <Routes>
              {/* Main pages using unified component */}
              <Route path="/" element={<MainPageLayout />} />
              <Route path="/aktionen" element={<MainPageLayout />} />
              <Route path="/filiale" element={<MainPageLayout />} />

              {/* Category page - Render Content in parallel */}
              <Route
                path="/Kategorie/:categoryId"
                element={<Content/>}
              />
              {/* Single product page */}
              <Route
                path="/Artikel/:seoName"
                element={<ProductDetail/>}
              />

              {/* Search page - Render Content in parallel */}
              <Route path="/search" element={<Content/>} />

              {/* Profile page */}
              <Route path="/profile" element={<ProfilePage/>} />

              {/* Payment success page for Mollie redirects */}
              <Route path="/payment/success" element={<PaymentSuccess />} />

              {/* Reset password page */}
              <Route
                path="/resetPassword"
                element={<ResetPassword/>}
              />

              {/* Admin page */}
              <Route path="/admin" element={<AdminPage/>} />

              {/* Admin Users page */}
              <Route path="/admin/users" element={<UsersPage/>} />

              {/* Admin Server Logs page */}
              <Route path="/admin/logs" element={<ServerLogsPage/>} />

              {/* Legal pages */}
              <Route path="/datenschutz" element={<Datenschutz />} />
              <Route path="/agb" element={<AGB />} />
              <Route path="/sitemap" element={<Sitemap />} />
              <Route path="/impressum" element={<Impressum />} />
              <Route
                path="/batteriegesetzhinweise"
                element={<Batteriegesetzhinweise />}
              />
              <Route path="/widerrufsrecht" element={<Widerrufsrecht />} />

              {/* Grow Tent Configurator */}
              <Route path="/Konfigurator" element={<GrowTentKonfigurator/>} />

              {/* Separate pages that are truly different */}
              <Route path="/presseverleih" element={<PresseverleihPage />} />
              <Route path="/thc-test" element={<ThcTestPage />} />

              {/* Fallback for undefined routes */}
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </CarouselProvider>
        </Suspense>
      </Box>
      {/* Conditionally render the Chat Assistant */}
      {isChatOpen && (
        <Suspense fallback={
          typeof window !== "undefined" && window.__PRERENDER_FALLBACK__ ? (
            <div
              dangerouslySetInnerHTML={{
                __html: window.__PRERENDER_FALLBACK__.content,
              }}
            />
          ) : (
            <CircularProgress size={20} />
          )
        }>
          <ChatAssistant
            open={isChatOpen}
            onClose={handleChatClose}
          />
        </Suspense>
      )}

      {/* Chat AI Assistant FAB */}
      <Tooltip title="KI-Assistent öffnen" placement="left">
        <Fab
          color="primary"
          aria-label="chat"
          size="small"
          sx={{
            position: "fixed",
            bottom: 31,
            right: 15,
          }}
          onClick={handleChatToggle} // Attach toggle handler
        >
          <SmartToyIcon sx={{ fontSize: "1.2rem" }} />
        </Fab>
      </Tooltip>

      {/* GitHub Issue Reporter FAB 
      <Tooltip title="Fehler oder Problem melden" placement="left">
        <Fab
          color="error"
          aria-label="report issue"
          size="small"
          sx={{
            position: "fixed",
            bottom: 31,
            right: 75,
          }}
          onClick={handleReportIssue}
        >
          <BugReportIcon sx={{ fontSize: "1.2rem" }} />
        </Fab>
      </Tooltip>*/}

      {/* Development-only Theme Customizer FAB */}
      {isDevelopment && (
        <Tooltip title="Theme anpassen" placement="left">
          <Fab
            color="secondary"
            aria-label="theme customizer"
            size="small"
            sx={{
              position: "fixed",
              bottom: 31,
              right: 135,
            }}
            onClick={handleThemeCustomizerToggle}
          >
            <PaletteIcon sx={{ fontSize: "1.2rem" }} />
          </Fab>
        </Tooltip>
      )}

      {/* Development-only Prerender Test FAB */}
      {isDevelopment && (
        <Tooltip title="Test Prerender Home" placement="left">
          <Fab
            color="warning"
            aria-label="prerender test"
            size="small"
            sx={{
              position: "fixed",
              bottom: 31,
              right: 75,
            }}
            onClick={() => navigate('/prerenderTest/home')}
          >
            <ScienceIcon sx={{ fontSize: "1.2rem" }} />
          </Fab>
        </Tooltip>
      )}

      {/* Development-only Theme Customizer Dialog */}
      {isDevelopment && isThemeCustomizerOpen && (
        <Suspense fallback={
          typeof window !== "undefined" && window.__PRERENDER_FALLBACK__ ? (
            <div
              dangerouslySetInnerHTML={{
                __html: window.__PRERENDER_FALLBACK__.content,
              }}
            />
          ) : (
            <CircularProgress size={20} />
          )
        }>
          <ThemeCustomizerDialog
            open={isThemeCustomizerOpen}
            onClose={() => setThemeCustomizerOpen(false)}
            theme={currentTheme}
            onThemeChange={onThemeChange}
          />
        </Suspense>
      )}

      <Footer />
    </Box>
  );
};

// Convert App to a functional component to use hooks
const App = () => {
  // @note Theme state moved to App level to provide dynamic theming
  const [currentTheme, setCurrentTheme] = useState(defaultTheme);
  const [dynamicTheme, setDynamicTheme] = useState(createTheme(defaultTheme));

  const handleThemeChange = (newTheme) => {
    setCurrentTheme(newTheme);
    setDynamicTheme(createTheme(newTheme));
  };

  // Make config globally available for language switching
  useEffect(() => {
    window.shopConfig = config;
  }, []);

  return (
    <LanguageProvider i18n={i18n}>
      <ThemeProvider theme={dynamicTheme}>
        <ProductContextProvider>
          <CategoryContextProvider>
            <CssBaseline />
              <AppContent
                currentTheme={currentTheme}
                dynamicTheme={dynamicTheme}
                onThemeChange={handleThemeChange}
              />
          </CategoryContextProvider>
        </ProductContextProvider>
      </ThemeProvider>
    </LanguageProvider>
  );
};

export default App;
export { AppContent };