/* Slide-out disclosure drill-in panel */
const DisclosurePanel = ({ id, onClose, setRoute }) => {
  const open = !!id;
  const d = id ? (window.DISCLOSURES || []).find(x => x.id === id) : null;

  React.useEffect(() => {
    const onKey = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  if (!open || !d) return null;
  const co = byId(d.co);

  const critOrder = ['materiality','measurability','linkage','verification'];
  const critLabel = { materiality:'Materiality', measurability:'Measurability', linkage:'Linkage', verification:'Verification' };

  return (
    <div style={{position:'fixed',inset:0,zIndex:100,pointerEvents:'auto'}}>
      <div onClick={onClose}
        style={{position:'absolute',inset:0,background:'rgba(26,26,23,0.18)',animation:'kestrel-overlay-in 220ms var(--ease-quiet) both'}}/>
      <aside className="thin-scroll" style={{
        position:'absolute',top:0,right:0,bottom:0,width:'min(640px,94vw)',
        background:'var(--canvas)',borderLeft:'1px solid var(--line)',
        overflowY:'auto',animation:'kestrel-slide-in 320ms var(--ease-quiet) both',
        boxShadow:'var(--shadow-float)',
      }}>
        <div style={{position:'sticky',top:0,background:'rgba(250,250,247,0.92)',backdropFilter:'blur(14px)',borderBottom:'1px solid var(--line)',padding:'16px 32px',display:'flex',justifyContent:'space-between',alignItems:'center',zIndex:2}}>
          <div style={{display:'flex',alignItems:'center',gap:12}}>
            <Chip klass={d.c} compact>{CSV_LABELS[d.c]}</Chip>
            <span className="eyebrow">{d.theme}</span>
            <span className="eyebrow tabular">{d.year}</span>
          </div>
          <button onClick={onClose} style={{background:'transparent',border:'1px solid var(--line)',borderRadius:999,width:32,height:32,display:'flex',alignItems:'center',justifyContent:'center',cursor:'pointer',color:'var(--ink-2)'}}>
            <Icon name="close" size={14}/>
          </button>
        </div>

        <div style={{padding:'32px 32px 64px'}}>
          <button className="back-btn" onClick={()=>{onClose();setRoute({page:'company',id:d.co});}}>
            <Icon name="arrow-right" size={12}/> {co.name}
          </button>
          <h3 style={{fontSize:28,lineHeight:'36px',fontWeight:500,letterSpacing:'-0.02em',marginTop:14,color:'var(--ink)'}}>{d.title}</h3>
          <div style={{fontSize:13,color:'var(--ink-3)',marginTop:10}}>{d.src}</div>

          <div style={{marginTop:32,padding:24,background:'var(--canvas-2)',borderRadius:10,borderLeft:'3px solid var(--moss)'}}>
            <div className="eyebrow" style={{marginBottom:10}}>Passage text</div>
            <p style={{fontSize:15,lineHeight:'24px',color:'var(--ink)',whiteSpace:'pre-wrap'}}>{d.excerpt}</p>
          </div>

          {(d._raw) && (
            <div style={{marginTop:24,display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:12}}>
              {[
                {k:'Initiative type',    v: INITIATIVE_LABEL[d._raw.initiative_type] || d._raw.initiative_type || '—'},
                {k:'CSV pillar',         v: PILLAR_LABEL[d._raw.csv_pillar] || d._raw.csv_pillar || '—'},
                {k:'Linkage strength',   v: d._raw.linkage_strength || '—'},
                {k:'Evidence strength',  v: d._raw.evidence_strength || '—'},
                {k:'Beneficiary scope',  v: d._raw.beneficiary_scope || '—'},
                {k:'Remediation flag',   v: d._raw.remediation_flag || '—'},
              ].map(f => (
                <div key={f.k} style={{padding:'10px 14px',background:'var(--canvas-2)',border:'1px solid var(--line)',borderRadius:8}}>
                  <div className="eyebrow" style={{fontSize:10}}>{f.k}</div>
                  <div style={{fontSize:13,color:'var(--ink)',marginTop:4}}>{f.v}</div>
                </div>
              ))}
            </div>
          )}

          <div style={{marginTop:32}}>
            <div className="eyebrow" style={{marginBottom:10}}>Justification</div>
            <p style={{fontSize:14,lineHeight:'22px',color:'var(--ink-2)'}}>{d.reasoning || 'No analyst justification recorded for this passage.'}</p>
          </div>

          <div style={{marginTop:40}}>
            <div className="eyebrow" style={{marginBottom:14}}>Criteria scoring</div>
            <div style={{borderTop:'1px solid var(--line)'}}>
              {critOrder.map(k=>{
                const grade = d.criteria[k];
                const strength = { A:4, B:3, C:2, D:1 }[grade];
                const label = EVIDENCE_GRADE[grade];
                return (
                  <div key={k} style={{display:'grid',gridTemplateColumns:'140px 1fr',gap:20,padding:'16px 0',borderBottom:'1px solid var(--line)',alignItems:'center'}}>
                    <div style={{fontSize:14,color:'var(--ink)',fontWeight:500}}>{critLabel[k]}</div>
                    <div style={{display:'flex',flexDirection:'column',gap:8}}>
                      <div style={{display:'flex',gap:4}}>
                        {[1,2,3,4].map(n => (
                          <div key={n} style={{
                            flex:1,height:6,borderRadius:3,
                            background: n<=strength ? (strength===4?'var(--moss)':strength===1?'var(--ink-3)':'var(--ink)') : '#E5E2D8'
                          }}/>
                        ))}
                      </div>
                      <div style={{fontSize:13,color:'var(--ink-2)'}}>{label}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div style={{marginTop:40,display:'grid',gridTemplateColumns:'1fr 1fr',gap:20}}>
            <div style={{padding:20,border:'1px solid var(--line)',borderRadius:10}}>
              <div className="eyebrow">Confidence</div>
              <div className="tabular" style={{fontSize:44,fontWeight:600,color:'var(--ink)',letterSpacing:'-0.025em',marginTop:8}}>{d.conf}</div>
              <div style={{marginTop:10}}><MiniBar value={d.conf}/></div>
            </div>
            <div style={{padding:20,border:'1px solid var(--line)',borderRadius:10}}>
              <div className="eyebrow">Classification</div>
              <div style={{fontSize:20,fontWeight:500,color:'var(--ink)',marginTop:12,letterSpacing:'-0.01em'}}>{CSV_LABELS[d.c]}</div>
              <div style={{fontSize:12,color:'var(--ink-2)',marginTop:6}}>{d.c === 'true' ? 'Qualifies as shared value.' : d.c === 'ambig' ? 'Plausible, unverified.' : 'Narrative only.'}</div>
            </div>
          </div>

          <div style={{marginTop:40,display:'flex',gap:12}}>
            <button className="btn btn-ghost" style={{padding:'10px 16px'}}><Icon name="external" size={13} style={{marginRight:2}}/> View source</button>
            <button className="btn btn-text" style={{fontSize:13}} onClick={()=>{onClose();setRoute({page:'company',id:d.co});}}>
              See {co.name} scorecard <Icon name="arrow-right" size={12} style={{marginLeft:2}} className="arrow"/>
            </button>
          </div>
        </div>
      </aside>
    </div>
  );
};
window.DisclosurePanel = DisclosurePanel;
