// js/components/widgets/SetMetaModal.jsx
// Admin define meta do mes + comissao base de um vendedor.
// Persiste via setMetas/setMetasBase (store keys 'metas' e 'metasBase' — useStore auto-sync).
// Onda C+ V2 — 2026-05-06.
(function() {
  'use strict';
  const {useState, useEffect} = React;

  function SetMetaModal({target, metas, setMetas, metasBase, setMetasBase, sales, currentMonth, onClose}){
    const[meta,setMeta]=useState('');
    const[base,setBase]=useState('');
    const[loading,setLoading]=useState(false);

    useEffect(()=>{
      if(target){
        setMeta(String(metas?.[target.name]||''));
        setBase(String(metasBase?.[target.name]||''));
      }
    },[target]);

    if(!target)return null;

    // Vendas atuais do vendedor no mes
    const vSales=(sales||[]).filter(s=>s.sellerName===target.name && s.date?.startsWith(currentMonth) && s.status!=='Cancelada' && s.status!=='Cancelado');
    const vRev=vSales.reduce((acc,s)=>acc+(typeof saleFinalTotal==='function'?saleFinalTotal(s):Number(s.total||0)),0);
    const baseN=Number(base)||0;
    const metaN=Number(meta)||0;
    const totalAtual=vRev+baseN;
    const pct=metaN>0?Math.min(100,(totalAtual/metaN)*100):0;
    const faltando=Math.max(0,metaN-totalAtual);

    function handleSave(){
      if(loading)return;
      const m=Number(meta);
      const b=Number(base)||0;
      if(isNaN(m)||m<0){toast('⚠️ Meta inválida','warning');return;}
      if(isNaN(b)||b<0){toast('⚠️ Base inválida','warning');return;}
      setLoading(true);
      try {
        setMetas(prev=>({...(prev||{}),[target.name]:m}));
        if(typeof setMetasBase==='function')setMetasBase(prev=>({...(prev||{}),[target.name]:b}));
        toast('✅ Meta de '+target.name+' atualizada para '+(typeof fmt==='function'?fmt(m):'R$ '+m));
        onClose();
      } catch(e){
        toast('❌ Erro ao salvar meta: '+(e?.message||'desconhecido'),'error');
      } finally {
        setLoading(false);
      }
    }

    return(
      <Modal title={'🎯 Meta — '+(target.name||'?')} onClose={onClose}>
        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          <div style={{padding:'10px 14px',background:'#EEF2FF',border:'1px solid #6366F144',borderRadius:8,fontSize:12,color:'#3730A3'}}>
            <strong>📊 Performance atual ({currentMonth}):</strong>
            <div style={{marginTop:6,display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,fontSize:11}}>
              <div>Vendas: <strong>{typeof fmt==='function'?fmt(vRev):'R$ '+vRev.toFixed(2)}</strong> ({vSales.length} vendas)</div>
              <div>Total c/ base: <strong>{typeof fmt==='function'?fmt(totalAtual):'R$ '+totalAtual.toFixed(2)}</strong></div>
            </div>
            {metaN>0 && (
              <>
                <div style={{marginTop:8,height:6,background:'#FFFFFF',borderRadius:3,overflow:'hidden'}}>
                  <div style={{width:pct+'%',height:'100%',background:
                    pct>=100?'#16A34A':
                    pct>=95 ?'#22C55E':
                    pct>=80 ?'#2563EB':
                    pct>=60 ?'#EAB308':
                    pct>=40 ?'#EA580C':
                    pct>=20 ?'#DC2626':'#991B1B',
                  transition:'width 0.3s'}}/>
                </div>
                <div style={{fontSize:11,marginTop:4,display:'flex',justifyContent:'space-between'}}>
                  <span>{pct.toFixed(0)}% da meta</span>
                  {faltando>0 && <span>Faltam {typeof fmt==='function'?fmt(faltando):'R$ '+faltando.toFixed(2)}</span>}
                </div>
              </>
            )}
          </div>

          <div>
            <label style={{fontSize:12,fontWeight:600,color:'#374151',marginBottom:4,display:'block'}}>Meta mensal (R$)</label>
            <input
              type="number"
              value={meta}
              onChange={e=>setMeta(e.target.value)}
              placeholder="Ex: 30000"
              min="0"
              step="100"
              style={{width:'100%',padding:'10px 12px',border:'1px solid #D1D5DB',borderRadius:6,fontSize:14}}
              autoFocus
              disabled={loading}
            />
            <div style={{fontSize:10,color:'#9CA3AF',marginTop:3}}>Se atingir ≥95% da meta no mês, comissão sobe de 0.5% pra 1%.</div>
          </div>

          <div>
            <label style={{fontSize:12,fontWeight:600,color:'#374151',marginBottom:4,display:'block'}}>Base de cortesia (R$)</label>
            <input
              type="number"
              value={base}
              onChange={e=>setBase(e.target.value)}
              placeholder="0"
              min="0"
              step="100"
              style={{width:'100%',padding:'10px 12px',border:'1px solid #D1D5DB',borderRadius:6,fontSize:14}}
              disabled={loading}
              onKeyDown={e=>{if(e.key==='Enter')handleSave();}}
            />
            <div style={{fontSize:10,color:'#9CA3AF',marginTop:3}}>Soma na meta como bônus inicial (ex: vendedora veio de licença, deficit de equilíbrio).</div>
          </div>

          <div style={{display:'flex',gap:10,justifyContent:'flex-end',marginTop:6}}>
            <button onClick={onClose} disabled={loading} style={{padding:'10px 20px',background:'#FFFFFF',color:'#374151',border:'1px solid #D1D5DB',borderRadius:6,fontSize:14,fontWeight:600,cursor:loading?'not-allowed':'pointer'}}>
              Cancelar
            </button>
            <button onClick={handleSave} disabled={loading} style={{padding:'10px 20px',background:loading?'#9CA3AF':'#2563EB',color:'#FFFFFF',border:'none',borderRadius:6,fontSize:14,fontWeight:700,cursor:loading?'not-allowed':'pointer'}}>
              {loading?'⏳ Salvando...':'🎯 Salvar meta'}
            </button>
          </div>
        </div>
      </Modal>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.SetMetaModal = SetMetaModal;
  window.SetMetaModal = SetMetaModal;
})();