/* global React, ReactDOM, WebApp, PhoneApp, BrandMark, Icon, useStore */
const { useState } = React;

function initialMode() {
  try {
    const m = new URLSearchParams(location.search).get("mode");
    if (m === "web" || m === "phone" || m === "both") return m;
  } catch (e) {}
  return "both";
}

function Launcher() {
  const store = useStore();
  const [mode, setMode] = useState(initialMode); // web | phone | both
  const [theme, setTheme] = useState("dark");
  function toggleTheme() { const t = theme === "dark" ? "light" : "dark"; setTheme(t); document.documentElement.setAttribute("data-theme", t); }
  return (
    <div className="launcher">
      <div className="lx-top">
        <a className="lx-back" href="/demo" title="Назад в демо"><Icon name="arrow" size={14} /></a>
        <div className="lx-brand"><span className="lx-mk"><BrandMark size={20} /></span><div><b>Сигнал</b><small>демо · два приложения</small></div></div>
        <div className="lx-seg">
          <button className={mode==="web"?"on":""} onClick={()=>setMode("web")}><Icon name="chart" size={15} /><span>Web-панель</span></button>
          <button className={mode==="phone"?"on":""} onClick={()=>setMode("phone")}><Icon name="phone" size={15} /><span>Телефон</span></button>
          <button className={mode==="both"?"on":""} onClick={()=>setMode("both")}><Icon name="layers" size={15} /><span>Оба вместе</span></button>
        </div>
        <div className="lx-actions">
          <span className="lx-hint">{mode==="both"?"действия синхронизируются между приложениями":"единое состояние · сохраняется"}</span>
          <button className="wa-ibtn" onClick={toggleTheme} title="Тема" style={{ width: 36, height: 36 }}><Icon name={theme==="dark"?"sun":"moon"} size={16} /></button>
          <button className="lx-reset" onClick={()=>{ if(confirm("Сбросить демо к исходному состоянию?")) store.reset(); }}><Icon name="arrow" size={14} />Сброс</button>
        </div>
      </div>
      <div className={`lx-stage ${mode}`}>
        <div className="lx-web-wrap"><WebApp /></div>
        <div className="lx-phone-wrap">
          <div className="device"><div className="device-notch"></div><div className="device-screen"><PhoneApp /></div></div>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Launcher />);