// Screens 6/6 — Workflow Hub + Connectors

const { useState: uS6, useMemo: uM6, useEffect: uE6 } = React;

// ── Workflow type config ──────────────────────────────────────────────────
const WF_TYPES = {
  "design-kickoff":  { label: "Design Kickoff",   color: "var(--info)",   icon: "Sparkle", team: "eng"  },
  "design-review":   { label: "Design Review",    color: "var(--info)",   icon: "Eye",     team: "eng"  },
  "cdr-action":      { label: "CDR Action",        color: "var(--warn)",   icon: "Flag",    team: "eng"  },
  "create-po":       { label: "Create PO",         color: "var(--accent)", icon: "Clipboard",team: "proc"},
  "parts-tracking":  { label: "Parts Tracking",    color: "var(--accent)", icon: "Clock",   team: "proc" },
  "supplier-qa":     { label: "Supplier QA",       color: "var(--warn)",   icon: "Check",   team: "proc" },
  "work-order":      { label: "Work Order",        color: "var(--ok)",     icon: "Factory", team: "mfg"  },
  "test-schedule":   { label: "Schedule Test",     color: "var(--ok)",     icon: "Bolt",    team: "mfg"  },
  "ncr":             { label: "NCR",               color: "var(--err)",    icon: "X",       team: "mfg"  },
};

const TEAM_CONFIG = {
  eng:  { label: "Engineering Teams",          color: "var(--info)",   bg: "color-mix(in oklch,var(--info) 8%,transparent)"   },
  proc: { label: "Procurement & Supply Chain", color: "var(--accent)", bg: "color-mix(in oklch,var(--accent) 8%,transparent)" },
  mfg:  { label: "Mfg & Plant Operations",    color: "var(--ok)",     bg: "color-mix(in oklch,var(--ok) 8%,transparent)"     },
};

// Derive workflows from OAM BOM state
function deriveWorkflows() {
  const wf = [];
  const top = OAM_BOM_FLAT.filter(x => !x.p);
  const used = new Set();

  // Test scheduling (M=100, T=0) — mfg, highest urgency
  top.filter(x => x.m === 100 && x.t === 0).slice(0, 8).forEach(item => {
    used.add(item.num);
    wf.push({
      id: `TS-${item.num}`, type: "test-schedule", team: "mfg",
      name: item.name, itemNums: [item.num], qty: item.qty,
      priority: "high", status: "ready",
      d: item.d, m: item.m, t: item.t,
      desc: `Manufacturing 100% complete. Schedule acceptance test per OAM-FAT-01.`,
      steps: ["Assign inspector","Book TVAC / vibration slot","Issue test card","Capture results → PLM"],
      actions: ["Book TVAC", "Assign Inspector", "Issue Test Card"],
    });
  });

  // Work order (D≥85, M<20) — mfg
  top.filter(x => x.d >= 85 && x.m < 20 && !used.has(x.num)).slice(0, 5).forEach(item => {
    used.add(item.num);
    wf.push({
      id: `WO-${item.num}`, type: "work-order", team: "mfg",
      name: item.name, itemNums: [item.num], qty: item.qty,
      priority: "high", status: "ready",
      d: item.d, m: item.m, t: item.t,
      desc: `Design ${item.d}% — fabrication ready. Raise work order and assign cell.`,
      steps: ["Verify drawing released","Create WO in MES","Assign assembly cell","Reserve tooling & fixtures"],
      actions: ["Create WO in MES", "Assign Cell", "Reserve Tooling"],
    });
  });

  // Create PO (D≥70, M=0) — procurement
  top.filter(x => x.d >= 70 && x.m === 0 && !used.has(x.num)).slice(0, 8).forEach(item => {
    used.add(item.num);
    wf.push({
      id: `PO-${item.num}`, type: "create-po", team: "proc",
      name: item.name, itemNums: [item.num], qty: item.qty,
      priority: item.d >= 85 ? "high" : "medium", status: "ready",
      d: item.d, m: item.m, t: item.t,
      desc: `Design ${item.d}% — drawing ready. Create PO and confirm lead time with supplier.`,
      steps: ["Confirm supplier","Raise purchase requisition","Get approval","Issue PO → SAP"],
      actions: ["Raise PR in SAP", "Request Quote", "Check Stock"],
    });
  });

  // Parts tracking (0 < M < 60, D≥30) — procurement
  top.filter(x => x.m > 0 && x.m < 60 && x.d >= 30 && !used.has(x.num)).slice(0, 5).forEach(item => {
    used.add(item.num);
    wf.push({
      id: `PT-${item.num}`, type: "parts-tracking", team: "proc",
      name: item.name, itemNums: [item.num], qty: item.qty,
      priority: "medium", status: "active",
      d: item.d, m: item.m, t: item.t,
      desc: `Manufacturing ${item.m}%. Monitor supplier delivery schedule and update PO.`,
      steps: ["Ping supplier","Update delivery date","Log GR on receipt","Notify manufacturing"],
      actions: ["Update Delivery Date", "Ping Supplier", "Log GR"],
    });
  });

  // Design kickoff (D=0, M=0) — engineering
  for (const item of top) {
    if (!(item.d === 0 && item.m === 0 && !used.has(item.num))) continue;
    used.add(item.num);
    wf.push({
      id: `DK-${item.num}`, type: "design-kickoff", team: "eng",
      name: item.name, itemNums: [item.num], qty: item.qty,
      priority: "high", status: "pending",
      d: item.d, m: item.m, t: item.t,
      desc: `No design activity started. Assign engineer and open design package in CAD.`,
      steps: ["Assign lead engineer","Create part in CATIA","Link requirements","Notify team"],
      actions: ["Assign Engineer", "Open in CATIA", "Create Task"],
    });
  }

  // Design review (D 10–50, M=0) — engineering
  top.filter(x => x.d > 0 && x.d < 50 && x.m === 0 && !used.has(x.num)).slice(0, 6).forEach(item => {
    wf.push({
      id: `DR-${item.num}`, type: "design-review", team: "eng",
      name: item.name, itemNums: [item.num], qty: item.qty,
      priority: item.d < 20 ? "high" : "medium", status: "active",
      d: item.d, m: item.m, t: item.t,
      desc: `Design at ${item.d}% — below schedule threshold. Review blockers and update plan.`,
      steps: ["Review current CAD state","Identify blockers","Update % in PLM","Escalate if needed"],
      actions: ["Review in CATIA", "Log Blockers", "Update Progress"],
    });
  });

  return wf;
}

