// Voordenker, gedeelde chrome (topbar, hero, panel, summary, foot).
// Geladen door zowel Voordenker.html als voordenker-shared.html.

// ============== UPDATE BANNER ==============
function UpdateBanner({ lang, currentVersion, latestVersion, slug }){
  const T = (nl, en) => lang === 'en' ? en : nl;
  const href = slug ? `/?v=${slug}` : `/`;
  return (
    <div className="vd-update-banner" data-screen-label="00 Update banner">
      <div className="vd-update-banner-l">
        <span className="vd-update-tag">{T('UPDATE BESCHIKBAAR', 'UPDATE AVAILABLE')}</span>
        <span className="vd-update-text">
          {T(
            <>Je bekijkt deze Voordenker in <b>v{currentVersion}</b>. Sindsdien is er een nieuwere versie verschenen ({latestVersion?<b>v{latestVersion}</b>:'recenter'}).</>,
            <>You are viewing this Voordenker in <b>v{currentVersion}</b>. A newer version has been released since ({latestVersion?<b>v{latestVersion}</b>:'later'}).</>
          )}
        </span>
      </div>
      <a className="vd-update-cta" href={href}>
        {T('Open in nieuwste versie', 'Open in latest version')} <span className="arr">→</span>
      </a>
    </div>
  );
}

// ============== TOPBAR ==============
function VdTopBar({ lang, setLang, onShare, onPdf, onAdvies, c, shared }){
  return (
    <header className="vd-topbar" data-screen-label="00 Topbar">
      <div className="vd-brand-row">
        <a href="tendro.html" className="vd-brand">
          <span className="vd-brand-mark">T</span>Tendro
        </a>
        <span className="vd-sep"></span>
        <span className="vd-section">
          <span className="vd-section-num">/00</span><b>{c.topbar_section}</b> · {shared ? c.shared_top_pre : c.topbar_section_sub}
        </span>
      </div>
      <div></div>
      <div className="vd-top-right">
        <div className="vd-lang">
          <button className={lang==='nl'?'on':''} onClick={()=>setLang('nl')}>NL</button>
          <span style={{color:'var(--rule)'}}>·</span>
          <button className={lang==='en'?'on':''} onClick={()=>setLang('en')}>EN</button>
        </div>
        {!shared && (
          <>
            <button className="vd-ghost" onClick={onShare}>{c.topbar_share} <span className="arr">→</span></button>
            <button className="vd-btn-primary vd-top-cta" onClick={onAdvies}>{c.topbar_advies || 'Advies op maat'} <span className="arr">→</span></button>
          </>
        )}
        {shared && (
          <a className="vd-ghost vd-ghost-cta" href={`./?lang=${lang}`}>
            {c.shared_cta_btn} <span className="arr">→</span>
          </a>
        )}
      </div>
    </header>
  );
}

// ============== HERO ==============
function VdHero({lang, c}){
  return (
    <section className="vd-hero reveal" data-screen-label="01 Hero">
      <div>
        <div className="vd-hero-eyebrow">{c.hero_eyebrow}</div>
        <h1>
          {c.hero_title_1}<br/><em>{c.hero_title_2}</em>
        </h1>
        <p className="vd-hero-sub">
          {c.hero_sub_a} <b>{c.hero_sub_b}</b>
        </p>
      </div>
      <aside className="vd-hero-aside">
        {c.hero_aside.map((t,i)=>(
          <div key={i}><span className="vd-num">/0{i+1}</span> {t}</div>
        ))}
      </aside>
    </section>
  );
}

