/* ui/factuur-mail-modal.jsx — v7.6f
 *
 * De factuurmail nalezen vóór het versturen. Stond eerst enkel in
 * aanvragen.html, maar de Facturatie-pagina (index.html) is waar men de
 * factuur bewerkt — daar ontbrak elke knop om ze alsnog te mailen.
 * Zonder afhankelijkheden, zodat elke pagina hem kan laden.
 *
 * Gebruik:  {toon && <window.FactuurMailModal factuur={f}
 *              onClose={...} onVerstuurd={...} />}
 */
(function () {
  const K = { tekst:'#1a202c', zacht:'#718096', rand:'#e2e8f0',
              groen:'#2b4f26', rood:'#c53030' };
/* ══════════════════════════════════════════════════════════════════════════
   v7.6e — DE FACTUURMAIL NALEZEN VÓÓR HET VERSTUREN
   Toont wie ze krijgt, met welke tekst, en een link om de échte pdf te openen
   zoals de klant hem ziet. Onderwerp en tekst zijn aanpasbaar; laat je ze leeg,
   dan gebruikt Zenfactuur zijn eigen standaardmail.
   ══════════════════════════════════════════════════════════════════════════ */
function FactuurMailModal({ factuur, onClose, onVerstuurd }) {
  const [info, setInfo] = React.useState(null);
  const [form, setForm] = React.useState({ to:'', subject:'', content:'' });
  const [bezig, setBezig] = React.useState(false);
  const [fout, setFout] = React.useState('');

  React.useEffect(() => {
    fetch(`/api/facturen/${factuur.id}/zenfactuur-mail-voorbeeld`, { credentials:'include' })
      .then(r=>r.json())
      .then(d=>{
        if (d.error) { setFout(d.error); return; }
        setInfo(d);
        setForm({ to: d.to || '', subject: d.subject || '', content: d.content || '' });
      })
      .catch(e=>setFout(e.message));
  }, [factuur.id]);

  const verstuur = async () => {
    if (!form.to.trim()) { setFout('Geen ontvanger ingevuld.'); return; }
    if (!confirm(`Factuur ${info.serial_number} nu mailen naar ${form.to}?`)) return;
    setBezig(true); setFout('');
    try {
      const r = await fetch(`/api/facturen/${factuur.id}/zenfactuur-mail`, {
        method:'POST', credentials:'include',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify(form),
      });
      const d = await r.json();
      if (!d.ok) throw new Error(d.error || 'Versturen mislukt');
      alert(`✓ Factuur ${d.serial_number} verstuurd naar ${d.to}.`);
      onVerstuurd && onVerstuurd();
    } catch (e) { setFout(e.message); }
    finally { setBezig(false); }
  };

    const knop = (primair) => ({
      padding:'8px 14px', borderRadius:6, fontSize:13, fontWeight:600,
      cursor: bezig ? 'wait' : 'pointer',
      border: primair ? 'none' : '1px solid ' + K.rand,
      background: primair ? K.groen : '#fff',
      color: primair ? '#fff' : K.tekst,
      opacity: bezig ? .6 : 1,
    });

  const lab = { fontSize:10, fontWeight:700, letterSpacing:.3, textTransform:'uppercase',
                color:K.zacht, display:'block', marginBottom:3 };
  const inp = { width:'100%', padding:'8px 10px', borderRadius:6, fontSize:13,
                border:`1px solid ${K.rand}`, boxSizing:'border-box' };

  return (
    <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,.5)',zIndex:6000,
      display:'flex',alignItems:'center',justifyContent:'center',padding:16}}>
      <div style={{background:'#fff',borderRadius:12,width:'min(600px,100%)',
        maxHeight:'92vh',overflow:'auto',padding:22}}>
        <div style={{fontSize:16,fontWeight:700,marginBottom:10}}>
          Factuur versturen{info ? ' — ' + info.serial_number : ''}
        </div>
        {fout && <div style={{background:'#fde8e8',color:K.rood,borderRadius:6,
          padding:'8px 10px',fontSize:12,marginBottom:10}}>{fout}</div>}
        {!info ? <div style={{fontSize:13}}>⏳ Laden…</div> : (<>
          {info.al_gemaild_op && (
            <div style={{background:'#fff8e1',color:'#8a6d00',borderRadius:6,padding:'8px 10px',
              fontSize:12,marginBottom:10}}>
              Deze factuur werd al gemaild op {new Date(info.al_gemaild_op).toLocaleString('nl-BE')}.
              Opnieuw versturen stuurt ze nog eens.
            </div>
          )}
          <div style={{background:'#f6f8fa',borderRadius:6,padding:'10px 12px',marginBottom:12,
            fontSize:12,display:'flex',alignItems:'center',gap:10}}>
            <span>📄 De pdf die als bijlage meegaat</span>
            <span style={{flex:1}}></span>
            {info.pdf_url
              ? <a href={info.pdf_url} target="_blank" rel="noopener"
                   style={{color:K.groen,fontWeight:600,textDecoration:'underline'}}>openen ↗</a>
              : <span style={{color:K.zacht}}>(link niet beschikbaar)</span>}
          </div>

          {/* v7.7 — de mail vertrekt vanaf info@enerveco.be, niet vanuit
              Zenfactuur. Zo is de afzender dezelfde als bij het advies en komt
              een antwoord van de klant gewoon bij ons binnen. */}
          <div style={{fontSize:11,color:K.zacht,marginBottom:10}}>
            Wordt verstuurd vanaf <b>info@enerveco.be</b>, met de pdf in bijlage.
          </div>
          <div style={{marginBottom:10}}>
            <label style={lab}>Aan (de klant)</label>
            <input style={inp} value={form.to} onChange={e=>setForm({...form,to:e.target.value})} />
            {info.cc && <div style={{fontSize:11,color:K.zacht,marginTop:3}}>cc: {info.cc}</div>}
          </div>
          <div style={{marginBottom:10}}>
            <label style={lab}>Onderwerp</label>
            <input style={inp} value={form.subject} placeholder="(leeg = onze standaardtekst)"
              onChange={e=>setForm({...form,subject:e.target.value})} />
          </div>
          <div style={{marginBottom:6}}>
            <label style={lab}>Bericht</label>
            <textarea style={{...inp,minHeight:110}} value={form.content}
              placeholder="(leeg = onze standaardtekst)"
              onChange={e=>setForm({...form,content:e.target.value})} />
          </div>
          {!info.eigen_tekst_ingesteld && (
            <div style={{fontSize:11,color:K.zacht}}>
              Er is geen standaardtekst ingesteld voor factuurmails. Vul hierboven
              iets in, of pas de standaardtekst aan bij Instellingen.
            </div>
          )}
          <div style={{display:'flex',justifyContent:'flex-end',gap:8,marginTop:16}}>
            <button type="button" onClick={onClose} disabled={bezig} style={knop(false)}>Annuleren</button>
            <button type="button" onClick={verstuur} disabled={bezig} style={knop(true)}>{bezig ? "Versturen…" : "✉ Nu versturen"}</button>
          </div>
        </>)}
      </div>
    </div>
  );
}


  window.FactuurMailModal = FactuurMailModal;
})();