/* ProTGen StoryLab — app shell, rail, modes, decision log */

const SL_SECTION_LABELS = {
  context: "Shared context", heard: "What we heard", crux: "Strategic crux", belief: "Belief sequence",
  audience: "Audience doorways", assume: "Assumption ranker", proof: "Proof ladder", xmap: "Experience map",
};
const SL_STATE_LABEL = { accept: "Accepted", edit: "Edit requested", challenge: "Challenged", park: "Parked" };

function DecisionLog({ open, onClose, decisions }) {
  if (!open) return null;
  const entries = Object.entries(decisions).filter(([, v]) => v);
  return (
    <>
      <div className="sl-drawer-scrim" onClick={onClose} />
      <div className="sl-drawer">
        <div className="sl-drawer-head">
          <h3>Decision log</h3>
          <button className="x" onClick={onClose}>×</button>
        </div>
        <div className="sl-drawer-body">
          {entries.length === 0 ? (
            <div className="dlog-empty">No decisions recorded yet.<br/>Use Accept / Edit / Challenge / Park on each section.</div>
          ) : entries.map(([sec, st]) => (
            <div className="dlog-item" key={sec}>
              <div className="dl-top">
                <span className="dl-sec">{SL_SECTION_LABELS[sec] || sec}</span>
                <span className={"dl-state " + st}>{SL_STATE_LABEL[st]}</span>
              </div>
              <p className="dl-txt">{SL_SECTION_LABELS[sec]}</p>
            </div>
          ))}
        </div>
        <div className="sl-drawer-foot">
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5, color: "var(--fg-2)", fontFamily: "var(--font-mono)" }}>
            <span>{entries.length} of 8 recorded</span>
            <span>{entries.filter(([,v]) => v === "accept").length} accepted</span>
          </div>
          <button className="sl-btn sl-btn-ghost" style={{ width: "100%", justifyContent: "center", marginTop: 12 }} onClick={onClose}>Close</button>
        </div>
      </div>
    </>
  );
}

function SlApp() {
  const stages = window.SL_STAGES;
  const [mode, setMode] = React.useState("guided");
  const [active, setActive] = React.useState("open");
  const [logOpen, setLogOpen] = React.useState(false);
  const [decisions, setDecisions] = React.useState({});
  const [cruxChosen, setCruxChosen] = React.useState("portable");
  const [beliefOrder, setBeliefOrder] = React.useState(window.SL_BELIEFS.map((b) => b.id));
  const [beliefTags, setBeliefTags] = React.useState({});
  const [statuses, setStatuses] = React.useState({});
  const [answers, setAnswers] = React.useState({});

  const setDecision = (section, state, toggleOff) =>
    setDecisions((d) => ({ ...d, [section]: toggleOff ? null : state }));
  const setTag = (id, t) => setBeliefTags((m) => ({ ...m, [id]: t }));
  const setStatus = (id, s) => setStatuses((m) => ({ ...m, [id]: s }));
  const setAnswer = (id, v) => setAnswers((m) => ({ ...m, [id]: v }));

  const decisionCount = Object.values(decisions).filter(Boolean).length;
  const idx = stages.findIndex((s) => s.key === active);

  const goStage = (k) => { setActive(k); if (mode === "explore") { const el = document.getElementById("sec-" + k); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); } };

  const renderSection = (key) => {
    switch (key) {
      case "open": return <OpeningSection onWalk={(k) => { setMode("guided"); setActive(k); window.scrollTo({top:0}); }} />;
      case "context": return <SharedContextSection answers={answers} setAnswer={setAnswer} decisions={decisions} setDecision={setDecision} />;
      case "heard": return <HeardSection decisions={decisions} setDecision={setDecision} />;
      case "crux": return <CruxSection chosen={cruxChosen} setChosen={setCruxChosen} decisions={decisions} setDecision={setDecision} />;
      case "belief": return <BeliefBuilder order={beliefOrder} setOrder={setBeliefOrder} tags={beliefTags} setTag={setTag} decisions={decisions} setDecision={setDecision} />;
      case "audience": return <AudienceLens decisions={decisions} setDecision={setDecision} />;
      case "assume": return <AssumptionRanker statuses={statuses} setStatus={setStatus} decisions={decisions} setDecision={setDecision} />;
      case "proof": return <ProofLadder decisions={decisions} setDecision={setDecision} />;
      case "xmap": return <ExperienceMap decisions={decisions} setDecision={setDecision} />;
      case "empty": return <EmptyRoomTest />;
      default: return null;
    }
  };

  return (
    <div className="sl-app">
      <aside className="sl-rail">
        <div className="sl-brand">
          <SlMark size={26} />
          <div>
            <div className="w">ProTGen StoryLab</div>
            <span className="sub">Strategy review · internal</span>
          </div>
        </div>
        {stages.map((s) => (
          <div key={s.key} className={"sl-stage" + (active === s.key ? " active" : "") + (decisions[s.key] ? " done" : "")} onClick={() => goStage(s.key)}>
            <div className="si">{decisions[s.key] ? <SlIcon name="check" size={14} /> : s.n}</div>
            <div>
              <span className="stt">{s.tag}</span>
              <span className="st">{s.t}</span>
            </div>
          </div>
        ))}
        <div className="sl-rail-foot">
          <button className="sl-decisions-btn" onClick={() => setLogOpen(true)}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 9 }}><SlIcon name="list" size={16} /> Decision log</span>
            {decisionCount > 0 && <span className="cnt">{decisionCount}</span>}
          </button>
        </div>
      </aside>

      <div className="sl-main">
        <div className="sl-top">
          <div className="sl-modes">
            <button className={"sl-mode" + (mode === "guided" ? " active" : "")} onClick={() => setMode("guided")}>Guided</button>
            <button className={"sl-mode" + (mode === "explore" ? " active" : "")} onClick={() => setMode("explore")}>Explore</button>
          </div>
          <div className="sl-toplinks">
            <a href="primer.html" className="sl-toplink"><SlIcon name="book" size={15} /> Primer article</a>
            <a href="primer.html#listen" className="sl-toplink accent"><SlIcon name="headphones" size={15} /> Voiceover</a>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 22 }}>
            <span className="sl-empty-chair"><SlIcon name="chair" size={16} /> The story must travel without Carter</span>
            <a href="index.html" className="sl-btn sl-btn-ghost" style={{ padding: "9px 14px", fontSize: 13.5 }}>View the site <SlIcon name="arrow" size={15} /></a>
          </div>
        </div>

        <div className="sl-canvas">
          {mode === "guided" ? (
            <div>
              {renderSection(active)}
              <div className="guided-nav">
                <button className="sl-btn sl-btn-ghost" disabled={idx <= 0} onClick={() => setActive(stages[idx - 1].key)}>
                  <SlIcon name="back" size={15} /> Back
                </button>
                <span className="gn-prog">{idx + 1} / {stages.length}</span>
                <button className="sl-btn sl-btn-primary" disabled={idx >= stages.length - 1} onClick={() => { setActive(stages[idx + 1].key); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
                  Next <SlIcon name="arrow" size={15} />
                </button>
              </div>
            </div>
          ) : (
            <div>
              {stages.map((s) => (
                <section className="sl-sec" id={"sec-" + s.key} key={s.key}>
                  {renderSection(s.key)}
                </section>
              ))}
            </div>
          )}
        </div>
      </div>

      <DecisionLog open={logOpen} onClose={() => setLogOpen(false)} decisions={decisions} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<SlApp />);