/* Per-company scorecard — charts driven by kestrel_summary.json */
const Scorecard = ({ id, setRoute, openDisclosure }) => {
  const c = byId(id);
  if (!c) return null;
  const relDisc = (window.DISCLOSURES || []).filter(d => d.co === id);
  const trueCount = c.initiative_type ? (c.initiative_type.transformational || 0) : relDisc.filter(d => d.c === 'true').length;
  // Per-company counts pulled from the real label breakdown.
  const posCount = Math.round(c.n_disc * c.t_pct / 100);
  const ambCount = Math.round(c.n_disc * c.a_pct / 100);
  const negCount = c.n_disc - posCount - ambCount;
  const trueCountReal  = posCount;
  const ambigCountReal = ambCount;
  const noneCountReal  = negCount;

  // By-year trends: positive-share % and average confidence per reporting year.
  const years = Object.keys(c.by_year || {}).sort();
  const truthTrend = years.map(y => +(c.by_year[y].positive_pct ?? 0).toFixed(2));
  const truthMax = Math.max(3, ...truthTrend) * 1.2;
  const trend = years.map(y => Math.round(c.by_year[y].avg_conf ?? 0));

  // Initiative-type distribution — real counts → percentages.
  const it = c.initiative_type || {};
  const itTotal = (it.no_initiative || 0) + (it.transactional || 0) + (it.transitional || 0) + (it.transformational || 0) || 1;
  const initiativeTypes = [
    { k:'None',            v: Math.round((it.no_initiative    || 0) / itTotal * 100), color:'var(--canvas-3)' },
    { k:'Transactional',   v: Math.round((it.transactional    || 0) / itTotal * 100), color:'var(--class-none)' },
    { k:'Transitional',    v: Math.round((it.transitional     || 0) / itTotal * 100), color:'var(--class-ambig)' },
    { k:'Transformational',v: Math.round((it.transformational || 0) / itTotal * 100), color:'var(--class-true)' },
  ];

  // CSV pillar split — real counts from summary, normalised to share of
  // qualifying (non-'none') pillars so the donut reads as "which pillar".
  const pl = c.csv_pillar || {};
  const plRaw = [
    { k:'Products & markets',        raw: pl.products_markets    || 0, color:'#C8D2B8' },
    { k:'Value-chain productivity',  raw: pl.value_chain         || 0, color:'var(--moss)' },
    { k:'Local cluster development', raw: pl.cluster_development || 0, color:'var(--moss-deep)' },
  ];
  const plSum = plRaw.reduce((a,b)=>a+b.raw,0) || 1;
  let pillars = plRaw.map(p => ({...p, v: Math.round((p.raw / plSum) * 100)}));
  const plDrift = 100 - pillars.reduce((a,b)=>a+b.v,0);
  if (pillars.length) pillars[pillars.length-1].v += plDrift;

  // Leading themes — use linkage + evidence strength to surface where this
  // company is strongest. Fall back to initiative types if nothing is
  // non-zero yet (e.g. very small 2023 reports).
  const link = c.linkage_strength || {};
  const ev = c.evidence_strength || {};
  const themes = [
    { k:'Explicit linkage disclosures', v: (link.explicit   || 0) + (link.quantified || 0) },
    { k:'Implied linkage disclosures',  v:  link.implied   || 0 },
    { k:'Moderate+ evidence strength',  v: (ev.moderate    || 0) + (ev.strong || 0) + (+ev['3'] || 0) + (+ev['2'] || 0) },
    { k:'Transitional initiatives',     v:  it.transitional || 0 },
    { k:'Cluster-development passages', v:  pl.cluster_development || 0 },
  ].filter(t => t.v > 0).slice(0, 5);

  return (
    <section className="section first">
      <div className="site-wrap">
        <button className="back-btn" style={{marginBottom:24}} onClick={()=>setRoute({page:'home'})}>
          <Icon name="arrow-left" size={12}/> All companies
        </button>

        <div style={{borderBottom:'1px solid var(--line)',paddingBottom:40}}>
          <EyebrowRow label={`${c.country} · ${c.commodity}`}/>
          <h1 style={{fontSize:72,lineHeight:'76px',fontWeight:600,letterSpacing:'-0.03em'}}>{c.name}</h1>
          <p className="lede" style={{marginTop:20,maxWidth:560}}>
            {c.n_disc.toLocaleString()} passages reviewed across {years.length} reporting year{years.length===1?'':'s'} ({years[0]}&ndash;{years[years.length-1]}). Aggregate confidence {c.conf}.
          </p>
        </div>

        {/* Top stats — the headline figures, pop them */}
        <div className="sc-headline">
          {[
            {k:'True shared value',     v:c.t_pct, suffix:'%', decimals:2, sub:`${trueCountReal} passages`,  tone:'var(--class-true)',  accent:true},
            {k:'Ambiguous',             v:c.a_pct, suffix:'%', decimals:1, sub:`${ambigCountReal} passages`, tone:'var(--ink)'},
            {k:'No measurable value',   v:c.n_pct, suffix:'%', decimals:1, sub:`${noneCountReal} passages`, tone:'var(--ink)'},
            {k:'Confidence',            v:c.conf,  suffix:'',  decimals:0, sub:'aggregate 0–100',           tone:'var(--ink)'},
          ].map((s,i)=>(
            <div key={i} className={`sc-headline-cell ${s.accent?'accent':''}`}>
              <div className="eyebrow">{s.k}</div>
              <div className="sc-headline-value" style={{color:s.tone}}>
                <AnimatedNumber value={s.v} decimals={s.decimals} suffix={s.suffix}/>
              </div>
              <div className="sc-headline-sub">{s.sub}</div>
            </div>
          ))}
        </div>

        {/* Big charts row: donut + line */}
        <Reveal>
          <div style={{marginTop:64,display:'grid',gridTemplateColumns:'auto 1fr',gap:64,alignItems:'start'}}>
            <div style={{padding:'32px 36px',border:'1px solid var(--line)',borderRadius:16,background:'var(--canvas)'}} className="lift">
              <div className="eyebrow">Classification mix</div>
              <div style={{marginTop:20,display:'flex',alignItems:'center',justifyContent:'center'}}>
                <Donut
                  size={240} thickness={24}
                  segments={[
                    { value: c.t_pct,    color: 'var(--class-true)' },
                    { value: c.a_pct,    color: 'var(--class-ambig)' },
                    { value: c.n_pct,    color: 'var(--class-none)' },
                  ]}
                  centerValue={`${c.t_pct.toFixed(2)}%`}
                  centerLabel="True shared value"
                  centerSub={`of ${c.n_disc.toLocaleString()} passages`}
                />
              </div>
              <div style={{marginTop:20,display:'grid',gridTemplateColumns:'1fr',gap:8}}>
                {[
                  {k:'True',      v:c.t_pct,  c:'var(--class-true)'},
                  {k:'Ambiguous', v:c.a_pct,  c:'var(--class-ambig)'},
                  {k:'None',      v:c.n_pct,  c:'var(--class-none)'},
                ].map(r=>(
                  <div key={r.k} style={{display:'grid',gridTemplateColumns:'12px 1fr auto',gap:10,alignItems:'center',fontSize:13}}>
                    <span style={{width:10,height:10,borderRadius:2,background:r.c,display:'inline-block'}}/>
                    <span style={{color:'var(--ink-2)'}}>{r.k}</span>
                    <span className="tabular" style={{color:'var(--ink)',fontWeight:500}}>{r.v.toFixed(2)}%</span>
                  </div>
                ))}
              </div>
            </div>

            <div style={{padding:'32px 36px',border:'1px solid var(--line)',borderRadius:16,background:'var(--canvas)'}} className="lift">
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
                <div className="eyebrow">True shared value, trend</div>
                <div style={{display:'flex',alignItems:'center',gap:6,fontSize:12,color:truthTrend.length > 1 && truthTrend[truthTrend.length-1] > truthTrend[0] ? 'var(--class-true)' : 'var(--ink-3)'}}>
                  <Icon name="arrow-right" size={12}/> {truthTrend.length > 1 && truthTrend[truthTrend.length-1] > truthTrend[0] ? 'Improving' : 'Flat'}
                </div>
              </div>
              <div style={{marginTop:20}}>
                <LineChart
                  series={truthTrend.length ? truthTrend : [0]}
                  labels={years.length ? years : ['—']}
                  width={560} height={220}
                  yDomain={[0, truthMax]}
                  yFormat={(v)=> v.toFixed(2)+'%'}
                />
              </div>
              <p style={{marginTop:16,fontSize:12,lineHeight:'18px',color:'var(--ink-3)',maxWidth:520}}>
                Share of passages qualifying as true shared value per reporting year. From passage-level classifications across {years.length} reporting year{years.length===1?'':'s'} ({years[0]}&ndash;{years[years.length-1]}).
              </p>
            </div>
          </div>
        </Reveal>

        {/* Initiative type + CSV pillar row */}
        <Reveal delay={120}>
          <div style={{marginTop:48,display:'grid',gridTemplateColumns:'1fr 1fr',gap:32}}>
            <div style={{padding:'32px 36px',border:'1px solid var(--line)',borderRadius:16,background:'var(--canvas)'}} className="lift">
              <div className="eyebrow">Initiative type distribution</div>
              <div style={{marginTop:16}}>
                <BarChart
                  data={initiativeTypes.map(t=>({k:t.k,v:t.v,color:t.color}))}
                  width={500} height={220}
                  valueFormat={(v)=> Math.round(v)+'%'}
                />
              </div>
              <p style={{marginTop:8,fontSize:12,lineHeight:'18px',color:'var(--ink-3)'}}>
                Porter &amp; Kramer's initiative taxonomy applied to {c.name}&rsquo;s classified passages.
              </p>
            </div>

            <div style={{padding:'32px 36px',border:'1px solid var(--line)',borderRadius:16,background:'var(--canvas)'}} className="lift">
              <div className="eyebrow">CSV pillar weight</div>
              <div style={{marginTop:20,display:'grid',gridTemplateColumns:'auto 1fr',gap:32,alignItems:'center'}}>
                <Donut
                  size={180} thickness={22}
                  segments={(pillars.every(p => p.v === 0) ? [{value:100,color:'var(--canvas-3)'}] : pillars).map(p => ({ value: p.v, color: p.color }))}
                  centerValue={`${pillars.reduce((m,p)=> p.v>m.v?p:m, pillars[0]).v}%`}
                  centerLabel={pillars.reduce((m,p)=> p.v>m.v?p:m, pillars[0]).k.split(' ')[0]}
                  centerSub="largest pillar"
                />
                <div style={{display:'flex',flexDirection:'column',gap:14}}>
                  {pillars.map((p,i)=>(
                    <div key={p.k} style={{display:'grid',gridTemplateColumns:'12px 1fr auto',gap:12,alignItems:'center'}}>
                      <span style={{width:12,height:12,borderRadius:3,background:p.color,display:'inline-block'}}/>
                      <span style={{fontSize:13,color:'var(--ink-2)',lineHeight:'18px'}}>{p.k}</span>
                      <span className="tabular" style={{fontSize:14,fontWeight:600,color:'var(--ink)'}}>{p.v}%</span>
                    </div>
                  ))}
                </div>
              </div>
              <p style={{marginTop:20,fontSize:12,lineHeight:'18px',color:'var(--ink-3)'}}>
                Share of qualifying initiatives mapped to each CSV pillar.
              </p>
            </div>
          </div>
        </Reveal>

        {/* Themes + narrative */}
        <Reveal delay={160}>
          <div style={{marginTop:48,display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:32}}>
            <div style={{padding:'32px 36px',border:'1px solid var(--line)',borderRadius:16,background:'var(--canvas)'}} className="lift">
              <div className="eyebrow">Top disclosure signals</div>
              <div style={{marginTop:20}}>
                {themes.length ? <HBarList data={themes} valueFormat={(v)=> v + ' passages'} color="var(--moss)"/> :
                  <div style={{fontSize:13,color:'var(--ink-3)'}}>No qualifying signals in this company's reports.</div>}
              </div>
            </div>
            <div style={{padding:'32px 36px',border:'1px solid var(--line)',borderRadius:16,background:'var(--sage-tint)'}} className="lift">
              <div className="eyebrow" style={{color:'var(--moss-deep)'}}>Where Kestrel sees value</div>
              <p style={{fontSize:15,lineHeight:'24px',color:'var(--ink)',marginTop:14}}>
                {c.t_pct > 0.6
                  ? 'A small set of passages clears the full shared-value bar: explicit causal linkage, both sides evidenced, and operational integration. Above the peer median for this sample.'
                  : c.t_pct > 0.25
                  ? 'Partial credit on a narrow set of programmes. Where passages are rated positive they tend to be transitional — efficiency gains and supplier programmes, not business-model change.'
                  : 'Limited qualifying passages. Most disclosures are policy, target, or narrative framing without initiative-level substance or causal linkage.'}
              </p>

              {/* vs peer median */}
              {(() => {
                const all = (window.COMPANIES || []).map(x => x.t_pct).sort((a,b)=>a-b);
                if (!all.length) return null;
                const median = all[Math.floor(all.length/2)];
                const max = Math.max(...all, 0.01);
                const peerPct = (median / max) * 100;
                const coPct = (c.t_pct / max) * 100;
                const delta = c.t_pct - median;
                const above = delta >= 0;
                return (
                  <div style={{marginTop:24,padding:'16px 18px',background:'var(--canvas)',borderRadius:10,border:'1px solid #DCE3CF'}}>
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:14}}>
                      <div style={{fontSize:11,color:'var(--ink-3)',textTransform:'uppercase',letterSpacing:'0.08em'}}>vs. peer median</div>
                      <div className="tabular" style={{fontSize:13,fontWeight:600,color:above?'var(--moss-deep)':'var(--ink-2)'}}>
                        {above?'+':''}{delta.toFixed(2)} pt
                      </div>
                    </div>
                    <div style={{position:'relative',height:12,borderRadius:6,background:'#E5E2D8',overflow:'visible'}}>
                      {/* company bar */}
                      <div className="kappa-fill" style={{position:'absolute',left:0,top:0,width:`${coPct}%`,height:'100%',background:above?'var(--moss-deep)':'var(--ink-2)',borderRadius:6,animation:'kappa-grow 900ms 200ms var(--ease-quiet) both',transformOrigin:'left'}}/>
                      {/* median line */}
                      <div style={{position:'absolute',left:`${peerPct}%`,top:-4,bottom:-4,width:2,background:'var(--ink)',transform:'translateX(-1px)'}} title={`Peer median ${median.toFixed(2)}%`}/>
                    </div>
                    <div style={{display:'flex',justifyContent:'space-between',marginTop:8,fontSize:11,color:'var(--ink-3)'}}>
                      <span className="tabular">This co. {c.t_pct.toFixed(2)}%</span>
                      <span className="tabular">Peer median {median.toFixed(2)}%</span>
                      <span className="tabular">Peak {max.toFixed(2)}%</span>
                    </div>
                  </div>
                );
              })()}

              <div style={{marginTop:20,display:'flex',gap:10,flexWrap:'wrap'}}>
                {themes.slice(0,3).map(t=> <Chip key={t.k} compact>{t.k}</Chip>)}
              </div>
            </div>
          </div>
        </Reveal>

        {/* Confidence trend (keep the sparkline for rhythm) */}
        <Reveal delay={180}>
          <div style={{marginTop:48,padding:'28px 36px',border:'1px solid var(--line)',borderRadius:16,background:'var(--canvas)'}} className="lift">
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <div>
                <div className="eyebrow">Confidence, {years[0]}&ndash;{years[years.length-1]}</div>
                <div style={{fontSize:28,fontWeight:600,color:'var(--ink)',letterSpacing:'-0.02em',marginTop:8}} className="tabular">
                  <AnimatedNumber value={c.conf} decimals={0}/> <span style={{fontSize:14,color:'var(--ink-3)',fontWeight:400}}>/ 100</span>
                </div>
              </div>
              <div style={{display:'flex',gap:10,alignItems:'center'}}>
                <Sparkline points={trend.length ? trend : [0]} width={320} height={56}/>
                <div className="tabular" style={{fontSize:12,color: trend.length>1 && trend[trend.length-1]>trend[0] ? 'var(--class-true)' : 'var(--class-none)'}}>
                  {trend.length>1 ? ((trend[trend.length-1]>trend[0]?'+':'') + (trend[trend.length-1]-trend[0])) : '—'}
                </div>
              </div>
            </div>
          </div>
        </Reveal>

        <div style={{marginTop:80}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:24}}>
            <h3 style={{fontSize:28,lineHeight:'36px',fontWeight:500,letterSpacing:'-0.02em'}}>Passages</h3>
            <div className="tabular" style={{fontSize:13,color:'var(--ink-3)'}}>{relDisc.length.toLocaleString()} surfaced &middot; {c.n_disc.toLocaleString()} reviewed</div>
          </div>
          <Explore embedded initialCompany={id} setRoute={setRoute} openDisclosure={openDisclosure}/>
        </div>
      </div>
    </section>
  );
};
window.Scorecard = Scorecard;