import React, { useEffect, useRef } from 'react';
import {
  HashRouter as Router,
  Routes,
  Route,
  useLocation,
  useNavigate,
} from 'react-router-dom';
import { LuMenu } from 'react-icons/lu';

import { recomaze_ai_personalization_env } from './env';
import { SidebarProvider, useSidebar } from './context/sidebar.context';
import Support from './pages/Support';
import SideBar from './components/layout/SideBar';
import Customization from './pages/Customization';
import ImportProducts from './pages/ImportProducts';
import { useAppStateContext } from './context/user.data.context';
import { isCopilotEnabled } from './service/copilot/access';
import Pricing from './pages/Pricing';
import AgenticFeedPage from './pages/AgenticFeed';
import AiVisibility from './pages/AiVisibility';
import AiVisibilityContents from './pages/AiVisibilityContents';
import AiVisibilityPageTemplates from './pages/AiVisibilityPageTemplates';
import ProductImprovements from './pages/ProductImprovements';
import LlmTxtPage from './pages/LlmTxt';
import AgentAnalytics from './pages/AgentAnalytics';
import KnowledgeBase from './pages/KnowledgeBase';
import ContentGenerator from './pages/ContentGenerator';
import ContentChecker from './pages/ContentChecker';
import OptimizedTextPages from './pages/OptimizedTextPages';
import PromptTemplatesPage from './pages/PromptTemplatesPage';
import Campaigns from './pages/Campaigns';
import CampaignCreate from './pages/CampaignCreate';
import CampaignDetail from './pages/CampaignDetail';
import CatalogQuality from './pages/CatalogQuality';
import Connectors from './pages/Connectors';
import Dashboard from './pages/Dashboard';
import CompanyId from './pages/CompanyId';
import SignupMirror from './pages/SignupMirror';
import LaunchDiscount from './pages/LaunchDiscount';
import OnboardingChain from './pages/OnboardingChain';
import { Spinner } from './components/ui/Spinner';
import { useAccessControl } from './hooks/useAccessControl';
import { signupMirrorRedirect } from './lib/signup-mirror/access';
import PreviewBanner from './components/PreviewBanner';
import { updatePreviewMode } from './service/user/user.service';
import VerificationModal from './components/VerificationModal';
import ErrorBoundary from './components/ErrorBoundary';
import { CopilotPanel } from './components/copilot/CopilotPanel';

const BARE_ROUTES = ['/signup-mirror', '/launch-discount', '/onboarding-chain'];

const MobileTopBar = (): JSX.Element => {
  const { setMobileOpen } = useSidebar();
  const logo = recomaze_ai_personalization_env?.plugin_icon;

  return (
    <div className="sticky top-0 z-30 flex items-center gap-2 border-b border-gray-200 bg-white px-4 py-2 md:hidden">
      {/* A bare hamburger read as decoration, so the only way back to the
          navigation went unnoticed. The trigger names itself instead. */}
      <button
        type="button"
        onClick={() => setMobileOpen(true)}
        aria-label="Open navigation"
        className="inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 text-sm font-medium text-gray-700 outline-none hover:bg-gray-50 focus:outline-none"
      >
        <LuMenu className="h-5 w-5" aria-hidden />
        Menu
      </button>
      <span className="ml-auto flex items-center gap-2">
        {logo ? (
          <img src={logo} alt="Recomaze" className="h-6 w-6 rounded" />
        ) : null}
        <span className="text-sm font-semibold text-gray-900">Recomaze</span>
      </span>
    </div>
  );
};

