// Aprovação de crédito ao mover o lead para "Aprovado" (2026-11-09, pedido do usuário): valor aprovado + SICAQ →
// RPC register_approval grava na ficha (data.valorAprovado, docs.sicaq), põe o valor no lead se estiver vazio
// e avisa a gestão. Usa o visual .lem-* (styles.css).

// Etapa "Aprovado": ids fixos ou etapa do usuário com nome "Aprovad…" (fora as de arquivo)
function horosIsApprovedCol(col, pid) {
  if (!col || (typeof isArchivedCol === 'function' && isArchivedCol(col))) return false;
  if (window.horosSegHas && !window.horosSegHas('credit')) return false;
  if (col === 'aprovado' || col === 'aprovado_final') return true;
  const t = String((typeof kanbanColTitle === 'function' && kanbanColTitle(col, pid)) || '')
    .normalize('NFD').replace(/[̀-ͯ]/g, '').trim().toLowerCase();
  return t.startsWith('aprovad');
}

const _AP_CSS = `
.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border: 1.5px dashed var(--line-strong);
  border-radius: 8px; background: var(--bg-1); color: var(--fg-2); font-size: 13px; text-align: center; cursor: pointer; }
.ap-drop small { color: var(--fg-4); font-size: 11.5px; }
.ap-drop:hover, .ap-drop.on, .ap-drop:focus-visible { border-color: var(--accent); color: var(--fg); outline: none; }
@media (max-width: 560px) { .ap-grid { grid-template-columns: 1fr; } }`;

const _apMask = (s) => {
  const d = String(s || '').replace(/\D/g, '').slice(0, 13);
  return d ? (Number(d) / 100).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '';
};

