import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { RTL_LANGUAGES } from "./lib/rtlLanguages";
import { Header } from "./features/Header";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { BurgerMenu } from "./features/BurgerMenu";
import { Home } from "./pages/Home";
import { Login } from "./pages/Login";
import { About } from "./pages/About";
import { Settings } from "./pages/Settings";
import { useVpnStore } from "./store/useVpnStore";
import { useTrafficStore } from "./store/useTrafficStore";
import { useNodesStore } from "./store/useNodesStore";
import { useAuthStore } from "./store/useAuthStore";
import { ThemeProvider, useTheme } from "./ThemeProvider";
import { SplashScreen } from "./features/SplashScreen";
import { NetrunnerMatrix } from "matrix-engine/NetrunnerMatrix";
import { useSettingsStore } from "./store/useSettingsStore";
import { cn } from "@/lib/utils";
import { TelegramWeb } from "./pages/TelegramWeb";
import { UpdateChecker } from "./features/UpdateChecker";
import { ErrorBoundary } from "./features/ErrorBoundary";

function AppContent() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { i18n } = useTranslation();

  // Арабский/фарси — письмо справа налево, меняем direction всего документа
  // реактивно на смену языка (а не только при старте), т.к. LanguageToggle
  // переключает язык без перезагрузки страницы.
  useEffect(() => {
    const lang = (i18n.language || "en").split("-")[0];
    document.documentElement.dir = RTL_LANGUAGES.includes(lang) ? "rtl" : "ltr";
    document.documentElement.lang = i18n.language || "en";
  }, [i18n.language]);

  const initVpn = useVpnStore((state) => state.init);
  const initStat = useTrafficStore((state) => state.init);
  const loadNodes = useNodesStore((state) => state.loadNodes);
  const vpnStatus = useVpnStore((state) => state.status);
  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
  const { isDark } = useTheme();

  const reduceMotion = useSettingsStore((state) => state.reduceMotion);

  // Сплеш — чисто декоративный, при reduce animations в нём нет смысла.
  const [showSplash, setShowSplash] = useState(() => !reduceMotion);
  // Состояние именно для управления глазами, чтобы они не исчезли мгновенно
  const [shouldShowEyes, setShouldShowEyes] = useState(() => !reduceMotion);

  useEffect(() => {
    initVpn();
    initStat();
    // Подтягиваем список серверов с бэкенда при старте.
    loadNodes();
  }, []);

  const handleSplashComplete = () => {
    setShouldShowEyes(false); // Сначала закрываем глаза
    setTimeout(() => {
      setShowSplash(false); // Потом убираем оверлей сплеша
    }, 500); // Небольшая задержка для плавности анимации век
  };

  return (
    <BrowserRouter>
      {/* Контейнер-база. Цвет совпадает с фоном матрицы, чтобы не было */}
      {/* серой "просветки" тёмного фона под светлой темой, когда матрица отключена */}
      <div
        className={cn(
          "fixed inset-0 overflow-hidden",
          isDark ? "bg-[#0a0a0c]" : "bg-[#fafafc]",
        )}
      >
        {/* Матрица — всегда на самом нижнем слое */}
        {!reduceMotion && (
          <div className="absolute inset-0 -z-20">
            <NetrunnerMatrix
              isSecure={vpnStatus === "connected"}
              isDarkMode={isDark}
              showEyes={shouldShowEyes}
            />
          </div>
        )}

        {/* Сплеш-скрин (убрали bg-[#0a0a0c], чтобы градиент самого сплэша работал корректно) */}
        {showSplash && (
          <div className="absolute inset-0 z-[100]">
            <SplashScreen onComplete={handleSplashComplete} />
          </div>
        )}

        {/* Основной интерфейс приложения с эффектом стекла */}
        <div
          className={cn(
            "relative z-10 flex flex-col h-full w-full bg-background/75 backdrop-blur-md transition-opacity duration-1000",
            showSplash ? "opacity-0 pointer-events-none" : "opacity-100",
          )}
        >
          <Header onMenuClick={() => setIsMenuOpen(!isMenuOpen)} />

          <BurgerMenu
            isOpen={isMenuOpen}
            onClose={() => setIsMenuOpen(false)}
          />

          <UpdateChecker />

          <main className="flex-1 relative flex flex-col items-center justify-center overflow-hidden">
            <Routes>
              <Route path="/" element={isLoggedIn ? <Home /> : <Login />} />
              <Route path="/settings" element={<Settings />} />
              <Route path="/about" element={<About />} />
              <Route path="/telegram" element={<TelegramWeb />} />
            </Routes>
          </main>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default function App() {
  return (
    <ErrorBoundary>
      <ThemeProvider>
        <AppContent />
      </ThemeProvider>
    </ErrorBoundary>
  );
}
