// js/components/widgets/campaign-modal/CampaignStepPickTemplate.jsx
// [Wave 40 v224.21 NUCLEAR EXTRACT 2026-05-24] Step 1: pick template + status cards + custom textarea
// Extract LITERAL CampaignModal L179-274
//
// Props:
//   - filteredClients, selectedClients (arrays)
//   - availableTemplates (array)
//   - selectedTemplateId (string|null), selectedTemplate (obj|null)
//   - customText (string), setCustomText (fn)
//   - onPickTemplate(t) — pickTemplate handler
//   - onStart — startQueue handler (preserved LITERAL no main)
//   - onClose — close modal
//   - role, sentToday, MAX, remaining, skippedDupes, presetApproval
//
// Deps lazy: window.Modal
(function(){
  'use strict';
  function CampaignStepPickTemplate(props){
    const Modal = window.Modal;
    if(!Modal){
      console.error('[CampaignStepPickTemplate] window.Modal ausente');
      return null;
    }
    const {
      filteredClients, selectedClients, availableTemplates,
      selectedTemplateId, selectedTemplate, customText, setCustomText,
      onPickTemplate, onStart, onClose,
      role, sentToday, MAX, remaining, skippedDupes, presetApproval
    } = props;
    return (
      <Modal title={'📱 Disparar campanha — '+filteredClients.length+' cliente(s)'} onClose={onClose} large>
        {/* Status diário */}
        <div style={{display:'flex',gap:10,marginBottom:14,flexWrap:'wrap'}}>
          <div style={{flex:'1 1 200px',padding:'10px 14px',background:'#F8FAFB',borderRadius:8,border:'1px solid #E5E7EB'}}>
            <div style={{fontSize:11,color:'#6B7280',textTransform:'uppercase',letterSpacing:1,fontWeight:600}}>Hoje</div>
            <div style={{fontSize:18,fontWeight:800,color:'#1B2A4A'}}>{sentToday} / {MAX}</div>
            <div style={{fontSize:11,color:remaining>0?'#16A34A':'#DC2626'}}>
              {remaining>0?'Sobram '+remaining+' disparos':'🚫 Limite atingido'}
            </div>
          </div>
          {skippedDupes>0 && (
            <div style={{flex:'1 1 200px',padding:'10px 14px',background:'#FEF3C7',borderRadius:8,border:'1px solid #EA580C44'}}>
              <div style={{fontSize:11,color:'#92700A',textTransform:'uppercase',letterSpacing:1,fontWeight:600}}>⚠ Pulados auto</div>
              <div style={{fontSize:18,fontWeight:800,color:'#EA580C'}}>{skippedDupes}</div>
              <div style={{fontSize:11,color:'#92700A'}}>Já contactados hoje</div>
            </div>
          )}
          <div style={{flex:'1 1 200px',padding:'10px 14px',background:'#ECFDF5',borderRadius:8,border:'1px solid #16A34A44'}}>
            <div style={{fontSize:11,color:'#16A34A',textTransform:'uppercase',letterSpacing:1,fontWeight:600}}>Vão receber</div>
            <div style={{fontSize:18,fontWeight:800,color:'#16A34A'}}>{filteredClients.length}</div>
            <div style={{fontSize:11,color:'#16A34A'}}>Clientes na fila</div>
          </div>
        </div>

        {filteredClients.length===0 ? (
          <div style={{padding:30,textAlign:'center',color:'#6B7280',fontSize:14}}>
            <div style={{fontSize:48,marginBottom:12}}>🚫</div>
            <div style={{fontSize:16,fontWeight:600,color:'#1B2A4A',marginBottom:8}}>Nenhum cliente elegível</div>
            <div>{remaining===0?'Você atingiu o limite diário de '+MAX+' disparos. Volte amanhã.':'Todos os selecionados já receberam mensagem hoje.'}</div>
          </div>
        ) : <React.Fragment>

        <div style={{fontSize:13,color:'#6B7280',marginBottom:14}}>
          Escolha um template oficial ZAYNEX. Os disparos serão enfileirados (1 cliente por vez) — você abre o WhatsApp, envia, fecha a aba, e marca como enviado pra avançar.
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:8,maxHeight:400,overflowY:'auto'}}>
          {availableTemplates.map(function(t){
            const active = selectedTemplateId === t.id;
            const restricted = t.requires_approval;
            return (
              <div key={t.id} onClick={function(){onPickTemplate(t);}}
                style={{
                  padding:'12px 14px',
                  border:'2px solid '+(active?'#C8A951':'#E5E7EB'),
                  borderRadius:10,
                  background:active?'#FFFBEB':'#FFFFFF',
                  cursor:'pointer',
                  display:'flex',
                  gap:12,
                  alignItems:'flex-start',
                  transition:'all .15s'
                }}>
                <div style={{fontSize:24,lineHeight:1}}>{t.icon}</div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:14,fontWeight:700,color:active?'#92700A':'#1B2A4A',marginBottom:2}}>
                    {t.label}
                    {restricted && <span style={{marginLeft:8,fontSize:10,padding:'2px 6px',borderRadius:6,background:'#FEF3C7',color:'#92700A',fontWeight:700}}>🔒 APROVAÇÃO</span>}
                  </div>
                  <div style={{fontSize:11,color:'#6B7280',marginBottom:6}}>{t.description}</div>
                  {t.text && <div style={{fontSize:12,color:'#374151',background:'#F9FAFB',padding:'6px 10px',borderRadius:6,fontStyle:'italic',lineHeight:1.5}}>"{t.text}"</div>}
                </div>
              </div>
            );
          })}
        </div>

        {/* Custom text input — só aparece se selecionou 'custom' */}
        {selectedTemplate && selectedTemplate.id === 'custom' && (
          <div style={{marginTop:14}}>
            <label style={{fontSize:11,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,fontWeight:700,marginBottom:6,display:'block'}}>Sua mensagem (use {'{nome}'} pra primeiro nome)</label>
            <textarea value={customText} onChange={function(e){setCustomText(e.target.value);}}
              placeholder="Oi {nome}, aqui é a [seu nome]..."
              style={{width:'100%',minHeight:80,padding:'10px 12px',border:'1px solid #E4E7EC',borderRadius:8,fontSize:13,resize:'vertical',boxSizing:'border-box'}}/>
          </div>
        )}

        <div style={{display:'flex',gap:10,marginTop:18,justifyContent:'flex-end'}}>
          <button className="btn-outline" onClick={onClose}>Cancelar</button>
          {(function(){
            const isRestricted = selectedTemplate && selectedTemplate.requires_approval;
            const isAdminFin = role === 'admin' || role === 'financeiro';
            const hasPresetApproval = presetApproval && presetApproval.templateId === (selectedTemplate && selectedTemplate.id);
            const needsApproval = isRestricted && !isAdminFin && !hasPresetApproval;
            return (
              <button className="btn-gold" onClick={onStart} disabled={!selectedTemplateId || filteredClients.length===0}>
                {needsApproval ? '📨 Pedir aprovação' : ('▶ Iniciar campanha ('+filteredClients.length+')')}
              </button>
            );
          })()}
        </div>
        </React.Fragment>}
      </Modal>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets['campaign-modal'] = window.ZNX.widgets['campaign-modal'] || {};
  window.ZNX.widgets['campaign-modal'].CampaignStepPickTemplate = CampaignStepPickTemplate;
  // [Wave 40 marker v224.21] confirma CampaignStepPickTemplate executado
  window.CampaignStepPickTemplate_v224_21_wave40 = true;
})();