/* eslint-disable */
/**
 * Переключатель версий desktop UI.
 *   "new" → NEO        — handoff Pro Trading (HandoffApp), основной UI
 *   "old" → OG Terminal — оригинальный App (до мобильных фич)
 *
 * Floating-кнопка показывается ТОЛЬКО на старой версии (OG) — у NEO свой
 * переключатель в сайдбаре. Легаси-значения ("legacy-new"/"mid") маппятся в "new".
 */
(function () {
const { useState } = React;

const STORAGE_KEY = "alpha_desktop_ui";

const getMode = () => {
  try {
    const v = localStorage.getItem(STORAGE_KEY) || "new";
    return v === "old" ? "old" : "new";
  } catch { return "new"; }
};
const setMode = (m) => {
  try { localStorage.setItem(STORAGE_KEY, m === "old" ? "old" : "new"); } catch {}
};

// CSS-изоляция: desktop-handoff.css задаёт глобальные правила (#root{overflow:hidden},
// body{font-family:Inter}, свои .card/.btn/.tbl) — они ломают вёрстку и скролл OG.
// В режиме OG выключаем этот стиль целиком; NEO включает обратно.
const applyCssIsolation = () => {
  try {
    const off = getMode() === "old";
    document.querySelectorAll('link[href*="desktop-handoff.css"]').forEach(l => { l.disabled = off; });
  } catch {}
};
applyCssIsolation();
document.addEventListener("DOMContentLoaded", applyCssIsolation);

const UiToggle = () => {
  const [open, setOpen] = useState(false);
  const mode = getMode();
  const isMobile = window.matchMedia("(max-width: 640px)").matches;
  // NEO имеет свой переключатель в сайдбаре — floating нужен только на OG.
  // НО: если HandoffApp не загрузился (например, синтакс-ошибка в бандле),
  // рендерится фолбэк без сайдбар-переключателя — тогда показываем floating
  // даже в режиме "new", чтобы юзер всегда мог уйти на стабильную OG.
  const handoffAlive = !!window.HandoffApp;
  if (isMobile || (mode === "new" && handoffAlive)) return null;

  const switchTo = (m) => {
    if (m === mode) { setOpen(false); return; }
    setMode(m);
    setTimeout(() => window.location.reload(), 100);
  };

  return (
    <>
      <button title="Сменить версию UI"
        style={{
          position: "fixed", bottom: 18, right: 18, width: 46, height: 46, borderRadius: 23,
          background: "linear-gradient(135deg, #14B8A6, #26A269)", border: 0, color: "#fff",
          cursor: "pointer", boxShadow: "0 8px 24px rgba(20,184,166,.4)", display: "grid",
          placeItems: "center", fontSize: 20, zIndex: 9999,
        }}
        onClick={() => setOpen(o => !o)}>⇄</button>
      {open && (
        <div style={{
          position: "fixed", bottom: 76, right: 18, width: 250, background: "#11151B",
          border: "1px solid rgba(255,255,255,.1)", borderRadius: 12, padding: 14,
          boxShadow: "0 24px 60px rgba(0,0,0,.6)", zIndex: 9999, color: "#ECEDEE", fontSize: 13,
        }}>
          <div style={{ fontWeight: 600, marginBottom: 10 }}>Версия интерфейса</div>
          <button onClick={() => switchTo("new")}
            style={{ display: "block", width: "100%", textAlign: "left", padding: "10px 12px", marginBottom: 6,
              background: "#161B23", border: "1px solid rgba(20,184,166,.4)", borderRadius: 8,
              color: "#5EEAD4", cursor: "pointer" }}>
            <div style={{ fontWeight: 700 }}>NEO</div>
            <div style={{ fontSize: 11, opacity: .75 }}>Pro Trading · Копи-трейдинг · 9 разделов</div>
          </button>
          <button onClick={() => switchTo("old")}
            style={{ display: "block", width: "100%", textAlign: "left", padding: "10px 12px",
              background: "rgba(20,184,166,.15)", border: "1px solid rgba(20,184,166,.4)", borderRadius: 8,
              color: "#5EEAD4", cursor: "pointer" }}>
            <div style={{ fontWeight: 700 }}>✓ OG Terminal</div>
            <div style={{ fontSize: 11, opacity: .75 }}>Классика · Топ-табы · Equity</div>
          </button>
        </div>
      )}
    </>
  );
};

const mountToggle = () => {
  if (window.matchMedia("(max-width: 640px)").matches) return;
  let host = document.getElementById("ui-toggle-host");
  if (!host) {
    host = document.createElement("div");
    host.id = "ui-toggle-host";
    document.body.appendChild(host);
  }
  ReactDOM.createRoot(host).render(<UiToggle/>);
};
// Монтируем с задержкой — даём всем babel-бандлам успеть исполниться,
// чтобы проверка window.HandoffApp была достоверной.
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", () => setTimeout(mountToggle, 400));
} else {
  setTimeout(mountToggle, 400);
}

window.AlphaUiMode = { get: getMode, set: setMode };
})();