function App() {
  const { useState, useEffect, useRef } = React;
  const [lang, setLang]       = useState(() => localStorage.getItem("srv-lang")  || "ca");
  const [screen, setScreen]   = useState("loading");
  const [route, setRoute]     = useState(() => localStorage.getItem("srv-route") || "dashboard");
  const [demoOpen, setDemoOpen] = useState(false);
  const [subInfo, setSubInfo]   = useState(null);   // { status, daysUntilExpiry, daysSinceExpiry, ... }
  const [clientInfo, setClientInfo] = useState(null); // { id, name, ... }
  const pollRef = useRef(null);

  useEffect(() => { localStorage.setItem("srv-lang",  lang);  }, [lang]);
  useEffect(() => { localStorage.setItem("srv-route", route); }, [route]);

  const Sidebar     = window.Sidebar;
  const Tabbar      = window.Tabbar;
  const Login       = window.Login;
  const Expired     = window.Expired;
  const Dashboard   = window.Dashboard;
  const Reserves    = window.Reserves;
  const Carta       = window.Carta;
  const Experiences = window.Experiences;
  const Settings    = window.Settings;
  const DemoBar     = window.DemoBar;
  const devMode     = (window.SRV_CONFIG || {}).DEV_MODE === true;

  // Resolve session → profile → client → subscription, then set screen.
  async function resolveSession() {
    const session = await window.SVX.getSession();
    if (!session) { setScreen("login"); return; }

    const client = await window.SVX.getCurrentClient();
    if (!client)  { setScreen("login"); return; }

    setClientInfo(client);
    const sub = await window.SVX.subscription.checkStatus(client.id);
    setSubInfo(sub);
    setScreen(sub.canUseIntranet ? "app" : "expired");
  }

  // Poll subscription status every 60 s while screen === 'app'
  function startPoll(clientId) {
    stopPoll();
    pollRef.current = setInterval(async function () {
      const sub = await window.SVX.subscription.checkStatus(clientId);
      setSubInfo(sub);
      if (!sub.canUseIntranet) {
        setScreen("expired");
        stopPoll();
      }
    }, 60000);
  }

  function stopPoll() {
    if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
  }

  // Initial check on mount
  useEffect(() => {
    resolveSession();
    // Listen for realtime push from subscription.requireActive()
    function onExpired(e) { setSubInfo(e.detail); setScreen("expired"); stopPoll(); }
    window.addEventListener("svx:subscription-expired", onExpired);
    return () => {
      window.removeEventListener("svx:subscription-expired", onExpired);
      stopPoll();
    };
  }, []);

  // Start/stop poll when screen changes
  useEffect(() => {
    if (screen === "app" && clientInfo) {
      startPoll(clientInfo.id);
    } else {
      stopPoll();
    }
  }, [screen, clientInfo]);

  async function handleLogin() {
    window.SVX.clearCache();
    await resolveSession();
  }

  function handleLogout() {
    window.SVX.auth.logout();
    window.SVX.clearCache();
    setSubInfo(null);
    setClientInfo(null);
    stopPoll();
    setScreen("login");
  }

  const T = window.T || {};
  const tApp = (T[lang] || T["ca"] || {});

  // ── Banner copy ──────────────────────────────────────────────────────────
  const BANNER = {
    ca: (n) => `La teva subscripció venç en ${n} ${n === 1 ? "dia" : "dies"}. Renova →`,
    es: (n) => `Tu suscripción vence en ${n} día${n === 1 ? "" : "s"}. Renueva →`,
  };
  const bannerFn = BANNER[lang] || BANNER.ca;

  // ── WA Renew URL ─────────────────────────────────────────────────────────
  const waNumber = ((window.SRV_CONFIG || {}).WA_SUPPORT_NUMBER || "").replace(/\D/g, "");
  const clientName = clientInfo ? clientInfo.name : "";
  const waText = encodeURIComponent(
    lang === "es"
      ? `Quiero renovar ServiaOS para mi local ${clientName}`
      : `Vull renovar ServiaOS per al meu local ${clientName}`
  );
  const waUrl = waNumber ? `https://wa.me/${waNumber}?text=${waText}` : "#";

  // ── Loading ──────────────────────────────────────────────────────────────
  if (screen === "loading") return (
    <div style={{display:"flex",alignItems:"center",justifyContent:"center",height:"100vh",color:"var(--ink-3)",fontFamily:"var(--font-sans)"}}>
      <i className="ph ph-spinner" style={{fontSize:32,animation:"spin 0.8s linear infinite"}}></i>
    </div>
  );

  if (screen === "login") return (
    <>
      <Login lang={lang} setLang={setLang} onLogin={handleLogin} />
      {devMode && <DemoBar open={demoOpen} setOpen={setDemoOpen} setScreen={setScreen} setRoute={setRoute} />}
    </>
  );

  if (screen === "expired") return (
    <>
      <Expired
        lang={lang}
        setLang={setLang}
        daysSinceExpiry={subInfo ? subInfo.daysSinceExpiry : null}
        waUrl={waUrl}
        clientName={clientName}
      />
      {devMode && <DemoBar open={demoOpen} setOpen={setDemoOpen} setScreen={setScreen} setRoute={setRoute} />}
    </>
  );

  // screen === 'app'
  const showBanner = subInfo && subInfo.daysUntilExpiry !== null && subInfo.daysUntilExpiry <= 7;

  return (
    <div className="srv-shell" data-screen-label={"App · " + route}>
      <Sidebar route={route} setRoute={setRoute} lang={lang} setLang={setLang} onLogout={handleLogout} clientName={clientName} />
      <main className="srv-main">
        {showBanner && (
          <div style={{
            background:   "var(--warning-soft, #FEF9C3)",
            color:        "var(--terra-700, #B45309)",
            fontSize:     13,
            padding:      "8px 20px",
            display:      "flex",
            alignItems:   "center",
            justifyContent: "space-between",
            borderBottom: "1px solid var(--line, #E5E5E5)",
            flexShrink:   0,
          }}>
            <span>{bannerFn(subInfo.daysUntilExpiry)}</span>
            <a href={waUrl} target="_blank" rel="noopener noreferrer"
               style={{color:"inherit",fontWeight:600,textDecoration:"none",whiteSpace:"nowrap",marginLeft:12}}>
              {lang === "es" ? "Renovar" : "Renova"}
            </a>
          </div>
        )}
        {route === "dashboard"   && <Dashboard   lang={lang} onOpenReserves={() => setRoute("reserves")} />}
        {route === "reserves"    && <Reserves    lang={lang} />}
        {route === "carta"       && <Carta       lang={lang} />}
        {route === "experiences" && <Experiences lang={lang} />}
        {route === "settings"    && <Settings    lang={lang} onExpire={() => setScreen("expired")} />}
      </main>
      <Tabbar route={route} setRoute={setRoute} lang={lang} />
      {devMode && <DemoBar open={demoOpen} setOpen={setDemoOpen} setScreen={setScreen} setRoute={setRoute} />}
    </div>
  );
}

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