/* global React, AppShell, Card, KpiStrip, Table, Donut, AreaSpark, MiniBars, UtilBar, Pill, StatusDot, Icon, TENANT_TABS */
// ════════════════════════════════════════════════════════════════
// Infrastructure pages: NIMS agents · IPAM · DCIM (rack elevation)
// ════════════════════════════════════════════════════════════════
const { AppShell, Card, KpiStrip, Table, Donut, AreaSpark, MiniBars, UtilBar, Pill, StatusDot, Icon, TENANT_TABS } = window;

// ───────── NIMS agents ─────────
const AGENTS = [
  { a: "nims-dc-e1", site: "DC-East", disc: "412", mng: "186", scan: "2m ago", rtt: "4ms", st: "ok" },
  { a: "nims-dc-e2", site: "DC-East", disc: "186", mng: "0", scan: "4m ago", rtt: "5ms", st: "ok" },
  { a: "nims-dc-w1", site: "DC-West", disc: "298", mng: "142", scan: "5m ago", rtt: "12ms", st: "ok" },
  { a: "nims-hq", site: "HQ Campus", disc: "186", mng: "86", scan: "8m ago", rtt: "28ms", st: "ok" },
  { a: "nims-br-nyc", site: "Branch-NYC", disc: "42", mng: "18", scan: "12m ago", rtt: "45ms", st: "ok" },
  { a: "nims-aws", site: "AWS us-east-1", disc: "124", mng: "62", scan: "1m ago", rtt: "8ms", st: "ok" },
  { a: "nims-gcp", site: "GCP central1", disc: "·", mng: "·", scan: "45m ago", rtt: "·", st: "warn" },
];
function AgentsMock() {
  return (
    <AppShell scopeIcon="hard-drives" entityName="Northwind Trading" pageName="agents" tabs={TENANT_TABS} activeTab="agents" breadcrumb={["Agents", "Overview"]} avatar="AR">
      <div>
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 22, fontWeight: 600, color: "#ECEAF4" }}>NIMS agents</div>
          <div style={{ fontSize: 13.5, color: "var(--tx-2)", marginTop: 3 }}>One agent per boundary, discovering every device on the wire, natively.</div>
        </div>
        <KpiStrip items={[{ l: "Agents", v: "8" }, { l: "Connected", v: "7 / 8", tone: "#34d399" }, { l: "Devices discovered", v: "1,569", tone: "#a78bfa" }, { l: "Last sweep", v: "2m ago" }]} />
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 14, marginBottom: 16 }}>
          <Card title="Discovery throughput · 24h">
            <div style={{ padding: "6px 16px 16px" }}><AreaSpark values={[42, 58, 51, 70, 66, 88, 79, 102, 95, 120, 110, 134, 128, 119, 142, 137, 150, 141, 128, 156, 148, 162, 155, 169]} color="#a78bfa" /></div>
          </Card>
          <Card title="Agents by status">
            <div style={{ display: "flex", alignItems: "center", gap: 16, padding: "4px 18px 18px" }}>
              <Donut data={[{ label: "Connected", value: 7, color: "#34d399" }, { label: "Degraded", value: 1, color: "#f0a060" }]} size={92} />
              <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--tx-2)" }}><span style={{ width: 9, height: 9, borderRadius: 2, background: "#34d399" }} />Connected <span className="mono" style={{ color: "var(--tx-3)" }}>7</span></div>
                <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--tx-2)" }}><span style={{ width: 9, height: 9, borderRadius: 2, background: "#f0a060" }} />Degraded <span className="mono" style={{ color: "var(--tx-3)" }}>1</span></div>
              </div>
            </div>
          </Card>
        </div>
        <Card title="Agents" action={<span style={{ fontSize: 12.5, fontWeight: 600, color: "#bdb0f6", background: "#242134", border: "1px solid #000", padding: "6px 12px", borderRadius: 6 }}>+ Deploy agent</span>}>
          <Table grid="1.4fr 1.1fr 0.8fr 0.8fr 0.9fr 0.7fr 0.9fr"
            cols={[
              { k: "a", label: "Agent", mono: true, render: (v, r) => <span style={{ display: "flex", alignItems: "center", gap: 9 }}><StatusDot tone={r.st} size={6} /><span style={{ color: "var(--tx)" }}>{v}</span></span> },
              { k: "site", label: "Boundary" }, { k: "disc", label: "Discovered", mono: true }, { k: "mng", label: "Managed", mono: true },
              { k: "scan", label: "Last scan", mono: true }, { k: "rtt", label: "gRPC", mono: true },
              { k: "st", label: "Status", render: v => <Pill tone={v}>{v === "ok" ? "connected" : "degraded"}</Pill> },
            ]} rows={AGENTS} />
        </Card>
      </div>
    </AppShell>
  );
}

