/* Compare view — animated, chart-first comparison across up to 3 companies */
const Compare = ({ setRoute }) => {
  // Default to the first three companies that exist in the loaded dataset.
  const defaults = React.useMemo(() => {
    const ids = (window.COMPANIES || []).map(c => c.id);
    const preferred = ['bhp', 'anglo', 'barrick', 'newmont', 'teck'];
    const out = [];
    for (const p of preferred) { if (ids.includes(p) && out.length < 3) out.push(p); }
    for (const id of ids) { if (!out.includes(id) && out.length < 3) out.push(id); }
    return out;
  }, []);
  const [picks, setPicks] = React.useState(defaults);
  const update = (i, v) => setPicks(p => p.map((x,j) => j===i ? v : x));
  const cos = picks.map(byId).filter(Boolean);
  if (cos.length === 0) return null;
  // Stronger, more readable palette — sage-tint replaced with amber so 3rd pick doesn't "wash out"
  const colors = ['var(--moss-deep)', 'var(--moss)', '#C07A3E'];

  // Leader index — highest True %
  const leaderIdx = cos.reduce((best,c,i)=> c.t_pct > cos[best].t_pct ? i : best, 0);

  // Dynamic strip domain — pad 0.3%-pt either side so pins don't kiss the edges
  const picksPct = cos.map(c => c.t_pct);
  const stripMin = Math.max(0, Math.min(...picksPct) - 0.4);
  const stripMax = Math.max(...picksPct) + 0.4;
  const stripSpan = stripMax - stripMin || 1;
  const stripMid = (stripMin + stripMax) / 2;

  const goTo = (id) => setRoute({page:'company',id});

  return (
    <section className="section first">
      <div className="site-wrap">
        <EyebrowRow label="Compare"/>
        <h1 style={{fontSize:56,lineHeight:'60px',fontWeight:500,letterSpacing:'-0.025em',maxWidth:860}}>Same rubric. Different companies.</h1>
        <p className="lede" style={{marginTop:20,maxWidth:620}}>
          Select up to three miners. Kestrel runs every passage through the same V2.0 rubric &mdash; the differences you see below are differences in the disclosures, not in the method.
        </p>

        {/* ======= Picker row ======= */}
        <div className="cmp-picker">
          <div className="cmp-picker-head">
            <div className="eyebrow">Company</div>
          </div>
          {picks.map((p,i)=>{
            const c = cos[i];
            return (
              <div key={i} className="cmp-picker-cell">
                <div className="cmp-color-dot" style={{background:colors[i]}}/>
                <select value={p} onChange={e=>update(i,e.target.value)} className="cmp-select">
                  {COMPANIES.map(cc => <option key={cc.id} value={cc.id}>{cc.name}</option>)}
                </select>
                <div className="cmp-meta">
                  <span className="tabular">{c.country}</span>
                  <span style={{color:'var(--line-strong)'}}>·</span>
                  <span>{c.commodity}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* ======= KPI cards row ======= */}
        <Reveal>
          <div className="cmp-kpi-row">
            {cos.map((c,i)=>(
              <button key={i} type="button" onClick={()=>goTo(c.id)} className={`cmp-kpi-card ${i===leaderIdx?'is-leader':''}`} style={{'--accent':colors[i]}}>
                <div className="cmp-kpi-accent"/>
                {i===leaderIdx && <div className="cmp-leader-badge">Strongest disclosure of picks</div>}
                <div className="eyebrow" style={{color:colors[i]}}>{c.name}</div>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20,marginTop:16}}>
                  <div>
                    <div className="cmp-kpi-label">True SV</div>
                    <div className="cmp-kpi-big tabular" style={{color:colors[i]}}>
                      <AnimatedNumber value={c.t_pct} decimals={2} suffix="%"/>
                    </div>
                  </div>
                  <div>
                    <div className="cmp-kpi-label">Confidence</div>
                    <div className="cmp-kpi-big tabular">
                      <AnimatedNumber value={c.conf} decimals={0}/>
                    </div>
                  </div>
                </div>
                <div style={{marginTop:16,fontSize:12,color:'var(--ink-3)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                  <span>
                    <span className="tabular" style={{color:'var(--ink)',fontWeight:500}}>{c.n_disc}</span> disclosures reviewed
                  </span>
                  <span className="cmp-kpi-cta">Open scorecard <Icon name="arrow-right" size={12}/></span>
                </div>
              </button>
            ))}
          </div>
        </Reveal>

        {/* ======= Classification mix — side-by-side donuts ======= */}
        <Reveal delay={80}>
          <div className="cmp-card">
            <div className="cmp-card-head">
              <div>
                <div className="eyebrow">Classification mix</div>
                <h3 className="cmp-card-title">Where each company lands on the rubric.</h3>
              </div>
              <div className="cmp-legend">
                <span><i style={{background:'var(--class-true)'}}/>True SV</span>
                <span><i style={{background:'var(--class-ambig)'}}/>Ambiguous</span>
                <span><i style={{background:'var(--class-none)'}}/>None</span>
              </div>
            </div>
            <div className="cmp-donut-row">
              {cos.map((c,i)=>(
                <button key={i} type="button" onClick={()=>goTo(c.id)} className="cmp-donut-cell">
                  <Donut
                    size={180} thickness={22}
                    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 SV"
                  />
                  <div className="cmp-donut-label">
                    <span className="cmp-color-dot" style={{background:colors[i]}}/>
                    {c.name}
                    <span className="cmp-donut-arrow"><Icon name="arrow-right" size={12}/></span>
                  </div>
                </button>
              ))}
            </div>
          </div>
        </Reveal>

        {/* ======= True-SV dumbbell / positioning vs. peers ======= */}
        <Reveal delay={120}>
          <div className="cmp-card">
            <div className="cmp-card-head">
              <div>
                <div className="eyebrow">True shared value &middot; against peers</div>
                <h3 className="cmp-card-title">Where your picks sit in the distribution.</h3>
                <div style={{marginTop:6,fontSize:12,color:'var(--ink-3)'}}>Further right = higher share of disclosures that qualify as true shared value.</div>
              </div>
              <div style={{fontSize:12,color:'var(--ink-3)'}}>Scale: {stripMin.toFixed(2)}% &mdash; {stripMax.toFixed(2)}%</div>
            </div>
            <div className="cmp-strip">
              <div className="cmp-strip-track">
                {/* Peer ticks — only render those that fall within the dynamic domain */}
                {COMPANIES.map(pc => {
                  const inRange = pc.t_pct >= stripMin && pc.t_pct <= stripMax;
                  if (!inRange) return null;
                  const isPick = picks.includes(pc.id);
                  return (
                    <div key={pc.id}
                      className={`cmp-strip-tick ${isPick?'is-pick':''}`}
                      style={{left:`${((pc.t_pct - stripMin) / stripSpan) * 100}%`}}
                      title={`${pc.name} · ${pc.t_pct}%`}/>
                  );
                })}
                {/* Peer median marker */}
                {(() => {
                  const sorted = [...COMPANIES].map(x=>x.t_pct).sort((a,b)=>a-b);
                  const median = sorted[Math.floor(sorted.length/2)];
                  if (median < stripMin || median > stripMax) return null;
                  return (
                    <div className="cmp-strip-median" style={{left:`${((median - stripMin) / stripSpan) * 100}%`}}>
                      <div className="cmp-strip-median-line"/>
                      <div className="cmp-strip-median-label">Peer median {median.toFixed(2)}%</div>
                    </div>
                  );
                })()}
                {cos.map((c,i)=>(
                  <div key={i} className="cmp-strip-marker" style={{left:`${((c.t_pct - stripMin) / stripSpan) * 100}%`, '--c':colors[i]}}>
                    <div className="cmp-strip-pin"/>
                    <div className="cmp-strip-label">{c.name}<br/><span className="tabular">{c.t_pct.toFixed(2)}%</span></div>
                  </div>
                ))}
              </div>
              <div className="cmp-strip-axis">
                <span className="tabular">{stripMin.toFixed(2)}%</span>
                <span className="tabular">{stripMid.toFixed(2)}%</span>
                <span className="tabular">{stripMax.toFixed(2)}%</span>
              </div>
            </div>
          </div>
        </Reveal>

        {/* ======= Stacked horizontal bars — the mix, painted ======= */}
        <Reveal delay={160}>
          <div className="cmp-card">
            <div className="cmp-card-head">
              <div>
                <div className="eyebrow">Mix, expanded</div>
                <h3 className="cmp-card-title">Each bar is a company, each colour a verdict.</h3>
              </div>
              <div className="cmp-legend">
                <span><i style={{background:'var(--class-true)'}}/>True</span>
                <span><i style={{background:'var(--class-ambig)'}}/>Ambiguous</span>
                <span><i style={{background:'var(--class-none)'}}/>None</span>
              </div>
            </div>
            <div style={{marginTop:8}}>
              {cos.map((c,i)=>(
                <div key={i} className="cmp-stack-row">
                  <div className="cmp-stack-name">
                    <span className="cmp-color-dot" style={{background:colors[i]}}/>
                    {c.name}
                  </div>
                  {/* Widths use the raw percentages so the bar is proportional; the visible
                      "true" segment gets a min-width so it stays readable when < 1%. */}
                  <div className="cmp-stack-bar">
                    <div className="cmp-stack-seg" style={{width:`${Math.max(c.t_pct, 0.5)}%`,background:'var(--class-true)',animationDelay:`${i*100}ms`}} title={`True ${c.t_pct.toFixed(2)}%`}>
                      {c.t_pct >= 2 ? <span>{c.t_pct.toFixed(1)}%</span> : null}
                    </div>
                    <div className="cmp-stack-seg" style={{width:`${c.a_pct}%`,background:'var(--class-ambig)',animationDelay:`${i*100+90}ms`}} title={`Ambiguous ${c.a_pct.toFixed(1)}%`}>
                      {c.a_pct >= 4 ? <span>{c.a_pct.toFixed(1)}%</span> : null}
                    </div>
                    <div className="cmp-stack-seg" style={{width:`${c.n_pct}%`,background:'var(--class-none)',animationDelay:`${i*100+180}ms`}} title={`None ${c.n_pct.toFixed(1)}%`}>
                      <span>{c.n_pct.toFixed(1)}%</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        {/* ======= Confidence + disclosures bars ======= */}
        <Reveal delay={200}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24,marginTop:24}}>
            <div className="cmp-card" style={{marginTop:0}}>
              <div className="eyebrow">Aggregate confidence</div>
              <div style={{marginTop:24,display:'flex',flexDirection:'column',gap:18}}>
                {cos.map((c,i)=>(
                  <div key={i} style={{display:'grid',gridTemplateColumns:'120px 1fr 60px',gap:14,alignItems:'center'}}>
                    <div style={{fontSize:13,color:'var(--ink-2)',display:'flex',alignItems:'center',gap:8}}>
                      <span className="cmp-color-dot" style={{background:colors[i]}}/>{c.name}
                    </div>
                    <div style={{height:10,borderRadius:5,background:'#E5E2D8',overflow:'hidden'}}>
                      <div className="kappa-fill" style={{width:`${c.conf}%`,height:'100%',background:colors[i],animation:`kappa-grow 900ms ${i*120}ms var(--ease-quiet) both`}}/>
                    </div>
                    <div className="tabular" style={{fontSize:14,fontWeight:600,color:'var(--ink)',textAlign:'right'}}>{c.conf}</div>
                  </div>
                ))}
              </div>
              <p style={{marginTop:20,fontSize:12,color:'var(--ink-3)'}}>Higher confidence = more passages with clear, verifiable evidence.</p>
            </div>

            <div className="cmp-card" style={{marginTop:0}}>
              <div className="eyebrow">Disclosures reviewed</div>
              <div style={{marginTop:24,display:'flex',flexDirection:'column',gap:18}}>
                {cos.map((c,i)=>{
                  const maxN = Math.max(...cos.map(x => x.n_disc));
                  return (
                    <div key={i} style={{display:'grid',gridTemplateColumns:'120px 1fr 60px',gap:14,alignItems:'center'}}>
                      <div style={{fontSize:13,color:'var(--ink-2)',display:'flex',alignItems:'center',gap:8}}>
                        <span className="cmp-color-dot" style={{background:colors[i]}}/>{c.name}
                      </div>
                      <div style={{height:10,borderRadius:5,background:'#E5E2D8',overflow:'hidden'}}>
                        <div className="kappa-fill" style={{width:`${(c.n_disc/maxN)*100}%`,height:'100%',background:colors[i],animation:`kappa-grow 900ms ${i*120+200}ms var(--ease-quiet) both`}}/>
                      </div>
                      <div className="tabular" style={{fontSize:14,fontWeight:600,color:'var(--ink)',textAlign:'right'}}>{c.n_disc}</div>
                    </div>
                  );
                })}
              </div>
              <p style={{marginTop:20,fontSize:12,color:'var(--ink-3)'}}>Volume of passages reviewed across six reporting years (2018&ndash;2023).</p>
            </div>
          </div>
        </Reveal>

        {/* ======= Scorecard CTAs ======= */}
        <div style={{display:'grid',gridTemplateColumns:`repeat(${cos.length},1fr)`,gap:24,marginTop:32}}>
          {cos.map((c,i)=>(
            <button key={i} className="btn btn-ghost cmp-scorecard-btn" onClick={()=>setRoute({page:'company',id:c.id})}>
              <span>Open {c.name} scorecard</span>
              <Icon name="arrow-right" size={14} className="arrow"/>
            </button>
          ))}
        </div>

        {/* ======= Annotation ======= */}
        <div style={{marginTop:56,display:'flex',justifyContent:'flex-end',gap:16,alignItems:'flex-end'}}>
          <div className="annotation" style={{transform:'rotate(-1.5deg)',maxWidth:280,textAlign:'right'}}>
            Same rubric applied. Differences are in the disclosures, not the method.
          </div>
        </div>
      </div>
    </section>
  );
};
window.Compare = Compare;