// Voordenker, main app composition.
// Chrome components (TopBar, Hero, Panel, Summary, Foot) live in voordenker-chrome.jsx.
// TOOL_VERSION is gedeclareerd in voordenker-data.jsx.

const { useState, useEffect, useMemo, useCallback } = React;

// ===== TWEAK DEFAULTS =====
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fidelity": "hifi",
  "altRhythm": true,
  "stickyPanel": true
}/*EDITMODE-END*/;

// ============== TWEAKS PANEL ==============
function VdTweaks({t, setTweak}){
  const fid = t.fidelity;
  useEffect(()=>{
    document.body.setAttribute('data-fidelity', fid);
  },[fid]);
  return (
    <TweaksPanel>
      <TweakSection title="Iteratie">
        <div className="tweaks-fidelity">
          <div className="seg">
            {['wireframe','midfi','hifi'].map(f=>(
              <button key={f} className={fid===f?'on':''} onClick={()=>setTweak('fidelity', f)}>
                {f==='wireframe'?'wireframe':f==='midfi'?'mid-fi':'hi-fi'}
              </button>
            ))}
          </div>
        </div>
      </TweakSection>
      <TweakSection title="Layout">
        <TweakToggle label="Wissel-ritme blokken (L/R)" value={t.altRhythm} onChange={v=>setTweak('altRhythm', v)}/>
        <TweakToggle label="Sticky parameter-paneel" value={t.stickyPanel} onChange={v=>setTweak('stickyPanel', v)}/>
      </TweakSection>
    </TweaksPanel>
  );
}