// ───────── IPAM ─────────
const PREFIXES = [
  { cidr: "10.0.10.0/24", vlan: "10", site: "DC-East", role: "Management", util: 42 },
  { cidr: "10.0.20.0/22", vlan: "20", site: "DC-East", role: "Server farm", util: 88 },
  { cidr: "10.0.30.0/22", vlan: "30", site: "HQ Campus", role: "User access", util: 64 },
  { cidr: "10.0.40.0/24", vlan: "40", site: "DC-East", role: "IoT / OT", util: 31 },
  { cidr: "10.0.60.0/22", vlan: "60", site: "DC-West", role: "Container net", util: 76 },
  { cidr: "172.16.0.0/24", vlan: "50", site: "HQ Campus", role: "Guest / DMZ", util: 23 },
  { cidr: "10.2.0.0/16", vlan: "·", site: "DC-West", role: "Compute", util: 57 },
];
function IpamMock() {
  return (
    <AppShell scopeIcon="rows" entityName="Northwind Trading" pageName="ip addresses" tabs={TENANT_TABS} activeTab="more" breadcrumb={["Inventory", "IPAM"]} avatar="AR">
      <div>
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 22, fontWeight: 600, color: "#ECEAF4" }}>IP address management</div>
          <div style={{ fontSize: 13.5, color: "var(--tx-2)", marginTop: 3 }}>Prefixes, subnets, and VLANs, reconciled against what NIMS actually sees on the wire.</div>
        </div>
        <KpiStrip items={[{ l: "Prefixes", v: "42" }, { l: "Addresses", v: "12,480" }, { l: "Utilization", v: "63%", tone: "#f0a060" }, { l: "Free", v: "4,612", tone: "#34d399" }]} />
        <Card title="Prefixes" action={<span style={{ fontSize: 12.5, fontWeight: 600, color: "#bdb0f6", background: "#242134", border: "1px solid #000", padding: "6px 12px", borderRadius: 6 }}>+ Add prefix</span>}>
          <Table grid="1.3fr 0.6fr 1fr 1.2fr 1.4fr"
            cols={[
              { k: "cidr", label: "Prefix", mono: true, render: v => <span style={{ color: "var(--tx)" }}>{v}</span> },
              { k: "vlan", label: "VLAN", mono: true, render: v => v === "·" ? <span style={{ color: "var(--tx-4)" }}>·</span> : <Pill tone="violet">{v}</Pill> },
              { k: "site", label: "Site" }, { k: "role", label: "Role" },
              { k: "util", label: "Utilization", render: v => <UtilBar value={v} /> },
            ]} rows={PREFIXES} />
        </Card>
      </div>
    </AppShell>
  );
}

