// js/components/widgets/Pagar.jsx
// Contas a pagar — CRUD + marcar como pago.
// Movido de index.html em Fase 5 do refactor (2026-04-29): L6854-L6945
// Deps runtime: Modal, Icon, StatusBadge, SmartSelect, showConfirm, fmt, fmtDate, isOverdue,
//               dualWrite, genIdUUID (globals)
(function() {
  'use strict';
  const {useState, useEffect, useRef, useCallback, useMemo} = React;

function Pagar({payables,setPayables,suppliers}){
  const[modal,setModal]=useState(false);
  const[form,setForm]=useState({description:'',supplierId:'',value:0,due:'',status:'Pendente'});
  // [AUDM 20260511] regra_loading_state_obrigatorio — protege save() contra duplo-click
  // que duplicava lançamentos no DRE (P0-4 auditoria mestra).
  const savingRef=useRef(false);
  useEffect(()=>{savingRef.current=false;},[modal]);
  // [AUDM 20260511] markPaid também sem inflight criava 2× pagamentos. Map por ID
  // permite múltiplos botões clicados em paralelo sem race.
  const markPaidInflightRef=useRef(new Set());
  const[markPaidVer,setMarkPaidVer]=useState(0); // força re-render quando set muda

  async function save(){
    if(savingRef.current)return;
    savingRef.current=true;
    if(!await znxGuard(['admin','financeiro'])){savingRef.current=false;return;}
    const isNew=modal!=='edit';
    const id=isNew?genIdUUID():form.id;
    const val=Number(form.value);
    const suppId=form.supplierId?form.supplierId:null;
    try{
      // [WORKAROUND_REMOVIDO 20260511 ONDA2-P1] supplier_id hardcoded null era workaround
      // antigo de FK violation. Hoje payables.supplier_id ACEITA NULL (is_nullable=YES) e
      // já tem 4 rows com FK real. Honesto: usar suppId do form se preenchido.
      const ok=await dualWrite('payables',id,
        {description:form.description,value:val,due:form.due||null,
         status:form.status,supplier_id:suppId},
        isNew,()=>{
          if(!isNew)setPayables(prev=>prev.map(p=>p.id===id?{...form,id,value:val,supplierId:suppId}:p));
          else setPayables(prev=>[...prev,{...form,id,value:val,supplierId:suppId}]);
        });
      if(!ok){savingRef.current=false;return;}
      setModal(false); // useEffect[modal] reseta savingRef
    }catch(e){
      savingRef.current=false;
      const msg=e?.message||'Erro ao salvar conta a pagar.';
      toast('❌ '+msg);
      if(typeof Sentry!=='undefined')Sentry.captureException(e,{extra:{context:'save_pagar',errorMessage:msg,payableId:id}});
    }
  }

  async function markPaid(id){
    if(markPaidInflightRef.current.has(id))return; // guard duplo-click
    markPaidInflightRef.current.add(id);
    setMarkPaidVer(v=>v+1);
    if(!await znxGuard(['admin','financeiro'])){
      markPaidInflightRef.current.delete(id);
      setMarkPaidVer(v=>v+1);
      return;
    }
    try {
      // [BUG-FIX 20260504] dualWrite + async + znxGuard — antes só setPayables local sem proteção
      const ok=await dualWrite('payables',id,{status:'Pago',paid_at:new Date().toISOString()},false,()=>{
        setPayables(prev=>prev.map(p=>p.id===id?{...p,status:'Pago'}:p));
      });
      if(!ok&&typeof Sentry!=='undefined'){
        Sentry.captureException(new Error('markPaid dualWrite failed'),{extra:{payableId:id}});
      }
    } catch(e) {
      const msg=e?.message||'Erro ao marcar como pago.';
      toast('❌ '+msg);
      if(typeof Sentry!=='undefined')Sentry.captureException(e,{extra:{context:'markPaid_pagar',payableId:id}});
    } finally {
      markPaidInflightRef.current.delete(id);
      setMarkPaidVer(v=>v+1);
    }
  }

  const pending=payables.filter(p=>p.status==='Pendente');
  const totalPending=pending.reduce((s,p)=>s+p.value,0);
  const overdue=pending.filter(p=>isOverdue(p.due));

  return(
    <div>
      <div className="page-header">
        <div className="page-title">Contas a Pagar</div>
        <button className="btn-gold" onClick={()=>{setForm({description:'',supplierId:'',value:0,due:'',status:'Pendente'});setModal('new')}} style={{display:'flex',alignItems:'center',gap:6}}><Icon n="plus" size={14}/>Nova Conta</button>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:16,marginBottom:20}}>
        <div className="stat-card"><div className="stat-label">Total Pendente</div><div className="stat-value">{fmt(totalPending)}</div></div>
        <div className="stat-card"><div className="stat-label">Em Atraso</div><div className="stat-value" style={{color:'#DC2626'}}>{overdue.length}</div></div>
        <div className="stat-card"><div className="stat-label">Vencendo Hoje</div><div className="stat-value" style={{color:'#2563EB'}}>{pending.filter(p=>isDueToday(p.due)).length}</div></div>
      </div>
      {overdue.map(p=><div key={p.id} className="alert-danger" style={{marginBottom:8,fontSize:13}}>{p.description} — Venceu {fmtDate(p.due)} — {fmt(p.value)}</div>)}
      <div className="card" style={{padding:0}}>
        <table>
          <thead><tr><th>Descrição</th><th>Fornecedor</th><th>Valor</th><th>Vencimento</th><th>Status</th><th>Ações</th></tr></thead>
          <tbody>
            {payables.map(p=>{
              const s=suppliers.find(x=>x.id===p.supplierId);
              const over=p.status==='Pendente'&&isOverdue(p.due);
              return(
                <tr key={p.id}>
                  <td>{p.description}</td>
                  <td className="dim">{s?.name||'Outros'}</td>
                  <td className="gold">{fmt(p.value)}</td>
                  <td style={{color:over?'#DC2626':isDueToday(p.due)?'#2563EB':'inherit'}}>{fmtDate(p.due)}{over?' ⚠':''}</td>
                  <td><StatusBadge status={p.status}/></td>
                  <td>
                    <div style={{display:'flex',gap:6}}>
                      {p.status==='Pendente'&&<button className="btn-gold btn-sm" disabled={markPaidInflightRef.current.has(p.id)} onClick={()=>markPaid(p.id)}>{markPaidInflightRef.current.has(p.id)?'…':'Pagar'}</button>}
                      <button className="btn-outline btn-sm" onClick={()=>{setForm(p);setModal('edit')}}><Icon n="edit" size={12}/></button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {modal&&(
        <Modal title={modal==='edit'?'Editar Conta':'Nova Conta a Pagar'} onClose={()=>setModal(false)}>
          <div className="form-grid">
            <div className="form-group full"><label>Descrição</label><input value={form.description} onChange={e=>setForm(f=>({...f,description:e.target.value}))}/></div>
            <div className="form-group"><label>Fornecedor (opcional)</label>
              <SmartSelect value={form.supplierId||''} onChange={val=>setForm(f=>({...f,supplierId:val}))} options={[{value:'',label:'— Outros —'},...suppliers.map(s=>({value:s.id,label:s.name}))]}/>
            </div>
            <div className="form-group"><label>Vencimento</label><input type="date" value={form.due} onChange={e=>setForm(f=>({...f,due:e.target.value}))}/></div>
            <div className="form-group"><label>Valor (R$)</label><input type="number" value={form.value} onChange={e=>setForm(f=>({...f,value:e.target.value}))}/></div>
            <div className="form-group"><label>Status</label>
              <SmartSelect value={form.status} onChange={val=>setForm(f=>({...f,status:val}))} options={['Pendente','Pago'].map(x=>({value:x,label:x}))}/>
            </div>
          </div>
          <div style={{display:'flex',gap:10,marginTop:20,justifyContent:'flex-end'}}>
            <button className="btn-outline" onClick={()=>setModal(false)}>Cancelar</button>
            <button className="btn-gold" disabled={savingRef.current} onClick={save}>{savingRef.current?'Salvando…':'Salvar'}</button>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// CONTAS A RECEBER
// ══════════════════════════════════════════════════════════════

  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.Pagar = Pagar;
  window.Pagar = Pagar;

  window.ZNX.refactor_phase_5_loaded = window.ZNX.refactor_phase_5_loaded || {};
  window.ZNX.refactor_phase_5_loaded.Pagar = true;

})();