/* ui/architect-modal.jsx — v7.14
 *
 * Het architect-venster: mail met beveiligde upload-link (Doc in/plannen)
 * waar de architect de plannen én de omgevingsvergunning aanlevert.
 *
 * Stond als ArchitectShareModal in index.html (H2-M6 + H5-A), enkel
 * bereikbaar via de knop "🏛️ Versturen naar architect" op de projectfiche.
 * Maar de natuurlijke plek is vlak ná de goedkeuring: eerst het bedank- en
 * technische-keuzesvenster naar de klant, meteen daarna de vraag om plannen
 * en vergunning aan de architect. Daarom nu als los, afhankelijkheidsvrij
 * bestand dat ook aanvragen.html kan laden.
 *
 * Serverkant ongewijzigd: GET /api/projects/:id/architect-invite-preview
 * (vult ontvanger/onderwerp/tekst) en POST /api/projects/:id/send-to-architect
 * (maakt de magic link op het moment van verzenden). Een dossier is dus
 * vereist — zonder project geen uploadmap en geen venster.
 *
 * Gebruik:
 *   {toon && <window.ArchitectVenster
 *      project={{id, dossier_nr, werfadres}}
 *      kaart          — optioneel: als kaart in de fiche i.p.v. zwevend venster
 *      onClose={...} />}
 */
(function () {
  const K = { tekst:'#1a202c', zacht:'#718096', rand:'#e2e8f0',
              groen:'#2b4f26', rood:'#991b1b', roodZacht:'#fde8e8',
              oker:'#92400e', okerRand:'#f59e0b', okerZacht:'#fef3c7',
              blauw:'#1e40af', 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 ArchitectVenster({ project, onClose, kaart }) {
    const [architectEmail, setArchitectEmail] = React.useState('');
    const [subject, setSubject] = React.useState('');
    const [body, setBody] = React.useState('');
    const [loadingPreview, setLoadingPreview] = 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);

    React.useEffect(() => {
      fetch('/api/projects/' + project.id + '/architect-invite-preview', { credentials:'include' })
        .then(r => r.json())
        .then(p => {
          if (p && !p.error) {
            setArchitectEmail(p.to || '');
            setSubject(p.subject || '');
            setBody(p.body || '');
          } else if (p && p.error) {
            setErr(p.error);
          }
          setLoadingPreview(false);
        })
        .catch(e => { setErr(e.message); setLoadingPreview(false); });
    }, [project.id]);

    const send = async () => {
      if (!architectEmail.trim()) { setErr('Architect e-mailadres is verplicht'); return; }
      if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(architectEmail.trim())) { setErr('Ongeldig e-mailadres'); return; }
      if (!subject.trim()) { setErr('Onderwerp is verplicht'); return; }
      if (!body.trim()) { setErr('Bericht is verplicht'); return; }
      setSending(true); setErr('');
      try {
        const r = await fetch('/api/projects/' + project.id + '/send-to-architect', {
          method:'POST', credentials:'include', headers:{'Content-Type':'application/json'},
          body: JSON.stringify({ architect_email: architectEmail.trim(), subject, body, archive }),
        }).then(x => x.json());
        if (r && r.ok) setResult(r);
        else setErr((r && r.error) || 'Onbekende fout');
      } catch (e) { setErr(e.message); }
      setSending(false);
    };

    const inhoud = (
      <div style={{ background:'#fff', border:'2px solid '+K.okerRand, 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}}>
            🏛️ Versturen naar architect
            {project.dossier_nr ? <span style={{fontWeight:400,color:K.zacht}}> — dossier {project.dossier_nr}</span> : null}
          </div>
          <Knop small onClick={onClose}>Sluiten</Knop>
        </div>

        {result ? (
          <div style={{textAlign:'center',padding:20}}>
            <div style={{fontSize:48,marginBottom:12}}>{result.email_sent ? '✅' : '⚠️'}</div>
            <div style={{fontSize:18,fontWeight:700,color: result.email_sent ? K.groen : K.oker}}>
              {result.email_sent ? 'Email verstuurd!' : 'Link aangemaakt'}
            </div>
            {result.email_sent && <div style={{fontSize:13,color:K.zacht,marginTop:4}}>Naar: {result.sent_to}</div>}
            {result.warning && <div style={{fontSize:12,color:K.oker,marginTop:8}}>{result.warning}</div>}
            {result.error && <div style={{fontSize:12,color:K.rood,marginTop:8}}>{result.error}</div>}
            <div style={{padding:10,background:'#f5f5f5',borderRadius:6,marginTop:12,fontSize:11,wordBreak:'break-all'}}>
              <strong>Magic link (1 jaar geldig):</strong><br/>
              <code>{result.share_url}</code>
            </div>
            <Knop onClick={onClose} style={{marginTop:12}}>Sluiten</Knop>
          </div>
        ) : loadingPreview ? (
          <div style={{textAlign:'center',padding:40,color:K.zacht}}>⏳ Voorbeeld laden…</div>
        ) : (
          <div>
            <div style={{padding:'10px 14px',background:K.okerZacht,color:K.oker,borderRadius:8,fontSize:12,marginBottom:12,border:'1px solid #fde68a'}}>
              🏛️ De architect krijgt een beveiligde link (1 jaar geldig) naar een <strong>upload-folder</strong> (<code>Doc in/plannen/</code>) waar hij/zij de <strong>plannen én de omgevingsvergunning</strong> kan uploaden. Bij elke upload ontvangt u automatisch een melding.
            </div>
            <div style={{padding:'8px 12px',background:K.blauwZacht,color:K.blauw,borderRadius:6,fontSize:11,marginBottom:12,border:'1px solid #bfdbfe'}}>
              💡 De placeholders <code>{'{share_url}'}</code> en <code>{'{expires_at}'}</code> worden automatisch ingevuld bij het versturen (de link wordt op dat moment aangemaakt).
            </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}>Architect e-mailadres *</label>
              <input type="email" value={architectEmail} onChange={e=>setArchitectEmail(e.target.value)}
                placeholder="architect@example.com" 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 style={{fontSize:10,color:K.zacht,marginTop:4,fontFamily:'monospace'}}>
                {'Variabelen: {architect_naam}, {dossier_nr}, {werfadres}, {share_url}, {expires_at}'}
              </div>
            </div>
            <label style={{display:'flex',alignItems:'center',gap:8,marginTop:12,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 (Doc uit → Mail architect)
            </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 || !architectEmail.trim() || !subject.trim() || !body.trim()}>
                {sending ? '⏳ Versturen…' : '📤 Verstuur e-mail'}
              </Knop>
            </div>
          </div>
        )}
      </div>
    );

    if (kaart) return <div style={{marginBottom:16}}>{inhoud}</div>;

    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'}}>
          {inhoud}
        </div>
      </div>
    );
  }

  window.ArchitectVenster = ArchitectVenster;
})();