import React from "react";
import { createPortal } from "react-dom";
import { observer } from "mobx-react-lite";
import { apiStore } from "../api/ApiStore/store";
import { geolocationStore } from "../stores/GeolocationStore";
import { apiBaseURL, geoBaseURL, weatherBaseURL } from "../api/apiConfig";

const StoreDebugInfo = observer(({ isVisible }) => {
  if (!isVisible) return null;

  const serializeMap = (map) => {
    if (!map || !(map instanceof Map)) return map;
    const obj = {};
    map.forEach((value, key) => {
      obj[key] = value;
    });
    return obj;
  };

  const serializeSet = (set) => {
    if (!set || !(set.forEach)) return set;
    const arr = [];
    set.forEach((value) => arr.push(value));
    return arr;
  };

  const debugData = {
    apiStore: {
      isLoading: apiStore.isLoading,
      loadingStatus: apiStore.loadingStatus,
      loadingProgress: apiStore.loadingProgress,
      context: apiStore.context,
      weather: apiStore.weather,
      route: apiStore.route,
      carrier: apiStore.carrier,
      city: apiStore.city,
      routeId: apiStore.routeId,
      routeSights: { count: apiStore.routeSights?.length ?? 0, items: apiStore.routeSights ?? [] },
      routeSightsEn: { count: apiStore.routeSightsEn?.length ?? 0 },
      routeSightsZh: { count: apiStore.routeSightsZh?.length ?? 0 },
      routeStations: { count: apiStore.routeStations?.length ?? 0, items: apiStore.routeStations ?? [] },
      routeStationsEn: { count: apiStore.routeStationsEn?.length ?? 0 },
      routeStationsZh: { count: apiStore.routeStationsZh?.length ?? 0 },
      orderedRouteStations: { count: apiStore.orderedRouteStations?.length ?? 0 },
      sightArticlesIds: serializeMap(apiStore.sightArticlesIds),
      sightArticles: serializeMap(apiStore.sightArticles),
      media: { count: apiStore.media?.length ?? 0, items: apiStore.media ?? [] },
    },
    geolocationStore: {
      contextData: geolocationStore.contextData,
      nearestSightId: geolocationStore.nearestSightId,
      selectedSightId: geolocationStore.selectedSightId,
      selectedLanguage: geolocationStore.selectedLanguage,
      selectedLanguageRight: geolocationStore.selectedLanguageRight,
      nearestStationId: geolocationStore.nearestStationId,
      currentStationId: geolocationStore.currentStationId,
      isLeftWidgetOpen: geolocationStore.isLeftWidgetOpen,
      isTransferWidgetOpen: geolocationStore.isTransferWidgetOpen,
      isGovernorWidgetOpen: geolocationStore.isGovernorWidgetOpen,
      isManualSelection: geolocationStore.isManualSelection,
      isRightWidgetSelectorOpen: geolocationStore.isRightWidgetSelectorOpen,
      activeClusterId: geolocationStore.activeClusterId,
      isLoading: geolocationStore.isLoading,
      error: geolocationStore.error,
    },
  };

  return createPortal(
    <div
      style={{
        position: "fixed",
        inset: 0,
        backgroundColor: "rgba(0,0,0,0.85)",
        zIndex: 2147483647,
        overflow: "auto",
        padding: "20px",
        boxSizing: "border-box",
      }}
    >
      <div
        style={{
          color: "#00ff00",
          fontFamily: "monospace",
          fontSize: "12px",
          whiteSpace: "pre-wrap",
          wordBreak: "break-all",
        }}
      >
        <div
          style={{
            color: "#ffffff",
            fontSize: "14px",
            fontWeight: "bold",
            marginBottom: "8px",
          }}
        >
          Store Debug (F4 — закрыть)
        </div>
        <div
          style={{
            color: "#ffff00",
            fontSize: "12px",
            marginBottom: "16px",
            lineHeight: "1.6",
          }}
        >
          <div>API:     {apiBaseURL}</div>
          <div>GEO:     {geoBaseURL}</div>
          <div>WEATHER: {weatherBaseURL}</div>
        </div>
        {JSON.stringify(debugData, null, 2)}
      </div>
    </div>,
    document.body
  );
});

export default StoreDebugInfo;