function ApprovalModal({ leadId, onClose }) {
  const [info, setInfo] = React.useState(null);
  const [value, setValue] = React.useState('');
  const [bank, setBank] = React.useState('');
  const [file, setFile] = React.useState(null);
  const [drag, setDrag] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const fileRef = React.useRef(null);
  React.useEffect(() => {
    window.HOROS_SB.rpc('get_approval_info', { p_lead: leadId }).then(({ data }) => {
      if (!data || data.error) { onClose(false); return; }
      setInfo(data);
      // valor antigo da ficha pode estar sem centavos ("350000") ou mascarado ("350.000,00")
      const v = String(data.valor || '');
      setValue(v ? _apMask(/,\d{2}$/.test(v) ? v : v.replace(/\D/g, '') + '00') : '');
      setBank(data.banco || '');
    }, () => onClose(false));
  }, [leadId]);
  React.useEffect(() => {
    const k = e => { if (e.key === 'Escape' && !busy) onClose(false); };
    window.addEventListener('keydown', k, true);
    return () => window.removeEventListener('keydown', k, true);
  }, [busy]);
  if (!info) return null;

  const pick = (f) => {
    if (!f) return;
    if (!/pdf|image\//.test(f.type)) { setErr('Envie o SICAQ em PDF ou imagem.'); return; }
    if (f.size > 10 * 1024 * 1024) { setErr('Arquivo acima de 10 MB.'); return; }
    setErr(''); setFile(f);
  };
  const num = Number(value.replace(/\./g, '').replace(',', '.')) || 0;
  const save = async () => {
    if (num <= 0 || busy) return;
    setBusy(true); setErr('');
    const sb = window.HOROS_SB;
    let doc = null;
    if (file) {
      const path = `${window.HOROS_USER?.id}/${leadId}/sicaq/${Date.now()}_${file.name.replace(/[^a-zA-Z0-9._-]/g, '_')}`;
      const { error } = await sb.storage.from('lead-docs').upload(path, file, { upsert: true });
      if (error) { setErr('Não foi possível enviar o SICAQ. Tente de novo.'); setBusy(false); return; }
      doc = { filePath: path, fileName: file.name };
    }
    const { data, error } = await sb.rpc('register_approval', { p_lead: leadId, p_value: value, p_bank: bank.trim(), p_doc: doc });
    if (error || data?.error) {
      if (doc) sb.storage.from('lead-docs').remove([doc.filePath]);
      setErr(data?.error || 'Não foi possível salvar. Tente de novo.'); setBusy(false); return;
    }
    window.dispatchEvent(new CustomEvent('horos:lead-updated', { detail: { id: leadId } }));
    window.dispatchEvent(new CustomEvent('horos:toast', { detail: { module: 'leads', title: 'Aprovação registrada',
      body: `R$ ${value} aprovado${file ? ' · SICAQ na ficha' : ''}. A gestão foi avisada.` } }));
    onClose(true);
  };

  return ReactDOM.createPortal(
    <div className="lem-ov" onMouseDown={e => { if (e.target === e.currentTarget && !busy) onClose(false); }}>
      <div className="lem-box" role="dialog" aria-label="Crédito aprovado">
        <div className="lem-head"><b>Crédito aprovado · {info.name}</b>
          <button className="lem-x" onClick={() => onClose(false)} disabled={busy} aria-label="Fechar"><Icon name="close" size={16} /></button>
        </div>
        <div className="lem-body">
          <p className="lem-muted">O valor e o SICAQ vão para a ficha do cliente e a gestão recebe o aviso da aprovação.</p>
          <style>{_AP_CSS}</style>
          <div className="ap-grid">
            <label className="lem-field"><span>Valor aprovado (R$) *</span>
              <input inputMode="numeric" value={value} onChange={e => setValue(_apMask(e.target.value))} placeholder="0,00" autoFocus /></label>
            <label className="lem-field"><span>Banco / instituição</span>
              <input value={bank} onChange={e => setBank(e.target.value)} maxLength={120} placeholder="Caixa Econômica" /></label>
          </div>
          <div className="lem-field"><span>SICAQ</span>
            <div className={`ap-drop${drag ? ' on' : ''}`} role="button" tabIndex={0}
              onClick={() => fileRef.current?.click()}
              onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileRef.current?.click(); } }}
              onDragOver={e => { e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)}
              onDrop={e => { e.preventDefault(); setDrag(false); pick(e.dataTransfer.files?.[0]); }}>
              <Icon name={file ? 'check' : 'upload'} size={18} />
              <span>{file ? file.name : (info.sicaq?.fileName ? `Já enviado: ${info.sicaq.fileName} · clique para trocar` : 'Arraste ou clique para enviar o SICAQ')}</span>
              <small>PDF, JPG ou PNG · até 10 MB</small>
            </div>
            <input ref={fileRef} type="file" hidden accept=".pdf,.jpg,.jpeg,.png,application/pdf,image/*"
              onChange={e => { pick(e.target.files?.[0]); e.target.value = ''; }} />
          </div>
          {err && <div className="lem-err">{err}</div>}
          <div className="lem-foot">
            <button className="lem-btn" onClick={() => onClose(false)} disabled={busy}>Depois</button>
            <button className="lem-btn lem-btn--primary" onClick={save} disabled={busy || num <= 0}>{busy ? 'Salvando…' : 'Registrar aprovação'}</button>
          </div>
        </div>
      </div>
    </div>, document.body);
}

// Abre a janela (um lead por vez). Chamar depois que o lead foi para a etapa "Aprovado".
let _apQueue = Promise.resolve();
function horosAskApproval(leadIds) {
  for (const id of [].concat(leadIds || []).filter(Boolean)) {
    _apQueue = _apQueue.then(() => new Promise(resolve => {
      const host = document.createElement('div');
      document.body.appendChild(host);
      const root = ReactDOM.createRoot(host);
      root.render(<ApprovalModal leadId={id} onClose={(ok) => { root.unmount(); host.remove(); resolve(ok); }} />);
    }));
  }
  return _apQueue;
}
window.horosIsApprovedCol = horosIsApprovedCol;
window.horosAskApproval = horosAskApproval;