// ───────── DCIM (rack elevation) ─────────
function RackElevation() {
  // 42U; units placed bottom-up. {u: startU, h: height, label, color}
  const units = [
    { u: 40, h: 1, l: "tor-sw-04", c: "#34d399" },
    { u: 37, h: 2, l: "db-04 · R760", c: "#34d399" },
    { u: 33, h: 3, l: "web-04 · R740xd", c: "#f0a060" },
    { u: 28, h: 4, l: "k8s-node-12", c: "#34d399" },
    { u: 24, h: 2, l: "san-e1", c: "#34d399" },
    { u: 20, h: 2, l: "fw-edge-01", c: "#a78bfa" },
    { u: 14, h: 4, l: "compute-09", c: "#34d399" },
    { u: 9, h: 3, l: "compute-10", c: "#34d399" },
    { u: 2, h: 2, l: "pdu-a · AP8866", c: "#60bce0" },
  ];
  const U = 42, uh = 11, top = 14, padX = 30, W = 240, H = top * 2 + U * uh;
  const yOf = u => top + (U - (u - 1)) * uh; // top y for unit start
  return (
    <svg width="100%" height={H} viewBox={`0 0 ${W} ${H}`} style={{ display: "block", maxWidth: 260, margin: "0 auto" }}>
      <rect x={padX - 8} y={top - 8} width={W - 2 * (padX - 8)} height={H - 2 * (top - 8)} rx="6" fill="#0d0d12" stroke="var(--hair)" strokeWidth="1.5" />
      {/* U guide lines + numbers */}
      {Array.from({ length: U }, (_, i) => {
        const u = i + 1; const y = top + (U - i) * uh;
        return <g key={u}>{u % 4 === 1 && <text x={padX - 12} y={y - uh / 2 + 3} textAnchor="end" fill="var(--tx-4)" fontFamily="var(--mono)" fontSize="6.5">{u}</text>}<line x1={padX} y1={y} x2={W - padX} y2={y} stroke="rgba(242,242,244,0.04)" strokeWidth="0.5" /></g>;
      })}
      {/* empty-slot hatch implied by gaps; device blocks */}
      {units.map(d => {
        const y = yOf(d.u + d.h - 1); const hpx = d.h * uh - 2;
        return (
          <g key={d.l}>
            <rect x={padX + 2} y={y + 1} width={W - 2 * padX - 4} height={hpx} rx="2.5" fill={`${d.c}14`} stroke={`${d.c}55`} strokeWidth="1" />
            <rect x={padX + 2} y={y + 1} width="3.5" height={hpx} rx="1.5" fill={d.c} />
            <text x={padX + 14} y={y + hpx / 2 + 3.5} fill="#cfcdd8" fontFamily="var(--mono)" fontSize="8.5">{d.l}</text>
          </g>
        );
      })}
    </svg>
  );
}
const RACKS = [
  { r: "DC1-B-04", site: "DC-East", u: "28 / 42", pwr: "4.2 kW", temp: "22°C", st: "ok" },
  { r: "DC1-B-05", site: "DC-East", u: "31 / 42", pwr: "4.6 kW", temp: "24°C", st: "warn" },
  { r: "DC1-C-01", site: "DC-East", u: "20 / 42", pwr: "2.8 kW", temp: "21°C", st: "ok" },
  { r: "DC2-A-02", site: "DC-West", u: "34 / 42", pwr: "5.1 kW", temp: "23°C", st: "ok" },
  { r: "HQ-MDF-01", site: "HQ Campus", u: "14 / 24", pwr: "1.9 kW", temp: "20°C", st: "ok" },
];
function DcimMock() {
  return (
    <AppShell scopeIcon="package" entityName="Northwind Trading" pageName="racks" tabs={TENANT_TABS} activeTab="more" breadcrumb={["Inventory", "DCIM", "Racks"]} avatar="AR">
      <div>
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 22, fontWeight: 600, color: "#ECEAF4" }}>Racks &amp; hardware</div>
          <div style={{ fontSize: 13.5, color: "var(--tx-2)", marginTop: 3 }}>Sites, racks, and physical hardware, elevations kept in sync with discovery.</div>
        </div>
        <KpiStrip items={[{ l: "Sites", v: "4" }, { l: "Racks", v: "26" }, { l: "Rack utilization", v: "64%", tone: "#f0a060" }, { l: "Total power", v: "38.4 kW", tone: "#60bce0" }]} />
        <div style={{ display: "grid", gridTemplateColumns: "300px 1fr", gap: 14 }}>
          <Card title="DC1-B-04">
            <div style={{ padding: "8px 10px 16px" }}>
              <RackElevation />
              <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px 0", marginTop: 6, borderTop: "1px solid var(--divider-2)" }}>
                <span className="mono" style={{ fontSize: 10.5, color: "var(--tx-3)" }}>28U used · 14U free</span>
                <span className="mono" style={{ fontSize: 10.5, color: "var(--tx-3)" }}>PDU-A 4.2 kW</span>
              </div>
            </div>
          </Card>
          <Card title="Racks">
            <Table grid="1.2fr 1fr 0.9fr 0.8fr 0.7fr 0.9fr"
              cols={[
                { k: "r", label: "Rack", mono: true, render: (v, r) => <span style={{ display: "flex", alignItems: "center", gap: 9 }}><StatusDot tone={r.st} size={6} /><span style={{ color: "var(--tx)" }}>{v}</span></span> },
                { k: "site", label: "Site" }, { k: "u", label: "U used", mono: true }, { k: "pwr", label: "Power", mono: true }, { k: "temp", label: "Temp", mono: true },
                { k: "st", label: "Status", render: v => <Pill tone={v}>{v === "ok" ? "healthy" : "attention"}</Pill> },
              ]} rows={RACKS} />
          </Card>
        </div>
      </div>
    </AppShell>
  );
}

Object.assign(window, { AgentsMock, IpamMock, DcimMock });