/* ============================================================
   SKYVIDYA OBSERVATORY v3 — agnostic shell
   Access levels (not niches) · AI-first (⌘K) · map-first
   ============================================================ */
const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "basemap": "dark",
  "colorMode": "score",
  "hexOpacity": 78
}/*EDITMODE-END*/;

const V3_TABS = {
  map:     { label: "Mapa",    icon: "map" },
  ativos:  { label: "Ativos",  icon: "table" },
  modulos: { label: "Módulos", icon: "layers" },
};

/* ---- access-level switcher ---- */
function AccessSwitch({ level, onPick }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, []);
  return (
    <div className="persona-switch" ref={ref}>
      <button className="ps-trigger" onClick={() => setOpen((v) => !v)}>
        <span className="ps-ico"><Icon name="scan" size={15} color="var(--sv-coral)" /></span>
        <span className="ps-meta"><b>{level.short}</b><span className="mono">nível de acesso</span></span>
        <Icon name="chevD" size={13} color="var(--fg-soft)" />
      </button>
      {open && (
        <div className="ps-menu fade-up">
          <div className="ps-menu-h eyebrow">Nível de permissão</div>
          {SKY.ACCESS_LEVELS.map((l) => (
            <button key={l.id} className={"ps-opt" + (l.id === level.id ? " active" : "")}
              onClick={() => { onPick(l); setOpen(false); }}>
              <span className="ps-ico"><Icon name="scan" size={15} color={l.id === level.id ? "var(--sv-coral)" : "var(--fg-soft)"} /></span>
              <span className="ps-meta"><b>{l.label}</b><span className="mono">{l.desc}</span></span>
              {l.id === level.id && <Icon name="check" size={14} color="var(--sv-coral)" />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

/* ---- Gestão (gestor/admin only) ---- */
function GestaoView({ access }) {
  const rows = [
    { k: "Plano", v: "Pro · sub-município H3-10", a: "Alterar" },
    { k: "Módulos ativos", v: "5 de 10", a: "Configurar" },
    { k: "Limite de ativos", v: access.id === "admin" ? "ilimitado" : "5.000", a: "Ajustar" },
    { k: "Usuários da conta", v: "14 (3 gestores · 9 analistas · 2 clientes)", a: access.id === "admin" ? "Gerenciar" : "Ver" },
    { k: "Chaves de API", v: "2 ativas", a: "Rotacionar" },
  ];
  return (
    <div className="v2-pad fade-up">
      <ViewHead eyebrow={"// " + access.label} title="Gestão da conta"
        sub={access.id === "admin" ? "Controle total: contas, usuários, permissões e billing." : "Configuração de módulos, limites e planos da organização."} />
      <div className="v2-card" style={{ overflow: "hidden" }}>
        {rows.map((r, i) => (
          <div className="gestao-row" key={i}>
            <span className="g-k">{r.k}</span>
            <span className="g-v">{r.v}</span>
            <button className="btn" style={{ padding: "6px 12px" }}>{r.a}</button>
          </div>
        ))}
      </div>
      {access.id !== "admin" && (
        <p className="mono" style={{ fontSize: 10, color: "var(--fg-mute)", marginTop: 12, letterSpacing: ".06em" }}>
          GERENCIAMENTO DE CONTAS E PERMISSÕES REQUER NÍVEL ADMIN.
        </p>
      )}
    </div>
  );
}

function AppV3() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [access, setAccess] = useState(SKY.ACCESS_LEVELS[1]); // analista default
  const [tab, setTab] = useState("map");
  const [openMod, setOpenMod] = useState(null);
  const [aiOpen, setAiOpen] = useState(false);
  const [cbOpen, setCbOpen] = useState(false);
  const [upgScale, setUpgScale] = useState(null);
  const [obOpen, setObOpen] = useState(false);
  const [verifyAsset, setVerifyAsset] = useState(null);
  const chat = useAgentChat();

  // ⌘K / Ctrl+K
  useEffect(() => {
    const h = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setCbOpen((v) => !v); }
      if (e.key === "Escape") setCbOpen(false);
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, []);

  const tabs = (access && access.tabs) ? access.tabs.filter(id => V3_TABS[id]) : ["map"];

  function pickAccess(l) {
    setAccess(l);
    if (!l.tabs.includes(tab)) setTab("map");
  }
  function onNav(to, modId) {
    if (V3_TABS[to]) setTab(to);
    if (to === "modulos") setOpenMod(modId ? SKY.MODULES.find((m) => m.id === modId) : null);
  }
  function onAction(to) {
    const map = { dashboard: "map", protocol: "protocolos", properties: "ativos", map: "map" };
    onNav(map[to] || to);
  }

  const chatProxy = useMemo(() => ({
    ...chat,
    askHex: (hex) => { setAiOpen(true); chat.askHex(hex); },
    askGeoHex: (cell) => { setAiOpen(true); chat.askGeoHex(cell); },
    askPrompt: (k, c) => { setAiOpen(true); chat.askPrompt(k, c); },
    askFree: (q) => { setAiOpen(true); chat.askFree(q); },
  }), [chat]);

  const tweaks = { basemap: t.basemap, colorMode: t.colorMode, hexOpacity: t.hexOpacity, setTweak };

  return (
    <div className={"app-shell v2-shell" + (aiOpen ? " ai-on" : "")}>
      <header className="hud-top v2-top">
        <a className="brand-lockup" href="Skyvidya Landing C.html" title="SkyVidya">
          <img src="assets/sky-mark.png" className="brand-mark" alt="Skyvidya" />
          <div className="brand-word"><b>Skyvidya</b><span>Atma</span></div>
        </a>
        <span className="v2-divider" />
        <AccessSwitch level={access} onPick={pickAccess} />

        <nav className="top-nav v2-nav">
          {tabs.map((id) => {
            const td = V3_TABS[id];
            if (!td) return null;
            return (
              <button key={id} className={tab === id ? "active" : ""} onClick={() => { setTab(id); if (id !== "modulos") setOpenMod(null); }}>
                <Icon name={td.icon} size={14} /> {td.label}
              </button>
            );
          })}
        </nav>

        <div className="hud-spacer" />

        <button className="cb-trigger" onClick={() => setCbOpen(true)}>
          <Icon name="sparkles" size={13} color="var(--sv-cyan)" />
          <span>Pergunte ou navegue…</span>
          <span className="cb-kbd mono">⌘K</span>
        </button>

        <ThemeToggle />
        <button className={"v2-ai-btn" + (aiOpen ? " on" : "")} onClick={() => setAiOpen((v) => !v)}>
          <Icon name="sparkles" size={14} /> AI
        </button>
      </header>

      <div className={"app-body v2-body" + (aiOpen ? "" : " ai-collapsed")}>
        <main className={"main v2-main" + (tab === "map" ? " main-map" : "")}>
          {tab === "map" && (
            <div className="v2-map-wrap">
              <MapView key={access.id} chat={chatProxy} tweaks={tweaks} scope={access.id === "cliente" ? "cliente" : null} onUpgrade={access.id !== "cliente" ? setUpgScale : null} />
            </div>
          )}
          {tab === "ativos" && <AssetsView chat={chatProxy} access={access} onAdd={() => setObOpen(true)} onVerify={setVerifyAsset} />}
          {tab === "modulos" && <ModulesView openMod={openMod} setOpenMod={setOpenMod} chat={chatProxy} onNav={onNav} access={access} />}
        </main>

        <AIPanel chat={chatProxy} onAction={onAction} collapsed={!aiOpen} onToggle={() => setAiOpen(false)} />
      </div>

      <CommandBar open={cbOpen} onClose={() => setCbOpen(false)} onNav={onNav} chat={chatProxy} />
      <UpgradeModal scale={upgScale} onClose={() => setUpgScale(null)} />
      <OnboardingModal open={obOpen} onClose={() => setObOpen(false)} />
      <VerifyModal asset={verifyAsset} onClose={() => setVerifyAsset(null)} />

      <TweaksPanel>
        <TweakSection label="Mapa de risco" />
        <TweakRadio label="Mapa base" value={t.basemap} options={[{value:"dark",label:"Escuro"},{value:"light",label:"Claro"},{value:"sat",label:"Satélite"}]}
          onChange={(v) => setTweak("basemap", v)} />
        <TweakSelect label="Lente dos hexágonos" value={t.colorMode}
          options={[{value:"score",label:"Score composto"},{value:"esg",label:"Risco ESG"},{value:"sinist",label:"Sinistralidade"},{value:"ndvi",label:"NDVI · vigor"}]}
          onChange={(v) => setTweak("colorMode", v)} />
        <TweakSlider label="Opacidade dos hexágonos" value={t.hexOpacity} min={20} max={100} step={2} unit="%"
          onChange={(v) => setTweak("hexOpacity", v)} />
      </TweaksPanel>
    </div>
  );
}

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