// Interactive practice matrix — capability rows × ladder columns.
// Click any cell to inspect its practice drill.

function PracticeMatrix() {
  const caps = window.CAPABILITIES;
  const rungs = window.RUNGS;
  const matrix = window.MATRIX;

  const [hover, setHover] = React.useState({ cap: 'value', rung: 'mimic' });
  const [filterCap, setFilterCap] = React.useState('all');
  const [filterRung, setFilterRung] = React.useState('all');
  const [pinned, setPinned] = React.useState(false);

  const activeCap = caps.find(c => c.id === hover.cap);
  const activeRung = rungs.find(r => r.id === hover.rung);
  const body = matrix[hover.cap]?.[hover.rung] || 'Embedded in scoring lens — evidence attached.';

  const rowDim = (capId) => filterCap !== 'all' && capId !== filterCap;
  const colDim = (rungId) => filterRung !== 'all' && rungId !== filterRung;

  return (
    <section className="section matrix-section" id="matrix">
      <div className="wrap--wide">
        <div className="section-head" style={{maxWidth:780}}>
          <p className="eyebrow-strong">06 · PRACTICE MATRIX</p>
          <h2 className="headline-lg">
            Advisory readiness comes from repeated client drills and real cases.
          </h2>
          <p className="lede" style={{marginTop:20}}>
            Each ladder rung adds real-world pressure and feedback. Hover any cell to see the practice drill it contains. Filter by capability or by rung to zoom in.
          </p>
        </div>

        <div className="matrix-layout">
          <div className="matrix-grid-wrap">
            {/* Filters */}
            <div className="matrix-filters">
              <span className="matrix-filter-label">Capability</span>
              <button
                className={'matrix-chip' + (filterCap === 'all' ? ' matrix-chip--active' : '')}
                onClick={() => setFilterCap('all')}>All</button>
              {caps.map(c => (
                <button key={c.id}
                  className={'matrix-chip' + (filterCap === c.id ? ' matrix-chip--active' : '')}
                  onClick={() => { setFilterCap(filterCap === c.id ? 'all' : c.id); setHover(h => ({...h, cap: c.id})); }}
                  style={filterCap === c.id ? { background: c.color, color: '#fff' } : {}}>
                  {c.short}
                </button>
              ))}
            </div>
            <div className="matrix-filters">
              <span className="matrix-filter-label">Rung</span>
              <button
                className={'matrix-chip' + (filterRung === 'all' ? ' matrix-chip--active' : '')}
                onClick={() => setFilterRung('all')}>All</button>
              {rungs.map(r => (
                <button key={r.id}
                  className={'matrix-chip' + (filterRung === r.id ? ' matrix-chip--active' : '')}
                  onClick={() => { setFilterRung(filterRung === r.id ? 'all' : r.id); setHover(h => ({...h, rung: r.id})); }}>
                  {r.label}
                </button>
              ))}
            </div>

            {/* Grid */}
            <div className="matrix-grid" style={{marginTop:20}}>
              <div></div>
              {rungs.map(r => (
                <div key={r.id} className="matrix-col-head" style={colDim(r.id) ? {opacity:0.35} : null}>
                  <div>
                    <div style={{fontSize:9, fontWeight:600, color:'var(--ambiz-text-dim)', opacity:0.7, marginBottom:2}}>{r.sub}</div>
                    <div>{r.label}</div>
                  </div>
                </div>
              ))}

              {caps.map(cap => (
                <React.Fragment key={cap.id}>
                  <div className="matrix-row-label" style={rowDim(cap.id) ? {opacity:0.35} : null}>
                    <span style={{display:'inline-block', width:6, height:24, borderRadius:3, background:cap.color, marginRight:10}}></span>
                    <span>{cap.short}</span>
                  </div>
                  {rungs.map(rung => {
                    const filled = !!matrix[cap.id]?.[rung.id];
                    const isActive = hover.cap === cap.id && hover.rung === rung.id;
                    const dim = rowDim(cap.id) || colDim(rung.id);
                    return (
                      <div
                        key={rung.id}
                        className={
                          'matrix-cell ' +
                          (filled ? 'matrix-cell--filled' : 'matrix-cell--empty') +
                          (isActive ? ' matrix-cell--active' : '') +
                          (dim ? ' matrix-cell--dim' : '')
                        }
                        onMouseEnter={() => !pinned && setHover({ cap: cap.id, rung: rung.id })}
                        onClick={() => { setHover({ cap: cap.id, rung: rung.id }); setPinned(true); }}
                        title={`${cap.short} × ${rung.label}`}
                      >
                        {filled ? '●' : ''}
                      </div>
                    );
                  })}
                </React.Fragment>
              ))}
            </div>

            {/* Legend */}
            <div style={{display:'flex', gap:24, marginTop:24, fontSize:12, color:'var(--ambiz-text-dim)', alignItems:'center', flexWrap:'wrap'}}>
              <div style={{display:'flex', alignItems:'center', gap:8}}>
                <span style={{width:14, height:14, borderRadius:4, background:'linear-gradient(135deg, rgba(13,144,58,0.12), rgba(26,84,159,0.12))', border:'1px solid rgba(13,144,58,0.20)'}}></span>
                Active drill
              </div>
              <div style={{display:'flex', alignItems:'center', gap:8}}>
                <span style={{width:14, height:14, borderRadius:4, background:'rgba(15,23,42,0.02)', border:'1px solid rgba(15,23,42,0.04)'}}></span>
                Embedded in scoring lens
              </div>
              <div style={{marginLeft:'auto', fontSize:11, letterSpacing:'0.04em'}}>
                {pinned ? 'Cell pinned — click another to swap' : 'Hover any cell'}
                {pinned && <button onClick={() => setPinned(false)} style={{marginLeft:10, padding:'4px 10px', fontSize:11, background:'transparent', border:'1px solid rgba(15,23,42,0.12)', borderRadius:999, cursor:'pointer'}}>Unpin</button>}
              </div>
            </div>
          </div>

          {/* Side detail */}
          <div className="matrix-detail">
            <div className="matrix-detail-eyebrow" style={{background:activeCap.color+'15', color:activeCap.color}}>
              {activeRung.sub}
            </div>
            <div className="matrix-detail-x">
              <span style={{color:activeCap.color, fontWeight:700}}>{activeCap.short}</span>
              <span style={{margin:'0 8px', opacity:0.4}}>×</span>
              <span style={{fontWeight:700}}>{activeRung.label}</span>
            </div>
            <div className="matrix-detail-title">{activeCap.name}</div>
            <div className="matrix-detail-sub">
              What learners do at the <strong>{activeRung.label}</strong> rung
            </div>
            <div className="matrix-detail-body">{body || 'Embedded in scoring lens — evidence attached.'}</div>
            <div className="matrix-detail-hint">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="16" x2="12" y2="12"></line>
                <line x1="12" y1="8" x2="12.01" y2="8"></line>
              </svg>
              Each drill carries its own rubric — same anchors across teams and regions.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.PracticeMatrix = PracticeMatrix;