/* global React, AppShell, Card, KpiStrip, Table, Pill, StatusDot, Icon, TENANT_TABS */
// ════════════════════════════════════════════════════════════════
// Operations → Automation page mock (jobs · schedules · runs)
// ════════════════════════════════════════════════════════════════
const { AppShell, Card, KpiStrip, Table, Pill, StatusDot, Icon, TENANT_TABS } = window;

const RUNS = [
  { job: "Backup all device configs", trig: "Schedule · 02:00", target: "1,569 devices", dur: "3m 12s", res: "ok" },
  { job: "Firmware compliance sweep", trig: "Schedule · daily", target: "Switches", dur: "1m 44s", res: "ok" },
  { job: "Push VLAN 60 to DC-East", trig: "Manual · a.rivera", target: "12 switches", dur: "28s", res: "ok" },
  { job: "Rotate SNMP credentials", trig: "Schedule · weekly", target: "All sites", dur: "2m 05s", res: "warn" },
  { job: "Decommission rack DC1-B-09", trig: "Workflow", target: "18 devices", dur: "5m 51s", res: "ok" },
];
const SCHEDULES = [
  { n: "Nightly config backup", cad: "Daily · 02:00", next: "in 6h" },
  { n: "Firmware compliance", cad: "Daily · 04:00", next: "in 8h" },
  { n: "Credential rotation", cad: "Weekly · Sun", next: "in 3d" },
  { n: "Capacity report", cad: "Monthly · 1st", next: "in 12d" },
];

function AutomationMock() {
  return (
    <AppShell scopeIcon="wrench" entityName="Northwind Trading" pageName="automation" tabs={TENANT_TABS} activeTab="operations" breadcrumb={["Operations", "Automation"]} avatar="AR">
      <div>
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 22, fontWeight: 600, color: "#ECEAF4" }}>Automation</div>
          <div style={{ fontSize: 13.5, color: "var(--tx-2)", marginTop: 3 }}>Jobs, schedules, and workflow templates that turn routine network ops into auditable automation.</div>
        </div>
        <KpiStrip items={[{ l: "Jobs", v: "42" }, { l: "Scheduled", v: "18", tone: "#a78bfa" }, { l: "Success · 24h", v: "99.2%", tone: "#34d399" }, { l: "Avg runtime", v: "38s" }]} />
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 14 }}>
          <Card title="Recent runs" action={<span style={{ fontSize: 12.5, fontWeight: 600, color: "#bdb0f6", background: "#242134", border: "1px solid #000", padding: "6px 12px", borderRadius: 6 }}>+ New job</span>}>
            <Table grid="1.8fr 1.2fr 1.1fr 0.7fr 0.6fr"
              cols={[
                { k: "job", label: "Job", render: (v, r) => <span style={{ display: "flex", alignItems: "center", gap: 9 }}><StatusDot tone={r.res} size={6} /><span style={{ color: "var(--tx)" }}>{v}</span></span> },
                { k: "trig", label: "Trigger", mono: true }, { k: "target", label: "Target" }, { k: "dur", label: "Duration", mono: true },
                { k: "res", label: "Result", render: v => <Pill tone={v}>{v === "ok" ? "ok" : "warn"}</Pill> },
              ]} rows={RUNS} />
          </Card>
          <Card title="Schedules">
            <div style={{ padding: "4px 0 6px" }}>
              {SCHEDULES.map((s, i) => (
                <div key={s.n} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "11px 18px", borderTop: i ? "1px solid var(--divider-2)" : "1px solid var(--divider)" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <span style={{ color: "var(--accent)", display: "flex" }}><Icon name="refresh" size={16} /></span>
                    <div>
                      <div style={{ fontSize: 13, color: "var(--tx)" }}>{s.n}</div>
                      <div className="mono" style={{ fontSize: 10.5, color: "var(--tx-3)", marginTop: 2 }}>{s.cad}</div>
                    </div>
                  </div>
                  <span className="mono" style={{ fontSize: 11, color: "var(--tx-3)" }}>{s.next}</span>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </AppShell>
  );
}

Object.assign(window, { AutomationMock });