/* Explore — passage-level filterable table with row click → disclosure panel */
const Explore = ({ setRoute, openDisclosure, embedded, initialCompany, limit }) => {
  const [filter, setFilter] = React.useState('All');
  const [company, setCompany] = React.useState(initialCompany || 'All');
  const [year, setYear] = React.useState('All');
  const [pillar, setPillar] = React.useState('All');
  const [itype, setItype] = React.useState('All');
  const [q, setQ] = React.useState('');
  const [sort, setSort] = React.useState({ k:'conf', dir:'desc' });
  const [showAll, setShowAll] = React.useState(false);

  const DATA = window.DISCLOSURES || [];

  // Unique values for filter dropdowns (drawn from the live data).
  const yearOpts = React.useMemo(() => {
    const s = new Set();
    DATA.forEach(r => { if (r.year) s.add(String(r.year)); });
    return Array.from(s).sort();
  }, [DATA]);

  const pillarOpts = React.useMemo(() => {
    const s = new Set();
    DATA.forEach(r => { const p = r._raw?.csv_pillar; if (p) s.add(p); });
    return Array.from(s);
  }, [DATA]);

  const itypeOpts = React.useMemo(() => {
    const s = new Set();
    DATA.forEach(r => { const it = r._raw?.initiative_type; if (it) s.add(it); });
    return Array.from(s);
  }, [DATA]);

  let rows = DATA.slice();
  if (filter !== 'All')  rows = rows.filter(r => r.c === filter);
  if (company !== 'All') rows = rows.filter(r => r.co === company);
  if (year !== 'All')    rows = rows.filter(r => String(r.year) === year);
  if (pillar !== 'All')  rows = rows.filter(r => (r._raw?.csv_pillar || '') === pillar);
  if (itype !== 'All')   rows = rows.filter(r => (r._raw?.initiative_type || '') === itype);
  if (q.trim())          rows = rows.filter(r =>
    (r.title + ' ' + r.excerpt + ' ' + companyName(r.co) + ' ' + (r.reasoning || '')).toLowerCase().includes(q.toLowerCase())
  );
  rows = rows.sort((a,b) => {
    const dir = sort.dir === 'asc' ? 1 : -1;
    if (sort.k === 'conf')  return (a.conf - b.conf) * dir;
    if (sort.k === 'co')    return companyName(a.co).localeCompare(companyName(b.co)) * dir;
    if (sort.k === 'theme') return a.theme.localeCompare(b.theme) * dir;
    if (sort.k === 'year')  return ((a.year||0) - (b.year||0)) * dir;
    return 0;
  });

  const total = rows.length;
  // For home-page preview, cap to `limit`. Allow expanding in-place.
  const cap = (embedded && limit && !showAll) ? Math.min(limit, rows.length) : rows.length;
  const displayRows = rows.slice(0, cap);

  const anyFilterActive = filter!=='All'||(!initialCompany && company!=='All')||year!=='All'||pillar!=='All'||itype!=='All'||q;

  const content = (
    <div className={embedded ? '' : 'site-wrap'}>
      {!embedded && (
        <>
          <EyebrowRow label="Explore"/>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',flexWrap:'wrap',gap:24,marginBottom:32}}>
            <h2 style={{maxWidth:640}}>Filter, sort, drill in. Every row is a passage.</h2>
            <div style={{fontSize:13,color:'var(--ink-3)'}} className="tabular">
              {total.toLocaleString()} of {DATA.length.toLocaleString()}
            </div>
          </div>
        </>
      )}

      <div style={{display:'flex',gap:20,flexWrap:'wrap',alignItems:'center',marginBottom:24}}>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'8px 12px',border:'1px solid var(--line)',borderRadius:999,background:'var(--canvas)',minWidth:280}}>
          <Icon name="search" size={15} color="var(--ink-3)"/>
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Search passages"
            style={{border:'none',background:'transparent',outline:'none',fontSize:13,width:240,color:'var(--ink)',fontFamily:'var(--font-sans)'}}/>
        </div>

        <div style={{display:'flex',gap:6,alignItems:'center'}}>
          <Icon name="filter" size={14} color="var(--ink-3)"/>
          {['All','true','ambig','none'].map(f => (
            <button key={f} onClick={()=>setFilter(f)}
              className="chip tweak-chip" data-class={f!=='All'?f:undefined}
              style={{opacity:filter===f?1:0.55, borderColor:filter===f?'var(--ink-2)':undefined}}>
              {f==='All'?'All':CSV_LABELS[f]}
            </button>
          ))}
        </div>

        {!initialCompany && (
          <select value={company} onChange={e=>setCompany(e.target.value)}
            style={{padding:'6px 10px',border:'1px solid var(--line)',borderRadius:999,background:'var(--canvas)',fontSize:12,color:'var(--ink-2)',fontFamily:'var(--font-sans)'}}>
            <option value="All">All companies</option>
            {(window.COMPANIES || []).map(c=><option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        )}

        <select value={year} onChange={e=>setYear(e.target.value)}
          style={{padding:'6px 10px',border:'1px solid var(--line)',borderRadius:999,background:'var(--canvas)',fontSize:12,color:'var(--ink-2)',fontFamily:'var(--font-sans)'}}>
          <option value="All">All years</option>
          {yearOpts.map(y => <option key={y} value={y}>{y}</option>)}
        </select>

        <select value={pillar} onChange={e=>setPillar(e.target.value)}
          style={{padding:'6px 10px',border:'1px solid var(--line)',borderRadius:999,background:'var(--canvas)',fontSize:12,color:'var(--ink-2)',fontFamily:'var(--font-sans)'}}>
          <option value="All">All pillars</option>
          {pillarOpts.map(p => <option key={p} value={p}>{PILLAR_LABEL[p] || p}</option>)}
        </select>

        <select value={itype} onChange={e=>setItype(e.target.value)}
          style={{padding:'6px 10px',border:'1px solid var(--line)',borderRadius:999,background:'var(--canvas)',fontSize:12,color:'var(--ink-2)',fontFamily:'var(--font-sans)'}}>
          <option value="All">All initiative types</option>
          {itypeOpts.map(it => <option key={it} value={it}>{INITIATIVE_LABEL[it] || it}</option>)}
        </select>

        {anyFilterActive && (
          <button className="btn btn-text" onClick={()=>{setFilter('All');if(!initialCompany)setCompany('All');setYear('All');setPillar('All');setItype('All');setQ('');}}
            style={{fontSize:12,color:'var(--ink-3)'}}>Clear</button>
        )}
      </div>

      <div style={{border:'1px solid var(--line)',borderRadius:12,background:'var(--canvas)',overflow:'hidden'}}>
        <div style={{display:'grid',gridTemplateColumns:'150px 1fr 170px 160px 110px 40px',padding:'14px 20px',borderBottom:'1px solid var(--line)',background:'var(--canvas-2)'}}>
          {[
            {k:'co',    label:'Company'},
            {k:null,    label:'Passage'},
            {k:'theme', label:'Pillar'},
            {k:null,    label:'Classification'},
            {k:'conf',  label:'Confidence'},
            {k:null,    label:''},
          ].map((h,i)=>(
            <div key={i} className="eyebrow" style={{fontSize:11,cursor:h.k?'pointer':'default',display:'flex',alignItems:'center',gap:4}}
              onClick={()=>h.k && setSort(s=>({k:h.k, dir: s.k===h.k && s.dir==='desc' ? 'asc':'desc'}))}>
              {h.label}
              {h.k && sort.k===h.k && <Icon name="chevron-down" size={10} style={{transform: sort.dir==='asc'?'rotate(180deg)':'none'}}/>}
            </div>
          ))}
        </div>
        {displayRows.map((r,i) => {
          const raw = r._raw || {};
          const it = INITIATIVE_LABEL[raw.initiative_type] || '';
          const linkage = raw.linkage_strength && raw.linkage_strength !== 'none' ? raw.linkage_strength : null;
          return (
            <div key={r.id} className="explore-row" style={{
              display:'grid',gridTemplateColumns:'150px 1fr 170px 160px 110px 40px',
              padding:'18px 20px',alignItems:'center',
              borderBottom:i<displayRows.length-1?'1px solid var(--line)':'none',
            }} onClick={()=>openDisclosure(r.id)}>
              <div style={{paddingRight:12}}>
                <div style={{fontSize:14,fontWeight:600,color:'var(--ink)'}}>{companyName(r.co)}</div>
                <div className="tabular" style={{fontSize:12,color:'var(--ink-3)',marginTop:2}}>{r.year || ''}</div>
              </div>
              <div style={{paddingRight:16}}>
                <div style={{fontSize:14,color:'var(--ink)',lineHeight:'20px'}}>{r.title}</div>
                <div className="explore-meta">
                  {it && <span>{it}</span>}
                  {it && linkage && <span className="dot"/>}
                  {linkage && <span>linkage: {linkage}</span>}
                  {(it || linkage) && r.src && <span className="dot"/>}
                  <span>{r.src}</span>
                </div>
              </div>
              <div style={{fontSize:12,color:'var(--ink-2)'}}>{r.theme}</div>
              <div><Chip klass={r.c} compact>{CSV_LABELS[r.c]}</Chip></div>
              <div style={{display:'flex',alignItems:'center',gap:8}}>
                <div style={{flex:1,height:4,background:'var(--line)',borderRadius:2,overflow:'hidden'}}>
                  <div style={{width:`${r.conf}%`,height:'100%',background:'var(--moss)'}}/>
                </div>
                <div className="tabular" style={{fontSize:12,color:'var(--ink-2)',width:22,textAlign:'right'}}>{r.conf}</div>
              </div>
              <div style={{color:'var(--ink-3)',display:'flex',justifyContent:'flex-end'}}><Icon name="arrow-right" size={14}/></div>
            </div>
          );
        })}
        {displayRows.length === 0 && (
          <div style={{padding:'48px 24px',textAlign:'center',color:'var(--ink-3)',fontSize:13}}>No passages match these filters.</div>
        )}
      </div>

      {embedded && limit && total > cap && !showAll && (
        <div style={{marginTop:16,display:'flex',justifyContent:'center'}}>
          <button className="btn btn-text" style={{fontSize:13}} onClick={()=>setShowAll(true)}>
            Show all {total.toLocaleString()} matching passages <Icon name="arrow-right" size={12} style={{marginLeft:2}} className="arrow"/>
          </button>
        </div>
      )}
      {!embedded && total > 200 && (
        <div style={{marginTop:16,fontSize:12,color:'var(--ink-3)',textAlign:'right'}} className="tabular">
          Showing {displayRows.length.toLocaleString()} of {total.toLocaleString()}
        </div>
      )}
    </div>
  );

  if (embedded) return content;
  return <section className="section">{content}</section>;
};
window.Explore = Explore;