function WfCard({ wf, selId, setSelId, running, runAction }) {
  const tc = WF_TYPES[wf.type];
  const isSel = selId === wf.id;
  const isRunning = !!running[wf.id];
  const prioColor = wf.priority === "high" ? "var(--err)" : wf.priority === "medium" ? "var(--warn)" : "var(--line)";
  const _wfCardStyle = { padding: "10px 12px", borderRadius: 6, cursor: "pointer",
    border: `1px solid ${isSel ? tc.color : "var(--line-soft)"}`,
    background: isSel ? `color-mix(in oklch,${tc.color} 6%,var(--bg-1))` : "var(--bg-1)",
    marginBottom: 8, position: "relative", transition: "border-color .15s" };
  const _wfCardActionStyle = { width: "100%", padding: "5px 0", borderRadius: 4, border: `1px solid ${tc.color}`,
    background: isRunning ? tc.color : "transparent",
    color: isRunning ? "var(--bg-0)" : tc.color,
    fontFamily: "var(--font-mono)", fontSize: 12, cursor: isRunning ? "default" : "pointer",
    letterSpacing: ".04em", transition: "background .2s, color .2s" };

  return (
    <div role="button" tabIndex={0} onClick={() => setSelId(isSel ? null : wf.id)}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setSelId(isSel ? null : wf.id); } }}
      style={_wfCardStyle}>

      {/* priority stripe */}
      <div style={{ position: "absolute", left: 0, top: 6, bottom: 6, width: 3,
        background: prioColor, borderRadius: "0 2px 2px 0" }}/>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4,
          background: `color-mix(in oklch,${tc.color} 15%,transparent)`,
          border: `1px solid color-mix(in oklch,${tc.color} 40%,transparent)`,
          borderRadius: 3, padding: "2px 6px" }}>
          <span style={{ color: tc.color }}>{I(tc.icon, { size: 10 })}</span>
          <span className="mono" style={{ fontSize: 12, color: tc.color, textTransform: "uppercase", letterSpacing: ".06em" }}>
            {tc.label}
          </span>
        </span>
        <span className={`pill ${wf.status === "ready" ? "ok" : wf.status === "active" ? "info" : ""}`} style={{ fontSize: 12 }}>
          <span className={`dot ${wf.status === "active" ? "pulse" : ""}`}/>
          {wf.status}
        </span>
      </div>

      <div style={{ fontSize: 12, color: "var(--ink)", marginBottom: 3,
        overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
        {wf.name}
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
        <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>OAM-{wf.itemNums[0]} · Qty {wf.qty}</span>
      </div>

      {/* D/M mini bars */}
      <div style={{ display: "flex", gap: 8, marginBottom: 8 }}>
        {[["D", wf.d, "var(--info)"], ["M", wf.m, "var(--accent)"], ["T", wf.t, "var(--ok)"]].map(([l, v, c]) => (
          <div key={l} style={{ display: "flex", alignItems: "center", gap: 4, flex: 1 }}>
            <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)", width: 8 }}>{l}</span>
            <div style={{ flex: 1, height: 4, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden" }}>
              <div style={{ width: `${v}%`, height: "100%", background: c }} />
            </div>
            <span className="mono tnum" style={{ fontSize: 12, color: "var(--ink-3)", width: 22, textAlign: "right" }}>{v}%</span>
          </div>
        ))}
      </div>

      {/* Quick action */}
      <button onClick={e => { e.stopPropagation(); runAction(wf, wf.actions[0]); }}
        disabled={isRunning}
        style={_wfCardActionStyle}>
        {isRunning ? `Running: ${running[wf.id]}…` : wf.actions[0]}
      </button>
    </div>
  );
}

// Per-tenant lane labels — internal keys (eng/proc/mfg) preserved so the
// regex routing logic stays unified, but the visible labels match the
// vertical the tenant operates in. Falls back to TEAM_CONFIG defaults.
const TENANT_LANE_LABELS = {
  aetherion:   { eng: "Mission Engineering",        proc: "Supply & Qualification",      mfg: "Build, Test & Q&MA" },
  mittelstand: { eng: "Engineering · Rev D",        proc: "Procurement & Long-Lead",     mfg: "Cell Ops & Quality" },
  devenergy:   { eng: "Design & ECO",               proc: "Vendors & Long-Lead",         mfg: "Site Build & Commissioning" },
};

// Format an event timestamp using forgeI18n when present, else best-effort
// readable string. ISO Zulu in fixtures, but be defensive.
function _wfFormatTs(iso) {
  if (!iso) return "—";
  if (typeof window !== "undefined" && window.forgeI18n && typeof window.forgeI18n.formatDateTime === "function") {
    try { return window.forgeI18n.formatDateTime(iso); } catch (e) { /* fall through */ }
  }
  try {
    const d = new Date(iso);
    if (!isNaN(d.getTime())) return d.toLocaleString();
  } catch (e) { /* swallow */ }
  return String(iso);
}

// Derive a click-through URL from a ledger event. Routes are registered in
// router.jsx: /build/eco/:id, /line/queue, /auditor/ledger.
function _wfRouteFor(ev) {
  const type = (ev && (ev.type || ev.kind) || "").toString().toLowerCase();
  const ref  = ev && (ev.ref || ev.linked_eco) ? String(ev.ref || ev.linked_eco) : "";
  const evId = ev && (ev.event_id || ev.id) ? String(ev.event_id || ev.id) : "";

  // ECO events deep-link by ref id (ECO-AET-0042, ECO-MS-0017, ECO-0051 …)
  if (/^eco|eco_/.test(type) && /^eco-/i.test(ref)) {
    return "/build/eco/" + encodeURIComponent(ref);
  }
  // Generic ECO event without a parsable ref → ECO list
  if (/^eco|eco_/.test(type)) return "/build/eco";
  // Work orders + station + receiving + fab + line activity → line queue
  if (/^wo|wo_|work_order|station|receiving|incoming|routing|fab|prod_|pilot/.test(type)) return "/line/queue";
  // Supplier / PO / RFQ / quote → connectors + ERP queue
  if (/^po|po_|supplier|rfq|quote|frame_contract|long_lead/.test(type)) return "/build/erp";
  // Vendor audit, qual, FAI, NCR, CAPA, TVAC, EMC, acceptance → auditor ledger
  if (/audit|qual|fai|ncr|capa|tvac|emc|test|witness|acceptance|waiver|itar|gate|bee/.test(type)) {
    return evId ? "/auditor/ledger?event=" + encodeURIComponent(evId) : "/auditor/ledger";
  }
  // Default: auditor ledger anchored on the event
  return evId ? "/auditor/ledger?event=" + encodeURIComponent(evId) : "/auditor/ledger";
}

// Workflow Hub for non-Tritan tenants: tenant-scoped kanban driven by the
// signed event ledger. Cards click through to the relevant screen, the
// component re-renders on tenant change (via useActiveTenant in the parent)
// and on forge:tenant-event from the SSE-style bus when available.
function ScreenWorkflowsTenant({ tenant, setToast }) {
  const tenantName = (tenant && tenant.tenant && tenant.tenant.name) || "Active tenant";
  const tenantId   = (tenant && tenant.tenant && tenant.tenant.id) || "";
  const ledger     = (tenant && tenant.ledger) ? tenant.ledger : [];

  // Tenant-specific labels with TEAM_CONFIG fallback (colors stay shared so
  // the kanban looks consistent across tenants).
  const laneLabels = TENANT_LANE_LABELS[tenantId] || {
    eng:  TEAM_CONFIG.eng.label,
    proc: TEAM_CONFIG.proc.label,
    mfg:  TEAM_CONFIG.mfg.label,
  };

  // Refresh on tenant-scoped event bus (Wave 8G). useActiveTenant already
  // covers tenant switches; this catches new ledger entries while staying
  // on the same tenant. forgeApi.subscribeEvents is referenced by
  // dashboard-viewer.jsx; if absent, this is a safe no-op.
  const [, setBump] = uS6(0);
  uE6(function() {
    const onEv = function() { setBump(function(b) { return b + 1; }); };
    let off = null;
    if (typeof window !== "undefined") {
      window.addEventListener("forge:tenant-event", onEv);
      window.addEventListener("forge:ledger-append", onEv);
      const api = window.forgeApi;
      if (api && typeof api.subscribeEvents === "function") {
        try { off = api.subscribeEvents(onEv); } catch (e) { off = null; }
      }
    }
    return function() {
      if (typeof window !== "undefined") {
        window.removeEventListener("forge:tenant-event", onEv);
        window.removeEventListener("forge:ledger-append", onEv);
      }
      if (typeof off === "function") { try { off(); } catch (e) { /* swallow */ } }
    };
  }, []);

  // Newest-first so the kanban shows the most relevant work at the top of
  // each lane. The fixtures store ledgers oldest-first.
  const byLane = uM6(function() {
    const eng = [], proc = [], mfg = [];
    const recent = (ledger || []).slice().reverse().slice(0, 80);
    recent.forEach(function(ev) {
      const type  = (ev.type || ev.kind || "").toString().toLowerCase();
      const actor = (ev.actor || ev.who || ev.owner || "").toString().toLowerCase();
      const summary = (ev.summary || ev.title || ev.note || "").toString().toLowerCase();
      // Engineering — design, ECO, review gates, mass/power budget, baseline.
      if (/eco|design|cdr|pdr|srr|review|baseline|budget|trade|drawing|carryover|diff|routing_rev|gate.*publish/.test(type)
          || /mech|avionics|payload|adcs|engineering|design|sales/.test(actor)) {
        eng.push(ev);
      }
      // Procurement — PO, supplier, RFQ, quote, contract, long-lead, vendor audit
      else if (/po|supplier|procure|vendor|rfq|quote|contract|long_lead|frame|spare/.test(type)
               || /procure|buy|sales|vendor/.test(actor)
               || /supplier qual|po released|rfq|quote sent|frame/.test(summary)) {
        proc.push(ev);
      }
      // Manufacturing / Quality — WO, station, test, NCR, CAPA, FAI, TVAC, EMC, dispatch, ITAR
      else if (/wo|work_order|line|station|test|fai|ppap|tvac|emc|build|ncr|capa|qual|prod|pilot|receiving|incoming|dim|subassy|acceptance|witness|dispatch|waiver|itar|bee|qual_passed/.test(type)
               || /shop|line|qa|test|q&ma|quality|cleanroom|export/.test(actor)) {
        mfg.push(ev);
      }
      else eng.push(ev);
    });
    return { eng: eng.slice(0, 8), proc: proc.slice(0, 8), mfg: mfg.slice(0, 8) };
  }, [ledger]);

  const go = function(path) {
    if (!path) return;
    if (typeof navigate === "function") navigate(path);
    else if (typeof window !== "undefined") window.location.hash = path;
  };

  const onCardClick = function(ev) {
    const path = _wfRouteFor(ev);
    go(path);
    if (setToast) {
      const ref = ev && (ev.ref || ev.event_id || ev.id) ? (ev.ref || ev.event_id || ev.id) : "event";
      try { setToast("Open · " + ref + " → " + path); } catch (e) { /* swallow */ }
    }
  };

  const totalEvents = (ledger || []).length;

  return (
    <div style={{ padding: 14, display: "grid", gridTemplateRows: "auto 1fr", gap: 14, height: "100%", minHeight: 0 }}>
      <Panel title={"Workflow Hub · " + tenantName}>
        <div style={{ padding: "10px 12px", color: "var(--ink-2)", fontSize: 13, display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          <span>Tenant-scoped kanban from the {tenantName} signed event ledger. Click a card to open the source screen.</span>
          <span className="mono" style={{ marginLeft: "auto", color: "var(--ink-3)", fontSize: 12 }}>
            {totalEvents} ledger events · eng {byLane.eng.length} · proc {byLane.proc.length} · mfg {byLane.mfg.length}
          </span>
        </div>
      </Panel>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12, minHeight: 0, overflow: "hidden" }}>
        {["eng","proc","mfg"].map(function(laneId) {
          const tc = TEAM_CONFIG[laneId];
          const cards = byLane[laneId];
          const label = laneLabels[laneId] || tc.label;
          return (
            <div key={laneId} style={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
              <div style={{ padding: "8px 12px", borderRadius: "6px 6px 0 0", marginBottom: 1,
                background: tc.bg, border: "1px solid color-mix(in oklch," + tc.color + " 30%,transparent)",
                borderBottom: "2px solid " + tc.color }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontSize: 12, fontWeight: 600, color: tc.color }}>{label}</span>
                  <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{cards.length} events</span>
                </div>
              </div>
              <div style={{ flex: 1, overflow: "auto", padding: "8px 0", paddingRight: 2 }}>
                {cards.length === 0
                  ? <div style={{ padding: 16, textAlign: "center", color: "var(--ink-3)" }} className="mono">No events</div>
                  : cards.map(function(ev, i) {
                      const key = (ev.event_id || ev.id || ev.ts || "") + "-" + i;
                      const type = (ev.type || ev.kind || "event").toString();
                      const path = _wfRouteFor(ev);
                      return (
                        <div key={key}
                             role="button" tabIndex={0}
                             onClick={function() { onCardClick(ev); }}
                             onKeyDown={function(e) { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onCardClick(ev); } }}
                             title={"Open " + path}
                             style={{ padding: 10, border: "1px solid var(--line-soft)", borderRadius: 5,
                                      margin: "0 6px 8px 0", background: "var(--bg-1)", cursor: "pointer",
                                      transition: "border-color .15s, background .15s" }}
                             onMouseEnter={function(e) { e.currentTarget.style.borderColor = tc.color; }}
                             onMouseLeave={function(e) { e.currentTarget.style.borderColor = "var(--line-soft)"; }}>
                          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 3 }}>
                            <span className="mono" style={{ fontSize: 12, color: tc.color, textTransform: "uppercase", letterSpacing: ".04em" }}>
                              {type}
                            </span>
                            <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{_wfFormatTs(ev.ts || ev.date || ev.opened)}</span>
                          </div>
                          <div style={{ fontSize: 12, color: "var(--ink)", marginTop: 2, lineHeight: 1.35 }}>
                            {ev.summary || ev.title || ev.note || ev.action || "—"}
                          </div>
                          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 6 }}>
                            <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{ev.actor || ev.who || ev.owner || ""}</span>
                            {ev.ref
                              ? <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{ev.ref}</span>
                              : null}
                          </div>
                        </div>
                      );
                    })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────── WORKFLOW HUB ────────────────────────────
function ScreenWorkflows({ setToast }) {
  const tenant = useActiveTenant();
  const isTritan = !!(tenant && tenant.tenant && tenant.tenant.id === "tritan");
  if (isTritan) {
    return <ScreenWorkflowsTritan tenant={tenant} setToast={setToast} />;
  }
  // For non-Tritan tenants: render the tenant-scoped placeholder fed by ledger events.
  // Falls back to the OAM-derived workflow board only if the tenant has no ledger.
  const hasLedger = !!(tenant && tenant.ledger && tenant.ledger.length);
  if (hasLedger) {
    return <ScreenWorkflowsTenant tenant={tenant} setToast={setToast} />;
  }
  const [selId, setSelId]     = uS6(null);
  const [filter, setFilter]   = uS6("all");   // all | ready | active | pending
  const [running, setRunning] = uS6({});
  const allWf = uM6(deriveWorkflows, []);

  const filtered = uM6(() =>
    allWf.filter(w => filter === "all" || w.status === filter),
    [allWf, filter]
  );

  const byTeam = uM6(() => ({
    eng:  filtered.filter(w => w.team === "eng"),
    proc: filtered.filter(w => w.team === "proc"),
    mfg:  filtered.filter(w => w.team === "mfg"),
  }), [filtered]);

  const sel = allWf.find(w => w.id === selId);

  const runAction = (wf, action) => {
    setRunning(r => ({ ...r, [wf.id]: action }));
    setTimeout(() => {
      setRunning(r => ({ ...r, [wf.id]: null }));
      if (setToast) setToast(`✓ ${action} triggered for ${wf.name.slice(0, 30)}…`);
    }, 1200);
  };

  const counts = {
    ready:   allWf.filter(w => w.status === "ready").length,
    active:  allWf.filter(w => w.status === "active").length,
    pending: allWf.filter(w => w.status === "pending").length,
  };

  return (
    <div style={{ padding: 14, display: "grid", gridTemplateColumns: "1fr 280px", gridTemplateRows: "auto 1fr", gap: 14, height: "100%", minHeight: 0 }}>

      {/* ── KPI strip ── */}
      <Panel style={{ gridColumn: "1/-1" }} title="Workflow Hub · Tenant-Agnostic Fallback · Auto-derived actions">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)" }}>
          {[
            ["Total Workflows", allWf.length, "info"],
            ["Ready to Run",    counts.ready,  "ok"],
            ["In Progress",     counts.active, "accent"],
            ["Pending",         counts.pending,"warn"],
            ["Engineering",     byTeam.eng.length,  "info"],
            ["Procurement",     byTeam.proc.length, "accent"],
            ["Manufacturing",   byTeam.mfg.length,  "ok"],
          ].map(([k, v, t]) => (
            <div key={k} style={{ padding: "10px 12px", borderRight: "1px solid var(--line-soft)" }}>
              <div className="label" style={{ whiteSpace: "normal", overflow: "visible", textOverflow: "clip", lineHeight: 1.3 }}>{k}</div>
              <div className="mono tnum" style={{ fontSize: 22, color: `var(--${t})` }}>{v}</div>
            </div>
          ))}
        </div>
        {/* filter bar */}
        <div style={{ padding: "6px 12px", borderTop: "1px solid var(--line-soft)", display: "flex", gap: 6, alignItems: "center" }}>
          <span className="label">Filter:</span>
          {["all","ready","active","pending"].map(f => (
            <Btn key={f} size="sm" variant={f === filter ? "primary" : "ghost"} onClick={() => setFilter(f)}>
              {f === "all" ? "All" : f.charAt(0).toUpperCase() + f.slice(1)}
            </Btn>
          ))}
          <div style={{ flex: 1 }}/>
          <span className="muted mono" style={{ fontSize: 12 }}>Auto-derived from OAM BOM · {allWf.length} actions detected</span>
        </div>
      </Panel>

      {/* ── 3-column Kanban ── */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12, minHeight: 0, overflow: "hidden" }}>
        {(["eng","proc","mfg"]).map(teamId => {
          const tc = TEAM_CONFIG[teamId];
          const cards = byTeam[teamId];
          return (
            <div key={teamId} style={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
              {/* lane header */}
              <div style={{ padding: "8px 12px", borderRadius: "6px 6px 0 0", marginBottom: 1,
                background: tc.bg, border: `1px solid color-mix(in oklch,${tc.color} 30%,transparent)`,
                borderBottom: `2px solid ${tc.color}` }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontSize: 12, fontWeight: 600, color: tc.color }}>{tc.label}</span>
                  <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{cards.length} actions</span>
                </div>
              </div>
              {/* scrollable cards */}
              <div style={{ flex: 1, overflow: "auto", padding: "8px 0", paddingRight: 2 }}>
                {cards.length === 0
                  ? <div style={{ padding: 16, textAlign: "center", color: "var(--ink-3)" }} className="mono">No actions</div>
                  : cards.map(wf => <WfCard key={wf.id} wf={wf}
                      selId={selId} setSelId={setSelId} running={running} runAction={runAction}/>)}
              </div>
            </div>
          );
        })}
      </div>

      {/* ── Detail panel ── */}
      <div style={{ display: "flex", flexDirection: "column", gap: 12, minHeight: 0 }}>
        {sel ? (
          <>
            <Panel title={`${sel.id} · Detail`}>
              <div style={{ padding: 12 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                  {I(WF_TYPES[sel.type].icon, { size: 16 })}
                  <span style={{ fontSize: 13, color: "var(--ink)" }}>{sel.name}</span>
                </div>
                <div className="muted" style={{ fontSize: 12, lineHeight: 1.5, marginBottom: 10 }}>{sel.desc}</div>
                <div className="hr"/>
                {[["OAM Item", `OAM-${sel.itemNums[0]}`], ["Qty", sel.qty], ["Priority", sel.priority], ["Status", sel.status]].map(([k,v]) => (
                  <div key={k} style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 8, padding: "3px 0" }}>
                    <span className="label">{k}</span>
                    <span className="mono" style={{ fontSize: 12, color: "var(--ink-2)" }}>{v}</span>
                  </div>
                ))}
                <div className="hr"/>
                <div className="label" style={{ marginBottom: 6 }}>Steps</div>
                {sel.steps.map((s, i) => (
                  <div key={s} style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: 6, padding: "4px 0",
                    borderBottom: "1px solid var(--line-soft)", alignItems: "center" }}>
                    <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{String(i+1).padStart(2,"0")}</span>
                    <span style={{ fontSize: 12, color: "var(--ink-2)" }}>{s}</span>
                  </div>
                ))}
              </div>
            </Panel>
            <Panel title="Trigger Actions">
              <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 6 }}>
                {sel.actions.map(action => {
                  const _triggerActionBtnStyle = { padding: "8px 12px", borderRadius: 5, cursor: "pointer",
                    border: `1px solid ${WF_TYPES[sel.type].color}`,
                    background: "transparent", color: WF_TYPES[sel.type].color,
                    fontFamily: "var(--font-mono)", fontSize: 12, textAlign: "left",
                    display: "flex", alignItems: "center", gap: 8 };
                  return (
                  <button key={action} onClick={() => runAction(sel, action)} style={_triggerActionBtnStyle}>
                    {I("Play", { size: 12 })} {action}
                  </button>
                  );
                })}
              </div>
            </Panel>
            <Panel title="Linked BOM Data">
              <div style={{ padding: 10 }}>
                {[["Design %", sel.d + "%", sel.d >= 80 ? "ok" : "warn"],
                  ["Mfg %", sel.m + "%", sel.m >= 80 ? "ok" : sel.m > 0 ? "warn" : "err"],
                  ["Test %", sel.t + "%", sel.t >= 80 ? "ok" : sel.t > 0 ? "warn" : "err"],
                ].map(([k,v,t]) => (
                  <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", borderBottom: "1px solid var(--line-soft)" }}>
                    <span style={{ fontSize: 12 }}>{k}</span>
                    <Pill tone={t} dot={false}>{v}</Pill>
                  </div>
                ))}
              </div>
            </Panel>
          </>
        ) : (
          <Panel title="Select a workflow">
            <div style={{ padding: 24, textAlign: "center", color: "var(--ink-3)" }}>
              <div style={{ marginBottom: 8 }}>{I("Flow", { size: 28 })}</div>
              <div className="mono" style={{ fontSize: 12 }}>Click any workflow card to inspect and trigger actions</div>
            </div>
          </Panel>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────── CONNECTORS ──────────────────────────────

// Per-tenant CONNS + seed jobs. The legacy generic branch hardcoded
// OAM/space-program adapters and a "Export OAM-1 Drawing" job, which leaked
// into Aetherion + Mittelstand. Each tenant now owns its adapter stack and
// trigger copy, mirroring its real CAD/CAE/ERP/MES/SCM landscape.
function getConnectorsFor(tenantId) {
  if (tenantId === "aetherion" || tenantId === "htu220") {
    return [
      { id: "CAD", name: "CAD · Siemens NX", color: "var(--cool)", status: "connected",
        desc: "Sync flight-hardware geometry, manage revisions, export drawing pack to Teamcenter",
        triggers: [
          { id:"cad-1", label:"Sync part tree from NX",         desc:"Pull latest KESTREL-3 12U bus geometry into E-BOM",  icon:"Tree"     },
          { id:"cad-2", label:"Export drawing pack",            desc:"Release PDF+STEP drawing set to Teamcenter PLM",      icon:"ArrowD"   },
          { id:"cad-3", label:"Check in revision",              desc:"Lock NX revision and stamp on Teamcenter record",     icon:"Check"    },
          { id:"cad-4", label:"Open part in NX",                desc:"Launch Siemens NX and load selected part number",     icon:"Cube"     },
        ]},
      { id: "CAE", name: "CAE · Ansys / Nastran", color: "var(--info)", status: "connected",
        desc: "Submit structural/thermal jobs, import results, link to flight items",
        triggers: [
          { id:"cae-1", label:"Submit qual analysis",           desc:"Queue TVAC / vibe / shock job on HPC cluster",        icon:"Bolt"     },
          { id:"cae-2", label:"Import results to PLM",          desc:"Attach simulation report to part record",             icon:"ArrowD"   },
          { id:"cae-3", label:"Run mesh check",                 desc:"Validate mesh quality for selected geometry",         icon:"Mesh"     },
          { id:"cae-4", label:"Compare revisions",              desc:"Diff two analysis runs and report delta",             icon:"Diff"     },
        ]},
      { id: "PLM", name: "PLM · Teamcenter", color: "var(--accent)", status: "connected",
        desc: "Item-master sync, ECO release, ITAR-aware metadata",
        triggers: [
          { id:"plm-1", label:"Sync KESTREL-3 BOM",             desc:"Push KESTREL-3 bus BOM to Teamcenter item master",    icon:"Plug"     },
          { id:"plm-2", label:"Release ECO-AET-0042",           desc:"Promote ECO through reviewer → approver flow",        icon:"Clipboard"},
          { id:"plm-3", label:"Update item master",             desc:"Sync metadata fields to Teamcenter record",           icon:"DB"       },
          { id:"plm-4", label:"Pull qual heritage",              desc:"Check Teamcenter TRL / flight-heritage tags",         icon:"Stack"    },
        ]},
      { id: "QMS", name: "QMS · AS9100 / NASA NDE", color: "var(--ok)", status: "connected",
        desc: "AS9100 audit log, NASA non-destructive eval submission",
        triggers: [
          { id:"qms-1", label:"Push to NASA NDE",               desc:"Submit non-destructive eval package",                  icon:"ArrowD"   },
          { id:"qms-2", label:"Log AS9100 event",                desc:"Append audit event to AS9100 register",                icon:"Check"    },
          { id:"qms-3", label:"Raise NCR",                       desc:"Open non-conformance report from shop finding",        icon:"Flag"     },
          { id:"qms-4", label:"Sync MIL-STD-1553 ICD",           desc:"Push avionics interface control doc",                  icon:"Plug"     },
        ]},
      { id: "GOV", name: "GOV · ITAR registry", color: "var(--warn)", status: "warn",
        desc: "US-person verification, export-control gating, USML category tags",
        triggers: [
          { id:"gov-1", label:"Verify US-person clearance",      desc:"Check ITAR registry for selected reviewer",            icon:"Eye"      },
          { id:"gov-2", label:"Apply USML Category XV",          desc:"Tag selected drawing as USML controlled",              icon:"Flag"     },
          { id:"gov-3", label:"Export license check",            desc:"Pull current DSP-5 / DSP-83 status",                   icon:"Clipboard"},
          { id:"gov-4", label:"Lock non-US viewers",             desc:"Restrict drawing visibility to US-person roster",      icon:"X"        },
        ]},
    ];
  }
  if (tenantId === "mittelstand") {
    return [
      { id: "CAD", name: "CAD · Siemens NX / Heidenhain", color: "var(--cool)", status: "connected",
        desc: "Sync mill geometry, push G-code drops to TNC 640 controllers",
        triggers: [
          { id:"cad-1", label:"Sync MTL-220 part tree",         desc:"Pull MTL-220 Rev D part geometry into E-BOM",         icon:"Tree"     },
          { id:"cad-2", label:"Export to Heidenhain TNC",       desc:"Release G-code drop to TNC 640 controller",            icon:"ArrowD"   },
          { id:"cad-3", label:"Check in revision",              desc:"Lock NX revision and stamp on PLM record",             icon:"Check"    },
          { id:"cad-4", label:"Open part in NX",                desc:"Launch NX and load selected part number",              icon:"Cube"     },
        ]},
      { id: "CAE", name: "CAE · Ansys / Nastran", color: "var(--info)", status: "connected",
        desc: "Submit thermal / vibration jobs, link to MTL-220 frame",
        triggers: [
          { id:"cae-1", label:"Submit frame analysis",          desc:"Queue thermal / vibration job on HPC cluster",         icon:"Bolt"     },
          { id:"cae-2", label:"Import results to PLM",          desc:"Attach simulation report to part record",             icon:"ArrowD"   },
          { id:"cae-3", label:"Run mesh check",                  desc:"Validate mesh quality for selected geometry",         icon:"Mesh"     },
          { id:"cae-4", label:"Compare revisions",              desc:"Diff two analysis runs and report delta",             icon:"Diff"     },
        ]},
      { id: "ERP", name: "ERP · SAP B1 + proALPHA", color: "var(--accent)", status: "connected",
        desc: "Sync item master, create production orders, push to proALPHA",
        triggers: [
          { id:"erp-1", label:"Sync to SAP B1",                  desc:"Push MTL-220 BOM to SAP Business One",                 icon:"Plug"     },
          { id:"erp-2", label:"Push to proALPHA",                desc:"Raise material requisition in proALPHA",               icon:"Clipboard"},
          { id:"erp-3", label:"Update item master",              desc:"Sync PLM metadata fields to SAP item record",          icon:"DB"       },
          { id:"erp-4", label:"Pull inventory status",            desc:"Check SAP stock for MTL-220 BOM items",                icon:"Stack"    },
        ]},
      { id: "CNC", name: "CNC · Heidenhain TNC 640", color: "var(--ok)", status: "connected",
        desc: "Dispatch G-code drops to mills, capture cycle time, log probe runs",
        triggers: [
          { id:"cnc-1", label:"Dispatch work order",             desc:"Send WO to mill for selected items",                    icon:"Factory"  },
          { id:"cnc-2", label:"Pull cycle time",                  desc:"Read latest spindle / feed metrics from TNC",          icon:"ArrowR"   },
          { id:"cnc-3", label:"Close operation",                  desc:"Mark OP complete and capture actual hours",            icon:"Check"    },
          { id:"cnc-4", label:"Raise NCR",                        desc:"Open non-conformance report from shop finding",        icon:"X"        },
        ]},
      { id: "QMS", name: "QMS · IATF 16949 / Zeiss CMM", color: "var(--warn)", status: "warn",
        desc: "Supplier audit log, PPAP Level 3 submission, VDA Band 6.3",
        triggers: [
          { id:"qms-1", label:"Submit PPAP package",             desc:"Push PPAP Level 3 to MAHLE supplier portal",            icon:"Clipboard"},
          { id:"qms-2", label:"Log IATF audit event",            desc:"Append audit finding to IATF 16949 register",           icon:"Calendar" },
          { id:"qms-3", label:"Supplier scorecard",              desc:"Pull latest on-time delivery scores",                   icon:"BarChart" },
          { id:"qms-4", label:"VDA Band 6.3 audit",              desc:"Schedule supplier process audit",                       icon:"Bolt"     },
        ]},
    ];
  }
  // Fallback for unknown tenants — sensible generic stack without OAM copy
  return [
    { id: "CAD", name: "CAD", color: "var(--cool)", status: "connected", desc: "Sync part geometry, manage revisions",
      triggers: [
        { id:"cad-1", label:"Sync BOM",                desc:"Pull latest part tree into E-BOM",                                  icon:"Tree"     },
        { id:"cad-2", label:"Export drawing pack",     desc:"Release PDF+DXF drawing set",                                       icon:"ArrowD"   },
        { id:"cad-3", label:"Check in revision",       desc:"Lock CAD revision and stamp on PLM",                                icon:"Check"    },
        { id:"cad-4", label:"Open part in CAD",        desc:"Launch CAD app and load selected part",                              icon:"Cube"     },
      ]},
  ];
}

// Per-tenant seed jobs — replaces the legacy generic seed that contained
// "Export OAM-1 Drawing", an OAM/space copy that was bleeding into all tenants.
function getSeedJobsFor(tenantId) {
  if (tenantId === "aetherion" || tenantId === "htu220") {
    return [
      { id:"JOB-001", conn:"PLM", action:"Sync KESTREL-3 BOM to Teamcenter", status:"complete", ts:"09:41", items:182 },
      { id:"JOB-002", conn:"CAD", action:"Export drawing pack",              status:"complete", ts:"09:28", items:1   },
      { id:"JOB-003", conn:"CAE", action:"Submit Ansys TVAC job",            status:"running",  ts:"09:15", items:3   },
      { id:"JOB-004", conn:"QMS", action:"Push to NASA NDE",                 status:"complete", ts:"08:55", items:4   },
      { id:"JOB-005", conn:"GOV", action:"Verify US-person clearance",       status:"failed",   ts:"08:30", items:1   },
      { id:"JOB-006", conn:"PLM", action:"Update item master",                status:"complete", ts:"08:10", items:18  },
      { id:"JOB-007", conn:"CAD", action:"Check in revision A",              status:"complete", ts:"Yesterday", items:7 },
      { id:"JOB-008", conn:"CAE", action:"Import Ansys results",             status:"complete", ts:"Yesterday", items:2 },
    ];
  }
  if (tenantId === "mittelstand") {
    return [
      { id:"JOB-001", conn:"ERP", action:"Sync MTL-220 BOM to SAP B1",       status:"complete", ts:"09:41", items:122 },
      { id:"JOB-002", conn:"CAD", action:"Export to Heidenhain TNC",          status:"complete", ts:"09:28", items:1   },
      { id:"JOB-003", conn:"CAE", action:"Submit frame analysis",             status:"running",  ts:"09:15", items:3   },
      { id:"JOB-004", conn:"CNC", action:"Dispatch WO to mill MZ-04",         status:"complete", ts:"08:55", items:4   },
      { id:"JOB-005", conn:"ERP", action:"Push to proALPHA",                  status:"failed",   ts:"08:30", items:1   },
      { id:"JOB-006", conn:"ERP", action:"Update item master",                status:"complete", ts:"08:10", items:18  },
      { id:"JOB-007", conn:"CAD", action:"Check in revision D",              status:"complete", ts:"Yesterday", items:7 },
      { id:"JOB-008", conn:"QMS", action:"Submit PPAP Level 3",              status:"complete", ts:"Yesterday", items:2 },
    ];
  }
  // Fallback — no OAM copy
  return [
    { id:"JOB-001", conn:"CAD", action:"Sync BOM",            status:"complete", ts:"09:41", items:1 },
  ];
}

function ScreenConnectors({ setToast }) {
  const tenant = useActiveTenant();
  const isTritan = !!(tenant && tenant.tenant && tenant.tenant.id === "tritan");
  if (isTritan) {
    return <ScreenConnectorsTritan tenant={tenant} setToast={setToast} />;
  }
  const tenantId = (tenant && tenant.tenant && tenant.tenant.id) || null;
  const CONNS = getConnectorsFor(tenantId);
  // Default the active connector to the first one (CAD for all known tenants),
  // but tolerate unknown tenants whose stacks might start elsewhere.
  const defaultSel = (CONNS[0] && CONNS[0].id) || "CAD";
  const [selConn, setSelConn] = uS6(defaultSel);
  const [jobs, setJobs]       = uS6(getSeedJobsFor(tenantId));

  const conn = CONNS.find(c => c.id === selConn);

  const triggerAction = (t) => {
    const newJob = {
      id: `JOB-${String(jobs.length + 1).padStart(3,"0")}`,
      conn: selConn, action: t.label,
      status: "running", ts: new Date().toLocaleTimeString("en-GB",{hour:"2-digit",minute:"2-digit"}),
      items: Math.floor(Math.random() * 20) + 1,
    };
    setJobs(j => [newJob, ...j]);
    if (setToast) setToast(`▶ ${t.label} — job dispatched`);
    setTimeout(() => {
      setJobs(j => j.map(x => x.id === newJob.id ? { ...x, status: "complete" } : x));
    }, 2400);
  };

  return (
    <div style={{ padding: 14, display: "grid", gridTemplateColumns: "220px 1fr 300px", gap: 14, height: "100%", minHeight: 0 }}>

      {/* ── Connector list ── */}
      <Panel title="Connectors">
        <div style={{ padding: 6 }}>
          {CONNS.map(c => (
            <div key={c.id} role="button" tabIndex={0} onClick={() => setSelConn(c.id)}
              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setSelConn(c.id); } }}
              style={{ padding: "10px 10px", borderRadius: 5, cursor: "pointer", marginBottom: 2,
                background: c.id === selConn ? "var(--bg-3)" : "transparent",
                borderLeft: `2px solid ${c.id === selConn ? c.color : "transparent"}` }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontSize: 12, color: c.id === selConn ? "var(--ink)" : "var(--ink-2)" }}>{c.id}</span>
                <span className={`pill ${c.status === "connected" ? "ok" : "warn"}`}>
                  <span className={`dot ${c.status === "connected" ? "pulse" : ""}`}/>{c.status}
                </span>
              </div>
              <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{c.name.split("·")[1]?.trim()}</div>
            </div>
          ))}
        </div>
      </Panel>

      {/* ── Trigger actions ── */}
      <div style={{ display: "flex", flexDirection: "column", gap: 14, minHeight: 0 }}>
        {conn && (
          <>
            <Panel title={conn.name} right={
              <span className={`pill ${conn.status === "connected" ? "ok" : "warn"}`}>
                <span className={`dot ${conn.status === "connected" ? "pulse" : ""}`}/>{conn.status}
              </span>
            }>
              <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--line-soft)", color: "var(--ink-3)", fontSize: 12 }}>
                {conn.desc}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, padding: 14 }}>
                {conn.triggers.map(t => {
                  const _triggerCardStyle = { padding: 14, border: "1px solid var(--line-soft)", borderRadius: 8,
                    background: "var(--bg-1)", display: "flex", flexDirection: "column", gap: 8 };
                  const _triggerRunBtnStyle = { marginTop: "auto", padding: "6px 0", borderRadius: 5, cursor: "pointer",
                    border: `1px solid ${conn.color}`, background: "transparent",
                    color: conn.color, fontFamily: "var(--font-mono)", fontSize: 12,
                    display: "flex", alignItems: "center", justifyContent: "center", gap: 6 };
                  return (
                  <div key={t.id} style={_triggerCardStyle}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ color: conn.color }}>{I(t.icon, { size: 16 })}</span>
                      <span style={{ fontSize: 13, color: "var(--ink)" }}>{t.label}</span>
                    </div>
                    <div className="muted" style={{ fontSize: 12, lineHeight: 1.5 }}>{t.desc}</div>
                    <button onClick={() => triggerAction(t)}
                      style={_triggerRunBtnStyle}>
                      {I("Play", { size: 11 })} Run
                    </button>
                  </div>
                  );
                })}
              </div>
            </Panel>

            {/* Job history for this connector */}
            <Panel title={`Recent · ${conn.id} jobs`}>
              <table className="dtable">
                <thead><tr><th>Job</th><th>Action</th><th>Items</th><th>Time</th><th>Status</th></tr></thead>
                <tbody>
                  {jobs.filter(j => j.conn === conn.id).slice(0, 6).map(j => (
                    <tr key={j.id}>
                      <td className="mono">{j.id}</td>
                      <td style={{ color: "var(--ink)" }}>{j.action}</td>
                      <td className="tnum">{j.items}</td>
                      <td className="tnum">{j.ts}</td>
                      <td>
                        <span className={`pill ${j.status === "complete" ? "ok" : j.status === "running" ? "info" : "err"}`}>
                          <span className={`dot ${j.status === "running" ? "pulse" : ""}`}/>{j.status}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Panel>
          </>
        )}
      </div>

      {/* ── All recent jobs ── */}
      <Panel title="All Recent Jobs">
        <div style={{ padding: 8 }}>
          {jobs.slice(0, 12).map((j, i) => {
            const c = CONNS.find(x => x.id === j.conn);
            const _jobBadgeStyle = { width: 28, height: 20, borderRadius: 3,
              background: `color-mix(in oklch,${c?.color || "var(--info)"} 15%,transparent)`,
              border: `1px solid color-mix(in oklch,${c?.color || "var(--info)"} 30%,transparent)`,
              display: "grid", placeItems: "center",
              fontFamily: "var(--font-mono)", fontSize: 12, color: c?.color };
            return (
              <div key={j.id} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 8,
                padding: "7px 6px", borderBottom: "1px solid var(--line-soft)", alignItems: "center" }}>
                <span style={_jobBadgeStyle}>{j.conn}</span>
                <div>
                  <div style={{ fontSize: 12, color: "var(--ink)" }}>{j.action}</div>
                  <div className="muted mono" style={{ fontSize: 12 }}>{j.ts} · {j.items} items</div>
                </div>
                <span className={`pill ${j.status === "complete" ? "ok" : j.status === "running" ? "info" : "err"}`}>
                  <span className={`dot ${j.status === "running" ? "pulse" : ""}`}/>
                  {j.status}
                </span>
              </div>
            );
          })}
        </div>
      </Panel>
    </div>
  );
}