// ============== APP ==============
function App(){
  const urlLang = (new URLSearchParams(location.search)).get('lang');
  const sp = new URLSearchParams(location.search);
  const [lang, setLang] = useState(urlLang === 'en' ? 'en' : 'nl');

  // Lokale fallback / oude links: ?p=base64 met JSON-params direct erin.
  const paramsFromBase64 = (()=>{
    const p = sp.get('p');
    if(!p) return null;
    try { return JSON.parse(decodeURIComponent(escape(atob(p)))); } catch(e){ return null; }
  })();

  const [params, setParams] = useState(paramsFromBase64 ? {...window.VD_DEFAULTS, ...paramsFromBase64} : window.VD_DEFAULTS);
  const [blockToggles, setBlockToggles] = useState({});
  const [shareOpen, setShareOpen] = useState(false);
  const [contactOpen, setContactOpen] = useState(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [panelOpen, setPanelOpen] = useState(false);
  const [panelMode, setPanelMode] = useState('basis');
  const [focusField, setFocusField] = useState(null);

  // Velden die alleen in 'uitgebreid' mode getoond worden
  const UITGEBREID_ONLY = React.useMemo(()=>new Set(['gas','een','sub']), []);

  const openEdit = useCallback((fieldKey)=>{
    if (fieldKey && UITGEBREID_ONLY.has(fieldKey)) setPanelMode('uitgebreid');
    setFocusField(fieldKey || null);
    setPanelOpen(true);
  }, [UITGEBREID_ONLY]);

  const closeEdit = useCallback(()=>{
    setPanelOpen(false);
    setFocusField(null);
  }, []);

  // ===== Update-banner state (alleen actief op archived versies bij ?update=1) =====
  const isUpdated = sp.get('update') === '1';
  const slugFromUrl = sp.get('v'); // legacy support: oude ?v=slug links worden niet meer geladen (geen DB), maar de URL-param breekt niets
  const latestVersion = sp.get('latest');

  // Share-link decoding gebeurt volledig in de URL (?p=base64), zie hierboven.
  // Geen backend-fetch meer nodig; api/share.php is verwijderd uit deze build.

  const c = (window.COPY_VD || {})[lang] || (window.COPY_VD||{}).nl || {};

  const set = useCallback((patch)=> setParams(p => ({...p, ...patch})), []);
  const setToggle = useCallback((block, k)=>{
    setBlockToggles(t => ({...t, [block]: {...(t[block]||{}), [k]: !((t[block]||{})[k])}}));
  },[]);

  useEffect(()=>{
    const obs = new IntersectionObserver(es => {
      es.forEach(e => { if(e.isIntersecting){ e.target.classList.add('in'); obs.unobserve(e.target);} });
    }, {threshold: 0.08});
    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return ()=> obs.disconnect();
  },[lang]);

  const sc = useMemo(()=>({
    ro: blockRO(params, lang),
    en: blockEnergie(params, lang),
    ec: blockEcologie(params, lang),
    st: blockStico(params, lang),
  }), [params, lang]);

  const prov = PROVINCIES.find(p=>p.v===params.provincie);
  const build = BUILDING.find(b=>b.v===params.geb);
  const opg = OPGAVES.find(o=>o.v===params.opgave);
  const aans = aansluitInfo(params.aansluit);
  const gas = GAS.find(g=>g.v===params.gas);
  const gebL = c.building?.[build?.v] || build?.l;
  const opgL = c.opgaves?.[opg?.v] || opg?.l;
  const gasL = c.gas_opt?.[gas?.v] || gas?.l;
  const summary = `${gebL} · ${opgL} · ${(+params.bvo).toLocaleString('nl-NL')} m² ${c.f_bvo||'BVO'} · ${aans?.l} · ${gasL||'-'} · ${prov?.l}${params.subregio?'-'+params.subregio:''}`;

  const altRhythm = tweaks.altRhythm !== false;
  const sticky = tweaks.stickyPanel !== false;

  return (
    <>
      {isUpdated && (
        <UpdateBanner lang={lang} currentVersion={TOOL_VERSION} latestVersion={latestVersion} slug={slugFromUrl}/>
      )}
      <VdTopBar lang={lang} setLang={setLang} c={c}
        onShare={()=>setShareOpen(true)} onAdvies={()=>setContactOpen(true)}/>
      <div className="vd-wrap"><VdHero lang={lang} c={c}/></div>
      {panelOpen ? (
        <VdPanel
          params={params} set={set} sticky={sticky}
          mode={panelMode} setMode={setPanelMode}
          onDone={closeEdit} c={c}
          focusField={focusField}/>
      ) : (
        <div className={'vd-panel-shell'+(sticky?'':' nostick')} style={!sticky?{position:'static'}:null}>
          <VdSummary params={params} onEdit={openEdit} c={c}/>
        </div>
      )}
      <div className="vd-wrap">
        <div className="vd-blocks">
          <ThresholdBlock
            num="01" code={c.block_code.ro} side={altRhythm?'left':'left'}
            scenario={sc.ro} c={c}
            tree={<TreeRO route={sc.ro.route}/>}
            toggles={blockToggles.ro}
            setToggle={(k)=>setToggle('ro',k)}/>
          <ThresholdBlock
            num="02" code={c.block_code.en} side={altRhythm?'right':'left'}
            scenario={sc.en} c={c}
            tree={<TreeEnergie route={sc.en.route} dem={sc.en.dem?.kva} got={sc.en.got}/>}
            toggles={blockToggles.en}
            setToggle={(k)=>setToggle('en',k)}/>
          <ThresholdBlock
            num="03" code={c.block_code.ec} side={altRhythm?'left':'left'}
            scenario={sc.ec} c={c}
            tree={<TreeEcologie route={sc.ec.route}/>}
            toggles={blockToggles.ec}
            setToggle={(k)=>setToggle('ec',k)}/>
          <ThresholdBlock
            num="04" code={c.block_code.st} side={altRhythm?'right':'left'}
            scenario={sc.st} c={c}
            tree={<TreeStico route={sc.st.route}/>}
            toggles={blockToggles.st}
            setToggle={(k)=>setToggle('st',k)}/>
        </div>
        <VdFoot lang={lang} c={c} onContact={()=>setContactOpen(true)}/>
      </div>
      <ShareModal open={shareOpen} close={()=>setShareOpen(false)} params={params} c={c} lang={lang}/>
      <ContactModal open={contactOpen} close={()=>setContactOpen(false)} c={c} scenarioSummary={summary}/>
      <VdTweaks t={tweaks} setTweak={setTweak}/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);