/* ui/vervolg-acties.jsx — v7.17, uitgebreid in v7.18
 *
 * Overzicht van openstaande vervolgacties: wat er na een gebeurtenis in het
 * dossier nog moet gebeuren. De acties worden door de sérver aangemaakt —
 * dus ook wanneer de aanleiding via een ander scherm of een collega
 * binnenkwam — en dit venster toont ze bij het openen van het portaal tot ze
 * afgehandeld of bewust genegeerd zijn.
 *
 * Soorten en hun knoppen:
 *   architect_plannen         → architectvenster (of eerst dossier aanmaken:
 *                               dat kan hier meteen, in één klik)
 *   onderaannemer_goedkeuring → onderaannemervenster
 *   outsourcing_versturen     → opent het project met het outsourcing-
 *                               verzendpaneel al open (v7.18)
 *   outsourcing_nakijken      → status doorschuiven: nagekeken, of advies
 *                               gestuurd mét de vaste factuurstap (v7.18)
 *
 * De directe kettingen blijven bestaan; de verstuurroutes vinken de acties
 * af. Een 'vervolgacties-check'-event verfrist de lijst na zo'n ketting.
 *
 * Gebruik: <window.VervolgActiesPopup /> in de layout (vereist
 * ui/architect-modal.jsx, ui/onderaannemer-modal.jsx en — voor de
 * factuurstap — ui/factuur-vervolg.jsx).
 */
