/* SystemFlow — click-driven flowchart of the AURAXIS processing path.
   Rows alternate between single nodes and three-way fans; connectors light along the
   lineage of the selected node and carry a travelling pulse while live. */
const { Card: FCCard, Badge: FCBadge, Button: FCButton } = window.AURAXISDesignSystem_c09958;

const FC_NODES = {
  intake: { m: "LAYER 00", t: "Market intake", meta: [["Inputs", "Tick · depth · session"], ["Basis", "Unsmoothed"]],
    body: "Price, traded volume, session boundaries and spread conditions are taken in continuously. Nothing is filtered before it has been measured." },
  structure: { m: "LAYER 01", t: "Structure", meta: [["Held as state", "Swings · breaks · levels"], ["Revision", "On confirmation"]],
    body: "Swing extremes, confirmed breaks of structure and unmitigated levels are located and carried as state. This describes what the market has already done, so it is measurement rather than projection." },
  liquidity: { m: "LAYER 01", t: "Liquidity heat", meta: [["Ranking", "By transacted volume"], ["Resolution", "Per price band"]],
    body: "Participation is mapped by price band. Levels are ranked by volume actually transacted, so a reference nobody traded against carries no weight in the read." },
  volatility: { m: "LAYER 01", t: "Volatility state", meta: [["Measured", "Range expansion"], ["Effect", "Sets risk carried"]],
    body: "Range behaviour determines whether the market can support directional exposure at all. Compression is treated as a distinct condition, not as a smaller trend." },
  regime: { m: "LAYER 02", t: "Regime classification", accent: true, meta: [["Output", "Condition in force"], ["Attached", "Confidence"]],
    body: "The three measurements resolve into one classification: directional persistence, structural exhaustion or range compression, with a confidence attached. Everything downstream depends on this single output, so it is stated explicitly." },
  axist: { m: "DIRECTIONAL PERSISTENCE", t: "AXIS-T", mono: true, meta: [["Mandate", "Continuation"], ["Risk · return", "Medium · medium"]],
    body: "Returns a continuation position while the structural sequence remains intact. Strongest where the classification is directional and the confidence is high." },
  axisr: { m: "STRUCTURAL EXHAUSTION", t: "AXIS-R", mono: true, meta: [["Mandate", "Reversal"], ["Reference points", "330+"]],
    body: "The flagship model. Returns a reversal position at the terminal extremes of the long-horizon move, assessed across more than 330 structural reference points." },
  axiss: { m: "RANGE COMPRESSION", t: "AXIS-S", mono: true, meta: [["Mandate", "Containment"], ["Risk · return", "Low · low"]],
    body: "Returns narrow, contained positions in compressed conditions — the state in which continuation models carry the greatest adverse exposure." },
  alloc: { m: "LAYER 03", t: "Allocation", accent: true, meta: [["Issued", "Per-model weights"], ["Revision", "Continuous"]],
    body: "Each model receives a share of the risk budget proportional to its fit with the condition in force. Where the models disagree, the disagreement itself informs the weighting." },
  exec: { m: "LAYER 04", t: "Execution", meta: [["Execution", "Automated"], ["Discretion", "None"]],
    body: "Weights are executed without operator intervention, and the reading restarts. A rule applied identically every time removes the largest single source of variance in most accounts." },
};

const FC_ROWS = [["intake"], ["structure", "liquidity", "volatility"], ["regime"], ["axist", "axisr", "axiss"], ["alloc"], ["exec"]];

function FCConnector({ kind, live }) {
  return (
    <div className={"ax-fc-conn ax-fc-" + kind + (live ? " is-live" : "")} aria-hidden="true">
      <i className="c"></i><i className="l"></i><i className="m"></i><i className="r"></i><b></b>
      {live ? <span className="ax-fc-dot"></span> : null}
    </div>
  );
}