function TrCard({ c, trSel, setTrSel, trRun, trRunAction }) {
  const tc = WF_TYPES[c.type] || { label: "Workflow", color: "var(--info)", icon: "Flow" };
  const isSel = trSel === c.id;
  const isRunning = !!trRun[c.id];
  const prioColor = c.priority === "high" ? "var(--err)" : c.priority === "medium" ? "var(--warn)" : "var(--line)";
  const _trCardStyle = { padding: "10px 12px", borderRadius: 6, cursor: "pointer",
    border: `1px solid ${isSel ? tc.color : "var(--line-soft)"}`,
    background: isSel ? `color-mix(in oklch,${tc.color} 6%,var(--bg-1))` : "var(--bg-1)",
    marginBottom: 8, position: "relative", transition: "border-color .15s" };
  const _trCardRunBtnStyle = { flex: 1, padding: "5px 0", borderRadius: 4, border: `1px solid ${tc.color}`,
    background: isRunning ? tc.color : "transparent",
    color: isRunning ? "var(--bg-0)" : tc.color,
    fontFamily: "var(--font-mono)", fontSize: 12, cursor: isRunning ? "default" : "pointer",
    letterSpacing: ".04em", transition: "background .2s, color .2s" };
  return (
    <div role="button" tabIndex={0} onClick={() => setTrSel(isSel ? null : c.id)}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setTrSel(isSel ? null : c.id); } }}
      style={_trCardStyle}>
      <div style={{ position: "absolute", left: 0, top: 6, bottom: 6, width: 3, background: prioColor, borderRadius: "0 2px 2px 0" }} />
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4,
          background: `color-mix(in oklch,${tc.color} 15%,transparent)`,
          border: `1px solid color-mix(in oklch,${tc.color} 40%,transparent)`,
          borderRadius: 3, padding: "2px 6px" }}>
          <span style={{ color: tc.color }}>{I(tc.icon, { size: 10 })}</span>
          <span className="mono" style={{ fontSize: 12, color: tc.color, textTransform: "uppercase", letterSpacing: ".06em" }}>{tc.label}</span>
        </span>
        <span className={`pill ${c.status === "ready" ? "ok" : c.status === "active" ? "info" : ""}`} style={{ fontSize: 12 }}>
          <span className={`dot ${c.status === "active" ? "pulse" : ""}`} />{c.status}
        </span>
      </div>
      <div style={{ fontSize: 12, color: "var(--ink)", marginBottom: 3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.name}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
        <Tag>{c.ref}</Tag>
        <span className="muted mono" style={{ fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.meta}</span>
      </div>
      <div style={{ display: "flex", gap: 6 }}>
        <button onClick={e => { e.stopPropagation(); trRunAction(c, c.actions[0]); }}
          disabled={isRunning}
          style={_trCardRunBtnStyle}>
          {isRunning ? `Running: ${trRun[c.id]}…` : `Run · ${c.actions[0]}`}
        </button>
        {(() => {
          const _trCardViewBtnStyle = { padding: "5px 10px", borderRadius: 4, border: "1px solid var(--line)",
            background: "transparent", color: "var(--ink-2)",
            fontFamily: "var(--font-mono)", fontSize: 12, cursor: "pointer", letterSpacing: ".04em" };
          return (
            <button onClick={e => { e.stopPropagation(); setTrSel(c.id); }} style={_trCardViewBtnStyle}>
              View
            </button>
          );
        })()}
      </div>
    </div>
  );
}