(function () {
  const K = { tekst:'#1a202c', zacht:'#718096', rand:'#e2e8f0', groen:'#2b4f26',
              groenZacht:'#e9f0e7', oker:'#92400e', okerZacht:'#fef3c7' };

  const KNOP = { padding:'6px 12px', background:K.groen, color:'#fff', border:'none',
                 borderRadius:6, fontSize:12, fontWeight:600, cursor:'pointer' };
  const KNOP_STIL = { padding:'6px 12px', background:'#fff', color:K.zacht,
                      border:'1px solid '+K.rand, borderRadius:6, fontSize:12, cursor:'pointer' };

  function VervolgActiesPopup() {
    const [items, setItems] = React.useState([]);
    const [open, setOpen] = React.useState(false);
    const [architectVoor, setArchitectVoor] = React.useState(null);
    const [onderaannemerVoor, setOnderaannemerVoor] = React.useState(null);
    const [factuurVoor, setFactuurVoor] = React.useState(null);
    const [bezig, setBezig] = React.useState(null);

    const laad = (toon) => {
      fetch('/api/vervolgacties/open', { credentials:'include' })
        .then(r => r.json())
        .then(d => {
          const lijst = Array.isArray(d) ? d : [];
          setItems(lijst);
          if (toon) setOpen(lijst.length > 0);
          else if (lijst.length === 0) setOpen(false);
        })
        .catch(() => {});
    };

    React.useEffect(() => {
      /* v7.18 — kwam de gebruiker hier via een vervolgactie-knop
         (?open_project=…), dan niet meteen wéér het overzicht tonen:
         de fiche waar hij om vroeg moet vrij blijven. */
      const stil = new URLSearchParams(window.location.search).get('open_project');
      laad(!stil);
      const h = () => laad(true);
      window.addEventListener('vervolgacties-check', h);
      return () => window.removeEventListener('vervolgacties-check', h);
    }, []);

    const negeer = async (it) => {
      try {
        await fetch('/api/vervolgacties/' + it.id + '/negeer', { method:'POST', credentials:'include' });
      } catch (e) {}
      laad(false);
    };

    /* v7.18 — status doorschuiven vanuit de nakijk-actie; de server vinkt de
       actie zelf af. Bij "advies gestuurd" volgt de vaste factuurstap. */
    const zetStatus = async (it, status, danFactuur) => {
      setBezig(it.id);
      try {
        const r = await fetch('/api/projects/' + it.project_id, {
          method:'PUT', credentials:'include', headers:{'Content-Type':'application/json'},
          body: JSON.stringify({ status }),
        }).then(x => x.json());
        if (!r || r.error) throw new Error((r && r.error) || 'Mislukt');
        if (danFactuur && window.FactuurVenster) {
          setFactuurVoor({ projectId: it.project_id, dossierNr: it.dossier_nr, werfadres: it.werfadres });
        }
      } catch (e) { alert(e.message); }
      setBezig(null);
      laad(false);
    };

    /* v7.18 — dossier aanmaken kan meteen hier: daarna gaat het
       architectvenster vanzelf open met het verse dossier. */
    const maakDossier = async (it) => {
      if (!confirm('Dossier aanmaken voor ' + (it.werfadres || 'deze aanvraag') + '?')) return;
      setBezig(it.id);
      try {
        const r = await fetch('/api/aanvragen/' + it.aanvraag_id + '/create-dossier', {
          method:'POST', credentials:'include', headers:{'Content-Type':'application/json'}, body:'{}',
        }).then(x => x.json());
        if (!r || !r.ok) throw new Error((r && r.error) || 'Aanmaken mislukt');
        setArchitectVoor({ id: r.project_id, dossier_nr: r.dossier_nr, werfadres: it.werfadres });
      } catch (e) { alert(e.message); }
      setBezig(null);
      laad(false);
    };

    if (architectVoor && window.ArchitectVenster) {
      return <window.ArchitectVenster project={architectVoor}
               onClose={() => { setArchitectVoor(null); laad(false); }} />;
    }
    if (onderaannemerVoor && window.OnderaannemerVenster) {
      return <window.OnderaannemerVenster actie={onderaannemerVoor}
               onClose={() => { setOnderaannemerVoor(null); laad(false); }} />;
    }
    if (factuurVoor && window.FactuurVenster) {
      return <window.FactuurVenster projectId={factuurVoor.projectId} fase="advies"
               dossierNr={factuurVoor.dossierNr} werfadres={factuurVoor.werfadres}
               onClose={() => { setFactuurVoor(null); laad(false); }} />;
    }
    if (!open || !items.length) return null;

    const TITEL = {
      architect_plannen: '🏛️ Architect: laatste plannen + omgevingsvergunning vragen',
      onderaannemer_goedkeuring: null,   /* dynamisch met diensten */
      outsourcing_versturen: '📨 Plannen van de architect ontvangen — project naar outsourcing sturen?',
      outsourcing_nakijken: '📥 Outsourcing leverde bestanden aan — nakijken',
    };

    return (
      <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,.5)',zIndex:6400,
        display:'flex',alignItems:'center',justifyContent:'center',padding:16}}>
        <div style={{background:'#fff',borderRadius:12,width:'min(640px,100%)',maxHeight:'88vh',
          overflow:'auto',padding:22,boxShadow:'0 20px 60px rgba(0,0,0,.4)'}}>
          <div style={{fontSize:16,fontWeight:700,marginBottom:4}}>📌 Nog te doen</div>
          <div style={{fontSize:12,color:K.zacht,marginBottom:14}}>
            Vervolgstappen die nog openstaan in uw dossiers.
          </div>
          {items.map(it => (
            <div key={it.id} style={{border:'1px solid '+K.rand,borderRadius:8,
              padding:'12px 14px',marginBottom:10}}>
              <div style={{fontSize:13,fontWeight:600}}>
                {it.soort === 'onderaannemer_goedkeuring'
                  ? '🤝 Onderaannemer verwittigen (' + (it.diensten || []).join(' + ') + ')'
                  : (TITEL[it.soort] || it.soort)}
              </div>
              <div style={{fontSize:12,color:K.zacht,marginTop:3}}>
                {it.dossier_nr ? <>Dossier <b>{it.dossier_nr}</b> · </> : null}
                {it.werfadres || '(geen werfadres)'}
                {it.klant ? <> · {it.klant}</> : null}
              </div>
              <div style={{display:'flex',gap:8,marginTop:10,flexWrap:'wrap',alignItems:'center'}}>
                {it.soort === 'architect_plannen' && (
                  it.project_id ? (
                    <button type="button" style={KNOP} disabled={bezig === it.id}
                      onClick={() => setArchitectVoor({ id: it.project_id, dossier_nr: it.dossier_nr, werfadres: it.werfadres })}>
                      📤 Open mailvenster
                    </button>
                  ) : (
                    <>
                      <button type="button" style={KNOP} disabled={bezig === it.id}
                        onClick={() => maakDossier(it)}>
                        {bezig === it.id ? '⏳ Bezig…' : '📁 Maak dossier + open mailvenster'}
                      </button>
                      <a href={'/aanvragen.html#aanvraag-' + it.aanvraag_id}
                         style={{fontSize:12,color:K.zacht}}>open de aanvraag →</a>
                    </>
                  )
                )}
                {it.soort === 'onderaannemer_goedkeuring' && (
                  <button type="button" style={KNOP} disabled={bezig === it.id}
                    onClick={() => setOnderaannemerVoor(it)}>
                    📤 Open mailvenster
                  </button>
                )}
                {it.soort === 'outsourcing_versturen' && it.project_id && (
                  <button type="button" style={KNOP} disabled={bezig === it.id}
                    onClick={() => { window.location.href = '/?open_project=' + it.project_id + '&outsourcing=1'; }}>
                    📨 Open project met verzendpaneel
                  </button>
                )}
                {it.soort === 'outsourcing_nakijken' && it.project_id && (
                  <>
                    <button type="button" style={KNOP} disabled={bezig === it.id}
                      title="Zet het dossier op Outsourcing nagekeken"
                      onClick={() => zetStatus(it, 'outsourcing_nagekeken', false)}>
                      {bezig === it.id ? '⏳' : '✓'} Nagekeken
                    </button>
                    <button type="button" style={{...KNOP, background:'#319795'}} disabled={bezig === it.id}
                      title="Zet op Advies gestuurd en open meteen de vaste factuurstap"
                      onClick={() => zetStatus(it, 'advies_gestuurd', true)}>
                      {bezig === it.id ? '⏳' : '📤'} Advies gestuurd → factuur
                    </button>
                    <a href={'/?open_project=' + it.project_id}
                       style={{fontSize:12,color:K.zacht}}>open dossier →</a>
                  </>
                )}
                <button type="button" onClick={() => negeer(it)} style={KNOP_STIL}
                  title="Niet nodig voor dit dossier — haal deze actie weg">
                  ✕ Niet nodig
                </button>
              </div>
            </div>
          ))}
          <div style={{display:'flex',justifyContent:'flex-end',marginTop:6}}>
            <button type="button" onClick={() => setOpen(false)} style={KNOP_STIL}>Later</button>
          </div>
        </div>
      </div>
    );
  }

  window.VervolgActiesPopup = VervolgActiesPopup;
})();