// js/components/common/RankCard.jsx
// Tabela de ranking com posições coloridas — puro display.
// Movido de index.html em Fase 5 do refactor (2026-04-29): L7427-L7468
(function() {
  'use strict';

  // CÓPIA EXATA do index.html L7427-L7468
  function RankCard({title,color,icon,rows,cols}){
    return(
      <div className="card" style={{padding:0,display:'flex',flexDirection:'column'}}>
        <div style={{padding:'14px 16px',borderBottom:'1px solid #E4E7EC',display:'flex',alignItems:'center',gap:8}}>
          <span style={{fontSize:16}}>{icon}</span>
          <span style={{fontSize:13,fontWeight:600,color:'#374151'}}>{title}</span>
          <span style={{marginLeft:'auto',fontSize:11,color:'#9CA3AF'}}>{rows.length} itens</span>
        </div>
        <div style={{overflowY:'auto',maxHeight:420}}>
          <table style={{width:'100%'}}>
            <thead>
              <tr>{cols.map(c=><th key={c.k} style={{padding:'8px 14px',fontSize:10,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:.5,borderBottom:'1px solid #E4E7EC',textAlign:c.right?'right':'left'}}>{c.label}</th>)}</tr>
            </thead>
            <tbody>
              {rows.map((r,i)=>(
                <tr key={i} style={{borderBottom:'1px solid #F3F4F6'}}>
                  <td style={{padding:'9px 14px',width:28}}>
                    <span style={{
                      display:'inline-flex',alignItems:'center',justifyContent:'center',
                      width:22,height:22,borderRadius:4,fontSize:11,fontWeight:700,
                      background:i===0?'#2563EB':i===1?'#888':i===2?'#7a5c2e':'#9CA3AF',
                      color:i<3?'#0A0A0A':'#555'
                    }}>{i+1}</span>
                  </td>
                  {cols.slice(1).map(c=>(
                    <td key={c.k} style={{padding:'9px 14px',fontSize:13,textAlign:c.right?'right':'left',color:c.gold?'#2563EB':c.orange?'#EA580C':'#111827',fontWeight:c.bold?600:400}}>
                      {r[c.k]}
                    </td>
                  ))}
                </tr>
              ))}
              {rows.length===0&&<tr><td colSpan={cols.length} style={{padding:'20px',textAlign:'center',color:'#6B7280',fontSize:13}}>Nenhum dado neste período</td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.RankCard = RankCard;
  window.RankCard = RankCard;

  window.ZNX.refactor_phase_5_loaded = window.ZNX.refactor_phase_5_loaded || {};
  window.ZNX.refactor_phase_5_loaded.RankCard = true;

})();