/* ============================================================
   NetroIQ demo — app shell + hash router
   ============================================================ */
var useState = React.useState, useEffect = React.useEffect;

function App() {
  const [route, setRoute] = useState(() => (location.hash.slice(1) || "overview"));
  const [menu, setMenu] = useState(false);
  useEffect(() => {
    const h = () => { setRoute(location.hash.slice(1) || "overview"); };
    window.addEventListener("hashchange", h);
    return () => window.removeEventListener("hashchange", h);
  }, []);
  const go = (r) => {
    location.hash = r; setMenu(false);
    const c = document.querySelector(".content"); if (c) c.scrollTop = 0;
  };

  const embedded = (() => { try { return window.self !== window.top; } catch (e) { return true; } })();
  useEffect(() => {
    if (!embedded) return;
    const map = { overview: "live-overview", sites: "sites", customers: "customers", customer: "customers", site: "sites", alerts: "active-alerts", health: "health", settings: "settings" };
    const seg = route.split("/");
    let path = map[seg[0]] || seg[0];
    if (seg[0] === "site") path = "sites / " + seg.slice(1).join("/");
    if (seg[0] === "customer") path = "customers / " + seg.slice(1).join("/");
    try { window.parent.postMessage({ type: "netroiq-route", path }, "*"); } catch (e) {}
  }, [route, embedded]);

  const parts = route.split("/");
  const base = parts[0], id = parts[1];
  const ov = { label: "Live Overview", to: "overview" };
  let crumbs = [{ label: "Live Overview" }], view = null;

  if (base === "overview") { crumbs = [{ label: "Live Overview" }]; view = <OverviewView go={go} />; }
  else if (base === "sites") { crumbs = [ov, { label: "Sites" }]; view = <SitesView go={go} />; }
  else if (base === "customers") { crumbs = [ov, { label: "Customers" }]; view = <CustomersView go={go} />; }
  else if (base === "customer") {
    const c = DEMO.customers.find(x => x.id === id);
    crumbs = [ov, { label: "Customers", to: "customers" }, { label: "Manage", to: "customers" }, { label: c ? c.name : "Customer" }];
    view = <CustomerView go={go} id={id} />;
  }
  else if (base === "site") {
    const s = DEMO.sites.find(x => x.id === id) || DEMO.focus;
    crumbs = [ov, { label: "Sites", to: "sites" }, { label: s.name }];
    view = <SiteDetail go={go} id={id} />;
  }
  else if (base === "alerts") { crumbs = [ov, { label: "Active Alerts" }]; view = <AlertsView go={go} />; }
  else if (base === "health") { crumbs = [ov, { label: "Health" }]; view = <HealthView />; }
  else if (base === "settings") { crumbs = [ov, { label: "Settings" }]; view = <SettingsView />; }
  else { crumbs = [{ label: "Live Overview" }]; view = <OverviewView go={go} />; }

  const [ribbon, setRibbon] = useState(true);

  return (
    <div className="app">
      <Sidebar route={route} go={go} open={menu} />
      <div className="main">
        <Topbar crumbs={crumbs} go={go} onMenu={() => setMenu(m => !m)} />
        <div className="content">{view}</div>
      </div>
      {ribbon && !embedded && (
        <div className="ribbon">
          <span>Interactive demo · sample data</span>
          <a href="../index.html">← Back to site</a>
          <span className="x" onClick={() => setRibbon(false)}><Icon name="x" style={{ width: 15, height: 15 }} /></span>
        </div>
      )}
    </div>
  );
}

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