// ───────────────────────── TRITAN · WORKFLOW HUB ─────────────────────────
function ScreenWorkflowsTritan({ tenant, setToast }) {
  const wos        = (tenant && tenant.work_orders) || [];
  const ecos       = (tenant && tenant.eco) || [];
  const sups       = (tenant && tenant.suppliers) || [];
  const returns    = (tenant && tenant.field_returns) || [];
  const ledger     = (tenant && tenant.ledger) || [];

  // ── Tritan workflow cards (3 teams · ~9 cards) ────────────────────────
  const TR_CARDS = uM6(() => {
    const eco0051 = ecos.find(e => /0051/.test(e.id || "")) || null;
    const eco0042 = ecos.find(e => /0042/.test(e.id || "")) || null;
    const wo219   = wos.find(w => /44219/.test(w.id || ""))   || null;
    const wo220   = wos.find(w => /44220/.test(w.id || ""))   || null;
    const spire   = sups.find(s => /spire/i.test(s.name || "")) || null;
    const athena  = sups.find(s => /athena/i.test(s.name || "")) || null;
    const vega    = sups.find(s => /vega/i.test(s.name || ""))   || null;
    const rmaCount = returns.length;

    return [
      // Engineering
      { id: "ECO-0051", team: "eng", type: "cdr-action",
        name: "ECO-0051 · NRV C.I. → S.G.-400 redesign",
        ref: eco0051 ? eco0051.id : "ECO-0051",
        priority: "high", status: "active",
        meta: `${rmaCount} RMA-driven · awaiting Devansh A. sign-off`,
        desc: "Critical re-design of the non-return valve casting. Cast iron stress-fracture pattern across "+rmaCount+" RMA pumps drove material change to S.G.-400 ductile iron. Awaiting CDR sign-off from Devansh A. before drawing release.",
        artifacts: [
          { label: "Open packet · /build/eco", to: "/build/eco" },
          { label: "Ledger · E-0014 (sign-off)", to: "/auditor/ledger?event=E-0014" },
        ],
        steps: ["Lock S.G.-400 spec on DRG-rev-C", "Devansh A. CDR sign-off", "Release to ERP item master", "Notify Spire Foundry"],
        actions: ["Open ECO", "Sign-off", "Reassign", "Escalate"],
      },
      (function() {
        var wfMoney = (typeof window !== "undefined" && window.forgeI18n && window.forgeI18n.formatMoneyMinor)
          ? (window.forgeI18n.formatMoneyMinor("280000", "INR") || "₹2,800")
          : "₹2,800";
        return { id: "ECO-0042", team: "eng", type: "design-review",
        name: "ECO-0042 · V5 → V4 carryover for M-26102",
        ref: eco0042 ? eco0042.id : "ECO-0042",
        priority: "low", status: "ready",
        meta: "cost-down " + wfMoney + "/u · approved",
        desc: "Carryover of V4 impeller geometry into the M-26102 internal-stock pump. Avoids a one-off V5 toolset, saves " + wfMoney + "/u. Approved · ready to fold into the next 50u WO-44220 batch.",
        artifacts: [
          { label: "ECO packet · /build/eco", to: "/build/eco" },
          { label: "Linked WO-44220", to: "/line/queue" },
        ],
        steps: ["Apply carryover on M-26102 BOM", "Confirm tooling reuse", "Update routing rev"],
        actions: ["Apply Carryover", "View BOM", "Reassign"],
      }; })(),
      { id: "DRG-M27418-C", team: "eng", type: "design-kickoff",
        name: "DRG-M27418-PMP-rev-C · CAD check-in",
        ref: "M-27418",
        priority: "medium", status: "pending",
        meta: "rev B → rev C · pending CAD check-in",
        desc: "Drawing revision C bumps tolerance band on stator core stack and adds the new NRV port for ECO-0051. Pending CAD check-in by lead engineer.",
        artifacts: [
          { label: "ERP item master · /build/erp", to: "/build/erp" },
        ],
        steps: ["CAD check-in rev C", "PLM stamp", "Push to ERP item master", "Issue change notice"],
        actions: ["Check-in CAD", "Open in CATIA", "Notify Mfg"],
      },

      // Procurement
      { id: "AUD-SUP-02", team: "proc", type: "supplier-qa",
        name: spire ? `${spire.name} · EHS audit finding` : "Spire Foundry · EHS audit finding",
        ref: "AUD-SUP-02",
        priority: "high", status: "pending",
        meta: "87% conditional approval · re-audit due 2026-05-12",
        desc: "Spire Foundry scored 87% on the Helios audit · conditional approval pending closure of the EHS deviation list. Re-audit scheduled 2026-05-12. Cannot release ECO-0051 castings until cleared.",
        artifacts: [
          { label: "Audit · /forge/audit", to: "/forge/audit" },
          { label: "Supplier scorecard · /forge/audit", to: "/forge/audit" },
        ],
        steps: ["Receive EHS CAPA from Spire", "Verify on-site re-audit", "Lift conditional flag", "Release for ECO-0051 castings"],
        actions: ["Open Audit", "Schedule Re-audit", "Reassign"],
      },
      { id: "PO-LHP-50", team: "proc", type: "create-po",
        name: athena ? `${athena.name} · motor-base LHP` : "Athena Castings · motor-base LHP",
        ref: "WO-44219",
        priority: "medium", status: "active",
        meta: "50-unit PO open · LT 35d",
        desc: "Open PO for 50× motor-base LHP castings against WO-44219 Helios pilot. Lead time 35 days. Tracking weekly.",
        artifacts: [
          { label: "PO · /build/erp", to: "/build/erp" },
        ],
        steps: ["Confirm dispatch slot", "Track in transit", "GR on receipt", "Release to MOTOR-ASSY"],
        actions: ["Open PO", "Expedite", "Update ETA"],
      },
      { id: "PT-SS410", team: "proc", type: "parts-tracking",
        name: vega ? `${vega.name} · rotor SS410` : "Vega Shafts · rotor SS410",
        ref: "SS410-ROT",
        priority: "high", status: "active",
        meta: "stock <10d · expediting",
        desc: "Rotor shaft SS410 stock is below the 10-day cover threshold across both Helios and TPX-H pools. Expediting next batch from Vega Shafts. Risk to WO-44219 if slip > 5d.",
        artifacts: [
          { label: "ERP stock view · /build/erp", to: "/build/erp" },
        ],
        steps: ["Ping Vega Shafts", "Lock dispatch date", "Update PO ETA", "Release to line"],
        actions: ["Expedite", "Update ETA", "Escalate"],
      },

      // Manufacturing
      { id: "WO-44219", team: "mfg", type: "work-order",
        name: "WO-44219 · 500u M-27418 Helios pilot",
        ref: "WO-44219",
        priority: "high", status: "active",
        meta: wo219 ? `${wo219.qty || 500}u · 8u in-flight at MOTOR-ASSY · 0 NCRs` : "8u in-flight at MOTOR-ASSY · 0 NCRs",
        desc: "Helios pilot work order · 500u of the M-27418 pump. 8u currently at the MOTOR-ASSY station, zero NCRs across stations 1-6. ECO-0051 cut-in at u#101.",
        artifacts: [
          { label: "Line queue · /line/queue", to: "/line/queue" },
          { label: "Auditor ledger · WO-44219", to: "/auditor/ledger?wo=WO-44219" },
        ],
        steps: ["Stamp serials 9-16 at MOTOR-ASSY", "Hand-off to QG-12", "Capture HV test results", "Close station 7"],
        actions: ["View Line", "Reassign Cell", "Raise NCR", "Escalate"],
      },
      { id: "WO-44220", team: "mfg", type: "work-order",
        name: "WO-44220 · 50u M-26102 internal stock",
        ref: "WO-44220",
        priority: "low", status: "ready",
        meta: wo220 ? `${wo220.qty || 50}u V4 internal stock · COMPLETE` : "50u V4 internal stock · COMPLETE",
        desc: "Internal-stock M-26102 V4 batch · 50u complete · all gates passed · ready to close in MES.",
        artifacts: [
          { label: "Close in MES · /line/queue", to: "/line/queue" },
        ],
        steps: ["Final inspection sign-off", "Close in MES", "Update ERP stock"],
        actions: ["Close WO", "Update Stock", "Archive"],
      },
      { id: "QG-12", team: "mfg", type: "test-schedule",
        name: "QG-12 · stator winding HV test",
        ref: "QG-12",
        priority: "medium", status: "ready",
        meta: "30/30 pass on TPX-H pool · ledger appended",
        desc: "Quality gate QG-12 · stator winding HV test on TPX-H pump pool · 30 of 30 serials pass. Results appended to ledger event E-0019. Roll the same fixture to Helios serials 9-16.",
        artifacts: [
          { label: "Ledger · E-0019", to: "/auditor/ledger?event=E-0019" },
        ],
        steps: ["Move fixture to Helios bay", "Run HV test on serials 9-16", "Append results", "Stamp QG-12 pass"],
        actions: ["Run Gate", "View Results", "Reassign"],
      },
    ];
  }, [wos, ecos, sups, returns]);

  const [trSel,    setTrSel]    = uS6(null);
  const [trFilter, setTrFilter] = uS6("all");
  const [trRun,    setTrRun]    = uS6({});

  const trFiltered = uM6(() =>
    TR_CARDS.filter(c => trFilter === "all" || c.status === trFilter),
    [TR_CARDS, trFilter]
  );
  const trByTeam = {
    eng:  trFiltered.filter(c => c.team === "eng"),
    proc: trFiltered.filter(c => c.team === "proc"),
    mfg:  trFiltered.filter(c => c.team === "mfg"),
  };
  const trCounts = {
    ready:   TR_CARDS.filter(c => c.status === "ready").length,
    active:  TR_CARDS.filter(c => c.status === "active").length,
    pending: TR_CARDS.filter(c => c.status === "pending").length,
  };
  const trSelCard = TR_CARDS.find(c => c.id === trSel) || null;

  const trRunAction = (card, action) => {
    setTrRun(r => ({ ...r, [card.id]: action }));
    setTimeout(() => {
      setTrRun(r => ({ ...r, [card.id]: null }));
      if (setToast) setToast(`✓ ${action} · ${card.id}`);
    }, 1100);
  };
  const goTo = (path) => {
    if (!path) return;
    if (typeof navigate === "function") navigate(path);
    else window.location.hash = path;
  };

  return (
    <div style={{ padding: 14, display: "grid", gridTemplateColumns: "1fr 360px", gridTemplateRows: "auto 1fr", gap: 14, height: "100%", minHeight: 0 }}>

      <Panel style={{ gridColumn: "1/-1" }} title="Workflow Hub · Tritan Pump CDMO · Helios + TPX-H + M-26102">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)" }}>
          {[
            ["Total Workflows", TR_CARDS.length, "info"],
            ["Ready",           trCounts.ready,  "ok"],
            ["Active",          trCounts.active, "accent"],
            ["Pending",         trCounts.pending,"warn"],
            ["Engineering",     trByTeam.eng.length,  "info"],
            ["Procurement",     trByTeam.proc.length, "accent"],
            ["Manufacturing",   trByTeam.mfg.length,  "ok"],
          ].map(([k, v, t]) => (
            <div key={k} style={{ padding: "10px 12px", borderRight: "1px solid var(--line-soft)" }}>
              <div className="label" style={{ whiteSpace: "normal", overflow: "visible", textOverflow: "clip", lineHeight: 1.3 }}>{k}</div>
              <div className="mono tnum" style={{ fontSize: 22, color: `var(--${t})` }}>{v}</div>
            </div>
          ))}
        </div>
        <div style={{ padding: "6px 12px", borderTop: "1px solid var(--line-soft)", display: "flex", gap: 6, alignItems: "center" }}>
          <span className="label">Filter:</span>
          {["all","ready","active","pending"].map(f => (
            <Btn key={f} size="sm" variant={f === trFilter ? "primary" : "ghost"} onClick={() => setTrFilter(f)}>
              {f === "all" ? "All" : f.charAt(0).toUpperCase() + f.slice(1)}
            </Btn>
          ))}
          <div style={{ flex: 1 }} />
          <span className="muted mono" style={{ fontSize: 12 }}>
            ready: {trCounts.ready} · active: {trCounts.active} · pending: {trCounts.pending}
          </span>
        </div>
      </Panel>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12, minHeight: 0, overflow: "hidden" }}>
        {(["eng","proc","mfg"]).map(teamId => {
          const tc = TEAM_CONFIG[teamId];
          const cards = trByTeam[teamId];
          return (
            <div key={teamId} style={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
              <div style={{ padding: "8px 12px", borderRadius: "6px 6px 0 0", marginBottom: 1,
                background: tc.bg, border: `1px solid color-mix(in oklch,${tc.color} 30%,transparent)`,
                borderBottom: `2px solid ${tc.color}` }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontSize: 12, fontWeight: 600, color: tc.color }}>{tc.label}</span>
                  <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{cards.length} actions</span>
                </div>
              </div>
              <div style={{ flex: 1, overflow: "auto", padding: "8px 0", paddingRight: 2 }}>
                {cards.length === 0
                  ? <div style={{ padding: 16, textAlign: "center", color: "var(--ink-3)" }} className="mono">No actions</div>
                  : cards.map(c => <TrCard key={c.id} c={c}
                      trSel={trSel} setTrSel={setTrSel} trRun={trRun} trRunAction={trRunAction}/>)}
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12, minHeight: 0 }}>
        {trSelCard ? (
          <>
            <Panel title={`${trSelCard.id} · Detail`} right={<Tag>{trSelCard.ref}</Tag>}>
              <div style={{ padding: 12 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                  {I((WF_TYPES[trSelCard.type] || {}).icon || "Flow", { size: 16 })}
                  <span style={{ fontSize: 13, color: "var(--ink)" }}>{trSelCard.name}</span>
                </div>
                <div className="muted" style={{ fontSize: 12, lineHeight: 1.5, marginBottom: 10 }}>{trSelCard.desc}</div>
                <div className="hr" />
                {[["Team", TEAM_CONFIG[trSelCard.team].label],
                  ["Ref",  trSelCard.ref],
                  ["Priority", trSelCard.priority],
                  ["Status",   trSelCard.status],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 8, padding: "3px 0" }}>
                    <span className="label">{k}</span>
                    <span className="mono" style={{ fontSize: 12, color: "var(--ink-2)" }}>{v}</span>
                  </div>
                ))}
                <div className="hr" />
                <div className="label" style={{ marginBottom: 6 }}>Checklist</div>
                {trSelCard.steps.map((s, i) => {
                  const _checklistRowStyle = { display: "grid", gridTemplateColumns: "20px 1fr", gap: 6, padding: "4px 0",
                    borderBottom: "1px solid var(--line-soft)", alignItems: "center" };
                  return (
                  <div key={s} style={_checklistRowStyle}>
                    <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{String(i+1).padStart(2,"0")}</span>
                    <span style={{ fontSize: 12, color: "var(--ink-2)" }}>{s}</span>
                  </div>
                  );
                })}
              </div>
            </Panel>
            <Panel title="Related artifacts">
              <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 6 }}>
                {trSelCard.artifacts.map(a => {
                  const _artifactBtnStyle = { padding: "8px 10px", borderRadius: 5, cursor: "pointer",
                    border: "1px solid var(--line)", background: "transparent",
                    color: "var(--ink-2)", fontFamily: "var(--font-mono)", fontSize: 12,
                    textAlign: "left", display: "flex", alignItems: "center", gap: 8 };
                  return (
                  <button key={a.label} onClick={() => goTo(a.to)} style={_artifactBtnStyle}>
                    {I("ArrowR", { size: 12 })} {a.label}
                  </button>
                  );
                })}
              </div>
            </Panel>
            <Panel title="Trigger workflow">
              <div style={{ padding: 10, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
                {trSelCard.actions.map(action => {
                  const _trActionBtnStyle = { padding: "8px 10px", borderRadius: 5, cursor: "pointer",
                    border: `1px solid ${(WF_TYPES[trSelCard.type] || {}).color || "var(--info)"}`,
                    background: "transparent", color: (WF_TYPES[trSelCard.type] || {}).color || "var(--info)",
                    fontFamily: "var(--font-mono)", fontSize: 12, textAlign: "left",
                    display: "flex", alignItems: "center", gap: 6 };
                  return (
                  <button key={action} onClick={() => trRunAction(trSelCard, action)} style={_trActionBtnStyle}>
                    {I("Play", { size: 11 })} {action}
                  </button>
                  );
                })}
              </div>
            </Panel>
          </>
        ) : (
          <Panel title="Select a workflow">
            <div style={{ padding: 24, textAlign: "center", color: "var(--ink-3)" }}>
              <div style={{ marginBottom: 8 }}>{I("Flow", { size: 28 })}</div>
              <div className="mono" style={{ fontSize: 12 }}>Click any card to inspect related artifacts and triggers</div>
              <div style={{ marginTop: 14, display: "flex", gap: 6, justifyContent: "center" }}>
                <Btn size="sm" icon="Diff" onClick={() => goTo("/build/eco")}>Open ECO</Btn>
                <Btn size="sm" icon="Plug" onClick={() => goTo("/forge/integrations")}>Integrations</Btn>
              </div>
            </div>
          </Panel>
        )}
      </div>
    </div>
  );
}

