// totem-app.jsx — Merion Totem admin shell + login gate + realtime context.
// Modeled on ui/_reference/dashboard-app.jsx (dapp- shell, nav, routing,
// ToastProvider, CommandPalette ⌘K, FloatingTheme, usePersist).
const { useState: useTotApp, useEffect: useTotEffect, useCallback: useTotCb, useRef: useTotRef } = React;

/* ---- realtime context: { totems, refresh } shared with pages ---- */
const TotemLiveCtx = React.createContext(null);

/* ---- NAV (contract: TOT_NAV) ---- */
const TOT_NAV = [
  { group: "Operação", items: [
    { id: "painel", label: "Painel", icon: "home" },
    { id: "totens", label: "Totens", icon: "monitor" },
  ]},
  { group: "Conteúdo", items: [
    { id: "midias", label: "Mídias", icon: "image" },
    { id: "playlists", label: "Playlists", icon: "list" },
  ]},
  { group: "Conta", items: [
    { id: "config", label: "Configurações", icon: "settings" },
  ]},
];

const TOT_TITLES = {
  painel: "Painel de operações",
  totens: "Totens",
  midias: "Biblioteca de mídias",
  playlists: "Playlists",
  config: "Configurações",
};

/* ---- Floating theme/accent control (bottom-right), mirrors dashboard-app.jsx ---- */
function TotemFloatingTheme({ theme, setTheme, neon, setNeon }) {
  const [open, setOpen] = useTotApp(false);
  const ref = useTotRef(null);
  useOutside(ref, () => setOpen(false));
  return (
    <div className="fab-theme" ref={ref}>
      {open && (
        <div className="fab-panel">
          <div className="fab-row">
            <span className="fab-lbl">Tema</span>
            <div className="seg">
              <button className="seg-btn" data-active={theme === "light"} onClick={() => setTheme("light")}><Icon name="sun" />Light</button>
              <button className="seg-btn" data-active={theme === "dark"} onClick={() => setTheme("dark")}><Icon name="moon" />Dark</button>
            </div>
          </div>
          <div className="fab-sep" />
          <div className="fab-row" style={{ flexDirection: "column", alignItems: "flex-start", gap: 10 }}>
            <span className="fab-lbl">Accent</span>
            <div className="neon-row" style={{ flexWrap: "wrap" }}>
              {NEONS.map((n) => <button key={n.id} className="neon-sw" data-active={neon === n.id} title={n.label} style={{ background: n.c }} onClick={() => setNeon(n.id)} />)}
            </div>
          </div>
        </div>
      )}
      <button className="fab-btn" data-open={open} onClick={() => setOpen((o) => !o)} aria-label="Aparência">
        <Icon name={open ? "x" : "settings"} />
      </button>
    </div>
  );
}

/* ---- top-right controls: user menu + logout ---- */
function TotemTopControls({ user, onLogout }) {
  const t = useToast();
  const initials = (user && user.name ? user.name : "Admin")
    .split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
  const logout = async () => {
    try { await window.api.logout(); } catch (e) {}
    t && t({ title: "Sessão encerrada", icon: "logout" });
    onLogout && onLogout();
  };
  return (
    <div className="row" style={{ gap: 10 }}>
      <DropdownMenu align="right" trigger={<span style={{ cursor: "pointer" }}><Avatar size="sm" brand fallback={initials} /></span>}>
        <MenuLabel>{user && user.name ? user.name : "Admin Merion"}</MenuLabel>
        <MenuItem icon="user">{user && user.email ? user.email : "admin@merion.com"}</MenuItem>
        <MenuSep />
        <MenuItem icon="logout" danger onClick={logout}>Sair</MenuItem>
      </DropdownMenu>
    </div>
  );
}

/* ============================================================
   SHELL (authenticated) — keeps live totem state via adminSocket
   ============================================================ */
