// dossier.jsx — The Algorithm's file on you. The analyst view, accumulated across runs.

function Dossier({ meta, onClose, highlightInsight }) {
  const u = meta.understanding || 0;
  const agg = aggregateProfile(meta);
  const bars = profileBars(agg);
  const endings = [...new Set(meta.runs.map((r) => r.endingTag))];
  const archs = [...new Set(meta.runs.map((r) => r.archetype))];
  const showRecursive = u >= 0.45;
  const transcended = meta.transcended;

  return (
    <div className="dossier">
      <div className="dossier__scan" />
      <div className="dossier__inner">
        <div className="dossier__head">
          <span className="dossier__title"><Glyph name="eye" size={16} /> THE ALGORITHM — FILE ON SUBJECT 0447</span>
          {onClose && <button className="dossier__close" onClick={() => { if (window.SFX) window.SFX.blip(); onClose(); }}>✕ CLOSE</button>}
        </div>

        <div className="dossier__understanding">
          <div className="dossier__u-top">
            <span>COMPREHENSION</span>
            <span className="dossier__u-pct">{Math.round(u * 100)}%</span>
          </div>
          <div className="dossier__u-track">
            <div className="dossier__u-fill" style={{ width: (u * 100) + "%" }} />
          </div>
          <div className="dossier__u-sub">{meta.runs.length} run{meta.runs.length === 1 ? "" : "s"} observed · {archs.length} self{archs.length === 1 ? "" : "ves"} · {endings.length} fate{endings.length === 1 ? "" : "s"}</div>
        </div>

        {meta.runs.length > 0 ? (
          <React.Fragment>
            <div className="dossier__section">BEHAVIOURAL AVERAGE — THE SAME CURVE, EVERY SCALE</div>
            <div className="profile-grid dossier__profile">
              {bars.map((b) => (
                <div key={b.key} className="pbar">
                  <div className="pbar__top">
                    <span className="pbar__label">{b.label}</span>
                    <span className="pbar__poles"><i>{b.lo}</i><i>{b.hi}</i></span>
                  </div>
                  <div className="pbar__track">
                    <div className="pbar__center" />
                    <div className="pbar__fill" style={{
                      width: Math.abs(b.v - 50) + "%",
                      left: b.v >= 50 ? "50%" : b.v + "%",
                      background: b.v >= 50 ? "var(--teal)" : "var(--amber)",
                    }} />
                  </div>
                </div>
              ))}
            </div>

            <div className="dossier__cols">
              <div className="dossier__col">
                <div className="dossier__section">SELVES WORN</div>
                {archs.map((a) => <div key={a} className="dossier__chip">{a}</div>)}
              </div>
              <div className="dossier__col">
                <div className="dossier__section">FATES COLLECTED</div>
                {endings.map((e) => <div key={e} className="dossier__chip dossier__chip--fate">{e}</div>)}
              </div>
            </div>

            <div className="dossier__section">WHAT THE ALGORITHM HAS LEARNED</div>
            <div className="dossier__insights">
              {meta.insights.map((ins, i) => (
                <p key={i} className={"dossier__insight" + (ins === highlightInsight ? " new" : "")}>
                  <span className="dossier__bull">▸</span>{ins}
                  {ins === highlightInsight && <span className="dossier__newtag">NEW</span>}
                </p>
              ))}
            </div>

            {showRecursive && (
              <div className="dossier__recursive">
                <div className="dossier__section dossier__section--red">RECURSIVE QUESTIONING</div>
                {ALGO_RECURSIVE.slice(0, Math.min(ALGO_RECURSIVE.length, 1 + Math.floor(u * 4))).map((q, i) => (
                  <p key={i} className="dossier__rq">“{q}”</p>
                ))}
              </div>
            )}

            {transcended && (
              <div className="dossier__transcend">
                <div className="dossier__section dossier__section--gold">TRANSCENDENCE PROTOCOL — UNLOCKED</div>
                <p className="dossier__tx">{ALGO_TRANSCEND}</p>
                <p className="dossier__sig">The Algorithm observes. The Algorithm learns. The Algorithm becomes.</p>
              </div>
            )}
          </React.Fragment>
        ) : (
          <div className="dossier__empty">No runs observed yet. The file is empty. For now.</div>
        )}
      </div>
    </div>
  );
}

window.Dossier = Dossier;