// briefing.jsx — Morning Intelligence Briefing (home dashboard)

function Briefing({ go }) {
  const Icons = window.Icons;
  const { Donut, Badge, TierBadge } = window;

  return (
    <div className="content-inner">
      {/* hero */}
      <div className="brief-hero">
        <div>
          <div className="greet">Good morning, Reyes<span className="accent">.</span></div>
          <div className="date">Friday, August 12, 2026 · Your pod scanned 5 sources overnight and surfaced 38 new records.</div>
          <div className="digest-tag">
            <Badge kind="accent" live>Digest delivered 6:00 AM ET</Badge>
          </div>
        </div>
        <div className="flex gap-8 center">
          <button className="filter-chip"><Icons.download /> Export digest</button>
          <button className="filter-chip on"><Icons.refresh /> Sources synced</button>
        </div>
      </div>

      {/* source freshness */}
      <div className="sources mt-18">
        {window.SOURCES.map(s => (
          <div className="source" key={s.key}>
            <span className={`sdot ${s.status}`}></span>
            <div>
              <div className="s-name">{s.name}</div>
              <div className="s-fresh">{s.status === 'warn' ? 'sync delayed' : `+${s.added} · ${s.fresh}`}</div>
            </div>
          </div>
        ))}
      </div>

      {/* KPI tiles */}
      <div className="tilegrid g-4 mt-18">
        {window.KPIS.map(k => (
          <div className="tile" key={k.label}>
            <div className="t-label">{k.label}</div>
            <div className="t-num">{k.num}<span className="u">{k.unit}</span></div>
            <div className={`t-delta ${k.dir}`}>
              {k.dir === 'up' && <Icons.arrowUp />}{k.dir === 'down' && <Icons.arrowDown />}
              {k.delta}
            </div>
          </div>
        ))}
      </div>

      {/* main two-column */}
      <div className="grid mt-18" style={{ gridTemplateColumns: '1fr 372px' }}>
        {/* LEFT */}
        <div className="grid" style={{ gridTemplateColumns: '1fr' }}>
          {/* priority actions */}
          <div className="card">
            <div className="card-h">
              <span className="ch-ic"><Icons.flag /></span>
              <div>
                <h3>Priority Actions</h3>
                <div className="sub">Ranked by deadline pressure × fit × stage</div>
              </div>
              <button className="link" onClick={() => go('opportunities')}>View all <Icons.arrowRight /></button>
            </div>
            <div className="actions">
              {window.PRIORITY_ACTIONS.map((a, i) => (
                <div className="action" key={i} onClick={() => a.oppId && window.OPP_BY_ID[a.oppId] && go('detail', a.oppId)}>
                  <span className="a-rank">{String(i+1).padStart(2,'0')}</span>
                  <span className={`a-pri ${a.pri}`}></span>
                  <div className="a-main">
                    <div className="a-title">{a.title}</div>
                    <div className="a-meta">
                      <span className="mono">{a.meta[0]}</span>
                      {a.meta.slice(1).map((m, j) => <span key={j}>· {m}</span>)}
                    </div>
                  </div>
                  <div className="a-due">
                    <div className={`d-num${a.urgent ? ' urgent' : ''}`}>{a.days}</div>
                    <div className="d-label">{a.label}</div>
                  </div>
                  <span className="a-chev"><Icons.chevronRight /></span>
                </div>
              ))}
            </div>
          </div>

          {/* high-fit opportunities */}
          <div className="card">
            <div className="card-h">
              <span className="ch-ic"><Icons.target /></span>
              <div>
                <h3>New High-Fit Opportunities</h3>
                <div className="sub">Scored ≥75 against the Halcyon Federal profile</div>
              </div>
              <button className="link" onClick={() => go('opportunities')}>Opportunities <Icons.arrowRight /></button>
            </div>
            <div>
              {window.OPPS.filter(o => o.fit >= 76).slice(0, 4).map(o => (
                <div className="opp-mini" key={o.id} onClick={() => go('detail', o.id)}>
                  <Donut value={o.fit} size={50} stroke={5} />
                  <div className="om-main">
                    <div className="om-agency">{o.agencyShort} · {o.vehicle}</div>
                    <div className="om-title">{o.title}</div>
                    <div className="om-meta">
                      <span className="mono">{o.solId}</span>
                      <span className="mono">· {o.ceiling}</span>
                    </div>
                  </div>
                  <div className="flex fcol gap-8 center" style={{ alignItems: 'flex-end' }}>
                    <TierBadge tier={o.tier1} />
                    {o.tier2 && <Badge kind="accent"><Icons.zap /> Tier 2</Badge>}
                  </div>
                  <span className="a-chev"><Icons.chevronRight /></span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* RIGHT */}
        <div className="grid" style={{ gridTemplateColumns: '1fr' }}>
          {/* CI highlights */}
          <div className="card">
            <div className="card-h">
              <span className="ch-ic"><Icons.crosshair /></span>
              <div><h3>CI Highlights</h3><div className="sub">Shipley Black Hat · auto-surfaced</div></div>
            </div>
            <div className="card-b" style={{ paddingTop: 6, paddingBottom: 6 }}>
              {window.CI_HIGHLIGHTS.map((c, i) => (
                <div className="ci-item" key={i}>
                  <div className="ci-top">
                    <span className="ci-tag">{c.tag}</span>
                    <span className="ci-src">{c.src}</span>
                  </div>
                  <div className="ci-text" dangerouslySetInnerHTML={{ __html: c.text }}></div>
                </div>
              ))}
            </div>
          </div>

          {/* amendments */}
          <div className="card">
            <div className="card-h">
              <span className="ch-ic"><Icons.alert /></span>
              <div><h3>Amendments Detected</h3><div className="sub">Last 24 hours</div></div>
            </div>
            <div className="card-b" style={{ paddingTop: 8, paddingBottom: 8 }}>
              {window.AMENDMENTS.map((a, i) => (
                <div className="ci-item" key={i}>
                  <div className="ci-top">
                    <span className="ci-tag" style={{ color: 'var(--accent)', borderColor: 'var(--accent-border)', background: 'var(--accent-surface)' }}>{a.amd}</span>
                    <span className="ci-text" style={{ fontWeight: 600, color: 'var(--text-white)', fontSize: '0.78rem' }}>{a.opp}</span>
                    <span className="ci-src">{a.when}</span>
                  </div>
                  <div className="ci-text" style={{ fontSize: '0.76rem', color: 'var(--text-secondary)' }}>{a.note}</div>
                </div>
              ))}
            </div>
          </div>

          {/* pipeline health */}
          <div className="card">
            <div className="card-h">
              <span className="ch-ic"><Icons.trendingUp /></span>
              <div><h3>Pipeline Health</h3><div className="sub">Qualified opportunities / month</div></div>
            </div>
            <div className="card-b">
              <div className="minibars">
                {window.PIPELINE_MONTHS.map(m => (
                  <div className={`mb${m.peak ? ' peak' : ''}`} key={m.m}>
                    <i style={{ height: `${m.v}%` }}></i>
                    <span>{m.m}</span>
                  </div>
                ))}
              </div>
              <div className="flex between center mt-18" style={{ borderTop: '1px solid var(--border)', paddingTop: 14 }}>
                <div className="kv"><span className="k">Win Rate (TTM)</span><span className="v accent">34%</span></div>
                <div className="kv"><span className="k">Avg P(Win)</span><span className="v">51%</span></div>
                <div className="kv"><span className="k">Pipeline Value</span><span className="v accent">$1.9B</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* lifecycle strip */}
      <div className="row-head mt-20">
        <div>
          <h2>Procurement Lifecycle</h2>
          <div className="desc">8-stage intelligence with automated stage transitions and amendment detection across all tracked opportunities.</div>
        </div>
        <button className="filter-chip" onClick={() => go('pipeline')}><Icons.columns /> Open pipeline board</button>
      </div>
      <div className="lifecycle">
        {window.LIFECYCLE.map(s => (
          <div className={`lc-stage ${s.state}`} key={s.n}>
            <div className="lc-n">{s.n}</div>
            <div className="lc-label">{s.label}</div>
            <div className="lc-count">{s.count}</div>
            <div className="lc-bar"><i style={{ width: s.state === 'active' ? '60%' : s.state === 'done' ? '100%' : '22%' }}></i></div>
          </div>
        ))}
      </div>
      <div style={{ height: 12 }}></div>
    </div>
  );
}
window.Briefing = Briefing;