function TotemShell({ user, onLogout }) {
  const [theme, setTheme] = usePersist("totem-theme", "dark");
  const [direction] = usePersist("totem-direction", "glow");
  const [neon, setNeon] = usePersist("totem-neon", "cyan");
  const [page, setPage] = usePersist("totem-page", "painel");
  const [cmdOpen, setCmdOpen] = useTotApp(false);
  const [novoOpen, setNovoOpen] = useTotApp(false);

  // ---- live totem state ----
  const [totems, setTotems] = useTotApp([]);
  const sockRef = useTotRef(null);

  const refresh = useTotCb(async () => {
    try { const list = await window.api.totems(); if (Array.isArray(list)) setTotems(list); } catch (e) {}
  }, []);

  // initial load + admin websocket
  useTotEffect(() => {
    refresh();
    const sock = window.api.adminSocket((msg) => {
      if (!msg || !msg.type) return;
      if (msg.type === "admin:welcome") {
        if (Array.isArray(msg.totems)) setTotems(msg.totems);
      } else if (msg.type === "totem:update" && msg.totem) {
        setTotems((cur) => {
          const i = cur.findIndex((x) => x.id === msg.totem.id);
          if (i === -1) return [...cur, msg.totem];
          const next = cur.slice(); next[i] = { ...next[i], ...msg.totem }; return next;
        });
      }
    });
    sockRef.current = sock;
    return () => { try { sock && sock.close && sock.close(); } catch (e) {} };
  }, [refresh]);

  // ⌘K command palette
  useTotEffect(() => {
    const h = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setCmdOpen(true); } };
    document.addEventListener("keydown", h);
    return () => document.removeEventListener("keydown", h);
  }, []);

  const cmdGroups = [
    { label: "Navegação", items: [
      { label: "Ir para Painel", icon: "home", onSelect: () => setPage("painel") },
      { label: "Ir para Totens", icon: "monitor", onSelect: () => setPage("totens") },
      { label: "Ir para Mídias", icon: "image", onSelect: () => setPage("midias") },
      { label: "Ir para Playlists", icon: "list", onSelect: () => setPage("playlists") },
      { label: "Ir para Configurações", icon: "settings", onSelect: () => setPage("config") },
    ]},
    { label: "Ações", items: [
      { label: "Novo totem", icon: "plus", onSelect: () => { setPage("totens"); setNovoOpen(true); } },
      { label: "Atualizar dados", icon: "refresh", onSelect: () => refresh() },
      { label: "Alternar tema", icon: theme === "dark" ? "sun" : "moon", onSelect: () => setTheme(theme === "dark" ? "light" : "dark") },
    ]},
  ];

  const liveValue = { totems, refresh };
  const onlineCount = totems.filter((t) => t.status === "online").length;

  return (
    <ToastProvider>
      <TotemLiveCtx.Provider value={liveValue}>
        <div className="dash-app totem-app" data-theme={theme} data-direction={direction} data-neon={neon}>
          <aside className="dapp-side">
            <div className="dapp-head">
              <div className="dapp-brand"><Wordmark height={20} /></div>
              <div className="dapp-ws">
                <Avatar size="sm" brand fallback="T" />
                <div>
                  <div className="ws-name">Merion Totem</div>
                  <div className="ws-plan">{onlineCount} online · {totems.length} totens</div>
                </div>
                <Icon name="chevrons-up-down" />
              </div>
            </div>
            <nav className="dapp-nav">
              {TOT_NAV.map((grp) => (
                <React.Fragment key={grp.group}>
                  <div className="dapp-navlabel">{grp.group}</div>
                  {grp.items.map((it) => (
                    <button key={it.id} className="dapp-navitem" data-active={page === it.id} onClick={() => setPage(it.id)}>
                      <Icon name={it.icon} />{it.label}
                      {it.id === "totens" && onlineCount > 0 && <Badge variant="success" dot className="nav-badge">{onlineCount}</Badge>}
                    </button>
                  ))}
                </React.Fragment>
              ))}
            </nav>
            <div className="dapp-foot">
              <div className="dapp-user" onClick={onLogout}>
                <Avatar size="sm" brand fallback={(user && user.name ? user.name : "A").slice(0, 1).toUpperCase()} />
                <div>
                  <div className="nm">{user && user.name ? user.name : "Admin Merion"}</div>
                  <div className="rl">{user && user.role ? user.role : "Administrador"}</div>
                </div>
                <Icon name="logout" />
              </div>
            </div>
          </aside>

          <div className="dapp-main">
            <div className="dapp-top">
              <div className="dapp-top-left">
                <Breadcrumb items={[{ label: "Merion Totem" }, { label: TOT_TITLES[page] || "Painel" }]} />
              </div>
              <div className="row" style={{ gap: 16 }}>
                <button className="dapp-search command-trigger" onClick={() => setCmdOpen(true)}>
                  <Icon name="search" /><span>Buscar...</span><kbd>⌘K</kbd>
                </button>
                <TotemTopControls user={user} onLogout={onLogout} />
              </div>
            </div>
            <div className="dapp-scroll">
              {page === "painel" && <PainelPage onNavigate={setPage} />}
              {page === "totens" && <TotensPage novoOpen={novoOpen} setNovoOpen={setNovoOpen} />}
              {page === "midias" && <MidiasPage />}
              {page === "playlists" && <PlaylistsPage />}
              {page === "config" && <ConfigPage user={user} onLogout={onLogout} />}
            </div>
          </div>

          <TotemFloatingTheme theme={theme} setTheme={setTheme} neon={neon} setNeon={setNeon} />
        </div>
        <CommandPalette open={cmdOpen} onClose={() => setCmdOpen(false)} groups={cmdGroups} />
      </TotemLiveCtx.Provider>
    </ToastProvider>
  );
}

/* ============================================================
   ROOT — login gate via window.api.me()
   ============================================================ */
function TotemApp() {
  const [state, setState] = useTotApp({ status: "loading", user: null }); // loading | auth | anon

  useTotEffect(() => {
    let alive = true;
    (async () => {
      try {
        const res = await window.api.me();
        if (!alive) return;
        if (res && res.user) setState({ status: "auth", user: res.user });
        else setState({ status: "anon", user: null });
      } catch (e) {
        if (alive) setState({ status: "anon", user: null });
      }
    })();
    return () => { alive = false; };
  }, []);

  const handleSuccess = (user) => setState({ status: "auth", user: user || { name: "Admin Merion" } });
  const handleLogout = () => setState({ status: "anon", user: null });

  if (state.status === "loading") {
    return (
      <div className="totem-boot" data-theme="dark" data-direction="glow" data-neon="cyan"
        style={{ minHeight: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 18, background: "var(--background)", color: "var(--foreground)" }}>
        <Wordmark height={26} />
        <Spinner />
      </div>
    );
  }
  if (state.status === "anon") {
    return <Login onSuccess={handleSuccess} />;
  }
  return <TotemShell key={state.user && state.user.id} user={state.user} onLogout={handleLogout} />;
}

Object.assign(window, { TotemApp, TotemLiveCtx, TOT_NAV, TOT_TITLES });

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