/* ui/gegevens-modal.jsx — v7.5
 *
 * Eén venster voor alles wat kan stuklopen op een ontbrekend gegeven:
 * een mail versturen, een factuur naar Zenfactuur sturen, een rapport maken.
 * Het vraagt bij de server op wát er nodig is, laat het invullen en bewaart
 * het meteen op de juiste plaats — daarna gaat de oorspronkelijke handeling
 * gewoon door. Zo wordt de databank beter naarmate ze gebruikt wordt.
 *
 * Bewust zonder afhankelijkheden: advies.html laadt het gedeelde shell.jsx
 * niet, dus dit bestand staat op eigen benen en werkt op elke pagina.
 *
 * Gebruik:
 *   {toon && <window.GegevensModal
 *      doel="factuur"                     // advies_mail | factuur | rapport
 *      projectId={..} aanvraagId={..}
 *      onKlaar={() => opnieuwProberen()}
 *      onClose={() => setToon(false)} />}
 */
(function () {
  const KLEUR = {
    tekst: '#1a202c', zacht: '#718096', rand: '#e2e8f0',
    groen: '#2b4f26', rood: '#c53030', amber: '#e0a800', amberZacht: '#fff8e1',
  };

  function GegevensModal({ doel, projectId, aanvraagId, onKlaar, onClose }) {
    const [info, setInfo]       = React.useState(null);
    const [waarden, setWaarden] = React.useState({});
    const [bezig, setBezig]     = React.useState(false);
    const [fout, setFout]       = React.useState('');

    React.useEffect(() => {
      const q = new URLSearchParams({ doel });
      if (projectId)  q.set('project_id', projectId);
      if (aanvraagId) q.set('aanvraag_id', aanvraagId);
      fetch('/api/gegevens/ontbreekt?' + q.toString(), { credentials: 'include' })
        .then(r => r.json())
        .then(d => {
          if (d.error) { setFout(d.error); return; }
          setInfo(d);
          const start = {};
          for (const v of d.velden) start[v.key] = v.waarde || '';
          setWaarden(start);
        })
        .catch(e => setFout(e.message));
    }, [doel, projectId, aanvraagId]);

    const nogLeeg = info
      ? info.velden.filter(v => v.verplicht && !String(waarden[v.key] || '').trim()).map(v => v.key)
      : [];

    const bewaar = async () => {
      setBezig(true); setFout('');
      try {
        const r = await fetch('/api/gegevens/aanvullen', {
          method: 'POST', credentials: 'include',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ project_id: projectId, aanvraag_id: aanvraagId, velden: waarden }),
        });
        const d = await r.json();
        if (!d.ok) throw new Error(d.error || 'Bewaren mislukt');
        onKlaar && onKlaar(d);
      } 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 ${KLEUR.rand}`,
      background: primair ? KLEUR.groen : '#fff',
      color: primair ? '#fff' : KLEUR.tekst,
    });

    return (
      <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 6000,
        display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
        onClick={e => { if (e.target === e.currentTarget && !bezig) onClose && onClose(); }}>
        <div style={{ background: '#fff', borderRadius: 12, width: 'min(560px,100%)',
          maxHeight: '92vh', overflow: 'auto', padding: 22, boxShadow: '0 20px 60px rgba(0,0,0,.3)' }}>

          <div style={{ fontSize: 17, fontWeight: 700, marginBottom: 4, color: KLEUR.tekst }}>
            Ontbrekende gegevens{info && info.dossier_nr ? ' — dossier ' + info.dossier_nr : ''}
          </div>
          <div style={{ fontSize: 12, color: KLEUR.zacht, marginBottom: 16, lineHeight: 1.5 }}>
            {info ? (info.hint || `Nodig om verder te kunnen: ${info.titel.toLowerCase()}.`) : 'Laden…'}
            {' '}Wat u invult wordt bij het dossier bewaard — zo hoeft u het maar één keer op te zoeken.
          </div>

          {fout && <div style={{ background: '#fde8e8', color: KLEUR.rood, borderRadius: 8,
            padding: '9px 12px', fontSize: 12, marginBottom: 12 }}>{fout}</div>}

          {info && info.velden.map((v, i) => {
            const leegVerplicht = v.verplicht && !String(waarden[v.key] || '').trim();
            return (
              <div key={v.key} style={{ marginBottom: 12 }}>
                <label style={{ display: 'block', fontSize: 11, fontWeight: 600, letterSpacing: .3,
                  textTransform: 'uppercase', color: KLEUR.zacht, marginBottom: 4 }}>
                  {v.label}{v.verplicht && <span style={{ color: KLEUR.rood }}> *</span>}
                </label>
                <input type={v.type === 'email' ? 'email' : 'text'}
                  value={waarden[v.key] || ''}
                  onChange={e => setWaarden(p => ({ ...p, [v.key]: e.target.value }))}
                  autoFocus={leegVerplicht && nogLeeg[0] === v.key}
                  style={{ width: '100%', padding: '9px 11px', borderRadius: 6, fontSize: 13,
                    boxSizing: 'border-box', color: KLEUR.tekst,
                    border: `1px solid ${leegVerplicht ? KLEUR.amber : KLEUR.rand}`,
                    background: leegVerplicht ? KLEUR.amberZacht : '#fff' }} />
                {v.hint && <div style={{ fontSize: 11, color: KLEUR.zacht, marginTop: 3 }}>{v.hint}</div>}
              </div>
            );
          })}

          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 18 }}>
            <button type="button" onClick={onClose} disabled={bezig} style={knop(false)}>Annuleren</button>
            <button type="button" onClick={bewaar} style={{ ...knop(true),
              opacity: (bezig || !info || nogLeeg.length) ? .5 : 1 }}
              disabled={bezig || !info || nogLeeg.length > 0}>
              {bezig ? 'Bewaren…' : 'Bewaren en verdergaan'}
            </button>
          </div>
        </div>
      </div>
    );
  }

  window.GegevensModal = GegevensModal;
  // Ook via het gedeelde systeem bereikbaar, als dat op de pagina bestaat.
  window.EUI = Object.assign(window.EUI || {}, { GegevensModal });
})();