// ============== PARAMETER PANEL ==============
function VdPanel({params, set, sticky, mode, setMode, onDone, c, focusField}){
  const woon = (BUILDING.find(x=>x.v===params.geb)||{}).woon;
  const showSub = ['gld','zh'].includes(params.provincie);
  const showGas = params.opgave==='sln' || params.opgave==='ren';
  const subs = (PROVINCIES.find(p=>p.v===params.provincie)||{}).sub || [];

  // Bij openen via een klik op een summary-chip: scroll naar het veld + focus eerste input.
  React.useEffect(()=>{
    if(!focusField) return;
    requestAnimationFrame(()=>{
      const el = document.getElementById('vd-field-'+focusField);
      if(!el) return;
      el.scrollIntoView({behavior:'smooth', block:'center'});
      el.classList.add('vd-field-flash');
      setTimeout(()=>el.classList.remove('vd-field-flash'), 1200);
      const inp = el.querySelector('input, select, button');
      if(inp) inp.focus({preventScroll:true});
    });
  }, [focusField, mode]);

  const gebLabel = (b) => c.building?.[b.v] || b.l;
  const opgLabel = (o) => c.opgaves?.[o.v] || o.l;
  const gasLabel = (g) => c.gas_opt?.[g.v] || g.l;
  const terLabel = (t) => c.teruglev_opt?.[t.v] || t.l;
  const aansExtra = (a) => {
    if(!a.tag) return '';
    if(a.tag==='kleinverbruik-grens') return c.province_extra_low;
    if(a.tag==='zware LS') return c.province_extra_zls;
    if(a.tag==='trafo') return c.province_extra_tr;
    if(a.tag==='grote trafo') return c.province_extra_gtr;
    return a.tag;
  };

  const FieldProvincie = (
    <div className="vd-field" key="prov" id="vd-field-prov">
      <label className="vd-field-lab"><b>{c.f_prov}</b><Info tip={c.tips.prov}/></label>
      <select className="vd-select" value={params.provincie}
        onChange={e=>set({provincie:e.target.value, subregio: (PROVINCIES.find(p=>p.v===e.target.value)?.sub||[null])[0] || ''})}>
        {PROVINCIES.map(p=>(
          <option key={p.v} value={p.v}>{p.l}{p.net?` · ${p.net}`:''}</option>
        ))}
      </select>
    </div>
  );
  const FieldGeb = (
    <div className="vd-field" key="geb" id="vd-field-geb">
      <label className="vd-field-lab"><b>{c.f_geb}</b><Info tip={c.tips.geb}/></label>
      <select className="vd-select" value={params.geb} onChange={e=>set({geb:e.target.value})}>
        {BUILDING.map(b=> <option key={b.v} value={b.v}>{gebLabel(b)}</option>)}
      </select>
    </div>
  );
  const FieldOpgave = (
    <div className="vd-field" key="opg" id="vd-field-opg">
      <label className="vd-field-lab"><b>{c.f_opg}</b><Info tip={c.tips.opg}/></label>
      <div className="vd-radio">
        {OPGAVES.map(o=> (
          <button key={o.v} className={params.opgave===o.v?'on':''} onClick={()=>set({opgave:o.v})}>{opgLabel(o)}</button>
        ))}
      </div>
    </div>
  );
  const FieldBvo = (
    <div className="vd-field" key="bvo" id="vd-field-bvo">
      <label className="vd-field-lab"><b>{c.f_bvo}</b><Info tip={c.tips.bvo}/></label>
      <div className="vd-slider-row">
        <input className="vd-slider" type="range" min="500" max="50000" step="100" value={params.bvo}
          onChange={e=>set({bvo:+e.target.value})}/>
        <div className="vd-slider-val">
          <input type="number" min="0" value={params.bvo}
            onChange={e=>set({bvo:+e.target.value||0})}/>
          <span className="u"> m²</span>
        </div>
      </div>
    </div>
  );
  const FieldAansluit = (
    <div className="vd-field" key="aans" id="vd-field-aans">
      <label className="vd-field-lab"><b>{c.f_aans}</b><Info tip={c.tips.aans}/></label>
      <select className="vd-select" value={params.aansluit} onChange={e=>set({aansluit:e.target.value})}>
        {AANSLUIT.map(a=>(
          <option key={a.v} value={a.v}>
            {a.l} ({a.kva} kVA{a.tag?`, ${aansExtra(a)}`:''})
          </option>
        ))}
      </select>
    </div>
  );

  const Headbar = (
    <div className="vd-panel-headbar">
      <div className="h-l">
        <span><span className="num">{c.panel_eyebrow}</span> <b>{c.panel_title}</b></span>
        <span>· {mode==='basis' ? c.panel_mode_basis_sub : c.panel_mode_uitg_sub}</span>
      </div>
      <div className="h-r">
        <div className="vd-panel-mode">
          <button className={mode==='basis'?'on':''} onClick={()=>setMode('basis')}>{c.panel_mode_basis}</button>
          <button className={mode==='uitgebreid'?'on':''} onClick={()=>setMode('uitgebreid')}>{c.panel_mode_uitg}</button>
        </div>
        <button className="vd-panel-done" onClick={onDone}>
          {c.panel_done} <span className="arr">↑</span>
        </button>
      </div>
    </div>
  );

  return (
    <div className={'vd-panel-shell'+(sticky?'':' nostick')} style={!sticky?{position:'static'}:null}>
      <div className="vd-wrap">
        {Headbar}
        {mode === 'basis' ? (
          <div className="vd-panel basis" data-screen-label="02 Parameter-paneel (basis)">
            <div className="vd-panel-cell">{FieldProvincie}</div>
            <div className="vd-panel-cell">{FieldGeb}</div>
            <div className="vd-panel-cell">{FieldOpgave}</div>
            <div className="vd-panel-cell">{FieldBvo}</div>
            <div className="vd-panel-cell">{FieldAansluit}</div>
          </div>
        ) : (
          <div className="vd-panel full" data-screen-label="02 Parameter-paneel (uitgebreid)">
            <div className="vd-panel-col">
              <div className="vd-panel-col-head">
                <span className="vd-col-num">/01</span>
                <span className="vd-col-title">{c.panel_col_loc}</span>
              </div>
              {FieldProvincie}
              {showSub && (
                <div className="vd-field" id="vd-field-sub">
                  <label className="vd-field-lab"><b>{c.f_sub}</b><Info tip={c.tips.sub}/></label>
                  <div className="vd-radio">
                    {subs.map(s=>(
                      <button key={s} className={params.subregio===s?'on':''} onClick={()=>set({subregio:s})}>{s}</button>
                    ))}
                  </div>
                </div>
              )}
              {FieldGeb}
            </div>
            <div className="vd-panel-col">
              <div className="vd-panel-col-head">
                <span className="vd-col-num">/02</span>
                <span className="vd-col-title">{c.panel_col_opg}</span>
              </div>
              {FieldOpgave}
              {showGas && (
                <div className="vd-field" id="vd-field-gas">
                  <label className="vd-field-lab"><b>{c.f_gas}</b><Info tip={c.tips.gas}/></label>
                  <select className="vd-select" value={params.gas} onChange={e=>set({gas:e.target.value})}>
                    {GAS.map(g=> <option key={g.v} value={g.v}>{gasLabel(g)}</option>)}
                  </select>
                </div>
              )}
              {FieldBvo}
              {woon && (
                <div className="vd-field" id="vd-field-een">
                  <label className="vd-field-lab"><b>{c.f_een}</b><Info tip={c.tips.een}/></label>
                  <input className="vd-input" type="number" min="0" value={params.eenheden}
                    onChange={e=>set({eenheden:+e.target.value||0})}/>
                </div>
              )}
            </div>
            <div className="vd-panel-col">
              <div className="vd-panel-col-head">
                <span className="vd-col-num">/03</span>
                <span className="vd-col-title">{c.panel_col_en}</span>
              </div>
              {FieldAansluit}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ============== PROJECT SUMMARY ==============
function VdSummary({params, onEdit, c}){
  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 woon = build?.woon;
  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;

  // Klik op een chip opent het edit-paneel en focust het bijbehorende veld.
  // In read-only mode (geen onEdit prop) blijven chips gewoon spans.
  const Chip = ({fk, label, value}) => {
    const inner = (<><span className="k">{label}</span><b>{value}</b></>);
    if (!onEdit) return <span className="vd-chip">{inner}</span>;
    return (
      <span
        className="vd-chip vd-chip-btn"
        role="button"
        tabIndex={0}
        title={c.sum_edit || 'Bewerk'}
        onClick={()=>onEdit(fk)}
        onKeyDown={e=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); onEdit(fk); } }}
        style={{cursor:'pointer'}}
      >{inner}</span>
    );
  };

  return (
    <div className="vd-summary" data-screen-label="03 Project samenvatting">
      <div className="vd-summary-tag">{c.sum_tag}</div>
      <div className="vd-summary-chips">
        <Chip fk="geb"  label={c.sum_chip.type} value={gebL}/>
        <Chip fk="opg"  label={c.sum_chip.opg}  value={opgL}/>
        <Chip fk="bvo"  label={c.sum_chip.bvo}  value={`${(+params.bvo).toLocaleString('nl-NL')} m²`}/>
        {woon && <Chip fk="een" label={c.sum_chip.een} value={params.eenheden||0}/>}
        <Chip fk="aans" label={c.sum_chip.aans} value={aans?.l}/>
        {(params.opgave==='sln'||params.opgave==='ren') && <Chip fk="gas" label={c.sum_chip.gas} value={gasL}/>}
        <Chip fk="prov" label={c.sum_chip.loc}  value={`${prov?.l}${params.subregio?'-'+params.subregio:''}`}/>
      </div>
      {onEdit ? (
        <button className="vd-summary-edit" onClick={()=>onEdit()}>
          {c.sum_edit} <span className="arr">↓</span>
        </button>
      ) : (
        <div className="vd-summary-meta">{c.sum_meta}</div>
      )}
    </div>
  );
}

// ============== FOOTER ==============
function VdFoot({lang, c, onContact, version}){
  const v = version || (typeof TOOL_VERSION !== 'undefined' ? TOOL_VERSION : null);
  return (
    <footer className="vd-foot" data-screen-label="08 Afsluiter">
      <div className="vd-foot-talk-col">
        <div className="vd-foot-row">
          <div className="vd-foot-talk">
            {c.foot_talk_a} <em>{c.foot_talk_b}</em>
          </div>
          <button className="vd-btn-primary vd-foot-btn" onClick={onContact}>
            {c.foot_talk_btn} <span className="arr">→</span>
          </button>
        </div>
        <p className="vd-foot-lead" dangerouslySetInnerHTML={{__html: c.foot_talk_lead}}></p>
      </div>
      <div className="vd-foot-meta">
        {c.foot_meta.map((line,i)=>(
          <div key={i}><span className="vd-num">/0{i+1}</span>{i===0?<b>{line}</b>:line}</div>
        ))}
        {v && (
          <div className="vd-foot-version"><span className="vd-num">/0{(c.foot_meta?.length||0)+1}</span>De Voordenker · v{v}</div>
        )}
      </div>
    </footer>
  );
}

Object.assign(window, { VdTopBar, VdHero, VdPanel, VdSummary, VdFoot, UpdateBanner });