/* ui/onderaannemer-modal.jsx — v7.17
 *
 * De onderaannemer verwittigen dat de offerte goedgekeurd is (veiligheids-
 * coördinatie en/of luchtdichtheidsmeting) en dat hij de klant rechtstreeks
 * mag contacteren. Gevoed door een vervolgactie: het voorstel komt van
 * GET /api/vervolg/onderaannemer-preview, het versturen loopt via
 * POST /api/vervolg/onderaannemer-verstuur (die de actie meteen afvinkt en
 * een .eml in het dossier bewaart wanneer er een dossiermap is).
 *
 * Gebruik:
 *   {toon && <window.OnderaannemerVenster actie={{id}} onClose={...} />}
 */
(function () {
  const K = { tekst:'#1a202c', zacht:'#718096', rand:'#e2e8f0',
              groen:'#2b4f26', rood:'#991b1b', roodZacht:'#fde8e8',
              blauw:'#1e40af', blauwRand:'#93c5fd', blauwZacht:'#eff6ff' };

  const veldStijl = { width:'100%', padding:'8px 10px', border:'1.5px solid '+K.rand,
                      borderRadius:6, fontSize:13, boxSizing:'border-box' };
  const labelStijl = { display:'block', fontSize:11, fontWeight:600, color:K.zacht,
                       marginBottom:4, textTransform:'uppercase' };

  function Knop({ children, onClick, primair, disabled, style }) {
    return (
      <button type="button" onClick={onClick} disabled={disabled}
        style={{ padding:'8px 14px', borderRadius:6, fontSize:13, fontWeight:600,
                 cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? .55 : 1,
                 background: primair ? K.groen : '#fff', color: primair ? '#fff' : K.tekst,
                 border: primair ? 'none' : '1px solid '+K.rand, ...(style||{}) }}>
        {children}
      </button>
    );
  }

  function OnderaannemerVenster({ actie, onClose }) {
    const [to, setTo] = React.useState('');
    const [subject, setSubject] = React.useState('');
    const [body, setBody] = React.useState('');
    const [diensten, setDiensten] = React.useState([]);
    const [loading, setLoading] = React.useState(true);
    const [sending, setSending] = React.useState(false);
    const [result, setResult] = React.useState(null);
    const [err, setErr] = React.useState('');
    const [archive, setArchive] = React.useState(true);
    const [onthoud, setOnthoud] = React.useState(true);

    React.useEffect(() => {
      fetch('/api/vervolg/onderaannemer-preview?actie_id=' + actie.id, { credentials:'include' })
        .then(r => r.json())
        .then(p => {
          if (p && !p.error) {
            setTo(p.to || ''); setSubject(p.subject || ''); setBody(p.body || '');
            setDiensten(Array.isArray(p.diensten) ? p.diensten : []);
          } else if (p && p.error) setErr(p.error);
          setLoading(false);
        })
        .catch(e => { setErr(e.message); setLoading(false); });
    }, [actie.id]);

    const send = async () => {
      if (!to.trim()) { setErr('Vul het e-mailadres van de onderaannemer in'); return; }
      setSending(true); setErr('');
      try {
        const r = await fetch('/api/vervolg/onderaannemer-verstuur', {
          method:'POST', credentials:'include', headers:{'Content-Type':'application/json'},
          body: JSON.stringify({ actie_id: actie.id, to: to.trim(), subject, body,
                                 archive, onthoud_adres: onthoud }),
        }).then(x => x.json());
        if (r && r.ok) setResult(r);
        else setErr((r && r.error) || 'Onbekende fout');
      } catch (e) { setErr(e.message); }
      setSending(false);
    };

    return (
      <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,.5)',display:'flex',
                   alignItems:'center',justifyContent:'center',zIndex:7000,padding:16}}>
        <div style={{width:'100%',maxWidth:640,maxHeight:'92vh',overflowY:'auto'}}>
          <div style={{ background:'#fff', border:'2px solid '+K.blauwRand, borderRadius:10,
                        padding:16, boxSizing:'border-box' }}>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:12}}>
              <div style={{fontSize:15,fontWeight:700,color:K.tekst}}>🤝 Onderaannemer verwittigen</div>
              <Knop onClick={onClose}>Sluiten</Knop>
            </div>

            {result ? (
              <div style={{textAlign:'center',padding:20}}>
                <div style={{fontSize:48,marginBottom:12}}>✅</div>
                <div style={{fontSize:18,fontWeight:700,color:K.groen}}>Email verstuurd!</div>
                <div style={{fontSize:13,color:K.zacht,marginTop:4}}>Naar: {result.sent_to}</div>
                {result.mail_archived && <div style={{fontSize:12,color:K.zacht,marginTop:6}}>📁 Kopie bewaard in het dossier.</div>}
                <Knop onClick={onClose} style={{marginTop:12}}>Sluiten</Knop>
              </div>
            ) : loading ? (
              <div style={{textAlign:'center',padding:40,color:K.zacht}}>⏳ Voorbeeld laden…</div>
            ) : (
              <div>
                <div style={{padding:'10px 14px',background:K.blauwZacht,color:K.blauw,borderRadius:8,fontSize:12,marginBottom:12,border:'1px solid #bfdbfe'}}>
                  De offerte is goedgekeurd{diensten.length ? <> met <b>{diensten.join(' + ')}</b></> : null}. Deze mail laat de onderaannemer weten dat hij de klant rechtstreeks mag contacteren — de klantgegevens staan al in het bericht.
                </div>

                {err && <div style={{background:K.roodZacht,color:K.rood,padding:'8px 12px',borderRadius:8,fontSize:13,marginBottom:12}}>{err}</div>}

                <div style={{marginBottom:12}}>
                  <label style={labelStijl}>Aan (onderaannemer) *</label>
                  <input type="text" value={to} onChange={e=>setTo(e.target.value)}
                    placeholder="onderaannemer@example.com — meerdere adressen mag, gescheiden door komma"
                    disabled={sending} style={veldStijl} />
                </div>
                <div style={{marginBottom:12}}>
                  <label style={labelStijl}>Onderwerp</label>
                  <input type="text" value={subject} onChange={e=>setSubject(e.target.value)} disabled={sending} style={veldStijl} />
                </div>
                <div style={{marginBottom:6}}>
                  <label style={labelStijl}>Bericht</label>
                  <textarea value={body} onChange={e=>setBody(e.target.value)} rows={12} disabled={sending}
                    style={{...veldStijl, fontFamily:'inherit', resize:'vertical', lineHeight:1.5}} />
                </div>
                <label style={{display:'flex',alignItems:'center',gap:8,marginTop:10,fontSize:13,cursor:'pointer',color:K.tekst}}>
                  <input type="checkbox" checked={onthoud} onChange={e=>setOnthoud(e.target.checked)} disabled={sending} />
                  💾 Onthoud dit adres als vast adres voor {diensten.length ? diensten.join(' en ') : 'deze dienst'}
                </label>
                <label style={{display:'flex',alignItems:'center',gap:8,marginTop:6,fontSize:13,cursor:'pointer',color:K.tekst}}>
                  <input type="checkbox" checked={archive} onChange={e=>setArchive(e.target.checked)} disabled={sending} />
                  📁 Bewaar een kopie (.eml) in het dossier
                </label>
                <div style={{display:'flex',gap:8,justifyContent:'flex-end',marginTop:14}}>
                  <Knop onClick={onClose} disabled={sending}>Annuleren</Knop>
                  <Knop primair onClick={send} disabled={sending || !to.trim() || !subject.trim() || !body.trim()}>
                    {sending ? '⏳ Versturen…' : '📤 Verstuur e-mail'}
                  </Knop>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  window.OnderaannemerVenster = OnderaannemerVenster;
})();