// js/components/widgets/ApprovalQueueModal.jsx
// Modal pra admin/financeiro APROVAR ou REJEITAR pedidos de templates restritos.
// Criado em 2026-05-05 (sistema 4 onda 4b).
//
// Props:
//   user: usuário logado (deve ser admin/financeiro)
//   clients: array de todos clientes pra mostrar nomes
//   onClose: fechar modal
//   onChanged: callback após aprovar/rejeitar (pra reload do bell)
//
// Deps runtime: Modal, sb, toast, MESSAGE_TEMPLATES.
(function() {
  'use strict';
  const {useState, useEffect, useMemo} = React;

function ApprovalQueueModal({user, clients, onClose, onChanged}){
  const[requests,setRequests]=useState([]);
  const[loading,setLoading]=useState(true);
  const[error,setError]=useState(null);
  const[expandedId,setExpandedId]=useState(null);
  const[rejectingId,setRejectingId]=useState(null);
  const[rejectReason,setRejectReason]=useState('');
  const[acting,setActing]=useState(false);

  // Carrega pedidos pendentes
  async function loadRequests(){
    setLoading(true);
    setError(null);
    try {
      const{data,error}=await sb.from('template_approval_requests')
        .select('*')
        .eq('status','pending')
        .gte('expires_at',new Date().toISOString())
        .order('created_at',{ascending:false});
      if(error)throw error;
      setRequests(data||[]);
    } catch(e){
      setError(e.message);
    } finally {
      setLoading(false);
    }
  }
  useEffect(()=>{loadRequests();},[]);

  function getTemplateInfo(tid){
    const t=(typeof MESSAGE_TEMPLATES!=='undefined')?MESSAGE_TEMPLATES.find(x=>x.id===tid):null;
    return t||{id:tid,icon:'❓',label:tid,description:'',text:''};
  }

  function getClientNames(ids){
    if(!Array.isArray(ids))return[];
    return ids.map(id=>{
      const c=(clients||[]).find(c=>String(c.id)===String(id));
      return c?c.name:'(cliente removido)';
    });
  }

  function timeAgo(iso){
    const d=Date.now()-new Date(iso).getTime();
    const h=Math.floor(d/3600000);
    const m=Math.floor(d/60000)%60;
    if(h>0)return`há ${h}h ${m}m`;
    return`há ${m}min`;
  }

  async function approve(req){
    if(acting)return;
    setActing(true);
    try {
      const{error}=await sb.from('template_approval_requests').update({
        status:'approved',
        approved_by_id:user?.id||null,
        approved_by_name:user?.name||'sistema',
        approved_at:new Date().toISOString()
      }).eq('id',req.id);
      if(error)throw error;
      toast(`✅ Pedido de ${req.vendedora_name} aprovado`);
      await loadRequests();
      if(onChanged)onChanged();
    } catch(e){
      toast('❌ '+e.message);
      if(typeof Sentry!=='undefined')Sentry.captureException(e,{extra:{context:'approval_approve',reqId:req.id}});
    } finally {
      setActing(false);
    }
  }

  async function reject(req){
    if(!rejectReason.trim()){toast('⚠ Motivo obrigatório pra rejeitar');return;}
    if(acting)return;
    setActing(true);
    try {
      const{error}=await sb.from('template_approval_requests').update({
        status:'rejected',
        approved_by_id:user?.id||null,
        approved_by_name:user?.name||'sistema',
        approved_at:new Date().toISOString(),
        reject_reason:rejectReason.trim()
      }).eq('id',req.id);
      if(error)throw error;
      toast(`❌ Pedido de ${req.vendedora_name} rejeitado`);
      setRejectingId(null);
      setRejectReason('');
      await loadRequests();
      if(onChanged)onChanged();
    } catch(e){
      toast('❌ '+e.message);
      if(typeof Sentry!=='undefined')Sentry.captureException(e,{extra:{context:'approval_reject',reqId:req.id}});
    } finally {
      setActing(false);
    }
  }

  return(
    <Modal title={`🔔 Aprovações pendentes (${requests.length})`} onClose={onClose} large>
      {loading?(
        <div style={{padding:30,textAlign:'center',color:'#6B7280'}}>Carregando pedidos...</div>
      ):error?(
        <div style={{padding:20,background:'#FEE2E2',border:'1px solid #DC262633',borderRadius:8,color:'#DC2626',fontSize:13}}>
          ❌ {error}
        </div>
      ):requests.length===0?(
        <div style={{padding:40,textAlign:'center',color:'#6B7280'}}>
          <div style={{fontSize:48,marginBottom:14}}>✅</div>
          <div style={{fontSize:16,fontWeight:600,color:'#16A34A',marginBottom:6}}>Nenhum pedido pendente</div>
          <div style={{fontSize:13}}>As vendedoras estão usando só templates livres. 🎯</div>
        </div>
      ):(
        <div style={{display:'flex',flexDirection:'column',gap:12,maxHeight:560,overflowY:'auto'}}>
          {requests.map(req=>{
            const t=getTemplateInfo(req.template_id);
            const clientNames=getClientNames(req.client_ids);
            const expanded=expandedId===req.id;
            const rejectingThis=rejectingId===req.id;
            const expiresIn=Math.max(0,Math.floor((new Date(req.expires_at)-Date.now())/3600000));
            return(
              <div key={req.id} style={{border:'2px solid #E5E7EB',borderRadius:10,padding:'14px 16px',background:'#FFFFFF'}}>
                <div style={{display:'flex',gap:12,alignItems:'flex-start'}}>
                  <div style={{fontSize:30,lineHeight:1}}>{t.icon}</div>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',gap:8,flexWrap:'wrap',marginBottom:4}}>
                      <div style={{fontSize:15,fontWeight:700,color:'#1B2A4A'}}>{t.label}</div>
                      <div style={{fontSize:11,color:'#9CA3AF'}}>
                        {timeAgo(req.created_at)} · expira em {expiresIn}h
                      </div>
                    </div>
                    <div style={{fontSize:12,color:'#374151',marginBottom:6}}>
                      <strong>{req.vendedora_name}</strong> pediu pra disparar pra <strong>{(req.client_ids||[]).length} cliente{(req.client_ids||[]).length>1?'s':''}</strong>
                    </div>
                    {req.justification&&(
                      <div style={{fontSize:12,color:'#374151',background:'#FFFBEB',padding:'8px 10px',borderRadius:6,fontStyle:'italic',marginBottom:8,border:'1px solid #C8A95133'}}>
                        💬 "{req.justification}"
                      </div>
                    )}

                    <button onClick={()=>setExpandedId(expanded?null:req.id)}
                      style={{background:'transparent',border:'none',color:'#2563EB',fontSize:12,fontWeight:600,cursor:'pointer',padding:'2px 0'}}>
                      {expanded?'▼ Ocultar':'▶ Ver'} clientes ({clientNames.length}) e mensagem
                    </button>

                    {expanded&&(
                      <div style={{marginTop:8,padding:'10px 12px',background:'#F8FAFB',borderRadius:8,fontSize:12,border:'1px solid #E5E7EB'}}>
                        <div style={{fontWeight:700,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,marginBottom:6,fontSize:10}}>Mensagem do template</div>
                        <div style={{color:'#374151',fontStyle:'italic',marginBottom:10,lineHeight:1.5}}>"{t.text}"</div>
                        <div style={{fontWeight:700,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,marginBottom:6,fontSize:10}}>Clientes ({clientNames.length})</div>
                        <div style={{display:'flex',flexWrap:'wrap',gap:5}}>
                          {clientNames.slice(0,30).map((n,i)=>(
                            <span key={i} style={{padding:'3px 8px',background:'#FFFFFF',border:'1px solid #E5E7EB',borderRadius:6,fontSize:11,color:'#374151'}}>{n}</span>
                          ))}
                          {clientNames.length>30&&<span style={{fontSize:11,color:'#9CA3AF'}}>+ {clientNames.length-30} outros</span>}
                        </div>
                      </div>
                    )}

                    {/* Ações */}
                    {rejectingThis?(
                      <div style={{marginTop:10,padding:'10px 12px',background:'#FEE2E2',borderRadius:8,border:'1px solid #DC262633'}}>
                        <label style={{fontSize:11,color:'#DC2626',textTransform:'uppercase',letterSpacing:1,fontWeight:700,marginBottom:6,display:'block'}}>Motivo da rejeição (obrigatório)</label>
                        <textarea value={rejectReason} onChange={e=>setRejectReason(e.target.value)}
                          placeholder="Ex: margem apertada esse mês, cliente já recebeu cortesia recente, etc"
                          style={{width:'100%',minHeight:60,padding:'8px 10px',border:'1px solid #DC262644',borderRadius:6,fontSize:12,resize:'vertical',boxSizing:'border-box'}}/>
                        <div style={{display:'flex',gap:6,marginTop:8,justifyContent:'flex-end'}}>
                          <button className="btn-outline btn-sm" onClick={()=>{setRejectingId(null);setRejectReason('');}} disabled={acting}>Cancelar</button>
                          <button className="btn-danger btn-sm" onClick={()=>reject(req)} disabled={acting||!rejectReason.trim()}>
                            {acting?'...':'Confirmar rejeição'}
                          </button>
                        </div>
                      </div>
                    ):(
                      <div style={{display:'flex',gap:8,marginTop:10,justifyContent:'flex-end'}}>
                        <button className="btn-outline btn-sm" style={{borderColor:'#DC2626',color:'#DC2626'}}
                          onClick={()=>{setRejectingId(req.id);setRejectReason('');}} disabled={acting}>
                          ❌ Rejeitar
                        </button>
                        <button className="btn-gold btn-sm"
                          onClick={()=>approve(req)} disabled={acting}>
                          {acting?'...':'✅ Aprovar'}
                        </button>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </Modal>
  );
}

  // Namespace
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.ApprovalQueueModal = ApprovalQueueModal;
  window.ApprovalQueueModal = ApprovalQueueModal;
})();