function FCDetail({ id, inline }) {
  const n = FC_NODES[id];
  return (
    <FCCard level={2} edge padding="var(--space-6)" radius="var(--radius-xl)"
      className={inline ? "ax-fc-inline" : undefined}
      header={<><span className="ax-mono" style={{ color: "var(--gold-400)" }}>{n.m}</span><FCBadge tone={n.accent ? "caution" : undefined}>{n.accent ? "Decision" : "Measurement"}</FCBadge></>}>
      <div className="ax-h3" style={{ fontSize: inline ? 21 : 25 }}>{n.t}</div>
      <p className="ax-body-sm" style={{ marginTop: 12 }}>{n.body}</p>
      <div style={{ marginTop: 18 }}><KV rows={n.meta} /></div>
      <div className="ax-ctas" style={{ marginTop: 18 }}>
        <a href="/intelligence/"><FCButton variant="outline" size="sm" iconRight="arrow-right">Full reading</FCButton></a>
      </div>
    </FCCard>
  );
}

function FCNode({ id, sel, live, onSelect }) {
  const x = FC_NODES[id];
  return (
    <button onClick={() => onSelect(id)} aria-pressed={sel}
      className={"ax-fc-node" + (sel ? " is-sel" : "") + (live ? " is-live" : "") + (x.mono ? " is-mono" : "")}>
      <span className="m">{x.m}</span>
      <span className="t">{x.t}</span>
    </button>
  );
}

function SystemFlow() {
  const [sel, setSel] = React.useState("regime");
  const phone = window.useIsPhone ? window.useIsPhone() : false;
  const selRow = FC_ROWS.findIndex(r => r.indexOf(sel) > -1);

  /* Phones read the chart as one vertical column: parallel layers are bracketed as a
     branch group, and the detail opens inline under the node that was tapped. */
  if (phone) {
    return (
      <div className="ax-fc">
        <div className="ax-fc-chart">
          <div className="ax-fc-hint">TAP A LAYER</div>
          {FC_ROWS.map((row, ri) => {
            const live = ri <= selRow;
            const here = row.indexOf(sel) > -1;
            return (
              <React.Fragment key={ri}>
                {ri > 0 ? <FCConnector kind="straight" live={live} /> : null}
                {row.length === 3 ? (
                  <div className={"ax-fc-branch" + (live ? " is-live" : "")}>
                    <div className="ax-fc-branch-l">{ri === 1 ? "THREE MEASUREMENTS, IN PARALLEL" : "THREE MODELS, POLLED TOGETHER"}</div>
                    {row.map(id => <FCNode key={id} id={id} sel={sel === id} live={live} onSelect={setSel} />)}
                  </div>
                ) : (
                  <div className="ax-fc-row ax-fc-row-1">
                    {row.map(id => <FCNode key={id} id={id} sel={sel === id} live={live} onSelect={setSel} />)}
                  </div>
                )}
                {here ? <FCDetail id={sel} inline /> : null}
              </React.Fragment>
            );
          })}
        </div>
      </div>
    );
  }

  return (
    <div className="ax-fc">
      <div className="ax-fc-chart">
        <div className="ax-fc-hint">SELECT A LAYER</div>
        {FC_ROWS.map((row, ri) => (
          <React.Fragment key={ri}>
            {ri > 0 ? (
              <FCConnector live={ri <= selRow}
                kind={FC_ROWS[ri - 1].length === 1 && row.length === 3 ? "out" : FC_ROWS[ri - 1].length === 3 && row.length === 1 ? "in" : "straight"} />
            ) : null}
            <div className={"ax-fc-row ax-fc-row-" + row.length}>
              {row.map(id => <FCNode key={id} id={id} sel={sel === id} live={ri <= selRow} onSelect={setSel} />)}
            </div>
          </React.Fragment>
        ))}
      </div>
      <div className="ax-fc-detail"><FCDetail id={sel} /></div>
    </div>
  );
}

Object.assign(window, { SystemFlow, FCDetail, FCNode, FC_NODES, FC_ROWS });