// js/components/widgets/AniversariantesCard.jsx
// [Wave 12B v223.35 20260520] Extraído de DashboardV2.jsx L356-389 + L662-694 (modal lista)
// Card "🎂 Aniversariantes próximos 7 dias" + modal Ver todos
//
// Props:
//   user, aniversariantes (array), clients (array — pra warning admin)
//
// Deps runtime: window.Modal
(function(){
  'use strict';
  const {useState} = React;

  function AniversariantesCard(props){
    const { user, aniversariantes=[], clients=[] } = props;
    const Modal = window.Modal;
    const [showAllBirthdays, setShowAllBirthdays] = useState(false);

    return (
      <>
        <div className="card" style={{padding:14}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
            <div style={{fontSize:11,color:'#9CA3AF',fontWeight:700,textTransform:'uppercase',letterSpacing:1.2}}>
              🎂 Aniversariantes (próximos 7 dias)
              {user.role==='vendedor' && <span style={{fontSize:9,color:'#7C3AED',marginLeft:6}}>seus clientes</span>}
            </div>
            {aniversariantes.length>3 && (
              <button onClick={()=>setShowAllBirthdays(true)} style={{fontSize:10,color:'#2563EB',background:'transparent',border:'none',cursor:'pointer',fontWeight:600}}>Ver todos ({aniversariantes.length})</button>
            )}
          </div>
          {aniversariantes.length===0 ? (
            <div style={{fontSize:12,color:'#9CA3AF',fontStyle:'italic',padding:'8px 0'}}>
              Nenhum cliente faz aniversário esta semana.
              {user.role==='admin' && (clients||[]).filter(c=>c.birth_date).length<(clients||[]).length/2 && (
                <div style={{fontSize:10,color:'#EA580C',marginTop:6}}>⚠️ {(clients||[]).filter(c=>c.birth_date).length}/{(clients||[]).length} clientes têm aniversário cadastrado. Complete pra ver oportunidades.</div>
              )}
            </div>
          ):(
            <div style={{display:'flex',flexDirection:'column',gap:6}}>
              {aniversariantes.slice(0,3).map(c=>(
                <div key={c.id} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'7px 10px',background:c.daysUntil===0?'#FEF3C7':'#F9FAFB',borderRadius:6,border:c.daysUntil===0?'1px solid #C8A95155':'1px solid transparent'}}>
                  <div>
                    <div style={{fontSize:13,fontWeight:600,color:'#1B2A4A'}}>{c.daysUntil===0?'🎉 ':''}{c.name}</div>
                    <div style={{fontSize:10,color:'#9CA3AF'}}>{c.daysUntil===0?'HOJE!':c.daysUntil===1?'Amanhã':`em ${c.daysUntil} dias`} · {c.birthdayLabel}</div>
                  </div>
                  {c.phone && (
                    <a href={`https://wa.me/55${String(c.phone).replace(/\D/g,'')}?text=${encodeURIComponent('Parabéns, '+c.name.split(' ')[0]+'! 🎂 A equipe ZAYNEX te deseja muita felicidade. Como presente especial, temos um cupom só pra você!')}`} target="_blank" rel="noopener" style={{fontSize:11,padding:'4px 10px',background:'#25D366',color:'#FFFFFF',borderRadius:5,textDecoration:'none',fontWeight:600}}>📲 Parabéns</a>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>

        {/* MODAL Aniversariantes lista completa */}
        {showAllBirthdays && Modal && (
          <Modal title={`🎂 Aniversariantes (${aniversariantes.length})`} onClose={()=>setShowAllBirthdays(false)}>
            <div style={{maxHeight:'60vh',overflowY:'auto'}}>
              <table style={{width:'100%',fontSize:12,borderCollapse:'collapse'}}>
                <thead style={{background:'#F9FAFB',position:'sticky',top:0}}>
                  <tr><th style={{textAlign:'left',padding:8}}>Cliente</th><th style={{textAlign:'center',padding:8}}>Aniversário</th><th style={{textAlign:'center',padding:8}}>Em</th><th style={{textAlign:'right',padding:8}}>Ação</th></tr>
                </thead>
                <tbody>
                  {aniversariantes.map(c=>(
                    <tr key={c.id} style={{borderBottom:'1px solid #F3F4F6',background:c.daysUntil===0?'#FEF3C7':'transparent'}}>
                      <td style={{padding:8,color:'#1B2A4A',fontWeight:500}}>{c.daysUntil===0?'🎉 ':''}{c.name}</td>
                      <td style={{padding:8,textAlign:'center',color:'#6B7280'}}>{c.birthdayLabel}</td>
                      <td style={{padding:8,textAlign:'center',color:c.daysUntil===0?'#16A34A':'#374151',fontWeight:c.daysUntil===0?700:400}}>{c.daysUntil===0?'HOJE':c.daysUntil===1?'amanhã':c.daysUntil+' dias'}</td>
                      <td style={{padding:8,textAlign:'right'}}>
                        {c.phone ? (
                          <a href={`https://wa.me/55${String(c.phone).replace(/\D/g,'')}?text=${encodeURIComponent('Parabéns, '+c.name.split(' ')[0]+'! 🎂 A equipe ZAYNEX te deseja muita felicidade.')}`} target="_blank" rel="noopener" style={{fontSize:11,padding:'4px 10px',background:'#25D366',color:'#FFFFFF',borderRadius:5,textDecoration:'none',fontWeight:600}}>📲 WhatsApp</a>
                        ):(
                          <span style={{fontSize:10,color:'#9CA3AF'}}>sem telefone</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Modal>
        )}
      </>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.AniversariantesCard = AniversariantesCard;
  window.AniversariantesCard = AniversariantesCard;
})();