// ───────────────────────── TRITAN · CONNECTORS ───────────────────────────
function ScreenConnectorsTritan({ tenant, setToast }) {
  const ledger = (tenant && tenant.ledger) || [];

  const TR_CONNS = [
    { id: "CAD", name: "CAD · SolidWorks 2024", color: "var(--cool)", status: "connected",
      desc: "Sync M-27418 part tree · export DRG-M27418-* drawing pack",
      triggers: [
        { id:"cad-1", label:"Sync M-27418 part tree", desc:"Pull latest impeller / NRV / motor-base geometry", icon:"Tree"   },
        { id:"cad-2", label:"Export DRG-M27418 pack", desc:"Release PDF + DXF for rev-C drawing set",          icon:"ArrowD" },
        { id:"cad-3", label:"Check-in rev C",         desc:"Lock rev C and stamp on PLM record",               icon:"Check"  },
        { id:"cad-4", label:"Open M-27418 in CAD",    desc:"Launch SolidWorks and load top-level assembly",    icon:"Cube"   },
      ]},
    { id: "PLM", name: "PLM · Forge-native", color: "var(--info)", status: "connected",
      desc: "Internal lattice · no external sync needed · drives ECO + audit ledger",
      triggers: [
        { id:"plm-1", label:"Promote ECO-0051",       desc:"Move ECO-0051 from CDR → Released",                icon:"ArrowR" },
        { id:"plm-2", label:"Snapshot baseline",      desc:"Freeze a Helios pilot baseline for audit",          icon:"Stack"  },
        { id:"plm-3", label:"Diff rev B → rev C",     desc:"Show drawing-level delta for M-27418",              icon:"Diff"   },
        { id:"plm-4", label:"Append to ledger",       desc:"Sign and append the next ledger event",             icon:"Check"  },
      ]},
    { id: "ERP", name: "ERP · Tally Prime + custom MRP", color: "var(--accent)", status: "connected",
      desc: "Sync 66 parts · raise PO to Spire / Athena / Vega · cost-roll Helios pilot",
      triggers: [
        { id:"erp-1", label:"Sync M-27418 BOM",        desc:"Push 66 parts to Tally + custom MRP",              icon:"Plug"     },
        { id:"erp-2", label:"Raise PO · 50× SP-NRV",   desc:"Create PO for 50× SP-NRV-86HS at Spire",            icon:"Clipboard"},
        { id:"erp-3", label:"Update item master",      desc:"Sync rev-C metadata into Tally item master",        icon:"DB"       },
        { id:"erp-4", label:"Pull stock cover",        desc:"Check stock cover days across rotor / NRV / casing",icon:"Stack"    },
      ]},
    { id: "MES", name: "MES · Forge Line console", color: "var(--ok)", status: "connected",
      desc: "Dispatch WO-44219 traveler to MOTOR-ASSY · close WO-44220",
      triggers: [
        { id:"mes-1", label:"Dispatch WO-44219",       desc:"Send Helios pilot traveler to MOTOR-ASSY cell",     icon:"Factory"  },
        { id:"mes-2", label:"Update WIP · 8u in-flight",desc:"Pull current WIP % from MOTOR-ASSY station",       icon:"ArrowR"   },
        { id:"mes-3", label:"Close WO-44220",          desc:"Mark internal-stock 50u batch complete",            icon:"Check"    },
        { id:"mes-4", label:"Raise NCR",               desc:"Open NCR · station 4 stator winding deviation",     icon:"X"        },
      ]},
    { id: "QA",  name: "Quality · LIMS", color: "var(--warn)", status: "connected",
      desc: "Push QG-* gate results · pull HV-test serial logs",
      triggers: [
        { id:"qa-1",  label:"Push QG-12 HV results",   desc:"Append 30 serials × HV pass to ledger",             icon:"Bolt"     },
        { id:"qa-2",  label:"Pull serial test log",    desc:"Fetch raw HV waveform for serial S-23-0014",        icon:"ArrowD"   },
        { id:"qa-3",  label:"Trigger gate review",     desc:"Open QG-12 review session for Helios pool",         icon:"Eye"      },
        { id:"qa-4",  label:"Stamp test card",         desc:"Issue test card for next 8 Helios serials",         icon:"Clipboard"},
      ]},
    { id: "SUP", name: "Supplier portal · Vendor VQP 2.0", color: "var(--info)", status: "connected",
      desc: "Issue audit packets · track Helios scorecard (Spire 87% conditional)",
      triggers: [
        { id:"sup-1", label:"Send VQP packet · Spire", desc:"Push 334-line audit packet to Spire Foundry",       icon:"ArrowR"   },
        { id:"sup-2", label:"Pull scorecard",          desc:"Refresh on-time + quality scores for all 3 vendors",icon:"BarChart" },
        { id:"sup-3", label:"Schedule re-audit",       desc:"Book Spire re-audit for 2026-05-12",                icon:"Calendar" },
        { id:"sup-4", label:"Expedite Vega SS410",     desc:"Flag rotor SS410 PO for expediting team",            icon:"Bolt"     },
      ]},
  ];

  // Seed Tritan job log · pull from ledger if present, plus synthesized
  const SEED_JOBS = uM6(() => {
    const synth = [
      { id:"JOB-2042", conn:"ERP", action:"Sync M-27418 BOM to Tally",       status:"complete", ts:"09:41", items:66,  note:"66 items" },
      { id:"JOB-2041", conn:"CAD", action:"Export DRG-M27418-PMP-rev-B",     status:"complete", ts:"09:28", items:1,   note:"1 file"   },
      { id:"JOB-2040", conn:"MES", action:"Dispatch WO-44219 to MOTOR-ASSY", status:"complete", ts:"08:55", items:8,   note:"8 units"  },
      { id:"JOB-2039", conn:"SUP", action:"Send VQP packet to Spire Foundry",status:"complete", ts:"08:30", items:334, note:"334 lines"},
      { id:"JOB-2038", conn:"QA",  action:"Push QG-12 HV test results",      status:"complete", ts:"08:10", items:30,  note:"30 serials"},
      { id:"JOB-2037", conn:"ERP", action:"Create PO for 50× SP-NRV-86HS",   status:"running",  ts:"07:45", items:1,   note:"1 PO"     },
      { id:"JOB-2036", conn:"CAD", action:"Check-in M-27418 rev C draft",    status:"failed",   ts:"07:20", items:0,   note:"auth expired"},
      { id:"JOB-2035", conn:"MES", action:"Close WO-44220",                  status:"complete", ts:"Yesterday", items:50, note:"50 units"},
    ];
    // Optional: append a couple of recent ledger events as connector jobs (don't pollute)
    const fromLedger = (ledger || []).slice(0, 3).map((e, i) => ({
      id:    `LED-${(e.event_id || "X").slice(-4)}-${i}`,
      conn:  /audit|supplier/i.test(e.type || "") ? "SUP" : /test|gate|qg/i.test(e.summary || "") ? "QA" : "PLM",
      action: e.summary || e.type || "ledger event",
      status: "complete",
      ts: (e.ts || "").slice(11, 16) || "—",
      items: 1,
      note: e.event_id || "",
    }));
    return [...synth, ...fromLedger];
  }, [ledger]);

  const [trSelConn, setTrSelConn] = uS6("CAD");
  const [trJobs,    setTrJobs]    = uS6(SEED_JOBS);
  const trConn = TR_CONNS.find(c => c.id === trSelConn);

  const trTrigger = (t) => {
    const newJob = {
      id: `JOB-${String(2042 + trJobs.length + 1)}`,
      conn: trSelConn, action: t.label,
      status: "running",
      ts: new Date().toLocaleTimeString("en-GB",{hour:"2-digit",minute:"2-digit"}),
      items: Math.floor(Math.random() * 20) + 1,
      note: t.desc,
    };
    setTrJobs(j => [newJob, ...j]);
    if (setToast) setToast(`▶ ${t.label} · job dispatched`);
    setTimeout(() => {
      setTrJobs(j => j.map(x => x.id === newJob.id ? { ...x, status: "complete" } : x));
    }, 2200);
  };

  return (
    <div style={{ padding: 14, display: "grid", gridTemplateColumns: "240px 1fr 320px", gap: 14, height: "100%", minHeight: 0 }}>

      <Panel title="Tritan · Connectors">
        <div style={{ padding: 6 }}>
          {TR_CONNS.map(c => (
            <div key={c.id} role="button" tabIndex={0} onClick={() => setTrSelConn(c.id)}
              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setTrSelConn(c.id); } }}
              style={{ padding: "10px 10px", borderRadius: 5, cursor: "pointer", marginBottom: 2,
                background: c.id === trSelConn ? "var(--bg-3)" : "transparent",
                borderLeft: `2px solid ${c.id === trSelConn ? c.color : "transparent"}` }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontSize: 12, color: c.id === trSelConn ? "var(--ink)" : "var(--ink-2)" }}>{c.id}</span>
                <span className={`pill ${c.status === "connected" ? "ok" : "warn"}`}>
                  <span className={`dot ${c.status === "connected" ? "pulse" : ""}`}/>{c.status}
                </span>
              </div>
              <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{c.name.split("·")[1]?.trim()}</div>
            </div>
          ))}
        </div>
      </Panel>

      <div style={{ display: "flex", flexDirection: "column", gap: 14, minHeight: 0 }}>
        {trConn && (
          <>
            <Panel title={trConn.name} right={
              <span className={`pill ${trConn.status === "connected" ? "ok" : "warn"}`}>
                <span className={`dot ${trConn.status === "connected" ? "pulse" : ""}`}/>{trConn.status}
              </span>
            }>
              <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--line-soft)", color: "var(--ink-3)", fontSize: 12 }}>
                {trConn.desc}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, padding: 14 }}>
                {trConn.triggers.map(t => {
                  const _trTriggerCardStyle = { padding: 14, border: "1px solid var(--line-soft)", borderRadius: 8,
                    background: "var(--bg-1)", display: "flex", flexDirection: "column", gap: 8 };
                  const _trTriggerRunBtnStyle = { marginTop: "auto", padding: "6px 0", borderRadius: 5, cursor: "pointer",
                    border: `1px solid ${trConn.color}`, background: "transparent",
                    color: trConn.color, fontFamily: "var(--font-mono)", fontSize: 12,
                    display: "flex", alignItems: "center", justifyContent: "center", gap: 6 };
                  return (
                  <div key={t.id} style={_trTriggerCardStyle}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ color: trConn.color }}>{I(t.icon, { size: 16 })}</span>
                      <span style={{ fontSize: 13, color: "var(--ink)" }}>{t.label}</span>
                    </div>
                    <div className="muted" style={{ fontSize: 12, lineHeight: 1.5 }}>{t.desc}</div>
                    <button onClick={() => trTrigger(t)} style={_trTriggerRunBtnStyle}>
                      {I("Play", { size: 11 })} Run
                    </button>
                  </div>
                  );
                })}
              </div>
            </Panel>

            <Panel title={`Recent · ${trConn.id} jobs`}>
              <table className="dtable">
                <thead><tr><th>Job</th><th>Action</th><th>Items</th><th>Time</th><th>Status</th></tr></thead>
                <tbody>
                  {trJobs.filter(j => j.conn === trConn.id).slice(0, 6).map(j => (
                    <tr key={j.id}>
                      <td className="mono">{j.id}</td>
                      <td style={{ color: "var(--ink)" }}>{j.action}</td>
                      <td className="tnum">{j.items}</td>
                      <td className="tnum">{j.ts}</td>
                      <td>
                        <span className={`pill ${j.status === "complete" ? "ok" : j.status === "running" ? "info" : "err"}`}>
                          <span className={`dot ${j.status === "running" ? "pulse" : ""}`}/>{j.status}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Panel>
          </>
        )}
      </div>

      <Panel title="Job log · all connectors">
        <div style={{ padding: 8 }}>
          {trJobs.slice(0, 14).map(j => {
            const c = TR_CONNS.find(x => x.id === j.conn);
            const _trJobBadgeStyle = { width: 32, height: 20, borderRadius: 3,
              background: `color-mix(in oklch,${c?.color || "var(--info)"} 15%,transparent)`,
              border: `1px solid color-mix(in oklch,${c?.color || "var(--info)"} 30%,transparent)`,
              display: "grid", placeItems: "center",
              fontFamily: "var(--font-mono)", fontSize: 12, color: c?.color };
            return (
              <div key={j.id} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 8,
                padding: "7px 6px", borderBottom: "1px solid var(--line-soft)", alignItems: "center" }}>
                <span style={_trJobBadgeStyle}>{j.conn}</span>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 12, color: "var(--ink)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{j.action}</div>
                  <div className="muted mono" style={{ fontSize: 12 }}>{j.ts} · {j.note || (j.items + " items")}</div>
                </div>
                <span className={`pill ${j.status === "complete" ? "ok" : j.status === "running" ? "info" : "err"}`}>
                  <span className={`dot ${j.status === "running" ? "pulse" : ""}`}/>
                  {j.status}
                </span>
              </div>
            );
          })}
        </div>
      </Panel>
    </div>
  );
}

Object.assign(window, { ScreenWorkflows, ScreenConnectors, ScreenWorkflowsTritan, ScreenConnectorsTritan });