// Voordenker, beslisbomen per drempel.
// Flow-stijl: één rootvraag bovenaan, 2 of 3 kolommen, elke kolom is een
// volledige route met (1) keuze, (2) uitkomst, (3) duur/detail.
// Sienna-route gemarkeerd, niet-gekozen kolommen gedimd.

const VD_TREE_W = 420;
const VD_TREE_H = 300;

// Generic FlowTree, used by all four scenarios.
function FlowTree({question, cols, activeId, code}){
  const xs = cols.length === 2 ? [140, 280]
           : cols.length === 3 ? [70, 210, 350]
           : [50, 175, 305, 400];
  return (
    <svg className="vd-tree-svg" viewBox={`0 0 ${VD_TREE_W} ${VD_TREE_H}`} xmlns="http://www.w3.org/2000/svg">
      {/* Root question */}
      <rect x={VD_TREE_W/2 - 110} y="10" width="220" height="44" rx="2"
        className="node ring on"/>
      <text x={VD_TREE_W/2} y="32" className="nlbl" textAnchor="middle" style={{fill:'var(--ink)', fontWeight:700}}>{question}</text>
      <text x={VD_TREE_W/2} y="46" className="ntag" textAnchor="middle" style={{fill:'var(--sienna)', fontWeight:700}}>{code}</text>

      {cols.map((col, i) => {
        const x = xs[i];
        const active = col.id === activeId;
        const cls = active ? '' : ' dim';
        return (
          <g key={col.id || i}>
            {/* edge: root → branch */}
            <path d={`M ${VD_TREE_W/2},54 C ${VD_TREE_W/2},85 ${x},85 ${x},110`}
              className={'edge'+(active?' on':' dim')} fill="none"/>

            {/* Branch label box */}
            <rect x={x-58} y="110" width="116" height="38" rx="2"
              className={'node ring'+(active?' on':' dim')}/>
            <text x={x} y="134" className={'nlbl'+cls} textAnchor="middle"
              style={{fontWeight: active ? 700 : 500}}>{col.name}</text>

            {/* edge: branch → outcome */}
            <line x1={x} y1="148" x2={x} y2="178"
              className={'edge'+(active?' on':' dim')}/>
            <polygon points={`${x-4},176 ${x+4},176 ${x},182`}
              className={'edge'+(active?' on':' dim')}
              style={{fill: active ? 'var(--sienna)' : 'var(--rule)', stroke:'none'}}/>

            {/* Outcome leaf */}
            <rect x={x-60} y="184" width="120" height="58" rx="2"
              className={'node leaf'+(active?' on':' dim')}/>
            <text x={x} y="207" className={'nlbl'+cls} textAnchor="middle"
              style={{fontWeight: active ? 700 : 500}}>{col.outcome}</text>
            <text x={x} y="222" className={'ntag'+cls} textAnchor="middle">
              {(() => {
                const d = col.detail || '';
                if(d.length <= 16) return d;
                const words = d.split(' ');
                const mid = Math.ceil(words.length / 2);
                const l1 = words.slice(0, mid).join(' ');
                const l2 = words.slice(mid).join(' ');
                return [
                  <tspan key="a" x={x} dy="0">{l1}</tspan>,
                  <tspan key="b" x={x} dy="11">{l2}</tspan>,
                ];
              })()}
            </text>

            {/* Duration / extra below */}
            <text x={x} y="268" className={'ntag'+cls} textAnchor="middle"
              style={{fontWeight: active ? 700 : 400, fill: active ? 'var(--sienna)' : 'var(--ash)'}}>
              {col.duration || ''}
            </text>
          </g>
        );
      })}
    </svg>
  );
}

// =====================================================
// /01 RO , route: a-binnenplans/a-renovatie | b-bopa | c-omgevingsplan
// =====================================================
function TreeRO({route}){
  // Map RO-routes naar procedure-zwaarte: binnenplans | BOPA | omgevingsplan wijzigen
  const A = ['a-renovatie','a-binnenplans'].includes(route);
  const C = ['c-omgevingsplan'].includes(route);
  let activeId = 'col-a';
  if(C) activeId = 'col-c';
  else if(!A) activeId = 'col-b'; // b-bopa
  return (
    <FlowTree
      question="Past het in het omgevingsplan?"
      code="RO-PROCEDURE"
      activeId={activeId}
      cols={[
        {id:'col-a', name:'Binnenplans',  outcome:'Regulier',      detail:'past in omgevingsplan',    duration:'~8 wk'},
        {id:'col-b', name:'Wijkt af',     outcome:'BOPA',          detail:'afwijken omgevingsplan',   duration:'8 wk +6'},
        {id:'col-c', name:'Structureel',  outcome:'Plan wijzigen', detail:'beroep bij Raad van State', duration:'9-18 mnd'},
      ]}
    />
  );
}

