/* ============================================================
   NetroIQ demo — primary views
   ============================================================ */
var useState = React.useState, useEffect = React.useEffect, useRef = React.useRef;

/* ---------------- Live Overview ---------------- */
function OverviewView({ go }) {
  const m = DEMO.metrics;
  const [q, setQ] = useState("");
  const [sevFilter, setSevFilter] = useState("all");
  const rows = DEMO.sites.filter(s => {
    if (q && !(s.name.toLowerCase().includes(q.toLowerCase()) || s.isp.toLowerCase().includes(q.toLowerCase()))) return false;
    if (sevFilter === "critical" && s.status !== "dn") return false;
    if (sevFilter === "warning" && s.status !== "deg") return false;
    if (sevFilter === "healthy" && s.status !== "on") return false;
    return true;
  });
  const tile = (k, v, sub, cls, ic) => (
    <div className={"tile" + (cls && cls.card ? " " + cls.card : "")}>
      <div className={"tk" + (cls && cls.k ? " " + cls.k : "")}>{ic && <Icon name={ic} />}{k}</div>
      <div className={"tv" + (cls && cls.v ? " " + cls.v : "")}>{v}</div>
      {sub && <div className="ts">{sub}</div>}
    </div>
  );
  return (
    <div className="fade">
      <div className="sec-row"><span className="lbl"><Icon name="overview" /> Core Metrics</span></div>
      <div className="tiles c6">
        {tile("WAN Uptime", m.wanUptime + "%", "last 24h", { card: "crit", k: "crit", v: "crit" })}
        {tile("Clients", m.clients.toLocaleString(), `${m.wifiClients} wifi · ${m.wiredClients} wired`, { v: "teal" })}
        {tile("Sites", m.sites, "39 owned · 158 shared")}
        {tile("Alerts", m.alerts, "needs attention", { card: "crit", k: "crit", v: "crit" })}
        {tile("Customers", m.customers, "0 onboarded · 1 pending")}
        {tile("Devices", m.devices.toLocaleString(), "180r · 203sw · 855ap")}
      </div>

      <div className="sec-row"><span className="lbl"><Icon name="globe" /> World Map</span></div>
      <WorldMap />

      <div className="sec-row"><span className="lbl"><Icon name="switch" /> Device Counts</span></div>
      <div className="tiles c4">
        {tile("Total Devices", m.devices.toLocaleString(), `${m.ownedDevices} owned · ${m.sharedDevices} shared`)}
        {tile("Routers", m.routers, "25 own · 155 shr")}
        {tile("Switches", m.switches, "34 own · 169 shr")}
        {tile("Access Points", m.aps, "163 own · 692 shr", { v: "green" })}
      </div>

      <div className="sec-row"><span className="lbl"><Icon name="overview" /> Live Dashboard</span></div>
      <div className="tiles c4">
        <div className={"tile click" + (sevFilter === "all" ? " sel" : "")} onClick={() => setSevFilter("all")}><div className="tk">Total Sites</div><div className="tv">{m.live.total}</div><div className="ts">showing</div></div>
        <div className={"tile click crit" + (sevFilter === "critical" ? " sel" : "")} onClick={() => setSevFilter("critical")}><div className="tk crit">Critical</div><div className="tv crit">{m.live.critical}</div><div className="ts">click to filter</div></div>
        <div className={"tile click warn" + (sevFilter === "warning" ? " sel" : "")} onClick={() => setSevFilter("warning")}><div className="tk warn">Warning</div><div className="tv warn">{m.live.warning}</div><div className="ts">click to filter</div></div>
        <div className={"tile click" + (sevFilter === "healthy" ? " sel" : "")} onClick={() => setSevFilter("healthy")}><div className="tk" style={{ color: "var(--green)" }}>Healthy</div><div className="tv green">{m.live.healthy}</div><div className="ts">click to filter</div></div>
      </div>

      <div className="toolbar">
        <div className="search"><Icon name="search" /><input placeholder="Search sites, hosts, customers, ISP…" value={q} onChange={e => setQ(e.target.value)} /></div>
        <div className="sel"><select value={sevFilter} onChange={e => setSevFilter(e.target.value)}><option value="all">All Severity</option><option value="critical">Critical</option><option value="warning">Warning</option><option value="healthy">Healthy</option></select></div>
        <div className="sel"><select><option>All Ownership</option><option>Owner</option><option>Shared</option></select></div>
        <div className="sel"><select><option>All Types</option></select></div>
      </div>
      <div style={{ margin: "4px 0 12px" }}><span className="live-pill">LIVE — {rows.length} of {m.sites} sites</span></div>

      <div className="panel">
        <table className="tbl">
          <thead><tr><th>Status</th><th>Site</th><th>Customer</th><th className="r">Devices</th><th className="r">Clients</th><th className="r">Uptime</th><th>ISP</th><th>Type</th></tr></thead>
          <tbody>
            {rows.slice(0, 14).map(s => (
              <tr key={s.id} className="click" onClick={() => go("site/" + s.id)}>
                <td><span className={"dot " + s.status} /></td>
                <td className="strong">{s.name}</td>
                <td className="mut">{s.customer || "—"}</td>
                <td className="r">{s.devices}</td>
                <td className="r">{s.clients}</td>
                <td className="r" style={{ color: s.uptime === 100 ? "var(--green)" : "var(--amber)" }}>{s.uptime.toFixed(1)}%</td>
                <td className="lk">{s.isp}</td>
                <td><span className={"badge " + s.type}>{s.type}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ---------------- Sites ---------------- */
function SitesView({ go }) {
  const [q, setQ] = useState("");
  const [view, setView] = useState("list");
  const [sort, setSort] = useState("name");
  const [own, setOwn] = useState("all");
  const [fAlerts, setFAlerts] = useState(false), [fDeg, setFDeg] = useState(false), [fOff, setFOff] = useState(false);
  let rows = DEMO.sites.filter(s => {
    if (q && !(s.name.toLowerCase().includes(q.toLowerCase()) || s.isp.toLowerCase().includes(q.toLowerCase()) || s.wanIp.includes(q))) return false;
    if (own !== "all" && s.type !== own) return false;
    if (fAlerts && !s.alerts) return false;
    if (fDeg && s.status !== "deg" && s.status !== "dn") return false;
    if (fOff && s.status !== "dn") return false;
    return true;
  });
  rows = [...rows].sort((a, b) => sort === "name" ? a.name.localeCompare(b.name) : sort === "uptime" ? a.uptime - b.uptime : b[sort] - a[sort]);
  const owners = DEMO.sites.filter(s => s.type === "owner").length;
  const t = (k, v, cls) => <div className={"tile" + (cls ? " " + cls : "")}><div className={"tk" + (cls ? " " + cls : "")}>{k}</div><div className={"tv" + (cls === "crit" ? " crit" : cls === "warn" ? " warn" : "")}>{v}</div></div>;
  const vbtn = (id, ic) => <button className={view === id ? "active" : ""} onClick={() => setView(id)}><Icon name={ic} /></button>;
  return (
    <div className="fade">
      <div className="tiles c6">
        {t("Total Sites", DEMO.metrics.sites)}{t("Owner", owners)}{t("Shared", DEMO.metrics.sites - owners)}
        {t("Total Clients", "8141")}{t("Alerts", 7, "crit")}{t("Degraded", 6, "warn")}
      </div>
      <div className="toolbar">
        <div className="search"><Icon name="search" /><input placeholder="Search sites, ISPs, WAN IPs, hostnames…" value={q} onChange={e => setQ(e.target.value)} /></div>
        <div className="sel"><select value={sort} onChange={e => setSort(e.target.value)}><option value="name">Sort: Name</option><option value="uptime">Sort: Uptime</option><option value="devices">Sort: Devices</option><option value="clients">Sort: Clients</option></select></div>
        <div className="vtoggle">{vbtn("grid", "grid")}{vbtn("wall", "wall")}{vbtn("list", "list")}</div>
      </div>
      <div className="toolbar" style={{ marginTop: -4 }}>
        <div className="sel"><select value={own} onChange={e => setOwn(e.target.value)}><option value="all">All Ownership</option><option value="owner">Owner</option><option value="shared">Shared</option></select></div>
        <div className="sel"><select><option>All IPS/IDS</option></select></div>
        <div className="sel"><select><option>All ISPs (81)</option>{DEMO.ISPS.map(i => <option key={i}>{i}</option>)}</select></div>
        <label className="chk"><input type="checkbox" checked={fAlerts} onChange={e => setFAlerts(e.target.checked)} /> Alerts</label>
        <label className="chk"><input type="checkbox" checked={fDeg} onChange={e => setFDeg(e.target.checked)} /> Degraded</label>
        <label className="chk"><input type="checkbox" checked={fOff} onChange={e => setFOff(e.target.checked)} /> Offline Devices</label>
        <span className="mut" style={{ fontSize: ".78rem", marginLeft: "auto" }}>{rows.length} sites</span>
      </div>

      {view === "list" && (
        <div className="panel"><table className="tbl">
          <thead><tr><th>Site</th><th>Type</th><th className="r">Devices</th><th className="r">Clients</th><th className="r">Uptime</th><th className="r">Alerts</th><th>Customer</th></tr></thead>
          <tbody>{rows.map(s => (
            <tr key={s.id} className="click" onClick={() => go("site/" + s.id)}>
              <td><span className={"dot " + s.status} style={{ marginRight: 8 }} /><span className="strong">{s.name}</span></td>
              <td><span className={"badge " + s.type}>{s.type}</span></td>
              <td className="r">{s.devices}</td><td className="r">{s.clients}</td>
              <td className="r" style={{ color: s.uptime === 100 ? "var(--green)" : "var(--amber)" }}>{s.uptime.toFixed(1)}%</td>
              <td className="r">{s.alerts ? <span style={{ color: "var(--red)", fontWeight: 700 }}>{s.alerts}</span> : "—"}</td>
              <td className="lk">{s.customer || "—"}</td>
            </tr>))}</tbody>
        </table></div>
      )}
      {view === "grid" && (
        <div className="sgrid">{rows.map(s => (
          <div key={s.id} className={"scard" + (s.status === "deg" ? " deg" : s.status === "dn" ? " dn" : "")} onClick={() => go("site/" + s.id)}>
            <div className="sc-top"><span className={"dot " + s.status} /><span className="nm">{s.name}</span><span className="ar"><Icon name="chevright" style={{ width: 15, height: 15 }} /></span></div>
            <div className="sc-grid">
              <div className="sc-cell"><div className="k">Uptime</div><div className={"v " + (s.uptime === 100 ? "ok" : "")}>{s.uptime.toFixed(1)}%</div></div>
              <div className="sc-cell"><div className="k">Devices</div><div className="v">{s.devices}</div></div>
              <div className="sc-cell"><div className="k">Clients</div><div className="v">{s.clients}</div></div>
            </div>
            <div className="mut" style={{ fontSize: ".68rem", marginTop: 9, fontFamily: "var(--ff-mono)" }}>ISP: {s.isp} · <span className={"badge " + s.type} style={{ marginLeft: 4 }}>{s.type}</span></div>
          </div>))}</div>
      )}
      {view === "wall" && (
        <div className="wall">{rows.map(s => (
          <div key={s.id} className={"wcard" + (s.status === "deg" ? " deg" : s.status === "dn" ? " dn" : "")} onClick={() => go("site/" + s.id)}>
            <div className="wn">{s.name}</div>
            <div className="wu">{s.uptime.toFixed(0)}%</div>
            <div className="wm">{s.days}d · {s.clients}c</div>
            {s.alerts ? <div className="wb">{s.alerts}!</div> : null}
          </div>))}</div>
      )}
    </div>
  );
}

/* ---------------- Customers ---------------- */
function CustomersView({ go }) {
  const [q, setQ] = useState("");
  const [summary, setSummary] = useState(false);
  const rows = DEMO.customers.filter(c => !q || c.name.toLowerCase().includes(q.toLowerCase()) || c.company.toLowerCase().includes(q.toLowerCase()));
  const totSites = DEMO.customers.reduce((n, c) => n + c.sites, 0);
  const totDevices = DEMO.customers.reduce((n, c) => n + c.devices, 0);
  const b2b = DEMO.customers.filter(c => c.b2b).length;
  return (
    <div className="fade">
      <div style={{ marginBottom: 14 }}>
        <button className="lbl" style={{ background: "none", border: 0, cursor: "pointer" }} onClick={() => setSummary(s => !s)}>
          <Icon name="chevdown" style={{ width: 13, height: 13, transform: summary ? "none" : "rotate(-90deg)", transition: ".2s" }} /> Show Summary
        </button>
      </div>
      {summary && (
        <div className="tiles c4" style={{ marginBottom: 16 }}>
          <div className="tile"><div className="tk">Total Customers</div><div className="tv">{DEMO.customers.length}</div></div>
          <div className="tile"><div className="tk">Total Sites</div><div className="tv">{totSites}</div></div>
          <div className="tile"><div className="tk">B2B Accounts</div><div className="tv teal">{b2b}</div></div>
          <div className="tile"><div className="tk">Managed Devices</div><div className="tv">{totDevices}</div></div>
        </div>
      )}
      <div className="toolbar">
        <div className="search"><Icon name="search" /><input placeholder="Search customers by name or email…" value={q} onChange={e => setQ(e.target.value)} /></div>
        <div className="sel"><select><option>Name A → Z</option><option>Name Z → A</option></select></div>
        <button className="btn solid"><Icon name="plus" /> Add Customer</button>
      </div>
      <div className="panel"><table className="tbl">
        <thead><tr><th>Customer</th><th>Company</th><th className="r">Sites</th><th className="r">Devices</th><th className="r">Alerts</th><th>Email</th></tr></thead>
        <tbody>{rows.map(c => (
          <tr key={c.id} className="click" onClick={() => go("customer/" + c.id)}>
            <td className="strong">{c.name}</td>
            <td className="lk">{c.company}</td>
            <td className="r">{c.sites}</td>
            <td className="r lk">{c.devices}</td>
            <td className="r">{c.alerts ? <span style={{ color: "var(--red)", fontWeight: 700 }}>{c.alerts}</span> : "—"}</td>
            <td className="mut">{c.email}</td>
          </tr>))}</tbody>
      </table></div>
    </div>
  );
}

/* ---------------- Customer detail ---------------- */
function CustomerView({ go, id }) {
  const c = DEMO.customers.find(x => x.id === id) || DEMO.customers[0];
  const [tab, setTab] = useState("sites");
  const f = (icon, k, v) => <div className="f"><div className="k"><Icon name={icon} /> {k}</div><div className="v">{v}</div></div>;
  return (
    <div className="fade">
      <div className="sd-head">
        <button className="btn" onClick={() => go("customers")}><Icon name="back" /></button>
        <div><h1>{c.name} {c.b2b && <span className="badge b2b">B2B</span>}</h1>
          <div className="meta"><a className="lk" style={{ color: "var(--teal)" }}>{c.company}</a></div></div>
      </div>
      <div className="cinfo">
        <div className="ch">Customer Information</div>
        <div className="cinfo-grid">
          {f("customers", "Customer Name", c.name)}
          {f("tag", "Customer ID", c.cid)}
          {f("reseller", "Company Name", c.company)}
          {f("location", "City / Postal / Country", c.city)}
          {f("clock", "Phone", c.phone)}
        </div>
      </div>
      <div className="subtabs">
        {[["sites", "globe", "Sites"], ["details", "file", "Details"], ["maint", "wrench", "Maintenance"], ["report", "chart", "Service Report"], ["hooks", "prompt", "Webhooks"]].map(([k, ic, lb]) =>
          <button key={k} className={"subtab" + (tab === k ? " active" : "")} onClick={() => setTab(k)}><Icon name={ic} /> {lb}</button>)}
      </div>
      {tab === "sites" ? (
        <div>
          <div style={{ fontWeight: 700, margin: "4px 0 12px" }}>{c.siteList.length} Sites Assigned</div>
          <div className="sgrid">{c.siteList.map((s, i) => (
            <div key={i} className="scard" onClick={() => go("site/" + (s.id || "skyway"))}>
              <div className="sc-top"><span className="dot on" /><span className="nm">{s.name}</span>
                <span className={"badge " + s.type} style={{ marginLeft: "auto" }}>{s.type}</span></div>
              <div className="sc-grid">
                <div className="sc-cell"><div className="k">Uptime</div><div className="v ok">{s.uptime.toFixed(1)}%</div></div>
                <div className="sc-cell"><div className="k">Devices</div><div className="v">{s.devices}</div></div>
                <div className="sc-cell"><div className="k">Clients</div><div className="v">{s.clients}</div></div>
              </div>
              <div className="mut" style={{ fontSize: ".68rem", marginTop: 9, fontFamily: "var(--ff-mono)" }}>ISP: {s.isp}</div>
            </div>))}</div>
        </div>
      ) : <div className="empty">The <strong style={{ textTransform: "capitalize" }}>{tab}</strong> tab is part of the full platform.</div>}
    </div>
  );
}

/* ---------------- Active Alerts ---------------- */
function AlertsView({ go }) {
  const a = DEMO.activeAlerts;
  const [q, setQ] = useState("");
  const cards = a.cards.filter(c => !q || c.site.toLowerCase().includes(q.toLowerCase()));
  return (
    <div className="fade">
      <div className="tiles c4">
        <div className="tile"><div className="tk">Total Alerts</div><div className="tv">{a.total}</div><div className="ts">{a.total} shown</div></div>
        <div className="tile crit"><div className="tk crit">Critical</div><div className="tv crit">{a.critical}</div><div className="ts">Offline / Critical</div></div>
        <div className="tile warn"><div className="tk warn">Warning</div><div className="tv warn">{a.warning}</div><div className="ts">Degraded Uptime</div></div>
        <div className="tile"><div className="tk">Info</div><div className="tv teal">{a.info}</div><div className="ts">Firmware Updates</div></div>
      </div>
      <div className="toolbar">
        <div className="search"><Icon name="search" /><input placeholder="Search by site or customer name…" value={q} onChange={e => setQ(e.target.value)} /></div>
        <div className="sel"><select><option>All Severity</option></select></div>
        <div className="sel"><select><option>All Types</option></select></div>
        <div className="sel"><select><option>All Ownership</option></select></div>
      </div>
      <div style={{ display: "grid", gap: 13 }}>
        {cards.map((c, i) => (
          <div key={i} className={"panel" + (c.sev === "crit" ? " crit" : "")} style={c.sev === "info" ? { borderLeft: "3px solid var(--green)" } : { borderLeft: "3px solid var(--red)" }}>
            <div className="panel-h">
              <div style={{ display: "flex", alignItems: "center", gap: 9, flexWrap: "wrap" }}>
                <span className={"dot " + (c.sev === "crit" ? "dn" : "on")} />
                <h3 style={{ fontSize: ".95rem" }}>{c.site}</h3>
                <span className={"badge " + (c.sev === "crit" ? "crit" : "info")}>{c.sev === "crit" ? "CRITICAL" : "INFO"}</span>
                <span className={"badge " + (c.own === "owned" ? "owner" : "shared")}>{c.own}</span>
              </div>
              <button className="btn"><span style={{ color: "var(--link)", fontWeight: 700 }}>INVESTIGATE</span> <Icon name="chevright" /></button>
            </div>
            <div className="panel-b">
              <div className="mut" style={{ fontSize: ".8rem", marginBottom: c.tags.length ? 10 : 0 }}>
                <strong style={{ color: "var(--teal)" }}>{c.cust}</strong> &nbsp; TZ: {c.tz}
              </div>
              {c.tags.length > 0 && <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: c.devices.length ? 14 : 0 }}>
                {c.tags.map((t, j) => <span key={j} className={"badge " + (t.includes("Firmware") ? "warn" : "crit")} style={{ fontSize: ".62rem" }}>{t}</span>)}
              </div>}
              {c.devices.length > 0 && <>
                <div className="lbl" style={{ marginBottom: 8 }}>Affected Devices</div>
                <div style={{ display: "grid", gap: 7 }}>{c.devices.map((d, j) => (
                  <div key={j} style={{ display: "flex", alignItems: "center", gap: 10, border: "1px solid var(--line)", borderRadius: 8, padding: "9px 12px" }}>
                    <span className={"dot " + (d[4] === "off" ? "dn" : "on")} />
                    <Icon name={d[2] === "cam" ? "camera" : d[2] === "gw" ? "router" : d[2] === "sw" ? "switch" : "ap"} style={{ width: 16, height: 16, color: "var(--ink-dim)" }} />
                    <span className="strong" style={{ fontSize: ".82rem" }}>{d[0]}</span>
                    <span className="mut" style={{ fontSize: ".72rem" }}>{d[1]}</span>
                    <span className={"badge " + (d[4] === "off" ? "crit" : "warn")} style={{ marginLeft: "auto" }}>{d[3]}</span>
                  </div>))}</div>
              </>}
            </div>
          </div>))}
      </div>
    </div>
  );
}

/* ---------------- Global Health ---------------- */
function HealthView() {
  const h = DEMO.globalHealth;
  const [q, setQ] = useState("");
  const rows = DEMO.globalEvents.filter(e => !q || e.msg.toLowerCase().includes(q.toLowerCase()));
  return (
    <div className="fade">
      <div className="tiles c3">
        <div className="tile crit"><div className="tk crit">Offline Devices</div><div className="tv crit">{h.offlineDevices}</div><div className="ts">Requires attention</div></div>
        <div className="tile warn"><div className="tk warn">Degraded Sites</div><div className="tv warn">{h.degradedSites}</div><div className="ts">&lt; 99% WAN Uptime</div></div>
        <div className="tile"><div className="tk">Total Events</div><div className="tv teal">{h.totalEvents.toLocaleString()}</div><div className="ts">Recorded in system</div></div>
      </div>
      <div className="panel" style={{ marginTop: 18 }}>
        <div className="panel-h">
          <h3><Icon name="prompt" /> Comprehensive Event Log</h3>
          <div style={{ display: "flex", gap: 8 }}>
            <div className="search" style={{ minWidth: 180, padding: "7px 11px" }}><Icon name="search" /><input placeholder="Search logs…" value={q} onChange={e => setQ(e.target.value)} /></div>
            <div className="sel"><select><option>All Severities</option></select></div>
          </div>
        </div>
        <div className="log">{rows.map((e, i) => (
          <div key={i} className="log-row crit">
            <span className="tm">{e.time}</span><span className="sv crit">{e.sev}</span><span className="ty">{e.type}</span>
            <span className="ms">{e.site} — {e.msg}</span>
          </div>))}</div>
      </div>
    </div>
  );
}

/* ---------------- Settings ---------------- */
function SettingsView() {
  const [tab, setTab] = useState("apis");
  const apis = [
    ["UniFi (Ubiquiti)", "Site Manager & Network API", true],
    ["Anthropic (Claude)", "AI Assistant — Claude models", false],
    ["OpenAI (GPT)", "AI Assistant — GPT models", false],
    ["Google Gemini", "AI Assistant — Gemini models", false],
  ];
  return (
    <div className="fade">
      <div className="view-head"><h1>Settings</h1></div>
      <div className="set-tabs subtabs">
        {["APIS", "SMTP", "APPEARANCE", "ORGANIZATION", "CRM"].map((t, i) =>
          <button key={t} className={"subtab" + ((tab === "apis" && i === 0) ? " active" : "")} onClick={() => setTab(i === 0 ? "apis" : t)}>{t}</button>)}
      </div>
      {tab === "apis" ? <>
        <div className="mut" style={{ fontSize: ".84rem", marginBottom: 14 }}>Click an API to configure its key and run a live connection test.</div>
        {apis.map(([nm, sub, cfg], i) => (
          <div key={i} className="set-row">
            <div className="nm">{nm} <small>{sub}</small>{cfg && <span className="cfg">Configured ••••••••ABC3</span>}</div>
            <div style={{ display: "flex", gap: 8, alignItems: "center" }}><button className="btn teal">Test</button><Icon name="chevdown" style={{ width: 16, height: 16, color: "var(--ink-dim)" }} /></div>
          </div>))}
      </> : <div className="empty">The <strong>{tab}</strong> settings are part of the full platform.</div>}
    </div>
  );
}

Object.assign(window, { OverviewView, SitesView, CustomersView, CustomerView, AlertsView, HealthView, SettingsView });