// js/components/widgets/users/UserCard.jsx
// [Wave v223.27 2026-05-19] Card individual usuário extraído de UsersPanel.
// [Wave 19.5 v224.1 2026-05-22] REDESIGN COMPLETO layout 2026 SaaS-style.
//   - Profile card · avatar 52px · border-left semantic 4px
//   - Status badge dedicado · action menu ⋯ dropdown (substitui 5 botões inline)
//   - KPIs grid 4-col · Sparkline 7d com total · Sparkline 6m metas
//   - Design tokens semantic (zero hardcoded magic colors)
(function(){
  'use strict';
  const {useState} = React;

  function UserCard({u, s, user, onMeta, onEdit, onReset, onToggleFerias, onNotes, fmtHora, fmtHoras, roleColor, fmt, formatLastSeen}){
    const [menuOpen, setMenuOpen] = useState(false);
    const isOnline = s.status?.online;
    const inactive = u.active===false;
    const isSelf = u.auth_user_id===user.auth_user_id;
    const onFerias = u.is_on_duty === false;
    const diasSemLogin = s.diasSemLogin != null ? s.diasSemLogin : Infinity;
    const alertaCritico = !onFerias && diasSemLogin >= 3 && diasSemLogin !== Infinity;
    const initial = (u.name||u.username||'?').charAt(0).toUpperCase();

    // Border-left color semantic (regra: 1 source of truth)
    let borderColor = '#9CA3AF'; // offline default
    let statusBadge = null;
    if (isSelf) { borderColor = '#7C3AED'; }
    else if (onFerias) { borderColor = '#D97706'; statusBadge = {bg:'#FEF3C7',color:'#92400E',text:'🏖️ Em férias/folga'}; }
    else if (alertaCritico) { borderColor = '#DC2626'; statusBadge = {bg:'#FEE2E2',color:'#991B1B',text:'🚨 '+diasSemLogin+'d sem login'}; }
    else if (isOnline) { borderColor = '#16A34A'; statusBadge = {bg:'#F0FDF4',color:'#15803D',text:'✓ Online · '+fmtHoras(s.horasHoje||0)+' hoje'}; }
    else if (s.firstLoginToday) { borderColor = '#2563EB'; statusBadge = {bg:'#EFF6FF',color:'#1D4ED8',text:'⏱ Trabalhou '+fmtHoras(s.horasHoje||0)+' hoje'}; }
    else { statusBadge = {bg:'#F9FAFB',color:'#6B7280',text:'⚪ '+(diasSemLogin===Infinity?'Sem login':diasSemLogin+'d sem login')}; }

    return (
      <div style={{
        background:'#FFFFFF',
        border:'1px solid #E5E7EB',
        borderLeft:'4px solid '+borderColor,
        borderRadius:10,
        padding:'16px 18px',
        display:'flex',
        flexDirection:'column',
        gap:14,
        opacity:inactive?0.6:1,
        transition:'all 0.2s',
        position:'relative',
        boxShadow:'0 1px 3px rgba(0,0,0,0.04)'
      }}>
        {/* ROW 1: Avatar grande + Nome + Action menu ⋯ */}
        <div style={{display:'flex',alignItems:'flex-start',gap:14}}>
          <div style={{position:'relative',flexShrink:0}}>
            <div style={{
              width:52,height:52,borderRadius:'50%',
              background:roleColor(u.role)+'15',
              color:roleColor(u.role),
              display:'flex',alignItems:'center',justifyContent:'center',
              fontWeight:700,fontSize:22,
              border:'2px solid '+roleColor(u.role)+'30'
            }}>{initial}</div>
            {isOnline && !onFerias && (
              <div style={{
                position:'absolute',bottom:0,right:0,
                width:14,height:14,borderRadius:'50%',
                background:'#16A34A',border:'3px solid #FFFFFF'
              }}/>
            )}
          </div>

          <div style={{flex:1,minWidth:0}}>
            <div style={{fontSize:16,fontWeight:700,color:'#111827',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',lineHeight:1.2}}>{u.name||u.username}</div>
            <div style={{display:'flex',alignItems:'center',gap:6,marginTop:3,flexWrap:'wrap'}}>
              <span style={{
                fontSize:10,fontWeight:600,
                color:roleColor(u.role),
                background:roleColor(u.role)+'12',
                padding:'2px 8px',borderRadius:4,
                textTransform:'uppercase',letterSpacing:0.5
              }}>{u.role}</span>
              {isSelf && <span style={{fontSize:10,color:'#9CA3AF'}}>· você</span>}
              {inactive && <span style={{fontSize:10,color:'#DC2626',fontWeight:600}}>· 🚫 INATIVO</span>}
            </div>
          </div>

          {/* Action menu dropdown ⋯ */}
          <div style={{position:'relative'}}>
            <button onClick={()=>setMenuOpen(v=>!v)} style={{
              background:'transparent',border:'none',cursor:'pointer',
              padding:'6px 8px',borderRadius:6,color:'#6B7280',
              fontSize:18,lineHeight:1
            }} title="Ações">⋯</button>
            {menuOpen && (
              <>
                <div onClick={()=>setMenuOpen(false)} style={{position:'fixed',inset:0,zIndex:9}}/>
                <div style={{
                  position:'absolute',right:0,top:'100%',marginTop:4,
                  background:'#FFFFFF',border:'1px solid #E5E7EB',borderRadius:8,
                  boxShadow:'0 4px 12px rgba(0,0,0,0.1)',
                  minWidth:170,zIndex:10,
                  padding:4
                }}>
                  {u.role==='vendedor' && (
                    <button onClick={()=>{onMeta(u);setMenuOpen(false);}} style={menuItemStyle('#2563EB')}>🎯 Definir meta</button>
                  )}
                  <button onClick={()=>{onEdit(u);setMenuOpen(false);}} style={menuItemStyle('#7C3AED')}>✏️ Editar dados</button>
                  {onToggleFerias && (
                    <button onClick={()=>{onToggleFerias(u);setMenuOpen(false);}} style={menuItemStyle('#D97706')}>{onFerias?'✅ Voltou da férias':'🏖️ Marcar férias'}</button>
                  )}
                  {onNotes && (
                    <button onClick={()=>{onNotes(u);setMenuOpen(false);}} style={menuItemStyle('#1D4ED8')}>📝 Notas {u.admin_notes && '●'}</button>
                  )}
                  <div style={{height:1,background:'#E5E7EB',margin:'4px 0'}}/>
                  <button onClick={()=>{onReset(u);setMenuOpen(false);}} disabled={isSelf} style={{...menuItemStyle('#DC2626'),opacity:isSelf?0.4:1,cursor:isSelf?'not-allowed':'pointer'}}>🔑 Resetar senha</button>
                </div>
              </>
            )}
          </div>
        </div>

        {/* ROW 2: Status badge dedicado */}
        {statusBadge && (
          <div style={{
            padding:'8px 12px',
            background:statusBadge.bg,
            color:statusBadge.color,
            borderRadius:6,
            fontSize:12,fontWeight:600,
            textAlign:'center'
          }}>
            {statusBadge.text}
            {(onFerias||alertaCritico) && s.status?.lastSeen && (
              <div style={{fontSize:10,fontWeight:400,marginTop:2,opacity:0.8}}>último: {formatLastSeen(s.status.lastSeen)}</div>
            )}
          </div>
        )}

        {/* ROW 3: KPIs Hero vendedor */}
        {u.role==='vendedor' && (
          <>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
              <div>
                <div style={{fontSize:22,fontWeight:800,color:'#1F2937',lineHeight:1}}>{typeof fmt==='function'?fmt(s.totalVendasMes||0):'R$ '+(s.totalVendasMes||0).toFixed(2)}</div>
                <div style={{fontSize:10,color:'#6B7280',marginTop:2}}>vendas do mês</div>
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{fontSize:18,fontWeight:700,color:'#374151',lineHeight:1}}>{s.vendasMes||0}</div>
                <div style={{fontSize:10,color:'#6B7280',marginTop:2}}>pedidos</div>
              </div>
            </div>

            {/* Barra meta + comissão */}
            {s.metaValor>0 ? (
              <div>
                <div style={{height:6,background:'#F3F4F6',borderRadius:3,overflow:'hidden'}}>
                  <div style={{
                    width:Math.min(100,s.pctMeta)+'%',height:'100%',
                    background:s.pctMeta>=100?'#16A34A':s.pctMeta>=95?'#22C55E':s.pctMeta>=80?'#2563EB':s.pctMeta>=60?'#EAB308':s.pctMeta>=40?'#EA580C':s.pctMeta>=20?'#DC2626':'#991B1B',
                    transition:'width 0.4s'
                  }}/>
                </div>
                <div style={{display:'flex',justifyContent:'space-between',marginTop:6,fontSize:11}}>
                  <span style={{color:'#6B7280'}}>{s.pctMeta.toFixed(0)}% de {typeof fmt==='function'?fmt(s.metaValor):'R$ '+s.metaValor}</span>
                  <span style={{fontWeight:700,color:s.atingiuMeta?'#16A34A':'#9CA3AF'}}>{s.atingiuMeta?'✅ 1%':'0.5%'} · {typeof fmt==='function'?fmt(s.comissaoBrl||0):'R$ '+(s.comissaoBrl||0).toFixed(2)}</span>
                </div>
              </div>
            ) : (
              <div style={{fontSize:11,color:'#9CA3AF',fontStyle:'italic',textAlign:'center',padding:'4px 0'}}>Sem meta definida — use ⋯ → 🎯 Definir meta</div>
            )}

            {/* KPIs grid 4 colunas */}
            {(s.kpis?.avgTicket > 0) && (
              <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:6,padding:'10px 0',borderTop:'1px solid #F3F4F6',borderBottom:'1px solid #F3F4F6'}}>
                <KpiMini label="Ticket" value={typeof fmt==='function'?fmt(s.kpis.avgTicket):'R$'+s.kpis.avgTicket.toFixed(0)} title="Ticket médio do mês"/>
                <KpiMini label="Vendas/dia" value={s.kpis.vendasPorDia.toFixed(1)} title="Vendas por dia útil"/>
                <KpiMini label="NF rate" value={s.kpis.nfRate.toFixed(0)+'%'} title="% vendas com NF"/>
                <KpiMini label="Clientes" value={(s.cargaClientes?.ativos30d||0)+'/'+(s.cargaClientes?.total||0)} title="Ativos 30d / Total"/>
              </div>
            )}
          </>
        )}

        {/* ROW 4: Sparklines 7d + 6m metas */}
        <div style={{display:'flex',gap:14,alignItems:'center',fontSize:10,color:'#6B7280'}}>
          <Sparkline7d buckets={s.dayBuckets||[]} fmtHoras={fmtHoras}/>
          {u.role==='vendedor' && Array.isArray(s.metaSparkline6m) && s.metaSparkline6m.length>0 && (
            <SparklineMeta6m data={s.metaSparkline6m}/>
          )}
        </div>
      </div>
    );
  }

  // Helpers internos
  function menuItemStyle(color){
    return {
      display:'block',width:'100%',padding:'8px 12px',
      background:'transparent',border:'none',color:color,
      fontSize:12,fontWeight:500,textAlign:'left',
      cursor:'pointer',borderRadius:4
    };
  }

  function KpiMini({label, value, title}){
    return (
      <div title={title} style={{textAlign:'center',padding:'2px 0'}}>
        <div style={{fontSize:13,fontWeight:700,color:'#1F2937',lineHeight:1}}>{value}</div>
        <div style={{fontSize:9,color:'#6B7280',marginTop:2,textTransform:'uppercase',letterSpacing:0.3}}>{label}</div>
      </div>
    );
  }

  function Sparkline7d({buckets, fmtHoras}){
    const maxH = Math.max(...(buckets||[1]),1);
    const total = (buckets||[]).reduce((a,h)=>a+h,0);
    return (
      <div style={{flex:1,display:'flex',gap:6,alignItems:'center'}}>
        <div style={{flex:1,display:'flex',gap:2,alignItems:'flex-end',height:24}}>
          {(buckets||[]).map((h,i)=>{
            const heightPct = maxH>0 ? Math.max(8,(h/maxH)*100) : 8;
            const isToday = i===6;
            return (
              <div key={i} title={fmtHoras(h)} style={{
                flex:1,height:heightPct+'%',
                background:isToday?'#2563EB':h>0?'#9CA3AF':'#E5E7EB',
                borderRadius:2,minHeight:2,transition:'all 0.3s'
              }}/>
            );
          })}
        </div>
        <div style={{fontSize:9,color:'#6B7280',whiteSpace:'nowrap',fontWeight:600}}>7d: {fmtHoras(total)}</div>
      </div>
    );
  }

  function SparklineMeta6m({data}){
    return (
      <div style={{display:'flex',gap:6,alignItems:'center'}}>
        <span style={{fontSize:9,color:'#6B7280',whiteSpace:'nowrap'}}>6m metas:</span>
        <div style={{display:'flex',gap:2}}>
          {data.map((m,i)=>(
            <div key={i} title={m.month+': '+m.pctMeta.toFixed(0)+'%'} style={{
              width:8,height:14,borderRadius:2,
              background: m.atingiu?'#16A34A':m.pctMeta>=80?'#2563EB':m.pctMeta>=40?'#EAB308':'#DC2626'
            }}/>
          ))}
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.users = window.ZNX.widgets.users || {};
  window.ZNX.widgets.users.UserCard = UserCard;
})();