/* global React */
// trajectory.jsx — three variants: spark, strip, ledger
// Exposes window.Trajectory, window.SparkTrj, window.StripTrj, window.LedgerTrj

const { useState } = React;

function dirOf(trj) {
  if (!trj || trj.length < 2) return "mixed";
  const first = trj[0], last = trj[trj.length - 1];
  if (last === 0 && first > 0) return "down";
  if (first === 0 && last > 0) return "up";
  if (last > first) return "up";
  if (last < first) return "down";
  return "mixed";
}

function deltaLabel(trj, kind) {
  if (!trj) return "—";
  const first = trj[0], last = trj[trj.length - 1];
  if (kind === "dodged") return "DODGED";
  if (last === 0 && first > 0) return "FADED";
  if (first === 0 && last > 0) return "EMERGED";
  if (last > first) return `+${last - first}`;
  if (last < first) return `−${first - last}`;
  return "FLAT";
}

// Variant A — sparkline + delta chip (inline density)
function SparkTrj({ trj, kind = "emerged", quarters }) {
  if (!trj) {
    return (
      <span className={`trj-spark dir-dodged`}>
        <span className="nums dim">— · — · — · —</span>
        <span className="delta">DODGED</span>
      </span>
    );
  }
  const dir = kind === "dodged" ? "dodged"
            : kind === "disappeared" ? "down"
            : kind === "emerged" ? "up"
            : dirOf(trj);
  return (
    <span className={`trj-spark dir-${dir}`} title={quarters ? quarters.join(" → ") : null}>
      <span className="nums">
        {trj.map((n, i) => (
          <React.Fragment key={i}>
            <span>{n}</span>
            {i < trj.length - 1 && <span className="arrow">›</span>}
          </React.Fragment>
        ))}
      </span>
      <span className="delta">
        {deltaLabel(trj, kind)}
      </span>
    </span>
  );
}

// Variant B — quarter strip with hover quotes (for drill-down)
function StripTrj({ trj, kind = "emerged", quarters, peakIndex, onCellClick }) {
  if (!trj) return null;
  const max = Math.max(...trj, 1);
  const peakIdx = peakIndex != null ? peakIndex : trj.indexOf(Math.max(...trj));
  const [hoverIdx, setHoverIdx] = useState(null);
  return (
    <div>
      <div className="trj-strip-head mono">Mentions per quarter</div>
      <div className={`trj-strip`} data-signal={kind}>
        {trj.map((n, i) => (
          <div
            key={i}
            className="qt"
            data-peak={i === peakIdx}
            data-zero={n === 0}
            onMouseEnter={() => setHoverIdx(i)}
            onMouseLeave={() => setHoverIdx(null)}
            onClick={() => onCellClick && onCellClick(i)}
          >
            <div className="label">{quarters[i]}</div>
            <div className="count">{n}</div>
            <div className="bar" style={{ "--w": `${Math.round((n / max) * 100)}%` }}></div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Variant C — stacked-bar mention ledger (where the topic lives)
// segments: [opening, qa, financial] per quarter
function LedgerTrj({ trj, kind = "emerged", quarters, segments }) {
  if (!trj) return null;
  const max = Math.max(...trj, 1);
  // Synthetic split if segments missing: weighted to opening for emerged, qa for disappeared
  const splits = segments || trj.map(n => {
    if (n === 0) return [0, 0, 0];
    if (kind === "emerged") return [Math.round(n*0.6), Math.round(n*0.3), n - Math.round(n*0.6) - Math.round(n*0.3)];
    if (kind === "disappeared") return [Math.round(n*0.25), Math.round(n*0.6), n - Math.round(n*0.25) - Math.round(n*0.6)];
    return [Math.round(n*0.4), Math.round(n*0.4), n - 2*Math.round(n*0.4)];
  });
  return (
    <div className="trj-ledger" style={{ "--signal": `var(--signal-${kind})` }}>
      {trj.map((n, i) => {
        const s = splits[i] || [0,0,0];
        const totalH = (n / max) * 80;
        return (
          <div className="col" key={i}>
            <div className="stack" style={{ height: 80 }}>
              {n === 0 ? null : [0,1,2].map(si => (
                <div key={si} className={`seg s${si+1}`} style={{ height: `${(s[si] / n) * totalH}px` }} />
              ))}
            </div>
            <div className="lbl">{quarters[i]}</div>
            <div className="total">{n}</div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { SparkTrj, StripTrj, LedgerTrj });