// Everything that needs router hooks (useLocation / useNavigate) lives here,
// inside <Router>. This is also where the Signup Mirror resume redirect fires
// and where the full-screen onboarding routes bypass the app chrome.
const AppShell = (): JSX.Element => {
  const { token, clientId, user, setUser } = useAppStateContext();
  const { canAccessAllRoutes, canSeeBulkUpload } = useAccessControl(user);
  const location = useLocation();
  const navigate = useNavigate();
  const resumedRef = useRef(false);

  useEffect(() => {
    if (resumedRef.current || !user) return;
    if (location.pathname !== '/' && location.pathname !== '/dashboard') return;
    const target = signupMirrorRedirect(user);
    if (target) {
      resumedRef.current = true;
      navigate(target, { replace: true });
    }
  }, [user, location.pathname, navigate]);

  const handleActivatePreview = async () => {
    if (!token) return;
    try {
      await updatePreviewMode({ token, preview_mode: true });
      if (user) setUser({ ...user, preview_mode: true });
    } catch (error) {
      console.error('Error enabling preview mode:', error);
    }
  };

  const handleDeactivatePreview = async () => {
    if (!token) return;
    try {
      await updatePreviewMode({ token, preview_mode: false });
      if (user) setUser({ ...user, preview_mode: false });
    } catch (error) {
      console.error('Error disabling preview mode:', error);
    }
  };

  // A fresh install lands on the app root while /me is still in flight, so
  // rendering straight away painted the dashboard and only then jumped to the
  // Mirror. Hold the shell until the account is known and the merchant sees
  // one screen: the one they belong on.
  const awaitingResumeDecision: boolean =
    !!token &&
    !user &&
    (location.pathname === '/' || location.pathname === '/dashboard');
  if (awaitingResumeDecision) {
    return (
      <div
        id="recomaze-app-container"
        className="relative flex items-center justify-center bg-white"
      >
        <Spinner className="h-6 w-6 text-gray-400" />
      </div>
    );
  }

  // Full-screen onboarding routes: no sidebar, no banners, no copilot. They
  // still take the pinned shell, so they fill the viewport instead of leaving
  // dead space under a short screen - and, since the admin stylesheet stops
  // the document itself from scrolling, they carry their own scroll or a tall
  // screen would be unreachable.
  if (BARE_ROUTES.includes(location.pathname)) {
    return (
      <div
        id="recomaze-app-container"
        className="relative block overflow-y-auto bg-white"
      >
        <ErrorBoundary>
          <Routes>
            <Route path="/signup-mirror" element={<SignupMirror />} />
            <Route path="/launch-discount" element={<LaunchDiscount />} />
            <Route path="/onboarding-chain" element={<OnboardingChain />} />
          </Routes>
        </ErrorBoundary>
      </div>
    );
  }

  return (
    <div
      id="recomaze-app-container"
      // No w-full here: on a fixed element `width: 100%` wins over `right: 0`,
      // which pushed the shell (and the copilot with it) off the right edge.
      className="relative flex overflow-hidden bg-white"
      // Pinned to the viewport (position: fixed) by the admin stylesheet in
      // Recomaze_Admin::enqueue_styles, so scrolling the WordPress admin menu
      // never drags the app off-screen. The app owns its own scroll: main
      // scrolls internally and the copilot stays a real right-hand column.
    >
      <SideBar />
      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
        <MobileTopBar />
        <main
          id="main"
          className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden pb-16"
        >
          <VerificationModal />
          <div className="mx-auto w-full max-w-[1600px] px-6 pt-6 md:px-10 md:pt-10">
            <PreviewBanner
              token={token}
              domain={recomaze_ai_personalization_env?.domain ?? null}
              previewMode={user?.preview_mode ?? false}
              documentationReady={user?.first_documentation_created ?? false}
              onActivatePreview={handleActivatePreview}
              onDeactivatePreview={handleDeactivatePreview}
            />
          </div>
          {!canAccessAllRoutes ? (
            <Routes>
              <Route path="/" element={<Pricing />}></Route>
            </Routes>
          ) : (
            <ErrorBoundary>
              <Routes>
                <Route path="/" element={<Dashboard />} />
                <Route path="/dashboard" element={<Dashboard />} />
                <Route path="/customization" element={<Customization />} />
                <Route path="/catalog-quality" element={<CatalogQuality />} />
                <Route path="/agent-analytics" element={<AgentAnalytics />} />
                <Route path="/agentic-feed" element={<AgenticFeedPage />} />
                <Route path="/connectors" element={<Connectors />} />
                <Route path="/company-id" element={<CompanyId />} />
                <Route path="/ai-visibility" element={<AiVisibility />} />
                <Route
                  path="/ai-visibility/contents"
                  element={<AiVisibilityContents />}
                />
                <Route
                  path="/ai-visibility/page-templates"
                  element={<AiVisibilityPageTemplates />}
                />
                <Route path="/llm" element={<LlmTxtPage />} />
                <Route
                  path="/product-improvements"
                  element={
                    canSeeBulkUpload ? <ProductImprovements /> : <Pricing />
                  }
                />
                <Route
                  path="/content-generator"
                  element={<ContentGenerator />}
                />
                <Route
                  path="/content-generator/prompt-templates"
                  element={<PromptTemplatesPage />}
                />
                <Route
                  path="/content-generator/content-checker"
                  element={<ContentChecker />}
                />
                <Route
                  path="/content-generator/optimized-pages"
                  element={<OptimizedTextPages />}
                />
                <Route path="/campaigns" element={<Campaigns />} />
                <Route path="/campaigns/create" element={<CampaignCreate />} />
                <Route path="/campaigns/:id" element={<CampaignDetail />} />
                <Route path="/knowledge-base" element={<KnowledgeBase />} />
                <Route path="/pricing" element={<Pricing />} />
                <Route path="/import" element={<ImportProducts />} />
                <Route path="/support" element={<Support />} />
              </Routes>
            </ErrorBoundary>
          )}
        </main>
      </div>
      {isCopilotEnabled(clientId) ? (
        <CopilotPanel token={token as string} clientId={clientId as string} />
      ) : null}
    </div>
  );
};

const App = (): JSX.Element => {
  const {
    token,
    clientId,
    user,
    setToken,
    setClientId,
    fetchUser,
    setCanUseWpApi,
  } = useAppStateContext();

  useEffect(() => {
    if (!token && recomaze_ai_personalization_env?.auth?.token)
      setToken(recomaze_ai_personalization_env?.auth?.token);
    if (!clientId && recomaze_ai_personalization_env?.auth?.client_id)
      setClientId(recomaze_ai_personalization_env?.auth?.client_id);
    if (!user && token) fetchUser();
    if (!recomaze_ai_personalization_env?.can_use_wp_api) setCanUseWpApi(false);
  }, [token, clientId]);

  return (
    <Router>
      <SidebarProvider>
        <AppShell />
      </SidebarProvider>
    </Router>
  );
};

export default App;