/* global React, ReactDOM, Login, OperatorShell, AdminShell, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakSlider, DATA */
// ============================================================
// App root — auth → workspace, thème, tweaks
// ============================================================
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#00e08a",
  "bgVibe": "Bleu nuit",
  "cardMin": 230,
  "remoteLayout": "Cartes",
  "showIsland": true
}/*EDITMODE-END*/;

const ACCENTS = {
  "#00e08a": "#22d3ee", // vert → cyan secondary
  "#22d3ee": "#00e08a",
  "#7c5cff": "#22d3ee",
  "#f5b942": "#00e08a",
};
const VIBES = {
  "Bleu nuit": { bg: "#0a0d14", bg2: "#0e121c", surface: "#121826", s2: "#171f30", s3: "#1d2740", border: "#232c42", border2: "#2c3754" },
  "Noir pur":  { bg: "#050506", bg2: "#0a0a0c", surface: "#101013", s2: "#16161a", s3: "#1d1d22", border: "#202024", border2: "#2c2c32" },
  "Anthracite":{ bg: "#12110d", bg2: "#161410", surface: "#1c1a14", s2: "#22201a", s3: "#2a2820", border: "#2e2b22", border2: "#3a362b" },
};

function applyTheme(t, light) {
  const r = document.documentElement.style;
  const v = VIBES[t.bgVibe] || VIBES["Bleu nuit"];
  const a = t.accent, a2 = ACCENTS[a] || "#22d3ee";
  if (!light) {
    r.setProperty("--bg", v.bg); r.setProperty("--bg-2", v.bg2);
    r.setProperty("--surface", v.surface); r.setProperty("--surface-2", v.s2);
    r.setProperty("--surface-3", v.s3); r.setProperty("--border", v.border); r.setProperty("--border-2", v.border2);
  } else {
    ["--bg","--bg-2","--surface","--surface-2","--surface-3","--border","--border-2"].forEach(p => r.removeProperty(p));
  }
  r.setProperty("--accent", a);
  r.setProperty("--accent-2", a2);
  r.setProperty("--accent-soft", hexA(a, .12));
  r.setProperty("--accent-line", hexA(a, .30));
  r.setProperty("--card-min", t.cardMin + "px");
  r.setProperty("--island", t.showIsland ? "block" : "none");
}
function hexA(hex, a) {
  const n = parseInt(hex.slice(1), 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // auth : null | "admin"/"manager"/"operator" (démo) | { user } (compte réel)
  const [auth, setAuth] = useState(null);
  const [booted, setBooted] = useState(false);
  const [theme, setTheme] = useState("dark");

  useEffect(() => {
    document.body.classList.toggle("light", theme === "light");
    applyTheme(t, theme === "light");
  }, [t, theme]);

  // session réelle : restaure le compte si un token est présent + poll des inscrits
  useEffect(() => {
    (async () => {
      refreshUsers();
      const u = await Backend.me();
      if (u) setAuth({ user: u });
      setBooted(true);
    })();
    const id = setInterval(refreshUsers, 10000);
    return () => clearInterval(id);
  }, []);

  const logoutReal = () => { Backend.logout(); setAuth(null); };

  // compte réel : on re-vérifie le compte périodiquement -> statut (validation/suspension),
  // rôle et permission Split s'appliquent EN DIRECT (sans relogin).
  const realUser = (typeof auth === "object" && auth && auth.user) ? auth.user : null;
  const realSig = realUser ? `${realUser.id}|${realUser.status}|${realUser.role}|${realUser.split_allowed}` : "";
  useEffect(() => {
    if (!realUser) return;
    const id = setInterval(async () => {
      const u = await Backend.me();
      if (!u) { setAuth(null); return; }                 // session invalidée -> déconnexion
      const sig = `${u.id}|${u.status}|${u.role}|${u.split_allowed}`;
      if (sig !== realSig) setAuth({ user: u });          // un champ a changé -> on rafraîchit
    }, 8000);
    return () => clearInterval(id);
  }, [realSig]);

  const adminUser = DATA.opById("u1");
  const managerUser = DATA.opById("u2");
  const operatorUser = DATA.opById("u3");

  let screen;
  if (!booted) screen = <div style={{ minHeight: "100%", display: "grid", placeItems: "center", color: "var(--faint)" }} className="mono">chargement…</div>;
  else if (!auth) screen = <Login onLogin={(v) => setAuth(v)} />;
  else if (typeof auth === "object" && auth.user && auth.user.status !== "active") {
    // compte réel pas encore validé -> écran d'attente (ou refusé)
    screen = <PendingScreen user={auth.user} rejected={auth.user.status === "rejected" || auth.user.status === "suspended"} onLogout={logoutReal} />;
  }
  else if (typeof auth === "object" && auth.user) {
    // compte RÉEL : l'interface dépend du rôle du compte
    const u = { ...auth.user, registered: true };
    if (u.role === "Owner" || u.role === "Admin")
      screen = <AdminShell user={u} role="admin" theme={theme} setTheme={setTheme} onLogout={logoutReal} onSwitchRole={null} />;
    else if (u.role === "Manager")
      screen = <AdminShell user={u} role="manager" theme={theme} setTheme={setTheme} onLogout={logoutReal} onSwitchRole={null} />;
    else
      screen = <OperatorShell user={u} onLogout={logoutReal} onSwitchRole={null} />;
  }
  else if (auth === "admin")
    screen = <AdminShell user={adminUser} role="admin" theme={theme} setTheme={setTheme}
      onLogout={() => setAuth(null)} onSwitchRole={() => setAuth("operator")} />;
  else if (auth === "manager")
    screen = <AdminShell user={managerUser} role="manager" theme={theme} setTheme={setTheme}
      onLogout={() => setAuth(null)} onSwitchRole={() => setAuth("operator")} />;
  else
    screen = <OperatorShell user={operatorUser}
      onLogout={() => setAuth(null)} onSwitchRole={() => setAuth("admin")} />;

  return (
    <>
      {screen}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Identité visuelle" />
        <TweakColor label="Accent" value={t.accent}
          options={["#00e08a", "#22d3ee", "#7c5cff", "#f5b942"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Ambiance" value={t.bgVibe}
          options={["Bleu nuit", "Noir pur", "Anthracite"]}
          onChange={(v) => setTweak("bgVibe", v)} />
        <TweakSection label="Grille devices" />
        <TweakSlider label="Taille vignettes" value={t.cardMin} min={180} max={300} step={10} unit="px"
          onChange={(v) => setTweak("cardMin", v)} />
        <TweakSection label="Vue device" />
        <TweakToggle label="Dynamic Island" value={t.showIsland}
          onChange={(v) => setTweak("showIsland", v)} />
      </TweaksPanel>
    </>
  );
}

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