// tab-metrics.jsx — scoreboard: capital, funnel math, channels, Friday review
function TabMetrics(){
  const R = window.RAISE;
  const { TopBar, Card, money } = window.RaiseShell;
  const cap = R.capital;
  const wiredPct = cap.wired/cap.target*100;
  const softPct = Math.min(100-wiredPct, cap.soft/cap.target*100);

  return (
    <>
      <TopBar title="Metrics" sub="Funnel-math scoreboard · Week 1">
        <button className="btn sm">Export JSON</button>
        <button className="btn primary sm">Start Friday review</button>
      </TopBar>
      <div className="metrics scroll">
        {/* capital */}
        <Card title="Capital raised" tag="vs $10M target">
          <div className="capbar">
            <div style={{display:'flex',alignItems:'baseline',gap:14}}>
              <span className="big">{money(cap.wired)} <small>/ {money(cap.target)} wired</small></span>
              <span className="mono" style={{marginLeft:'auto',fontSize:13,color:'var(--ink-2)'}}>{cap.coverage.toFixed(1)}× coverage · {cap.investors} investors targeted</span>
            </div>
            <div className="captrack">
              <div className="wired" style={{width:wiredPct+'%'}}/>
              <div className="soft" style={{width:softPct+'%'}}/>
            </div>
            <div className="caplegend">
              <span><span className="sw" style={{background:'var(--green)'}}/>Wired {money(cap.wired)}</span>
              <span><span className="sw" style={{background:'var(--primary-tint-2)'}}/>Soft pipeline {money(cap.soft)}</span>
              <span style={{marginLeft:'auto'}}>Need 3–4× coverage · currently {cap.coverage.toFixed(1)}×</span>
            </div>
          </div>
        </Card>

        <div className="grid2">
          {/* funnel math */}
          <Card title="Funnel-math conversion" tag="actual vs GTM benchmark">
            {R.funnelMath.map((j,i)=>{
              const inBand = j.actual>=j.low && j.actual<=j.high;
              return (
                <div key={i} className="jump">
                  <div className="jh"><span>{j.jump}</span><span><b style={{color:inBand?'var(--green)':'var(--amber)'}}>{j.actual}%</b> <span className="muted">target {j.low}–{j.high}%</span></span></div>
                  <div className="jumptrack">
                    <div className="bandfill" style={{left:j.low+'%',width:(j.high-j.low)+'%',borderRadius:6}}/>
                    <div className="marks" style={{left:j.low+'%'}}/>
                    <div className="marks" style={{left:j.high+'%'}}/>
                    <div className="val" style={{left:j.actual+'%',background:inBand?'var(--green)':'var(--amber)'}}/>
                  </div>
                </div>
              );
            })}
            <div className="muted" style={{fontSize:12,marginTop:6}}>Shaded band = GTM benchmark range. Tick = your actual. Soft-commit→Funded is running hot; contact→meeting at the low edge — feed the top of the funnel.</div>
          </Card>

          {/* phase scoreboard */}
          <Card title="Phase scoreboard" tag="this raise">
            <div className="pboard">
              {R.phaseBoard.map((p,i)=>(
                <div key={i} className="pcell">
                  <div className="pk">{p.k}</div>
                  <div className="pv">{p.v}<small>/{p.of}</small></div>
                  <span className="track" style={{marginTop:7}}><i style={{width:Math.min(100,p.v/p.of*100)+'%',background:p.v>=p.of?'var(--green)':'var(--primary)'}}/></span>
                </div>
              ))}
            </div>
          </Card>
        </div>

        {/* channels */}
        <Card title="Channel conversion" tag="invest where it converts">
          <table className="tbl">
            <thead><tr><th>Channel</th><th className="r">Touched</th><th className="r">Meetings</th><th className="r">Soft commits</th><th className="r">Conversion</th><th></th></tr></thead>
            <tbody>
              {R.channels.sort((a,b)=>b.conv-a.conv).map((c,i)=>(
                <tr key={i} style={{cursor:'default'}}>
                  <td style={{fontWeight:600}}>{c.ch}</td>
                  <td className="r mono">{c.touched}</td>
                  <td className="r mono">{c.meetings}</td>
                  <td className="r mono">{c.commits}</td>
                  <td className="r mono" style={{fontWeight:600,color:c.conv>=25?'var(--green)':c.conv<15?'var(--rose)':'var(--ink)'}}>{c.conv}%</td>
                  <td style={{width:160}}><span className="track"><i style={{width:c.conv/40*100+'%',background:c.conv>=25?'var(--green)':c.conv<15?'var(--rose)':'var(--primary)'}}/></span></td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="muted" style={{fontSize:12,marginTop:10}}>Podcast + referral are your highest-converting channels; LinkedIn is the volume play at 13%. Double down where the math works.</div>
        </Card>

        {/* friday review */}
        <Card title="Friday review" tag="≤ 5 min shutdown">
          <div style={{display:'flex',gap:14,alignItems:'center'}}>
            <div style={{flex:1,fontSize:13,color:'var(--ink-2)',lineHeight:1.5}}>
              Guided flow: quotas vs actuals → stage movement → capital delta → interest-score distribution → coach verdict + next-week focus. Saves to <span className="mono">weekly_reviews</span> with a JSON backup.
            </div>
            <button className="btn primary">Start review →</button>
          </div>
        </Card>
      </div>
    </>
  );
}
window.TabMetrics = TabMetrics;