import { useEffect, useRef, lazy, Suspense, type JSX } from "react";
import { useConfigStore } from "./stores/config-store";
import { useDevValue } from "./stores/dev-overrides-store";
import { SpinnerIcon } from "../shared/icons";

import { Tabs } from "../shared/tabs";
import { Sidebar } from "./components/layout/Sidebar";
import { Titlebar } from "./components/layout/Titlebar";
import { AboutPanel } from "./components/about/AboutPanel";
import { LlmPanel } from "./components/llm/LlmPanel";
import { WhisperPanel } from "./components/whisper/WhisperPanel";
import { ShortcutsPanel } from "./components/shortcuts/ShortcutsPanel";
import { PermissionsPanel } from "./components/permissions/PermissionsPanel";
import { GeneralPanel } from "./components/general/GeneralPanel";
import { TranscriptionsPanel } from "./components/transcriptions/TranscriptionsPanel";
import { DictionaryPanel } from "./components/dictionary/DictionaryPanel";
import { ScrollButtons } from "./components/ui/ScrollButtons";
import { useTheme } from "./hooks/use-theme";
import { usePerformance } from "./hooks/use-performance";
import { I18nProvider } from "./i18n-context";
import { OnboardingOverlay } from "./components/onboarding/OnboardingOverlay";
import { useOnboardingStore } from "./components/onboarding/use-onboarding-store";
import { useSetupReady } from "./hooks/use-setup-ready";

// Lazy-load DevPanel so the entire module tree is excluded from production bundles.
// In production, import.meta.env.DEV is false and this code path is dead-code-eliminated.
const LazyDevPanel = import.meta.env.DEV
  ? lazy(() => import("./components/dev/DevPanel").then((m) => ({ default: m.DevPanel })))
  : null;

function DevPanelWrapper() {
  if (!LazyDevPanel) return null;
  return (
    <Suspense fallback={null}>
      <LazyDevPanel />
    </Suspense>
  );
}

const PANELS: Record<string, () => JSX.Element | null> = {
  [Tabs.GENERAL]: GeneralPanel,
  [Tabs.SPEECH]: WhisperPanel,
  [Tabs.AI_ENHANCEMENT]: LlmPanel,
  [Tabs.DICTIONARY]: DictionaryPanel,
  [Tabs.PERMISSIONS]: PermissionsPanel,
  [Tabs.SHORTCUTS]: ShortcutsPanel,
  [Tabs.TRANSCRIPTIONS]: TranscriptionsPanel,
  [Tabs.ABOUT]: AboutPanel,
  ...(import.meta.env.DEV ? { [Tabs.DEV]: DevPanelWrapper } : {}),
};

export function App() {
  const loading = useConfigStore((s) => s.loading);
  const activeTab = useConfigStore((s) => s.activeTab);
  const loadConfig = useConfigStore((s) => s.loadConfig);
  const theme = useConfigStore((s) => s.config?.theme);
  const onboardingCompleted = useConfigStore((s) => s.config?.onboardingCompleted);
  const setupReady = useSetupReady();
  const forceOpen = useOnboardingStore((s) => s.forceOpen);
  const contentRef = useRef<HTMLElement>(null);

  useTheme(theme);

  const rawReduceAnimations = useConfigStore((s) => s.config?.reduceAnimations);
  const rawReduceVisualEffects = useConfigStore((s) => s.config?.reduceVisualEffects);
  const reduceAnimations = useDevValue("reduceAnimations", rawReduceAnimations);
  const reduceVisualEffects = useDevValue("reduceVisualEffects", rawReduceVisualEffects);
  usePerformance(reduceAnimations, reduceVisualEffects);

  useEffect(() => {
    loadConfig();
  }, [loadConfig]);

  useEffect(() => {
    window.voxApi.navigation.onNavigateTab((tab) => {
      if (tab === "onboarding") {
        const store = useOnboardingStore.getState();
        store.reset();
        store.setForceOpen(true);
        return;
      }
      useConfigStore.getState().setActiveTab(tab);
    });
  }, []);

  if (loading) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-text-secondary text-sm" style={{ gap: "12px" }}>
        <SpinnerIcon width={32} height={32} style={{ animation: "spin 1s linear infinite" }} />
        {/* Renders before I18nProvider — hardcoded is intentional */}
        {/* eslint-disable-next-line i18next/no-literal-string */}
        <span>Loading…</span>
      </div>
    );
  }

  const Panel = PANELS[activeTab] ?? WhisperPanel;

  return (
    <I18nProvider>
      <div className="flex h-full">
        <Sidebar />
        <div className="flex flex-col flex-1 min-w-0">
          <Titlebar />
          <main className="content" ref={contentRef}>
            <Panel />
          </main>
          <ScrollButtons containerRef={contentRef} />
        </div>
      </div>
      {((onboardingCompleted === false && !setupReady) || forceOpen) && <OnboardingOverlay />}
    </I18nProvider>
  );
}
