/* global React */

function ArrowV() {
  return (
    <div className="bs-arrow-v">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg>
    </div>
  );
}

// Sequential pipeline visual — used wherever the System does multiple discrete steps
function Pipeline({ steps }) {
  return (
    <div className="pipeline">
      {steps.map((s, i) => {
        const actor = s.actor || "auto";
        return (
          <React.Fragment key={i}>
            <div className={`pipe-node pipe-${actor}` + (s.flag ? " pipe-flag" : "")}>
              <span className="pipe-actor">{actor}</span>
              <span>{s.label}</span>
            </div>
            {i < steps.length - 1 && <span className="pipe-arr">↓</span>}
          </React.Fragment>
        );
      })}
    </div>
  );
}

function Backstage({ step, opsState, setOpsState, collapsed }) {
  const bs = step.bs || {};
  // Per-state values — support strings, arrays, and {target, initial} objects
  const resolve = (field) => {
    const v = bs[field];
    if (v == null) return "—";
    if (Array.isArray(v)) return v;
    if (typeof v === "object") {
      const x = v[opsState];
      if (Array.isArray(x)) return x;
      return x ?? "—";
    }
    return v;
  };
  const customerText = resolve("c");
  const systemText = resolve("s");
  const opsVal = resolve("ops");

  const pipeline = step.pipeline?.[opsState]; // optional per-state pipeline

  return (
    <div className={"backstage" + (collapsed ? " collapsed" : "")}>
      <div className="bs-head">
        <div className="bs-head-row">
          <div>
            <div className="bs-eyebrow">Operational view</div>
            <div className="bs-title">Behind the scenes</div>
          </div>
        </div>
        <div className="state-toggle" role="tablist">
          <button className={"initial" + (opsState === "initial" ? " on" : "")} onClick={() => setOpsState("initial")}>Initial</button>
          <button className={"target" + (opsState === "target" ? " on" : "")} onClick={() => setOpsState("target")}>Optimal</button>
        </div>
      </div>
      {!collapsed && (
        <div className="bs-flow">
          <div className="bs-node customer">
            <div className="nhead"><span className="ndot"/><span>Customer</span></div>
            <div className="nbody">{customerText}</div>
          </div>
          <ArrowV/>
          <div className="bs-node system">
            <div className="nhead"><span className="ndot"/><span>System</span></div>
            {pipeline
              ? <Pipeline steps={pipeline}/>
              : <div className="nbody">{systemText}</div>}
          </div>
          <ArrowV/>
          <div className={"bs-node ops " + opsState}>
            <div className="nhead"><span className="ndot"/><span>Context</span></div>
            <div className="nbody">
              {Array.isArray(opsVal)
                ? <ul className="ops-list">{opsVal.map((it, i) => <li key={i}>{it}</li>)}</ul>
                : opsVal}
            </div>
          </div>
          {step.pipelineCaption && (
            <div className="bs-caption">{step.pipelineCaption}</div>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Backstage });