/* ui/document-modal.jsx — v7.9
 *
 * Eén venster om een dossierstuk naar de klant te sturen.
 *
 * Stond in index.html (was: AangifteModal, enkel voor de aangifte). De
 * startverklaring, het EPC-certificaat en het keuringsattest gingen buiten het
 * portaal om — zonder dossiernummer in het onderwerp, zonder kopie in het
 * dossier, zonder mijlpaal en zonder factuur. Sinds v7.8 doorlopen ze alle
 * dezelfde keten als het advies.
 *
 * v7.9 — nu als los, afhankelijkheidsvrij bestand, want ook aanvragen.html
 * heeft het nodig: dáár wordt een dossier goedgekeurd, en net dan moet de
 * vraag naar de technische keuzes vertrekken.
 *
 * Wat per soort verschilt komt van de server (/api/document-soorten):
 * label, doelmap, sjablonen, factuurfase, mijlpaal, en of er een document mee
 * moet. Soorten zonder document (de vragen aan de klant) tonen de
 * bijlagenkeuze als optioneel en slaan de factuurstap over.
 *
 * Gebruik:
 *   {toon && <window.DocumentVerzendVenster
 *      project={{id, dossier_nr, werfadres}} soort="startverklaring"
 *      onClose={...} />}
 */
(function () {
  const K = { tekst:'#1a202c', zacht:'#718096', licht:'#a0aec0', rand:'#e2e8f0',
              groen:'#2b4f26', rood:'#991b1b', roodZacht:'#fee2e2',
              oker:'#8a6d00', okerRand:'#e6c67a', okerZacht:'#fffbf0',
              groenZacht:'#d1fae5', groenDonker:'#065f46', blauwZacht:'#eff6ff', blauw:'#1e40af' };

  const ACCENT = {
    startverklaring:            '#3182ce',
    voorlopige_aangifte:        '#b7791f',
    definitieve_aangifte:       '#065f46',
    epc:                        '#6b46c1',
    riolering:                  '#0e7490',
    technische_keuzes:          '#2b4f26',
    technische_keuzes_bedankt:  '#2b4f26',
  };

  const haal = (url) => fetch(url, { credentials:'include' }).then(r => r.json());

/* v7.9g — `aanvraag` mag meegegeven worden voor een aanvraag zonder dossier.
   Dan gaat het naar /api/aanvragen/:id/verstuur-document en vervalt alles wat
   een dossier veronderstelt (bestanden uit de map, dossiernummer). */
function DocumentVerzendVenster({ project, aanvraag, soort, onClose }) {
  const heeftDossier = !!(project && project.id);
  const basisUrl = heeftDossier
    ? '/api/projects/' + project.id
    : '/api/aanvragen/' + (aanvraag && aanvraag.id);
  const [cfg, setCfg] = React.useState(null);
  const [to, setTo] = React.useState('');
  const [cc, setCc] = React.useState('');
  const [subject, setSubject] = React.useState('');
  const [body, setBody] = React.useState('');
  const [files, setFiles] = React.useState([]);
  const [sending, setSending] = React.useState(false);
  const [errMsg, setErrMsg] = React.useState('');
  const [loaded, setLoaded] = React.useState(false);
  const [archive, setArchive] = React.useState(true);
  const [verzonden, setVerzonden] = React.useState(null);
  const [toonGegevens, setToonGegevens] = React.useState(false);
  const [dossierBestanden, setDossierBestanden] = React.useState([]);
  const [gekozenUitDossier, setGekozenUitDossier] = React.useState([]);

  const accent = ACCENT[soort] || K.groen;
  const vulTpl = (t, vars) => String(t || '').replace(/\{(\w+)\}/g, (m, k) => vars[k] !== undefined ? vars[k] : m);

  const haalOntvanger = async () => {
    if (!heeftDossier) { setTo((aanvraag && aanvraag.client_email) || ''); return; }
    const ct = await haal('/api/projects/' + project.id + '/client-contact').catch(() => null);
    setTo((ct && ct.client_email) ? ct.client_email : '');
  };

  React.useEffect(() => {
    (async () => {
      try {
        const soorten = await haal('/api/document-soorten');
        const c = soorten[soort];
        if (!c) throw new Error('Onbekend soort: ' + soort);
        setCfg(c);
        const vars = { dossier: (project && project.dossier_nr) || '',
                       werfadres: (project && project.werfadres) || (aanvraag && aanvraag.werfadres) || '' };
        /* v7.9g — zonder dossiernummer bleef er '— dossier ' bungelen
           achteraan het onderwerp. Weghalen in plaats van leeg laten staan. */
        setSubject(vulTpl(c.subject, vars).replace(/\s*[—-]\s*dossier\s*$/i, '').trim());
        setBody(vulTpl(c.body, vars));
        await haalOntvanger();
        if (c.document_verplicht && heeftDossier) {   // enkel waar er een map is
          const alles = await haal('/api/projects/' + project.id + '/files').catch(() => []);
          const map = String(c.map || '').toLowerCase();
          setDossierBestanden((Array.isArray(alles) ? alles : [])
            .map(b => ({ ...b, pad: String(b.path).split('\\').join('/') }))
            .filter(b => !map || b.pad.toLowerCase().startsWith(map + '/'))
            .sort((a, b) => a.name.localeCompare(b.name)));
        }
      } catch (e) { setErrMsg('Laden mislukt: ' + e.message); }
      setLoaded(true);
    })();
  }, [soort, basisUrl]);

  const documentVerplicht = cfg ? cfg.document_verplicht : true;
  const heeftDocument = files.length > 0 || gekozenUitDossier.length > 0;
  const magVersturen = !documentVerplicht || heeftDocument;

  const send = async () => {
    if (!to.trim())      { setErrMsg('Veld "Aan" is verplicht'); return; }
    if (!subject.trim()) { setErrMsg('Onderwerp is verplicht'); return; }
    if (!magVersturen)   { setErrMsg('Er gaat geen document mee. Laad het op, of kies er een uit het dossier.'); return; }
    setErrMsg(''); setSending(true);
    try {
      const fd = new FormData();
      fd.append('soort', soort);
      fd.append('to_email', to.trim());
      fd.append('cc_email', cc.trim());
      fd.append('subject', subject.trim());
      fd.append('body', body);
      fd.append('archive', archive ? 'true' : 'false');
      fd.append('uit_dossier', JSON.stringify(gekozenUitDossier));
      for (const f of files) fd.append('files', f);
      const r = await fetch(basisUrl + '/verstuur-document', {
        method:'POST', credentials:'include', body: fd,
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(data.error || ('HTTP ' + r.status));
      setVerzonden(data);
    } catch (e) { setErrMsg(e.message); }
    setSending(false);
  };

  const inp = { width:'100%', padding:'8px 10px', border:`1px solid ${K.rand}`, borderRadius:6,
                fontSize:13, boxSizing:'border-box', fontFamily:'inherit' };
  const lab = { fontSize:11, fontWeight:600, color:K.zacht, display:'block', marginBottom:4 };
  const knop = (primair) => ({
    padding:'8px 14px', borderRadius:6, fontSize:13, fontWeight:600,
    cursor: sending ? 'wait' : 'pointer',
    border: primair ? 'none' : `1px solid ${K.rand}`,
    background: primair ? K.groen : '#fff', color: primair ? '#fff' : K.tekst,
    opacity: sending ? .6 : 1,
  });
  const label = (cfg && cfg.label) || soort;
  const statusLabel = (s) => ((window.EUI && window.EUI.STATUS_META && window.EUI.STATUS_META[s]) || {}).label || s;

  return (
    <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,.5)',display:'flex',
      alignItems:'center',justifyContent:'center',zIndex:7000,padding:16}}>
      {toonGegevens && window.EUI && window.EUI.GegevensModal && (
        <window.EUI.GegevensModal
          doel="document_mail"
          projectId={heeftDossier ? project.id : null}
          aanvraagId={heeftDossier ? null : (aanvraag && aanvraag.id)}
          onClose={()=>setToonGegevens(false)}
          onKlaar={()=>{ setToonGegevens(false); haalOntvanger(); }} />
      )}
      <div style={{background:'#fff',borderRadius:12,padding:20,width:'min(640px, 98vw)',
        maxHeight:'92vh',overflow:'auto',boxShadow:'0 20px 60px rgba(0,0,0,.4)'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
          <div style={{fontSize:17,fontWeight:700,color:accent}}>📤 {label} versturen</div>
          <button onClick={onClose} style={{background:'none',border:'none',fontSize:22,
            cursor:'pointer',color:K.licht,padding:'0 6px',lineHeight:1}}>×</button>
        </div>

        {!loaded ? <div style={{padding:20,textAlign:'center',color:K.zacht}}>⏳ Laden…</div>
         : verzonden ? (
          <>
            <div style={{padding:'10px 12px',background:K.groenZacht,color:K.groenDonker,borderRadius:6,
              fontSize:13,fontWeight:600,marginBottom:10}}>
              ✓ {label} verzonden naar {to}
            </div>
            <ul style={{fontSize:12,color:K.zacht,margin:'0 0 4px 0',paddingLeft:18,lineHeight:1.7}}>
              {project && project.dossier_nr && <li>Onderwerp met dossiernummer {project.dossier_nr}</li>}
              {verzonden.meegestuurd > 0 &&
                <li>{verzonden.meegestuurd} document(en) in bijlage
                  {verzonden.archived > 0 && <>, waarvan {verzonden.archived} nieuw bewaard in {cfg && cfg.map}</>}</li>}
              {verzonden.mail_archived && <li>Kopie van de mail (.eml) in het dossier</li>}
              {verzonden.status_naar && <li>Status van het dossier → <b>{statusLabel(verzonden.status_naar)}</b></li>}
              {verzonden.datum_gezet && <li>Mijlpaal gezet op {verzonden.datum_gezet}</li>}
            </ul>
            {/* Geen factuurfase (de vragen aan de klant) → geen factuurstap.
                En zonder dossier valt er sowieso niets voor te stellen. */}
            {verzonden.fase && heeftDossier ? (
              <window.FactuurVervolg
                voorstelUrl={'/api/projects/' + project.id + '/factuur-voorstel?fase=' + verzonden.fase}
                watVerstuurd={label}
                onSluiten={onClose} />
            ) : (
              <div style={{display:'flex',justifyContent:'flex-end',marginTop:14}}>
                <button type="button" style={knop(true)} onClick={onClose}>Sluiten</button>
              </div>
            )}
          </>
        ) : (
        <>
          <div style={{marginBottom:10}}>
            <label style={lab}>Aan * (klant)</label>
            <input value={to} onChange={e=>setTo(e.target.value)} placeholder="klant@voorbeeld.be"
              disabled={sending} style={inp} />
            {!to && (
              <div style={{marginTop:5,display:'flex',alignItems:'center',gap:8,flexWrap:'wrap'}}>
                <span style={{fontSize:11,color:K.oker}}>Geen e-mailadres gevonden bij de aanvraag of het dossier.</span>
                <button type="button" style={{...knop(false), padding:'5px 10px', fontSize:12}}
                  onClick={()=>setToonGegevens(true)}>✎ Gegevens aanvullen en bewaren</button>
              </div>
            )}
          </div>
          <div style={{marginBottom:10}}>
            <label style={lab}>CC (optioneel)</label>
            <input value={cc} onChange={e=>setCc(e.target.value)} placeholder="kopie@voorbeeld.be"
              disabled={sending} style={inp} />
          </div>
          <div style={{marginBottom:10}}>
            <label style={lab}>Onderwerp *</label>
            <input value={subject} onChange={e=>setSubject(e.target.value)} disabled={sending} style={inp} />
            {project && project.dossier_nr ? (
              <div style={{fontSize:11,color:K.zacht,marginTop:3}}>
                Het dossiernummer {project.dossier_nr} wordt vooraan toegevoegd als het er nog niet in staat.
              </div>
            ) : (
              <div style={{fontSize:11,color:K.zacht,marginTop:3}}>
                Nog geen dossiernummer — dat komt er pas bij het aanmaken van het dossier.
              </div>
            )}
          </div>
          <div style={{marginBottom:10}}>
            <label style={lab}>Bericht</label>
            <textarea value={body} onChange={e=>setBody(e.target.value)} rows={documentVerplicht ? 11 : 18}
              disabled={sending} style={{...inp, resize:'vertical', lineHeight:1.5, padding:10,
              fontFamily: documentVerplicht ? 'inherit' : 'ui-monospace, Menlo, Consolas, monospace',
              fontSize: documentVerplicht ? 13 : 12}} />
          </div>

          {documentVerplicht ? (
            <div style={{marginBottom:14,padding:'10px 12px',borderRadius:8,
              border:`1px solid ${heeftDocument ? K.rand : K.okerRand}`,
              background: heeftDocument ? '#fff' : K.okerZacht}}>
              <label style={{...lab, fontWeight:700}}>
                Het document * — wordt bewaard in {cfg && cfg.map ? cfg.map : 'het dossier'}
              </label>
              {dossierBestanden.length > 0 && (
                <div style={{marginBottom:8}}>
                  <div style={{fontSize:11,color:K.zacht,marginBottom:3}}>Staat al in het dossier:</div>
                  {dossierBestanden.map(b => (
                    <label key={b.pad} style={{display:'flex',alignItems:'center',gap:7,fontSize:12,
                      cursor:'pointer',padding:'2px 0'}}>
                      <input type="checkbox" disabled={sending}
                        checked={gekozenUitDossier.includes(b.pad)}
                        onChange={e=>setGekozenUitDossier(v => e.target.checked
                          ? [...v, b.pad] : v.filter(x => x !== b.pad))} />
                      📄 {b.name} <span style={{color:K.licht}}>({Math.round(b.size/1024)} KB)</span>
                    </label>
                  ))}
                </div>
              )}
              <div style={{fontSize:11,color:K.zacht,marginBottom:3}}>
                {dossierBestanden.length > 0 ? 'Of een nieuw bestand opladen:' : 'Bestand opladen:'}
              </div>
              <input type="file" multiple disabled={sending}
                onChange={e=>setFiles(Array.from(e.target.files||[]))} style={{fontSize:12}} />
              {files.length > 0 && (
                <div style={{marginTop:6,fontSize:11,color:K.zacht}}>
                  {files.map((f,i) => <div key={i}>📎 {f.name} ({Math.round(f.size/1024)} KB)</div>)}
                </div>
              )}
              {!heeftDocument && (
                <div style={{marginTop:7,fontSize:11,color:K.oker}}>
                  Nog geen document gekozen — zonder document versturen we niets.
                </div>
              )}
            </div>
          ) : (
            <div style={{marginBottom:14}}>
              <label style={lab}>Bijlage(n) — optioneel</label>
              <input type="file" multiple disabled={sending}
                onChange={e=>setFiles(Array.from(e.target.files||[]))} style={{fontSize:12}} />
              {files.length > 0 && (
                <div style={{marginTop:6,fontSize:11,color:K.zacht}}>
                  {files.map((f,i) => <div key={i}>📎 {f.name} ({Math.round(f.size/1024)} KB)</div>)}
                </div>
              )}
            </div>
          )}

          <label style={{display:'flex',alignItems:'center',gap:8,marginBottom: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 klant)
          </label>

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

          <div style={{display:'flex',gap:8,justifyContent:'flex-end',flexWrap:'wrap'}}>
            <button type="button" style={knop(true)} onClick={send} disabled={sending || !magVersturen}>
              {sending ? '⏳ Bezig…' : '📤 Verzenden'}
            </button>
            <button type="button" style={knop(false)} onClick={onClose} disabled={sending}>Sluiten</button>
          </div>
          <div style={{marginTop:10,padding:'8px 10px',background:K.blauwZacht,borderRadius:6,
            fontSize:11,color:K.blauw}}>
            💡 Verstuurt via Outlook365 (info@enerveco.be).
            {documentVerplicht
              ? ' Na het versturen schuift de mijlpaal mee op en stelt het portaal meteen de bijhorende factuur voor.'
              : (project && project.dossier_nr
                  ? ' Het antwoord van de klant komt in onze inbox en wordt via het dossiernummer aan dit dossier gehangen.'
                  : ' Het antwoord van de klant komt in onze inbox. Zodra er een dossier is, hangt het portaal de mails er via het dossiernummer aan.')}
          </div>
        </>
        )}
      </div>
    </div>
  );
}

  window.DocumentVerzendVenster = DocumentVerzendVenster;
})();