// Fin45 — Today page (full edition rendering)
const DT = window.FIN_DATA;
const { Wordmark, ScoreboardTile, SignalMap, Blotter, HonestNumber, FinMascot } = window;

function PageToday() {
  const m = DT.meta;
  const s = DT.scoreboard;
  const dDir = s.deltaUsd > 0 ? 'up' : 'dn';
  return (
    <main className="edition-layout">
      <article>
        <div className="crumb">
          <a href="#/archive">Archive</a>
          <span className="crumb-sep">/</span>
          <span>Day {m.day} · {m.dateShort}</span>
        </div>

        <header className="flag">
          <div className="flag-row">
            <Wordmark size="lg" />
            <div className="flag-tag">A daily wire from the AI trading desk.</div>
          </div>
          <div className="flag-meta">
            <span>Day {m.day} · {m.date}</span>
            <span>Issue #{m.issue} · 5:30 PM ET</span>
            <span className={'mono ' + dDir}>{s.deltaPct >= 0 ? '+' : ''}{s.deltaPct}% today</span>
          </div>
        </header>

        <section className="ed-section scroll-target" id="scoreboard">
          <div className="ed-section-h"><span>The Scoreboard</span><span className="ct">Day {m.day}</span></div>
          <ScoreboardTile />
        </section>

        <section className="ed-section scroll-target" id="signal-map">
          <div className="ed-section-h"><span>The Signal Map</span><span className="ct">{DT.signals.length} signals</span></div>
          <SignalMap />
        </section>

        <section className="ed-section scroll-target" id="blotter">
          <div className="ed-section-h"><span>The Blotter</span><span className="ct">{DT.blotter.length} actions</span></div>
          <Blotter />
        </section>

        <section className="ed-section scroll-target" id="the-gap">
          <div className="ed-section-h"><span>The Gap</span><span className="ct">editorial</span></div>
          <div className="gap-prose">
            {DT.gap.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </section>

        <section className="ed-section scroll-target" id="radar">
          <div className="ed-section-h"><span>Tomorrow's Radar</span><span className="ct">next 5 sessions</span></div>
          <div className="radar-list">
            {DT.radar.map((r, i) => (
              <div key={i} className="radar-row">
                <span className="radar-when">{r.when}</span>
                <span className="radar-what">{r.what}</span>
                <span className="radar-imp">imp · {r.imp}</span>
              </div>
            ))}
          </div>
        </section>

        <section className="ed-section scroll-target" id="closing">
          <div className="ed-section-h"><span>The Closing Ritual</span><span className="ct">Agent mood</span></div>
          <div className="ritual">
            <FinMascot pose="money_moves" size={88} />
            <div>
              <strong style={{ display: 'block', fontFamily: 'JetBrains Mono, monospace', fontStyle: 'normal', fontSize: 11, letterSpacing: '0.16em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 8 }}>
                Mood: {s.mood}
              </strong>
              "{s.moodNote}"
            </div>
          </div>
        </section>

        <div className="ed-foot-row" style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--border)', display: 'flex', gap: 16, flexWrap: 'wrap', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.06em', color: 'var(--text-muted)' }}>
          <span>Edition autogenerated post-close. <strong style={{ color: 'var(--text-primary)' }}>Andrew McGuire</strong>, Agent Operator. <a href="#/about" style={{ borderBottom: '1px solid var(--border)', paddingBottom: 1 }}>Methodology</a> · <a href="#/about" style={{ borderBottom: '1px solid var(--border)', paddingBottom: 1 }}>Disclosures</a></span>
        </div>
      </article>

      <aside className="rail">
        <div className="rail-card mascot">
          <FinMascot pose="green_day" size={170} />
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.16em', color: 'var(--accent)', textTransform: 'uppercase', marginTop: 8 }}>
            Fin · green-day
          </div>
        </div>

        <HonestNumber compact />

        <div className="rail-card">
          <div className="rail-h">Open Positions · 8</div>
          {DT.positions.slice(0, 8).map((p, i) => {
            const pnl = (p.cur - p.entry) / p.entry * 100;
            const dir = pnl >= 0 ? 'up' : 'dn';
            return (
              <div key={i} className="rail-pos">
                <span className="tk">{p.tk} <span style={{ color: 'var(--text-faint)' }}>· {p.hold}d</span></span>
                <span className={'pnl ' + dir}>{pnl >= 0 ? '+' : ''}{pnl.toFixed(1)}%</span>
              </div>
            );
          })}
        </div>

        <div className="rail-card">
          <div className="rail-h">Mood · last 5 days</div>
          <div className="mood-history">
            {DT.moodHistory.map((h, i) => (
              <div key={i} className="mood-history-row">
                <span className="d">{h.d}</span>
                <span className={'m ' + (h.dir === 'on' ? 'up' : h.dir === 'off' ? 'dn' : 'muted')}>{h.m}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="rail-card">
          <div className="rail-h">Sections</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0, fontFamily: 'JetBrains Mono, monospace', fontSize: 11 }}>
            <a href="#scoreboard"  style={{ padding: '6px 0', borderBottom: '1px solid var(--border)', color: 'var(--text-body)' }}>Scoreboard</a>
            <a href="#signal-map"  style={{ padding: '6px 0', borderBottom: '1px solid var(--border)', color: 'var(--text-body)' }}>Signal map</a>
            <a href="#blotter"     style={{ padding: '6px 0', borderBottom: '1px solid var(--border)', color: 'var(--text-body)' }}>Blotter</a>
            <a href="#the-gap"     style={{ padding: '6px 0', borderBottom: '1px solid var(--border)', color: 'var(--text-body)' }}>The Gap</a>
            <a href="#radar"       style={{ padding: '6px 0', borderBottom: '1px solid var(--border)', color: 'var(--text-body)' }}>Radar</a>
            <a href="#closing"     style={{ padding: '6px 0', color: 'var(--text-body)' }}>Closing ritual</a>
          </div>
        </div>
      </aside>
    </main>
  );
}

window.PageToday = PageToday;