// js/components/widgets/vendedor-activity-card/ActivityTable.jsx
// [Wave 39 v224.20 NUCLEAR EXTRACT 2026-05-24] Tabela 6 cols + linha expansão template breakdown
// Extract LITERAL VendedorActivityCard L171-223
//
// Props:
//   - stats (array) — vendedoras com {name, disparos, conversoes, receitaAtribuida, templates, topTemplate}
//   - expandedVendedora (string|null) — UI state controlado pelo main
//   - setExpandedVendedora (fn)
//   - TEMPLATE_LABELS (obj) — vem da calcs
//
// Deps lazy: window.fmt
(function(){
  'use strict';
  function ActivityTable(props){
    const fmt = window.fmt;
    if(typeof fmt !== 'function'){
      console.error('[ActivityTable] fmt global ausente');
      return null;
    }
    const { stats, expandedVendedora, setExpandedVendedora, TEMPLATE_LABELS } = props;
    return (
      <table style={{fontSize:12}}>
        <thead><tr>
          <th style={{textAlign:'left'}}>Vendedora</th>
          <th style={{textAlign:'right'}}>Disparos</th>
          <th style={{textAlign:'right'}}>Conversões</th>
          <th style={{textAlign:'right'}}>Taxa</th>
          <th style={{textAlign:'right'}}>Receita atribuída</th>
          <th style={{textAlign:'left'}}>Top template</th>
        </tr></thead>
        <tbody>
          {stats.map(function(v){
            const taxa = v.disparos > 0 ? (v.conversoes / v.disparos * 100) : 0;
            const isZero = v.disparos === 0;
            const isHot = v.disparos >= 15;
            const expanded = expandedVendedora === v.name;
            return (
              <React.Fragment key={v.name}>
                <tr style={{cursor: v.disparos > 0 ? 'pointer' : 'default', background: expanded ? '#FFFBEB' : 'transparent'}}
                    onClick={function(){ v.disparos > 0 && setExpandedVendedora(expanded ? null : v.name); }}>
                  <td style={{fontWeight:600, color: isZero ? '#DC2626' : '#1B2A4A'}}>
                    {isZero ? '⚠️ ' : ''}{v.name}
                    {v.disparos > 0 && <span style={{fontSize:9, color:'#9CA3AF', marginLeft:6}}>{expanded ? '▼' : '▶'}</span>}
                  </td>
                  <td style={{textAlign:'right', fontWeight:700, color: isHot ? '#16A34A' : isZero ? '#DC2626' : '#1B2A4A'}}>
                    {v.disparos}{isHot && ' 🔥'}{isZero && ' ZERO'}
                  </td>
                  <td style={{textAlign:'right', color:'#16A34A', fontWeight:600}}>{v.conversoes || '—'}</td>
                  <td style={{textAlign:'right', fontWeight:700, color: taxa >= 30 ? '#16A34A' : taxa >= 15 ? '#EA580C' : '#9CA3AF'}}>
                    {v.disparos > 0 ? taxa.toFixed(0) + '%' : '—'}
                  </td>
                  <td style={{textAlign:'right', color:'#92700A', fontWeight:600}}>{v.receitaAtribuida > 0 ? fmt(v.receitaAtribuida) : '—'}</td>
                  <td style={{color:'#6B7280'}}>{v.topTemplate ? (TEMPLATE_LABELS[v.topTemplate] || v.topTemplate) : '—'}</td>
                </tr>
                {expanded && (
                  <tr><td colSpan={6} style={{background:'#FFFBEB', padding:'10px 14px', borderTop:'none'}}>
                    <div style={{fontSize:11, color:'#92700A', fontWeight:700, marginBottom:8, textTransform:'uppercase', letterSpacing:1}}>
                      Breakdown por template — {v.name}
                    </div>
                    <div style={{display:'flex', gap:14, flexWrap:'wrap'}}>
                      {Object.entries(v.templates).sort(function(a, b){return b[1] - a[1];}).map(function(arr){
                        const tpl = arr[0], count = arr[1];
                        return (
                          <div key={tpl} style={{padding:'4px 10px', background:'#FFFFFF', border:'1px solid #C8A95133', borderRadius:6, fontSize:11}}>
                            <strong>{TEMPLATE_LABELS[tpl] || tpl}</strong>: {count}
                          </div>
                        );
                      })}
                    </div>
                  </td></tr>
                )}
              </React.Fragment>
            );
          })}
        </tbody>
      </table>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets['vendedor-activity-card'] = window.ZNX.widgets['vendedor-activity-card'] || {};
  window.ZNX.widgets['vendedor-activity-card'].ActivityTable = ActivityTable;
  // [Wave 39 marker v224.20] confirma ActivityTable executado
  window.ActivityTable_v224_20_wave39 = true;
})();