import { observer } from "mobx-react-lite";
import { testingModeStore, authStore } from "@shared";
import { useEffect } from "react";

export const TestingModeBanner = observer(() => {
  const { isAuthenticated } = authStore;

  useEffect(() => {
    if (!isAuthenticated) {
      testingModeStore.stopPolling();
      return;
    }
    testingModeStore.startPolling();
    return () => {
      testingModeStore.stopPolling();
    };
  }, [isAuthenticated]);

  if (!testingModeStore.isEnabled) return null;

  return (
    <div
      style={{
        position: "fixed",
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 2147483647,
        backgroundColor: "#d32f2f",
        color: "#fff",
        textAlign: "center",
        padding: "12px 16px",
        fontWeight: 700,
        fontSize: "14px",
        letterSpacing: "0.05em",
        boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
        pointerEvents: "none",
      }}
    >
      ПРОВОДИТСЯ ТЕСТИРОВАНИЕ. ПРОСЬБА НЕ ВЗАИМОДЕЙСТВОВАТЬ С ПАНЕЛЬЮ
      АДМИНИСТРИРОВАНИЯ
    </div>
  );
});