/* ui/factuur-vervolg.jsx — v7.8b
 *
 * De vervolgstap na het versturen van een dossierstuk: de bijhorende factuur.
 *
 * Stond eerst enkel in advies.html en kende maar één fase. De startverklaring,
 * de aangifte, het EPC en de rioleringskeuring hebben net dezelfde stap nodig,
 * en advies.html laadt shell.jsx niet — vandaar één los, afhankelijkheidsvrij
 * bestand dat elke pagina kan inladen.
 *
 * v7.8b — twee dingen die in de praktijk misliepen:
 *   · één factuur dekt vaak méér dan één fase (advies + startverklaring
 *     samen); je kiest nu zelf wat erop komt, en elke fase wordt een lijn.
 *   · de klantgegevens die naar Zenfactuur gaan waren onzichtbaar tot Zenfactuur
 *     ze weigerde; ze staan nu in dit venster, na te lezen en aan te passen.
 *
 * Gebruik:
 *   <window.FactuurVervolg
 *      voorstelUrl="/api/projects/210/factuur-voorstel?fase=startverklaring"
 *      onSluiten={...} />
 *
 * De url mag ook /api/advies/:id/factuur-voorstel zijn: beide geven hetzelfde
 * antwoord terug (src/facturatie/voorstel.js).
 */
