/* global React, AppShell, Card, Pill, StatusDot, Donut, Icon, DeviceIcon, TENANT_TABS */
// ════════════════════════════════════════════════════════════════
// Sostratus page-body mocks, faithful manifest layouts:
//   PlatformHomeMock  → platform multi-tenant home (Recent Activity
//                       table + My Tenants card grid w/ MSP groups)
//   TenantDevicesMock → tenant Networks → Devices (KPIs, saved views,
//                       donuts, categorized device table)
// ════════════════════════════════════════════════════════════════
const { AppShell, Card, Pill, StatusDot, Donut, Icon, DeviceIcon, TENANT_TABS } = window;

function CreateBtn({ label = "Create Tenant" }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 600, color: "#bdb0f6", background: "#242134", border: "1px solid #000", padding: "6px 12px", borderRadius: 6, whiteSpace: "nowrap" }}>
      <Icon name="plus" size={14} />{label}
    </span>
  );
}

// ---- tenant card (matches TenantCard.tsx) ----
function TenantTile({ name, slug, plan, variant = "default" }) {
  const accent = variant === "msp" ? "#f0a060" : variant === "sub-org" ? "#60bce0" : "#a78bfa";
  const tint = variant === "default" ? "var(--paper)" : `${accent}0f`;
  const border = variant === "default" ? "#1c1c22" : `${accent}38`;
  return (
    <div style={{ padding: 20, borderRadius: 10, border: `1px solid ${border}`, background: tint, display: "flex", flexDirection: "column", gap: 13 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <div style={{ width: 36, height: 36, borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", background: `${accent}1f`, color: accent }}>
          <Icon name="buildings" size={18} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: "var(--tx)", lineHeight: 1.3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</div>
          <div className="mono" style={{ fontSize: 11.5, color: "var(--tx-4)" }}>{slug}</div>
        </div>
      </div>
      <div style={{ display: "flex", gap: 7, flexWrap: "wrap" }}>
        <span style={{ fontSize: 11, padding: "2px 9px", borderRadius: 5, background: `${accent}14`, color: accent, letterSpacing: ".02em", whiteSpace: "nowrap" }}>{plan}</span>
        {variant === "msp" && <span style={{ fontSize: 11, padding: "2px 9px", borderRadius: 5, background: `${accent}14`, color: accent, whiteSpace: "nowrap" }}>MSP parent</span>}
        {variant === "sub-org" && <span style={{ fontSize: 11, padding: "2px 9px", borderRadius: 5, background: `${accent}14`, color: accent, whiteSpace: "nowrap" }}>Sub-org</span>}
      </div>
    </div>
  );
}

const REGULAR = [
  { name: "Northwind Trading", slug: "northwind", plan: "Enterprise" },
  { name: "Cobalt Health", slug: "cobalt-health", plan: "Enterprise" },
  { name: "Atlas Logistics", slug: "atlas-logi", plan: "Enterprise" },
  { name: "Meridian Labs", slug: "meridian", plan: "Teams" },
  { name: "Vertex Capital", slug: "vertex", plan: "Professional" },
  { name: "Pioneer Energy", slug: "pioneer", plan: "Enterprise" },
];
const SUBORGS = [
  { name: "Sable & Co", slug: "sable", plan: "Teams" },
  { name: "Keystone Retail", slug: "keystone", plan: "Professional" },
  { name: "Lumen Schools", slug: "lumen-schools", plan: "Teams" },
];
const ACTIVITY = [
  { ts: "2m ago", actor: "j.okafor", action: "Created tenant", res: "cobalt-health", tone: "ok" },
  { ts: "14m ago", actor: "system", action: "Discovery sweep finished", res: "northwind / DC-East", tone: "ok" },
  { ts: "31m ago", actor: "a.rivera", action: "Deployed NIMS agent", res: "atlas-logi / nims-w2", tone: "ok" },
  { ts: "1h ago", actor: "system", action: "Agent unreachable", res: "pioneer / nims-br1", tone: "warn" },
  { ts: "2h ago", actor: "m.chen", action: "Invited member", res: "meridian", tone: "info" },
];

function PlatformHomeMock() {
  const grid3 = { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14, padding: 16 };
  return (
    <AppShell scopeIcon="house" entityName="Platform" pageName="home" tabs={[{ id: "home", label: "Home", icon: "house" }]} activeTab="home" avatar="JO">
      <div>
      {/* Recent Activity */}
      <div style={{ marginBottom: 20 }}>
        <Card title="Recent Activity">
          <div style={{ display: "grid", gridTemplateColumns: "0.7fr 1fr 1.4fr 1.4fr 0.6fr", padding: "9px 18px", borderTop: "1px solid var(--divider)", background: "rgba(242,242,244,0.02)" }}>
            {["Timestamp", "Actor", "Action", "Resource", "Status"].map(h => <div key={h} className="mono" style={{ fontSize: 9.5, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--tx-3)" }}>{h}</div>)}
          </div>
          {ACTIVITY.map((r, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "0.7fr 1fr 1.4fr 1.4fr 0.6fr", alignItems: "center", padding: "10px 18px", borderTop: "1px solid var(--divider-2)" }}>
              <div className="mono" style={{ fontSize: 11.5, color: "var(--tx-3)" }}>{r.ts}</div>
              <div className="mono" style={{ fontSize: 12, color: "var(--tx-2)" }}>{r.actor}</div>
              <div style={{ fontSize: 13, color: "var(--tx)" }}>{r.action}</div>
              <div className="mono" style={{ fontSize: 12, color: "var(--tx-2)" }}>{r.res}</div>
              <div><StatusDot tone={r.tone} /></div>
            </div>
          ))}
        </Card>
      </div>
      {/* My Tenants */}
      <Card title="My Tenants" action={<CreateBtn />}>
        <div style={grid3}>
          {REGULAR.map(t => <TenantTile key={t.slug} {...t} />)}
        </div>
        {/* MSP group divider */}
        <div className="mono" style={{ display: "flex", alignItems: "center", gap: 0, padding: "6px 18px 4px", color: "var(--divider)", fontSize: 12, letterSpacing: ".04em" }}>
          <span style={{ whiteSpace: "pre", color: "rgba(242,242,244,0.18)" }}>{"─────  "}</span>
          <span style={{ textTransform: "uppercase", color: "var(--tx-2)", whiteSpace: "nowrap" }}>Helios Managed Services</span>
          <span style={{ whiteSpace: "pre" }}>{"  "}</span>
          <span style={{ flex: 1, borderTop: "1px solid var(--divider)" }} />
        </div>
        <div style={grid3}>
          <TenantTile name="Helios Managed Services" slug="helios-msp" plan="MSP" variant="msp" />
          {SUBORGS.map(t => <TenantTile key={t.slug} {...t} variant="sub-org" />)}
        </div>
      </Card>
      </div>
    </AppShell>
  );
}

// ════════════════════════════════════════════════════════════════
// TENANT → NETWORKS → DEVICES
// ════════════════════════════════════════════════════════════════
const KPIS = [
  { l: "Devices", v: "1,569", tone: null },
  { l: "Up", v: "1,531", tone: "#34d399" },
  { l: "Down", v: "6", tone: "#f06080" },
  { l: "Warnings", v: "32", tone: "#f0a060" },
];
const SAVED = [["All", "violet", true], ["Down", "err", false], ["Warn", "warn", false], ["Routers", "violet", false], ["Switches", "violet", false]];
const BY_KIND = [
  { label: "VMs", value: 186, color: "#f06080" }, { label: "APs", value: 124, color: "#60bce0" },
  { label: "Switches", value: 48, color: "#34d399" }, { label: "Servers", value: 32, color: "#f0a060" },
  { label: "Routers", value: 12, color: "#a78bfa" }, { label: "Firewalls", value: 8, color: "#5b6178" },
];
const BY_VENDOR = [
  { label: "Cisco", value: 142, color: "#a78bfa" }, { label: "Arista", value: 88, color: "#34d399" },
  { label: "Aruba", value: 124, color: "#60bce0" }, { label: "Palo Alto", value: 24, color: "#f0a060" },
  { label: "Dell", value: 38, color: "#c084fc" },
];
const BY_SITE = [
  { label: "HQ Campus", value: 186, color: "#a78bfa" }, { label: "DC-East", value: 842, color: "#34d399" },
  { label: "DC-West", value: 214, color: "#60bce0" }, { label: "Branch-NYC", value: 42, color: "#f0a060" },
];
const DEVICES = {
  "Network infrastructure": [
    { h: "core-rtr-01", t: "router", vendor: "Cisco", ip: "10.0.0.1", kind: "Router", model: "Catalyst 8500", seen: "2m ago", tone: "ok" },
    { h: "core-rtr-02", t: "router", vendor: "Cisco", ip: "10.0.0.2", kind: "Router", model: "Catalyst 8500", seen: "2m ago", tone: "ok" },
    { h: "dist-sw-a1", t: "switch", vendor: "Arista", ip: "10.0.1.1", kind: "Switch", model: "7050X3", seen: "5m ago", tone: "ok" },
    { h: "dist-sw-b1", t: "switch", vendor: "Arista", ip: "10.0.1.2", kind: "Switch", model: "7050X3", seen: "5m ago", tone: "warn" },
    { h: "fw-edge-01", t: "firewall", vendor: "Palo Alto", ip: "10.0.0.254", kind: "Firewall", model: "PA-3440", seen: "1m ago", tone: "ok" },
    { h: "ap-fl3-north", t: "switch", vendor: "Aruba", ip: "10.1.3.10", kind: "AP", model: "AP-635", seen: "3m ago", tone: "ok" },
  ],
  "Virtual machines": [
    { h: "web-prod-01", t: "vm", vendor: "·", ip: "10.3.1.10", kind: "VM", model: "Ubuntu 22.04", seen: "just now", tone: "ok" },
    { h: "api-prod-01", t: "vm", vendor: "·", ip: "10.3.1.11", kind: "VM", model: "Ubuntu 22.04", seen: "just now", tone: "ok" },
    { h: "db-prod-01", t: "vm", vendor: "·", ip: "10.3.1.20", kind: "VM", model: "Rocky 9.3", seen: "30s ago", tone: "err" },
  ],
};
const DCOLS = "1.5fr 1fr 1.1fr 0.8fr 1.2fr 0.9fr";

function TenantDevicesMock() {
  return (
    <AppShell scopeIcon="router" entityName="Northwind Trading" pageName="devices" tabs={TENANT_TABS} activeTab="network" breadcrumb={["Networks", "Devices"]} avatar="AR">
      <div>
      {/* title + site picker */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 600, color: "#ECEAF4" }}>Devices</div>
          <div style={{ fontSize: 13.5, color: "var(--tx-2)", marginTop: 3 }}>Routers, switches, firewalls, access points and other managed devices.</div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12.5, color: "var(--tx-2)", border: "1px solid var(--divider)", borderRadius: 8, padding: "7px 12px" }}>
          <Icon name="buildings" size={15} /> All sites <span style={{ opacity: .6, display: "flex" }}><Icon name="caret-down" size={13} /></span>
        </div>
      </div>
      {/* KPIs */}
      <div style={{ display: "flex", gap: 14, marginBottom: 14 }}>
        {KPIS.map(k => (
          <div key={k.l} style={{ flex: 1, padding: "13px 16px", border: "1px solid var(--divider)", borderRadius: 10 }}>
            <div style={{ fontSize: 12, color: "var(--tx-2)" }}>{k.l}</div>
            <div className="mono" style={{ fontSize: 25, fontWeight: 600, color: k.tone || "#ECEAF4", marginTop: 3 }}>{k.v}</div>
          </div>
        ))}
      </div>
      {/* saved views */}
      <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
        {SAVED.map(([l, tone, on]) => {
          const c = { violet: "#bdb0f6", err: "#f06080", warn: "#f0a060" }[tone];
          return <span key={l} style={{ fontSize: 12, fontFamily: "var(--mono)", padding: "5px 12px", borderRadius: 999, border: `1px solid ${on ? "#9180d4" : "var(--divider)"}`, background: on ? "rgba(145,128,212,0.15)" : "transparent", color: on ? "#fff" : c }}>{l}</span>;
        })}
      </div>
      {/* donuts */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14, marginBottom: 16 }}>
        {[["By kind", BY_KIND], ["By vendor", BY_VENDOR], ["By site", BY_SITE]].map(([title, data]) => (
          <Card key={title} title={title}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "4px 18px 18px" }}>
              <Donut data={data} size={92} />
              <div style={{ display: "flex", flexDirection: "column", gap: 5, minWidth: 0 }}>
                {data.slice(0, 5).map(d => (
                  <div key={d.label} style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 11.5 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 2, background: d.color, flexShrink: 0 }} />
                    <span style={{ color: "var(--tx-2)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d.label}</span>
                    <span className="mono" style={{ color: "var(--tx-3)", marginLeft: "auto" }}>{d.value}</span>
                  </div>
                ))}
              </div>
            </div>
          </Card>
        ))}
      </div>
      {/* devices table */}
      <Card title="Devices" action={
        <div style={{ display: "flex", gap: 8, color: "var(--tx-3)" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, border: "1px solid var(--divider)", borderRadius: 6, padding: "5px 10px" }}><Icon name="download" size={14} />Export</span>
          <span style={{ display: "inline-flex", alignItems: "center", border: "1px solid var(--divider)", borderRadius: 6, padding: "5px 8px" }}><Icon name="refresh" size={14} /></span>
        </div>
      }>
        {/* header */}
        <div style={{ display: "grid", gridTemplateColumns: DCOLS, padding: "9px 18px", borderTop: "1px solid var(--divider)", background: "rgba(242,242,244,0.02)" }}>
          {["Hostname", "Vendor", "IP", "Kind", "Model", "Last seen"].map(h => <div key={h} className="mono" style={{ fontSize: 9.5, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--tx-3)" }}>{h}</div>)}
        </div>
        {Object.entries(DEVICES).map(([cat, rows]) => (
          <div key={cat}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 18px", background: "rgba(145,128,212,0.05)", borderTop: "1px solid var(--divider-2)" }}>
              <Icon name="caret-down" size={13} />
              <span className="mono" style={{ fontSize: 11, letterSpacing: ".06em", textTransform: "uppercase", color: "#9180d4" }}>{cat}</span>
              <span className="mono" style={{ fontSize: 11, color: "var(--tx-4)" }}>· {rows.length}</span>
            </div>
            {rows.map((r, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: DCOLS, alignItems: "center", padding: "9px 18px", borderTop: "1px solid var(--divider-2)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                  <StatusDot tone={r.tone} size={6} />
                  <span style={{ color: "#9180d4", display: "flex" }}><DeviceIcon t={r.t} size={15} /></span>
                  <span className="mono" style={{ fontSize: 12.5, color: "var(--tx)" }}>{r.h}</span>
                </div>
                <div style={{ fontSize: 12.5, color: "var(--tx-2)" }}>{r.vendor}</div>
                <div className="mono" style={{ fontSize: 12, color: "var(--tx-2)" }}>{r.ip}</div>
                <div style={{ fontSize: 12.5, color: "var(--tx-2)" }}>{r.kind}</div>
                <div style={{ fontSize: 12.5, color: "var(--tx-2)" }}>{r.model}</div>
                <div className="mono" style={{ fontSize: 11.5, color: "var(--tx-3)" }}>{r.seen}</div>
              </div>
            ))}
          </div>
        ))}
      </Card>
      </div>
    </AppShell>
  );
}

Object.assign(window, { PlatformHomeMock, TenantDevicesMock });