// =====================================================
// /02 Energie, route: green | amber | red
// =====================================================
function TreeEnergie({route, dem, got}){
  const r = String(route || '');
  let activeId = 'col-green';
  if(r === 'amber' || r.indexOf('oranje') === 0) activeId = 'col-amber';
  if(r === 'red'   || r.indexOf('rood')   === 0) activeId = 'col-red';

  let amberOutcome = 'Schaal of accu', amberDetail = '1 stap zwaarder', amberDuration = 'enkele mnd';
  let redOutcome   = 'Routes',         redDetail   = 'zwaarder of mitigatie', redDuration = '1-3 jaar';

  if(r === 'oranje-gas')                { amberOutcome = 'Gas dekt piek';   amberDetail = 'hybride WP + ketel'; amberDuration = 'tot 2035'; }
  else if(r === 'oranje-accu-passend')  { amberOutcome = 'Accu past';       amberDetail = 'meerdaagse kou OK';  amberDuration = 'enkele mnd'; }
  else if(r === 'oranje-accu-krap')     { amberOutcome = 'Accu krap';       amberDetail = 'weinig marge';        amberDuration = 'enkele mnd'; }
  else if(r === 'oranje-bron')          { amberOutcome = 'Bron-keuze';      amberDetail = 'lucht of bodem';      amberDuration = '4-8 weken'; }
  else if(r === 'oranje-terug')         { amberOutcome = 'Terug-cong';      amberDetail = 'accu + eigen verbruik'; amberDuration = 'salderen 2027'; }
  else if(r === 'oranje-krap')          { amberOutcome = 'Krap, geen marge'; amberDetail = '< 20% buffer';       amberDuration = 'beslissen nu'; }

  if(r === 'rood-overdim')              { redOutcome = 'Overdimensie';   redDetail = 'piek > 200%';           redDuration = 'pad herzien'; }
  else if(r === 'rood-zorg')            { redOutcome = '24/7 zorg';      redDetail = 'basislast hoog';        redDuration = 'bron sleutel'; }
  else if(r === 'rood-accu-niet')       { redOutcome = 'Accu faalt';     redDetail = 'nacht-laadbalans neg.'; redDuration = 'ATO of gas'; }
  else if(r === 'rood-cong')            { redOutcome = 'Wachtrij';       redDetail = 'congestie + tekort';    redDuration = '18-36 mnd'; }

  return (
    <FlowTree
      question={dem!=null ? `Vraag ${dem} kVA vs ${got||0} kVA` : 'Aansluiting vs vraag'}
      code="ENERGIE"
      activeId={activeId}
      cols={[
        {id:'col-green', name:'Past comfortabel',  outcome:'Marge OK',     detail:'PV + laden inpasbaar', duration:'geen ingreep'},
        {id:'col-amber', name:'Krap of mitigatie', outcome:amberOutcome,    detail:amberDetail,            duration:amberDuration},
        {id:'col-red',   name:'Tekort',            outcome:redOutcome,      detail:redDetail,              duration:redDuration},
      ]}
    />
  );
}

// =====================================================
// /03 Ecologie, route: a-quick | b-aerius
// =====================================================
function TreeEcologie({route}){
  const activeId = route === 'b-aerius' ? 'col-b' : 'col-a';
  return (
    <FlowTree
      question="Nabij Natura 2000?"
      code="ECOLOGIE"
      activeId={activeId}
      cols={[
        {id:'col-a', name:'Geen N2000 nabij', outcome:'Quickscan',         detail:'flora en fauna',     duration:'enkele weken'},
        {id:'col-b', name:'N2000 nabij',      outcome:'AERIUS + salderen', detail:'emissieloos materieel',     duration:'mnd-traject'},
      ]}
    />
  );
}

// =====================================================
// /04 STICO, route: green | amber | red
// =====================================================
function TreeStico({route}){
  let activeId = 'col-green';
  if(route === 'amber') activeId = 'col-amber';
  if(route === 'red') activeId = 'col-red';
  return (
    <FlowTree
      question="VNG-norm vs marktprijs"
      code="STICHTINGSKOSTEN"
      activeId={activeId}
      cols={[
        {id:'col-green', name:'Binnen marge', outcome:'Norm dekt',     detail:'go zonder herijking', duration:''},
        {id:'col-amber', name:'Krap, < 20%',  outcome:'Scope of consult', detail:'PvE trimmen of markt',  duration:'enkele mnd'},
        {id:'col-red',   name:'Tekort > 20%', outcome:'Herijking',     detail:'bouwteam · faseren',  duration:'bestuurstraject'},
      ]}
    />
  );
}

Object.assign(window, { TreeRO, TreeEnergie, TreeEcologie, TreeStico, FlowTree });