(function () {
  const K = { tekst:'#1a202c', zacht:'#718096', licht:'#a0aec0', rand:'#e2e8f0',
              groen:'#2b4f26', rood:'#c53030', oker:'#8a6d00', okerZacht:'#fffbf0' };

  const geld = (n) => Number(n || 0).toFixed(2).replace('.', ',');

function FactuurVervolg({ voorstelUrl, onSluiten, watVerstuurd }) {
  const [voorstel, setVoorstel] = React.useState(null);
  const [open, setOpen]   = React.useState(false);
  const [form, setForm]   = React.useState(null);
  const [regels, setRegels] = React.useState([]);
  const [bezig, setBezig] = React.useState(false);
  const [klaar, setKlaar] = React.useState(null);
  const [fout, setFout]   = React.useState('');
  const [naarZf, setNaarZf] = React.useState(true);
  const [mailKlant, setMailKlant] = React.useState(true);
  const [toonMail, setToonMail] = React.useState(false);
  // klantgegevens zoals Zenfactuur ze zal krijgen
  const [gegevens, setGegevens] = React.useState(null);
  const [gegevensWaarden, setGegevensWaarden] = React.useState({});
  const [gegevensVuil, setGegevensVuil] = React.useState(false);

  React.useEffect(() => {
    fetch(voorstelUrl, { credentials:'include' })
      .then(r => r.json()).then(setVoorstel)
      .catch(() => setVoorstel({ ok:false, reden:'fout' }));
  }, [voorstelUrl]);

  /* De klantgegevens ophalen zodra we weten om welk dossier het gaat. Zelfde
     bron als het venster "ontbrekende gegevens", dus wat je hier aanpast staat
     meteen goed voor élke volgende factuur en mail. */
  React.useEffect(() => {
    if (!voorstel || !voorstel.ok || !voorstel.project_id) return;
    fetch(`/api/gegevens/ontbreekt?doel=factuur&project_id=${voorstel.project_id}`,
          { credentials:'include' })
      .then(r => r.json())
      .then(d => {
        if (!d || !Array.isArray(d.velden)) return;
        setGegevens(d);
        const w = {};
        d.velden.forEach(v => { w[v.key] = v.waarde || ''; });
        setGegevensWaarden(w);
      })
      .catch(() => {});
  }, [voorstel && voorstel.project_id]);

  const openVenster = () => {
    const opties = voorstel.opties || [{
      fase: voorstel.fases, label: watVerstuurd || voorstel.fases,
      percentage: voorstel.percentage, bedrag: voorstel.bedrag,
      omschrijving: voorstel.omschrijving, al_gefactureerd: voorstel.al_gefactureerd || [],
    }];
    setRegels(opties.map(o => ({
      ...o,
      // de zopas verstuurde fase staat aan, tenzij ze al gefactureerd is
      aan: o.fase === voorstel.fases && !(o.al_gefactureerd || []).length,
      bedrag: o.bedrag != null ? String(o.bedrag) : '',
      omschrijving: o.omschrijving || '',
    })));
    setForm({
      invoice_nr:  '',
      btw_percent: String(voorstel.btw_percent),
      date_issued: voorstel.date_issued,
      date_due:    voorstel.date_due,
    });
    setOpen(true);
  };

  const gekozen = regels.filter(r => r.aan);
  const totaalExcl = gekozen.reduce((s, r) => s + (parseFloat(String(r.bedrag).replace(',', '.')) || 0), 0);
  const btwPct = form ? (parseFloat(form.btw_percent) || 0) : 0;
  const totaalIncl = Math.round(totaalExcl * (1 + btwPct / 100) * 100) / 100;

  const ontbrekend = gegevens
    ? (gegevens.velden || []).filter(v => v.verplicht && !String(gegevensWaarden[v.key] || '').trim())
    : [];

  const maakAan = async () => {
    if (!gekozen.length) { setFout('Kies minstens één fase om te factureren.'); return; }
    /* v7.9l — zonder e-mailadres kan de factuur wél in Zenfactuur, maar niet
       vertrekken. Dat liep zo mis bij 2026-0029: aangemaakt, nooit gemaild.
       Liever nu tegenhouden dan achteraf uitzoeken waarom er niets aankwam. */
    if (naarZf && mailKlant && !String(gegevensWaarden.client_email || '').trim()) {
      setFout('Geen e-mailadres van de klant — vul het hierboven aan, of zet «mailen naar de klant» uit '
            + 'en verstuur ze later vanuit Facturatie.');
      return;
    }
    setBezig(true); setFout('');
    try {
      /* 1 · gewijzigde klantgegevens eerst bewaren — anders vertrekt de
         factuur naar Zenfactuur met de oude gegevens. */
      if (gegevensVuil) {
        const rg = await fetch('/api/gegevens/aanvullen', {
          method:'POST', credentials:'include',
          headers:{'Content-Type':'application/json'},
          body: JSON.stringify({ project_id: voorstel.project_id, velden: gegevensWaarden }),
        });
        const dg = await rg.json();
        if (!dg.ok) throw new Error('Gegevens bewaren mislukt: ' + (dg.error || ''));
        /* v7.9a — de route bewaart een veld niet altijd (vroeger: een dossier
           zónder aanvraag had geen rij om in te schrijven, en toch kwam er
           'ok' terug). Wat niet bewaard raakte, zeggen we hier meteen — niet
           pas als Zenfactuur de factuur weigert. */
        if (Array.isArray(dg.overgeslagen) && dg.overgeslagen.length) {
          throw new Error('Niet bewaard: ' + dg.overgeslagen.join(', ')
            + '. De factuur is niet aangemaakt.');
        }
        setGegevensVuil(false);
      }

      // 2 · de factuur zelf: één lijn per gekozen fase
      const lines = gekozen.map(r => ({
        description: r.omschrijving,
        amount: parseFloat(String(r.bedrag).replace(',', '.')) || 0,
      }));
      const samenvatting = gekozen.length === 1
        ? gekozen[0].omschrijving
        : `${gekozen.map(r => r.vrij ? r.omschrijving : (r.kort || r.label)).join(' + ')} (dossier ${voorstel.dossier_nr || ''} — ${voorstel.werfadres || ''})`;

      const r = await fetch('/api/invoices', {
        method:'POST', credentials:'include',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({
          project_id:  voorstel.project_id,
          invoice_nr:  form.invoice_nr.trim(),
          description: samenvatting,
          lines,
          btw_percent: parseFloat(form.btw_percent) || 21,
          date_issued: form.date_issued,
          date_due:    form.date_due,
          status:      'Verzonden',
          fases:       gekozen.map(r => r.fase).filter(Boolean).join(','),
        }),
      });
      const d = await r.json();
      if (!d.id) throw new Error(d.error || 'Aanmaken mislukt');

      let zf = null;
      if (naarZf) {
        const rz = await fetch(`/api/facturen/${d.id}/sync-to-zenfactuur`, {
          method:'POST', credentials:'include',
          headers:{'Content-Type':'application/json'},
          body: JSON.stringify({ auto_send_email: mailKlant }),
        });
        zf = await rz.json();
      }
      setKlaar({ id: d.id, zf });
      setOpen(false);
    } catch (e) { setFout(e.message); }
    finally { setBezig(false); }
  };

  const knop = (primair) => ({
    padding:'7px 13px', borderRadius:6, fontSize:12.5, 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:'7px 9px', borderRadius:6, fontSize:13,
                border:`1px solid ${K.rand}`, boxSizing:'border-box' };
  const kader = { marginTop:12, paddingTop:12, borderTop:'1px solid rgba(0,0,0,.12)', color:K.tekst };
  const vinkje = { display:'flex', alignItems:'center', gap:7, fontSize:12, cursor:'pointer' };
  const blok = { border:`1px solid ${K.rand}`, borderRadius:8, padding:'10px 12px', marginBottom:10 };

  if (!voorstel) return <div style={{fontSize:12,marginTop:10}}>⏳ factuurvoorstel laden…</div>;

  /* ── klaar ─────────────────────────────────────────────────────────────── */
  if (klaar) {
    const zf = klaar.zf;
    const kanNalezen = !!window.FactuurMailModal && zf && zf.ok;
    const mislukt = zf && !zf.ok;

    /* v7.9b — mislukte de sync, dan hoort de tweede poging hier te staan.
       Eerst stond er alleen "u kan het opnieuw proberen vanuit Facturatie" —
       en dáár was geen knop. De factuur bestaat al, dus dit stuurt ze enkel
       alsnog door; er komt geen tweede factuur van. */
    const opnieuw = async () => {
      setBezig(true); setFout('');
      try {
        const rz = await fetch(`/api/facturen/${klaar.id}/sync-to-zenfactuur`, {
          method:'POST', credentials:'include',
          headers:{'Content-Type':'application/json'},
          body: JSON.stringify({ auto_send_email: mailKlant }),
        });
        setKlaar({ ...klaar, zf: await rz.json() });
      } catch (e) { setFout(e.message); }
      finally { setBezig(false); }
    };

    return (
      <div style={kader}>
        <div style={{fontSize:13,fontWeight:600}}>✓ Factuur aangemaakt</div>
        <div style={{fontSize:12,marginTop:4}}>
          {zf
            ? (zf.ok
                ? <>In Zenfactuur als <b>{zf.serial_number || ('#'+zf.zenfactuur_invoice_id)}</b>
                    {mailKlant ? ' — en gemaild naar de klant.' : '. Nog niet gemaild.'}</>
                : <span style={{color:K.rood}}>Niet naar Zenfactuur: {zf.error || 'onbekende fout'}</span>)
            : 'Nog niet naar Zenfactuur gestuurd.'}
        </div>
        {fout && <div style={{background:'#fde8e8',color:K.rood,borderRadius:6,
          padding:'8px 10px',fontSize:12,marginTop:8}}>{fout}</div>}
        {mislukt && (
          <div style={{fontSize:11.5,color:K.zacht,marginTop:8}}>
            De factuur staat al in het portaal. Vul hierboven aan wat ontbreekt en probeer opnieuw —
            er komt geen tweede factuur van.
          </div>
        )}
        {mislukt && gegevens && (
          <div style={{...blok, marginTop:8}}>
            <label style={lab}>Factuurgegevens — zo gaan ze naar Zenfactuur</label>
            <div style={{display:'flex',flexWrap:'wrap',gap:8}}>
              {gegevens.velden.map(v => (
                <div key={v.key} style={{flex: v.key === 'client_naam' || v.key === 'client_adres' ? '1 1 100%' : '1 1 140px'}}>
                  <label style={{...lab, textTransform:'none', letterSpacing:0, fontSize:10.5}}>
                    {v.label}{v.verplicht ? ' *' : ''}
                  </label>
                  <input style={inp} value={gegevensWaarden[v.key] || ''}
                    onChange={e => { setGegevensWaarden(w => ({...w, [v.key]: e.target.value})); setGegevensVuil(true); }} />
                </div>
              ))}
            </div>
          </div>
        )}
        <div style={{display:'flex',justifyContent:'flex-end',gap:8,marginTop:12}}>
          {mislukt && (
            <button type="button" style={knop(true)} disabled={bezig} onClick={async () => {
              if (gegevensVuil) {
                const rg = await fetch('/api/gegevens/aanvullen', {
                  method:'POST', credentials:'include',
                  headers:{'Content-Type':'application/json'},
                  body: JSON.stringify({ project_id: voorstel.project_id, velden: gegevensWaarden }),
                });
                const dg = await rg.json();
                if (!dg.ok || (dg.overgeslagen || []).length) {
                  setFout('Gegevens niet bewaard: ' + ((dg.overgeslagen || []).join(', ') || dg.error || ''));
                  return;
                }
                setGegevensVuil(false);
              }
              opnieuw();
            }}>{bezig ? 'Bezig…' : '↻ Opnieuw proberen'}</button>
          )}
          {kanNalezen && !mailKlant &&
            <button type="button" style={knop(false)} onClick={()=>setToonMail(true)}>✉ Nalezen en mailen</button>}
          <button type="button" style={knop(mislukt ? false : true)} onClick={onSluiten}>Sluiten</button>
        </div>
        {toonMail && <window.FactuurMailModal factuur={{ id: klaar.id }}
          onClose={()=>setToonMail(false)} onVerstuurd={()=>setToonMail(false)} />}
      </div>
    );
  }

  /* ── geen dossier eraan: niets voor te stellen ─────────────────────────── */
  if (!voorstel.ok) {
    return (
      <div style={{textAlign:'right',marginTop:12}}>
        <button type="button" style={knop(true)} onClick={onSluiten}>Sluiten</button>
      </div>
    );
  }

  /* ── het voorstel ──────────────────────────────────────────────────────── */
  if (!open) {
    const al = voorstel.al_gefactureerd || [];
    return (
      <div style={kader}>
        {al.length ? (
          <div style={{fontSize:12}}>
            Er bestaat al een factuur voor deze fase: <b>{al[0].invoice_nr || '#'+al[0].id}</b> — € {geld(al[0].amount)} ({al[0].status}).
            <div style={{color:K.zacht,marginTop:3}}>U kan er alsnog een maken, bijvoorbeeld voor een andere fase.</div>
          </div>
        ) : (
          <div style={{fontSize:12}}>
            <b>Volgende stap:</b> de factuur van {voorstel.percentage}%
            {voorstel.bedrag != null
              ? <> — <b>€ {geld(voorstel.bedrag)}</b> van € {geld(voorstel.totaalprijs)}</>
              : <> — <span style={{color:K.oker}}>geen totaalprijs op het dossier, vul het bedrag zelf in</span></>}
          </div>
        )}
        <div style={{display:'flex',justifyContent:'flex-end',gap:8,marginTop:12}}>
          <button type="button" style={knop(false)} onClick={onSluiten}>Later</button>
          <button type="button" style={knop(true)} onClick={openVenster}>Factuur opmaken…</button>
        </div>
      </div>
    );
  }

  /* ── het formulier ─────────────────────────────────────────────────────── */
  return (
    <div style={kader}>
      <div style={{fontSize:13,fontWeight:700,marginBottom:8}}>
        Factuur opmaken — dossier {voorstel.dossier_nr}
      </div>
      {fout && <div style={{background:'#fde8e8',color:K.rood,borderRadius:6,
        padding:'8px 10px',fontSize:12,marginBottom:10}}>{fout}</div>}

      {/* ── wat komt er op de factuur? ─────────────────────────────────── */}
      <div style={blok}>
        <label style={lab}>Wat factureren we?</label>
        {regels.map((r, i) => (
          <div key={r.fase || ('vrij' + i)} style={{marginBottom:8}}>
            <label style={{...vinkje, fontWeight:600}}>
              <input type="checkbox" checked={r.aan}
                onChange={e => setRegels(v => v.map((x, j) => j === i ? {...x, aan:e.target.checked} : x))} />
              {r.vrij ? 'Vrije lijn' : r.label}
              {!r.vrij && <span style={{fontWeight:400,color:K.zacht}}>· {r.percentage}%</span>}
              {(r.al_gefactureerd || []).length > 0 && (
                <span style={{fontWeight:400,color:K.oker,fontSize:11}}>
                  · al gefactureerd ({r.al_gefactureerd[0].invoice_nr || '#'+r.al_gefactureerd[0].id})
                </span>
              )}
              {r.vrij && (
                <button type="button" title="Deze lijn weghalen"
                  onClick={() => setRegels(v => v.filter((x, j) => j !== i))}
                  style={{border:'none',background:'none',cursor:'pointer',color:K.licht,fontSize:15,padding:0}}>×</button>
              )}
            </label>
            {r.aan && (
              <div style={{display:'flex',gap:8,marginTop:4,marginLeft:22}}>
                <input style={{...inp, flex:1}} value={r.omschrijving}
                  placeholder={r.vrij ? 'bv. Blowerdoortest, Skh…' : ''}
                  onChange={e => setRegels(v => v.map((x, j) => j === i ? {...x, omschrijving:e.target.value} : x))} />
                <input style={{...inp, width:110}} value={r.bedrag} placeholder="bedrag"
                  onChange={e => setRegels(v => v.map((x, j) => j === i ? {...x, bedrag:e.target.value} : x))} />
              </div>
            )}
          </div>
        ))}
        {/* Niet alles hangt aan een fase — een blowerdoortest of Skh staat er
            gewoon als losse lijn bij. */}
        <button type="button" onClick={() => setRegels(v => [...v,
            { vrij:true, aan:true, fase:null, label:'Vrije lijn', omschrijving:'', bedrag:'', al_gefactureerd:[] }])}
          style={{border:`1px dashed ${K.rand}`,background:'none',borderRadius:6,cursor:'pointer',
                  fontSize:11.5,color:K.zacht,padding:'4px 9px',marginBottom:7}}>
          + Vrije lijn
        </button>
        <div style={{borderTop:`1px solid ${K.rand}`,paddingTop:7,marginTop:2,
          display:'flex',justifyContent:'space-between',fontSize:12.5}}>
          <span style={{color:K.zacht}}>
            {gekozen.length} {gekozen.length === 1 ? 'lijn' : 'lijnen'} · totaal excl. btw
          </span>
          <span style={{fontWeight:700}}>
            € {geld(totaalExcl)} <span style={{fontWeight:400,color:K.zacht}}>· incl. btw € {geld(totaalIncl)}</span>
          </span>
        </div>
        {voorstel.totaalprijs > 0 && (
          <div style={{fontSize:11,color:K.licht,marginTop:3}}>
            Totaalprijs van het dossier: € {geld(voorstel.totaalprijs)}
          </div>
        )}
      </div>

      {/* ── de klantgegevens die naar Zenfactuur gaan ──────────────────── */}
      <div style={{...blok, ...(ontbrekend.length ? { borderColor:'#e6c67a', background:K.okerZacht } : {})}}>
        <label style={lab}>Factuurgegevens — zo gaan ze naar Zenfactuur</label>
        {!gegevens ? <div style={{fontSize:12,color:K.zacht}}>⏳ laden…</div> : (<>
          <div style={{display:'flex',flexWrap:'wrap',gap:8}}>
            {gegevens.velden.map(v => (
              <div key={v.key} style={{flex: v.key === 'client_naam' || v.key === 'client_adres' ? '1 1 100%' : '1 1 140px'}}>
                <label style={{...lab, textTransform:'none', letterSpacing:0, fontSize:10.5}}>
                  {v.label}{v.verplicht ? ' *' : ''}
                </label>
                <input style={inp} value={gegevensWaarden[v.key] || ''} title={v.hint || ''}
                  onChange={e => { setGegevensWaarden(w => ({...w, [v.key]: e.target.value})); setGegevensVuil(true); }} />
                {v.hint && <div style={{fontSize:10,color:K.licht,marginTop:2}}>{v.hint}</div>}
              </div>
            ))}
          </div>
          {/* Zenfactuur leidt particulier/bedrijf af uit het btw-nummer: staat
              het leeg, dan komt de klant er als particulier op te staan. */}
          {!String(gegevensWaarden.client_btw || '').trim() && (
            <div style={{fontSize:11,color:K.zacht,marginTop:5}}>
              Zonder btw-nummer boekt Zenfactuur deze klant als <b>particulier</b>.
            </div>
          )}
          <div style={{fontSize:11,marginTop:6,color: ontbrekend.length ? K.oker : K.zacht}}>
            {ontbrekend.length
              ? `Zenfactuur weigert een factuur zonder ${ontbrekend.map(v => v.label.toLowerCase()).join(', ')}.`
              : (gegevensVuil
                  ? 'Aangepast — wordt bij het aanmaken bewaard bij het dossier.'
                  : 'Wat u hier aanpast wordt bewaard bij het dossier, voor élke volgende factuur en mail.')}
          </div>
        </>)}
      </div>

      {/* ── nummer, btw en datums ──────────────────────────────────────── */}
      <div style={{display:'flex',gap:8,marginBottom:8}}>
        <div style={{flex:1}}>
          <label style={lab}>Factuurnummer</label>
          <input style={inp} value={form.invoice_nr} placeholder="leeg = Zenfactuur nummert"
                 onChange={e=>setForm({...form, invoice_nr:e.target.value})} />
        </div>
        <div style={{width:80}}>
          <label style={lab}>Btw %</label>
          <input style={inp} value={form.btw_percent}
                 onChange={e=>setForm({...form, btw_percent:e.target.value})} />
        </div>
        <div style={{flex:1}}>
          <label style={lab}>Factuurdatum</label>
          <input style={inp} type="date" value={form.date_issued}
                 onChange={e=>setForm({...form, date_issued:e.target.value})} />
        </div>
        <div style={{flex:1}}>
          <label style={lab}>Vervaldatum</label>
          <input style={inp} type="date" value={form.date_due}
                 onChange={e=>setForm({...form, date_due:e.target.value})} />
        </div>
      </div>

      <label style={vinkje}>
        <input type="checkbox" checked={naarZf} onChange={e=>setNaarZf(e.target.checked)} />
        Meteen in Zenfactuur aanmaken
      </label>
      <label style={{...vinkje, marginTop:5, opacity: naarZf ? 1 : .45}}>
        <input type="checkbox" checked={mailKlant} disabled={!naarZf}
               onChange={e=>setMailKlant(e.target.checked)} />
        En de factuur mailen naar de klant (vanaf info@enerveco.be)
      </label>

      <div style={{display:'flex',justifyContent:'flex-end',gap:8,marginTop:14}}>
        <button type="button" style={knop(false)} disabled={bezig} onClick={()=>setOpen(false)}>Terug</button>
        <button type="button" style={knop(true)} disabled={bezig || !gekozen.length} onClick={maakAan}>
          {bezig ? 'Bezig…' : `Factuur aanmaken — € ${geld(totaalExcl)}`}
        </button>
      </div>
    </div>
  );
}

/* ══════════════════════════════════════════════════════════════════════════
   v7.8c — HETZELFDE VENSTER, OOK LOS VAN EEN VERZENDING
   Het paneel hierboven verscheen enkel ná het versturen van een dossierstuk.
   In Projecten was er dus geen enkele manier om tussendoor te factureren, en
   in Aanvragen zat een ánder venster met een andere invoer. Dit is dezelfde
   inhoud in een eigen venster, op te roepen waar men maar wil.

   Gebruik:  {toon && <window.FactuurVenster projectId={p.id} fase="advies"
                        dossierNr={p.dossier_nr} werfadres={p.werfadres}
                        onClose={...} onKlaar={...} />}
   `fase` mag weggelaten worden: dan kiest de server de eerstvolgende fase die
   nog niet gefactureerd is.
   ══════════════════════════════════════════════════════════════════════════ */
function FactuurVenster({ projectId, fase, dossierNr, werfadres, onClose, onKlaar }) {
  const url = `/api/projects/${projectId}/factuur-voorstel?fase=${encodeURIComponent(fase || 'auto')}`;
  return (
    <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,.5)',zIndex:7100,
      display:'flex',alignItems:'center',justifyContent:'center',padding:16}}>
      <div style={{background:'#fff',borderRadius:12,width:'min(660px,100%)',
        maxHeight:'92vh',overflow:'auto',padding:22,boxShadow:'0 20px 60px rgba(0,0,0,.4)'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:12}}>
          <div>
            <div style={{fontSize:16,fontWeight:700}}>Factureren</div>
            {(dossierNr || werfadres) && (
              <div style={{fontSize:12,color:K.zacht,marginTop:2}}>
                {dossierNr ? <b>dossier {dossierNr}</b> : null}{dossierNr && werfadres ? ' — ' : ''}{werfadres}
              </div>
            )}
          </div>
          <button onClick={onClose} style={{background:'none',border:'none',fontSize:22,
            cursor:'pointer',color:K.licht,padding:'0 4px',lineHeight:1}}>×</button>
        </div>
        <FactuurVervolg voorstelUrl={url}
          onSluiten={() => { onKlaar && onKlaar(); onClose(); }} />
      </div>
    </div>
  );
}

  window.FactuurVervolg = FactuurVervolg;
  window.FactuurVenster = FactuurVenster;
})();