// Voordenker, threshold blocks, share modal, PDF mockup modal.

const Info = ({tip}) => (
  <button className="vd-info" tabIndex="0" aria-label="info" onClick={(e)=>e.preventDefault()}>
    i
    <span className="vd-info-tip">{tip}</span>
  </button>
);

const Stoplight = ({light, c}) => {
  const lab = c.stoplight[light];
  return (
    <div className={'vd-stoplight '+light}>
      <span className="dot"></span>
      <span>{c.stoplight_pre} · {lab}</span>
    </div>
  );
};

function ThresholdBlock({num, code, side, scenario, tree, toggles, setToggle, c, readOnly}){
  const onRight = side === 'right';
  return (
    <section className={'vd-block reveal '+(onRight?'right':'left')} data-screen-label={`Drempel ${num}`}>
      <aside className="vd-block-tag">
        <div className="num">/{num}</div>
        <div>{code}</div>
      </aside>
      <div className="vd-block-body">
        <header className="vd-block-head">
          <h2 className="vd-block-claim">{scenario.claim}</h2>
          <Stoplight light={scenario.light} c={c}/>
        </header>

        <div className="vd-block-split">
          <div className="vd-block-text">
            {scenario.text.map((p,i)=>(
              <p key={i} dangerouslySetInnerHTML={{__html: p.replace(/\*([^*]+)\*/g,'<b>$1</b>')}}/>
            ))}
            {scenario.notes && scenario.notes.length > 0 && (
              <div className="vd-block-notes">
                {scenario.notes.map((n,i)=>(
                  <p key={i} className="vd-block-note">{n}</p>
                ))}
              </div>
            )}
            {!readOnly && scenario.toggles && scenario.toggles.length > 0 && (
              <>
                <div className="vd-toggles-lab">{c.refine}</div>
                <div className="vd-toggles">
                  {scenario.toggles.map(t => (
                    <button key={t.k}
                      className={'vd-toggle'+(toggles && toggles[t.k] ? ' on':'')}
                      onClick={()=>setToggle(t.k)}>
                      <span className="box"></span>
                      <span className="lbl">{t.l}</span>
                      {t.meta && <span className="meta">{t.meta}</span>}
                    </button>
                  ))}
                </div>
              </>
            )}
          </div>

          <div className="vd-block-tree">
            <div className="vd-tree-wrap">
              <div className="vd-tree-head">
                <span>{c.tree_title}</span>
                <span><b>{code}</b></span>
              </div>
              {tree}
              <div className="vd-tree-foot">
                <span className="on-route">- {c.tree_route}</span>
                <span>· · ·  {c.tree_dim}</span>
              </div>
            </div>
          </div>
        </div>

        <div className="vd-actions">
          <div className="vd-action-col confirmed">
            <div className="vd-action-h"><span className="num">/01</span>{c.conf}</div>
            <div className="vd-action-list">
              {scenario.conf.map((cc,i)=>(
                <div key={i} className="vd-action-item">
                  <span className="vd-action-icon">✓</span>
                  <span className="lbl" dangerouslySetInnerHTML={{__html: cc.replace(/\*([^*]+)\*/g,'<b>$1</b>')}}/>
                  <span></span>
                </div>
              ))}
              {scenario.conf.length===0 && (
                <div className="vd-action-item">
                  <span className="vd-action-icon">-</span>
                  <span className="lbl" style={{color:'var(--ash)'}}>{c.no_conf}</span>
                  <span></span>
                </div>
              )}
            </div>
          </div>
          <div className="vd-action-col research">
            <div className="vd-action-h"><span className="num">/02</span>{c.research}</div>
            <div className="vd-action-list">
              {scenario.research.map((r,i)=>(
                <div key={i} className="vd-action-item">
                  <span className="vd-action-icon">?</span>
                  <span className="lbl">{r.l}</span>
                  {r.ext ? <span className="ext">{r.ext}</span> : <span></span>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ======================================================
// SHARE MODAL, redesigned
// ======================================================
function ShareModal({open, close, params, c, lang}){
  const [picked, setPicked] = React.useState('read');
  const [copied, setCopied] = React.useState(false);

  React.useEffect(()=>{
    if(!open) return;
    const onK = (e)=>{ if(e.key==='Escape') close(); };
    window.addEventListener('keydown', onK);
    return ()=>window.removeEventListener('keydown', onK);
  },[open]);

  if(!open) return null;

  // URL-only sharing: alle keuzes worden base64-encoded in de ?p=-parameter.
  // Geen backend nodig, geen database, geen API-call. De ontvanger decodeert de URL lokaal.
  const p64 = btoa(unescape(encodeURIComponent(JSON.stringify(params))));
  const host = (typeof location !== 'undefined' ? location.host : '') || 'voordenker.nl';
  const enc = encodeURIComponent(p64);

  const readUrl = `${host}/voordenker-shared.html?p=${enc}`;
  const editUrl = `${host}/?p=${enc}`;
  const previewHref = picked==='read'
    ? `voordenker-shared.html?lang=${lang}&p=${enc}`
    : `./?lang=${lang}&p=${enc}`;

  const url = picked==='read' ? readUrl : editUrl;
  const copy = ()=>{
    navigator.clipboard?.writeText('https://' + url);
    setCopied(true); setTimeout(()=>setCopied(false), 1800);
  };

  return (
    <div className="vd-overlay" onClick={close}>
      <div className="vd-modal" onClick={e=>e.stopPropagation()}>
        <div className="vd-modal-head">
          <span className="vd-modal-num">{c.share_eyebrow}</span>
          <button className="vd-modal-x" onClick={close}>{c.modal_close} ✕</button>
        </div>
        <h3 className="vd-modal-title">{c.share_title_a} <em>{c.share_title_b}</em></h3>
        <p className="vd-modal-sub">{c.share_sub}</p>

        <div className="vd-share-opts">
          <div role="button" tabIndex="0"
            className={'vd-share-opt'+(picked==='read'?' on':'')}
            onClick={()=>setPicked('read')}
            onKeyDown={e=>{ if(e.key==='Enter'||e.key===' ') setPicked('read'); }}>
            <div className="vd-share-opt-top">
              <span className="vd-share-opt-num">{c.share_opt_read_num}</span>
              <span className="vd-share-opt-dot" aria-hidden="true"></span>
            </div>
            <span className="vd-share-opt-h">{c.share_opt_read_h}</span>
            <span className="vd-share-opt-d">{c.share_opt_read_d}</span>
          </div>
          <div role="button" tabIndex="0"
            className={'vd-share-opt'+(picked==='edit'?' on':'')}
            onClick={()=>setPicked('edit')}
            onKeyDown={e=>{ if(e.key==='Enter'||e.key===' ') setPicked('edit'); }}>
            <div className="vd-share-opt-top">
              <span className="vd-share-opt-num">{c.share_opt_edit_num}</span>
              <span className="vd-share-opt-dot" aria-hidden="true"></span>
            </div>
            <span className="vd-share-opt-h">{c.share_opt_edit_h}</span>
            <span className="vd-share-opt-d">{c.share_opt_edit_d}</span>
          </div>
        </div>

        <div className="vd-share-urlbar">
          <div className="vd-share-urlbar-lbl">{c.share_url_lbl}</div>
          <div className="vd-share-urlbar-row">
            <span className="vd-share-urlbar-proto">https://</span>
            <input className="vd-share-urlbar-input" value={url} readOnly onClick={e=>e.target.select()}/>
            <button className="vd-share-urlbar-copy" onClick={copy}>{copied ? '✓' : c.share_copy}</button>
          </div>
          <div className="vd-share-urlbar-actions">
            <a className="vd-share-preview" href={previewHref} target="_blank" rel="noreferrer">
              {c.share_preview} <span className="arr">↗</span>
            </a>
          </div>
        </div>

        <div className="vd-share-priv">
          <span className="vd-share-priv-tag">·</span>
          {c.share_priv}
        </div>
      </div>
      {copied && <div className="vd-toast">{c.share_copied}</div>}
    </div>
  );
}

// ======================================================
// PDF EXPORT MODAL
// ======================================================
function PdfModal({open, close, summary, scenarios, params, lang, c}){
  if(!open) return null;
  const buildHref = () => {
    const p = btoa(unescape(encodeURIComponent(JSON.stringify(params||{}))));
    return `voordenker-pdf.html?lang=${lang}&p=${encodeURIComponent(p)}`;
  };
  return (
    <div className="vd-overlay" onClick={close}>
      <div className="vd-modal pdf" onClick={e=>e.stopPropagation()}>
        <div className="vd-modal-head">
          <span className="vd-modal-num">{c.pdf_eyebrow}</span>
          <button className="vd-modal-x" onClick={close}>{c.modal_close} ✕</button>
        </div>
        <h3 className="vd-modal-title">{c.pdf_title_a} <em>{c.pdf_title_b}</em></h3>
        <p className="vd-modal-sub">{c.pdf_sub}</p>

        <div className="vd-pdf-pages">
          <div className="vd-pdf-page cover">
            <span className="pp-no">01</span>
            <span className="pp-tag">{c.topbar_section.toUpperCase()}</span>
            <span className="pp-h">{c.shared_eyebrow}</span>
            <span style={{fontFamily:"'Archivo',sans-serif",fontSize:7,color:'var(--ash)'}}>{summary}</span>
            <div className="pp-lines">
              <div className="pp-l short"></div>
              <div className="pp-l sienna"></div>
            </div>
          </div>
          {[
            {n:'02', tag:`/01 · ${c.block_code.ro}`, l:scenarios.ro.light},
            {n:'03', tag:`/02 · ${c.block_code.en}`, l:scenarios.en.light},
            {n:'04', tag:`/03 · ${c.block_code.ec}`, l:scenarios.ec.light},
            {n:'05', tag:`/04 · ${c.block_code.st}`, l:scenarios.st.light},
          ].map(p=>(
            <div key={p.n} className="vd-pdf-page">
              <span className="pp-no">{p.n}</span>
              <span className="pp-tag">{p.tag}</span>
              <span className="pp-h">
                <span className={'pp-dot '+(p.l==='red'?'red':p.l==='amber'?'amb':'gr')}></span>
                {c.stoplight[p.l]}
              </span>
              <div className="pp-line"></div>
              <div className="pp-lines" style={{marginTop:4}}>
                <div className="pp-l"></div>
                <div className="pp-l med"></div>
                <div className="pp-l short"></div>
                <div className="pp-l med"></div>
                <div className="pp-l sienna"></div>
              </div>
            </div>
          ))}
        </div>

        <div className="vd-pdf-meta">
          {c.pdf_meta_a}<br/>
          <b>{c.pdf_meta_b}</b> {c.pdf_meta_c}
        </div>
        <div className="vd-pdf-actions">
          <a className="vd-btn-primary" href={buildHref()} target="_blank" rel="noreferrer" onClick={close}>{c.pdf_dl} <span className="arr">→</span></a>
          <button className="vd-modal-x" onClick={close}>{c.pdf_cancel}</button>
        </div>
      </div>
    </div>
  );
}

// ======================================================
// CONTACT FORM MODAL, "Verder praten"
// ======================================================
function ContactModal({open, close, c, scenarioSummary}){
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [org, setOrg] = React.useState('');
  const [role, setRole] = React.useState('');
  const [msg, setMsg] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [ok, setOk] = React.useState(false);
  const [err, setErr] = React.useState('');

  React.useEffect(()=>{
    if(!open) return;
    const onK = (e)=>{ if(e.key==='Escape') close(); };
    window.addEventListener('keydown', onK);
    return ()=>window.removeEventListener('keydown', onK);
  },[open]);

  React.useEffect(()=>{
    if(!open){ setOk(false); setErr(''); setBusy(false); }
  },[open]);

  if(!open) return null;

  const submit = (e) => {
    e.preventDefault();
    setErr('');
    if(!name.trim() || !email.trim() || !msg.trim()){ setErr(c.form_err_required); return; }
    if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())){ setErr(c.form_err_mail); return; }
    setBusy(true);
    setTimeout(()=>{ setBusy(false); setOk(true); }, 900);
  };

  return (
    <div className="vd-overlay" onClick={close}>
      <div className="vd-modal vd-form-modal" onClick={e=>e.stopPropagation()}>
        <div className="vd-modal-head">
          <span className="vd-modal-num">{c.form_eyebrow}</span>
          <button className="vd-modal-x" onClick={close}>{c.modal_close} ✕</button>
        </div>
        {ok ? (
          <div className="vd-form-ok">
            <h3 className="vd-modal-title">{c.form_ok_h}</h3>
            <p className="vd-modal-sub">{c.form_ok_d}</p>
            <button className="vd-btn-primary" onClick={close}>{c.form_ok_btn} <span className="arr">→</span></button>
          </div>
        ) : (
          <>
            <h3 className="vd-modal-title">{c.form_title_a} <em>{c.form_title_b}</em></h3>
            <p className="vd-modal-sub">{c.form_sub}</p>

            {scenarioSummary && (
              <div className="vd-form-scenario">
                <span className="lbl">{c.sum_tag}</span>
                <span className="val">{scenarioSummary}</span>
              </div>
            )}

            <form className="vd-form" onSubmit={submit} noValidate>
              <div className="vd-form-row">
                <div className="vd-form-field">
                  <label className="vd-form-lab">
                    <span>/01 {c.form_name}</span>
                    <span className="req">{c.form_required}</span>
                  </label>
                  <input className="vd-form-input" type="text" value={name}
                    onChange={e=>setName(e.target.value)} autoFocus required/>
                </div>
                <div className="vd-form-field">
                  <label className="vd-form-lab">
                    <span>/02 {c.form_email}</span>
                    <span className="req">{c.form_required}</span>
                  </label>
                  <input className="vd-form-input" type="email" value={email}
                    onChange={e=>setEmail(e.target.value)} required/>
                </div>
              </div>
              <div className="vd-form-row">
                <div className="vd-form-field">
                  <label className="vd-form-lab">
                    <span>/03 {c.form_org}</span>
                    <span className="opt">{c.form_org_opt}</span>
                  </label>
                  <input className="vd-form-input" type="text" value={org}
                    onChange={e=>setOrg(e.target.value)}/>
                </div>
                <div className="vd-form-field">
                  <label className="vd-form-lab">
                    <span>/04 {c.form_role}</span>
                    <span className="opt">{c.form_org_opt}</span>
                  </label>
                  <input className="vd-form-input" type="text" value={role}
                    onChange={e=>setRole(e.target.value)}/>
                </div>
              </div>
              <div className="vd-form-field">
                <label className="vd-form-lab">
                  <span>/05 {c.form_msg}</span>
                  <span className="req">{c.form_required}</span>
                </label>
                <textarea className="vd-form-input vd-form-textarea" value={msg}
                  onChange={e=>setMsg(e.target.value)}
                  placeholder={c.form_msg_ph} rows="4" required></textarea>
              </div>

              {err && <div className="vd-form-err">{err}</div>}

              <div className="vd-form-actions">
                <button type="submit" className="vd-btn-primary" disabled={busy}>
                  {busy ? c.form_sending : c.form_send} <span className="arr">→</span>
                </button>
                <span className="vd-form-priv">{c.form_privacy}</span>
              </div>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { ThresholdBlock, ShareModal, PdfModal, ContactModal, Info, Stoplight });