/*!
 * Tectum
 * Copyright © 2026 Machiel Heinen.
 * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
 * Zie LICENTIE.md.
 */

// Light-versie voor de modelpagina's: één model in 3D, een paar keuzes en de kerncijfers; opslaan = PDF met
// aanzichten en plattegrond. Alle logica in LightModel (en daarachter de gewone modellen).
// Inbedden: <div class="tectum-light" data-model="amstel" data-url="…"></div> (vanzelf gemount), of
// TectumLight.mount(el, { model, frames, url }); url = adres voor de QR-code in de PDF (standaard de modelpagina).
window.TectumLight = (() => {
  const esc = UI.esc;
  const nl = (n, d = 0) => n.toLocaleString('nl-NL', { minimumFractionDigits: d, maximumFractionDigits: d });
  const meters = (mm) => `${nl(mm / 1000, 2)} m`;
  const clone = (o) => JSON.parse(JSON.stringify(o));

  // Doorsnede: snijhoogte boven de vloer (mm), zoals de doorsnede van de configurator.
  const SECTION = { start: 1500, min: 300, max: 3000 };
  const HINTS = { '3d': 'Slepen = draaien · rechts slepen = schuiven · klik en scroll = zoomen', cut: 'Slepen = draaien · klik en scroll = zoomen', plan: 'Noord boven · maten in mm' };

  // tl-wrap is het raster; .tectum-light zelf is de container voor de container queries (breedte van de tool, niet
  // van het scherm: in de HUGO-site staat hij in een Bootstrap col-12).
  const TEMPLATE = `<div class="tl-wrap">
    <div class="tl-stage">
      <div class="tl-3d"></div>
      <canvas class="tl-plan" aria-label="Plattegrond, noord boven"></canvas>
      <div class="tl-viewbar" role="group" aria-label="Weergave">
        <button type="button" data-view="3d" class="on"><i class="bi bi-badge-3d"></i>3D</button>
        <button type="button" data-view="cut" title="Wanden afgesneden op een hoogte boven de vloer"><i class="bi bi-scissors"></i>Doorsnede</button>
        <button type="button" data-view="plan"><i class="bi bi-grid-1x2"></i>Plattegrond</button>
      </div>
      <label class="tl-cutbar"><span>Snijhoogte</span>
        <input type="range" min="${SECTION.min}" max="${SECTION.max}" step="50" value="${SECTION.start}" aria-label="Snijhoogte boven de vloer">
        <output>${meters(SECTION.start)}</output></label>
      <div class="tl-hint"></div>
      <div class="tl-busy" aria-live="polite"><span class="tl-spinner"></span>Berekenen…</div>
      <div class="tl-toast" role="status" aria-live="polite"></div>
    </div>
    <aside class="tl-panel">
      <header class="tl-head"><h2 class="tl-title"></h2><div class="tl-sub"></div></header>
      <div class="tl-sections"></div>
      <div class="tl-facts"></div>
      <div class="tl-buy"></div>
    </aside></div>`;

  function mount(root, opts) {
    const o = opts || {};
    const model = LightModel.create(o.model || root.dataset.model, { frames: o.frames });
    let ch = clone(model.initial);
    let unitSel = model.base.units[0].id;
    let cur = null; // { st, parts, info }
    root.classList.add('tectum-light');
    root.innerHTML = TEMPLATE;
    const $ = (sel) => root.querySelector(sel);
    $('.tl-title').textContent = model.label;

    // 3D: afgewerkte woning (zoals de render-export), dag-omgeving.
    const stage = $('.tl-3d');
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdfe6ec);
    const camera = new THREE.PerspectiveCamera(40, 1, 0.1, 400);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
    renderer.shadowMap.enabled = true;
    renderer.localClippingEnabled = true;
    stage.appendChild(renderer.domElement);
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    const ambient = new THREE.AmbientLight(0xffffff, 0.6);
    const sun = new THREE.DirectionalLight(0xffffff, 0.8);
    sun.position.set(5, 8, 5);
    scene.add(ambient, sun);
    const sky = Skybox.createEnvironment(scene);
    const mats = {
      wallMaterials: WallModel.createMaterials(), floorMaterials: FloorModel.createMaterials(), roofMaterials: RoofModel.createMaterials(),
      lightingMaterials: LightingModel.createMaterials(), sandwichMaterials: SandwichModel.createMaterials(), postMaterials: PostModel.createMaterials(),
      chimneyMaterials: ChimneyModel.createMaterials(), elektraMaterials: ElektraModel.createMaterials()
    };
    const S0 = model.base.settings;
    if (S0.interiorPaint) mats.wallMaterials.spaanplaatMaterial.color.set(S0.interiorColor);
    mats.roofMaterials.ceilingMaterial.color.set(S0.ceilingColor || '#f4f3ef');
    const compute = (st) => HouseModel.computeParts(st, Object.assign({ layers: ViewLayers.all(), finishedOnly: true }, mats));
    const disposeGeo = (g) => g && g.traverse(x => { if (x.geometry) x.geometry.dispose(); });
    const rootsOf = (p) => p.units.map(u => u.floorGroup).concat(HouseModel.allWallPieces(p).map(x => x.group), p.units.map(u => u.roof.group),
      [p.roofEdgeGroup, p.postsGroup, p.chimneysGroup, p.sandwichGroup, p.lightingGroup, p.elektraGroup, p.roomsGroup, p.fixturesGroup]).filter(Boolean);

    // Weergave: 3D, doorsnede (dak en lampen weg, wanden en wat erin zit afgesneden, snede wit afgedekt) of plattegrond.
    let group = null, caps = null, view = '3d', fitted = false, center = { x: 0, z: 0, size: 10 }, sectionMM = SECTION.start;
    const poses = {};
    const cutPlane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0);
    const capMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
    function clip(g, planes) {
      if (g) g.traverse(x => (Array.isArray(x.material) ? x.material : x.material ? [x.material] : []).forEach(m => {
        if ((m.clippingPlanes || []).length === planes.length) return;
        m.clippingPlanes = planes;
        m.needsUpdate = true;
      }));
    }
    function applyView() {
      if (!cur) return;
      const p = cur.parts, cut = view === 'cut';
      p.units.forEach(u => { if (u.roof.group) u.roof.group.visible = !cut; });
      [p.roofEdgeGroup, p.postsGroup].forEach(g => { if (g) g.visible = !cut; });
      if (p.roomsGroup && p.roomsGroup.userData.ceilings) p.roomsGroup.userData.ceilings.visible = !cut;
      const planes = cut ? [cutPlane] : [];
      HouseModel.allWallPieces(p).forEach(x => clip(x.group, planes));
      // Lampen snijden mee: binnenspots onder de snijhoogte blijven zichtbaar, niets zweeft.
      [p.elektraGroup, p.chimneysGroup, p.roomsGroup, p.fixturesGroup, p.lightingGroup].forEach(g => clip(g, planes));
      placeCut();
      if (view === 'plan') drawPlan();
    }
    // Snijvlak en witte afdekking op de snijhoogte; alleen dit bij het schuiven.
    function placeCut() {
      const p = cur.parts, floorTop = Math.max(...p.units.map(u => u.layout.floorTop));
      cutPlane.constant = (floorTop + sectionMM) * 0.001;
      if (caps) { group.remove(caps); disposeGeo(caps); caps = null; }
      if (view === 'cut') { caps = HouseModel.sectionCaps(p, floorTop + sectionMM, capMaterial, ViewLayers.all()); group.add(caps); }
    }
    const cutInput = $('.tl-cutbar input');
    // Niet hoger dan de goot (plat dak: de dakhoogte); bij units met een andere goot de laagste, zodat de snede altijd
    // door alle gevels gaat. Loopt mee met de gekozen hoogte.
    function fitCutRange() {
      const lows = ch.house ? [ch.house.low] : Object.values(ch.units).map(u => u.low);
      const max = Math.max(SECTION.min, Math.floor(Math.min(...lows) / 50) * 50);
      cutInput.max = max;
      if (sectionMM > max) sectionMM = max;
      cutInput.value = sectionMM;
      $('.tl-cutbar output').textContent = meters(sectionMM);
    }
    cutInput.addEventListener('input', () => {
      sectionMM = Number(cutInput.value);
      $('.tl-cutbar output').textContent = meters(sectionMM);
      if (cur) placeCut();
    });
    // Elke weergave onthoudt zijn eigen camerastand; de doorsnede begint schuin van boven.
    function setView(v) {
      if (v === view) return;
      if (view !== 'plan') poses[view] = { pos: camera.position.clone(), target: controls.target.clone() };
      view = v;
      if (v !== 'plan') {
        const pose = poses[v];
        if (pose) { camera.position.copy(pose.pos); controls.target.copy(pose.target); }
        else {
          controls.target.set(center.x, 0.6, center.z);
          camera.position.set(center.x - center.size * 0.45, center.size * 1.05 + 2, center.z + center.size * 0.75);
        }
        controls.update();
      }
      root.classList.toggle('view-plan', v === 'plan');
      root.classList.toggle('view-cut', v === 'cut');
      root.querySelectorAll('[data-view]').forEach(b => b.classList.toggle('on', b.dataset.view === v));
      $('.tl-hint').textContent = HINTS[v];
      applyView();
    }
    $('.tl-hint').textContent = HINTS['3d'];
    root.querySelector('.tl-viewbar').addEventListener('click', (e) => { const b = e.target.closest('[data-view]'); if (b) setView(b.dataset.view); });

    function show(st, parts) {
      if (group) { scene.remove(group); disposeGeo(group); caps = null; }
      fitCutRange();
      HouseModel.placeGroups(parts);
      group = new THREE.Group();
      rootsOf(parts).forEach(g => group.add(g));
      scene.add(group);
      cur = { st, parts, info: LightModel.summary(st, parts) };
      const rs = parts.rects, toM = 0.001;
      const bx0 = Math.min(...rs.map(r => r.x0)), bx1 = Math.max(...rs.map(r => r.x1));
      const bz0 = Math.min(...rs.map(r => r.z0)), bz1 = Math.max(...rs.map(r => r.z1));
      center = { x: (bx0 + bx1) / 2 * toM, z: (bz0 + bz1) / 2 * toM, size: Math.max(bx1 - bx0, bz1 - bz0) * toM };
      const groundY = (Math.max(...parts.units.map(u => u.layout.floorTop)) - st.settings.groundLevel - 2) * toM;
      sky.fitTo(group, groundY);
      Skybox.apply('day', { env: sky, controls, sun, ambient, base: { ambient: 0.6, sun: 0.8 }, shadowRoot: group });
      if (!fitted) {
        controls.target.set(center.x, 1.2, center.z);
        camera.position.set(center.x - center.size * 0.9, center.size * 0.7, center.z - center.size * 1.3);
        controls.update();
        fitted = true;
      }
      applyView();
      HousePdf.materialThumbUrls(st).forEach(PdfSheet.preloadImage);
      renderPanel();
      renderSummary();
    }

    // Plattegrond (noord boven): ruimtes met naam en netto m², wanden met kozijnen en draairichting, inrichting,
    // dakrand, palen en de buitenmaten. Zelfde gegevens als de PDF-plattegrond.
    function drawPlan() {
      const cv = $('.tl-plan'), W = cv.clientWidth, H = cv.clientHeight;
      if (!cur || !W || !H) return;
      const dpr = Math.min(2, window.devicePixelRatio || 1);
      cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
      const ctx = cv.getContext('2d');
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, W, H);
      const p = cur.parts, rs = p.rects;
      const ext = rs.concat(p.units.map(u => u.roof.rect));
      const bx0 = Math.min(...ext.map(r => r.x0)), bx1 = Math.max(...ext.map(r => r.x1));
      const bz0 = Math.min(...ext.map(r => r.z0)), bz1 = Math.max(...ext.map(r => r.z1));
      const top = 64, side = 56;
      const scale = Math.min((W - 2 * side) / (bx1 - bx0), (H - top - side) / (bz1 - bz0));
      const ox = W / 2 - (bx0 + bx1) / 2 * scale, oy = top + (H - top - side) / 2 - (bz0 + bz1) / 2 * scale;
      const P = (x, z) => [ox + x * scale, oy + z * scale];
      const path = (pts, closed) => { ctx.beginPath(); pts.forEach((q, i) => ctx[i ? 'lineTo' : 'moveTo'](...P(q.x, q.z))); if (closed) ctx.closePath(); };
      const corners = (pl, lx0, lx1) => { const t = pl.thickness / 2; return [[lx0, -t], [lx1, -t], [lx1, t], [lx0, t]].map(([a, b]) => UnitModel.localToWorld(pl, a, b)); };
      const rgba = (hex, a) => `rgba(${parseInt(hex.slice(1, 3), 16)}, ${parseInt(hex.slice(3, 5), 16)}, ${parseInt(hex.slice(5, 7), 16)}, ${a})`;
      ctx.lineJoin = 'round';

      // Dakrand
      ctx.setLineDash([5, 4]); ctx.strokeStyle = '#9aa3ad'; ctx.lineWidth = 1;
      if (p.roofEdge) p.roofEdge.segments.forEach(sg => { path([sg.outerA, sg.outerB]); ctx.stroke(); });
      else p.units.forEach(u => { const [x, y] = P(u.roof.rect.x0, u.roof.rect.z0); ctx.strokeRect(x, y, u.roof.rect.W * scale, u.roof.rect.D * scale); });
      ctx.setLineDash([]);

      // Ruimtes
      const R = p.rooms;
      R.rooms.forEach(r => { ctx.fillStyle = rgba(r.color, 0.22); r.rects.forEach(c => { const [x, y] = P(c.x0, c.z0); ctx.fillRect(x, y, (c.x1 - c.x0) * scale, (c.z1 - c.z0) * scale); }); });

      // Inrichting
      (p.fixtures || []).forEach(it => FixtureModel.planShapes(it).forEach(sh => {
        ctx.strokeStyle = '#8b939b';
        ctx.lineWidth = sh.kind === 'thin' ? 0.6 : 1;
        ctx.setLineDash(sh.kind === 'dash' ? [3, 3] : []);
        if (sh.circle) { ctx.beginPath(); ctx.arc(...P(sh.circle.x, sh.circle.z), Math.max(1, sh.circle.r * scale), 0, Math.PI * 2); ctx.stroke(); return; }
        if (sh.text) return;
        path(sh.pts, sh.closed);
        if (sh.fill) { ctx.fillStyle = 'rgba(139, 147, 155, 0.18)'; ctx.fill(); }
        ctx.stroke();
      }));
      ctx.setLineDash([]);

      // Wanden met openingen en kozijnsymbolen
      const piece = (x, fill) => {
        const pl = x.place, Wp = pl.width;
        path(corners(pl, -Wp / 2, Wp / 2), true);
        ctx.fillStyle = fill; ctx.fill();
        x.config.openings.filter(op => op.type !== 'schoorsteen').forEach(op => {
          path(corners(pl, -Wp / 2 + op.x, -Wp / 2 + op.x + op.w), true);
          ctx.fillStyle = '#ffffff'; ctx.fill();
          ctx.strokeStyle = '#33383d'; ctx.lineWidth = 0.8; ctx.stroke();
          if (!op.fill) return;
          KozijnModel.planSymbol(op, op.fill, { zIn: -pl.thickness / 2, zOut: pl.thickness / 2 }).forEach(sh => {
            ctx.lineWidth = sh.kind === 'leaf' ? 1.3 : 0.8;
            ctx.setLineDash(sh.kind === 'arc' || sh.kind === 'rail' ? [3, 3] : []);
            path(sh.pts.map(q => UnitModel.localToWorld(pl, -Wp / 2 + op.x + q.x, q.z)), !!sh.closed);
            ctx.stroke();
          });
          ctx.setLineDash([]);
        });
      };
      p.units.forEach(u => u.walls.forEach(w => w.pieces.forEach(x => piece(x, '#3d4247'))));
      p.interior.forEach(x => piece(x, '#7a828a'));
      ctx.fillStyle = '#a07c54';
      p.posts.posts.forEach(pp => { const [x, y] = P(pp.x - pp.size / 2, pp.z - pp.size / 2); ctx.fillRect(x, y, pp.size * scale, pp.size * scale); });
      p.posts.walls.forEach(w => { const [x, y] = P(w.x0, w.z0); ctx.fillStyle = '#3d4247'; ctx.fillRect(x, y, (w.x1 - w.x0) * scale, (w.z1 - w.z0) * scale); });
      (p.chimneys || []).forEach(c => { path(c.footprint, true); ctx.fillStyle = '#8b8f93'; ctx.fill(); });
      // Binnenspots
      ctx.fillStyle = '#ffd36b'; ctx.strokeStyle = '#a07a1e'; ctx.lineWidth = 0.8;
      (p.lighting.indoor || []).forEach(sp => { ctx.beginPath(); ctx.arc(...P(sp.x, sp.z), Math.max(2.5, 90 * scale), 0, Math.PI * 2); ctx.fill(); ctx.stroke(); });

      // Ruimtenamen
      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
      const fs = Math.max(9, Math.min(13, scale * 260));
      R.rooms.forEach(r => {
        const [x, y] = P(r.label.x, r.label.z);
        ctx.fillStyle = '#212121'; ctx.font = `600 ${fs}px sans-serif`;
        ctx.fillText(r.name, x, y - fs * 0.6);
        ctx.fillStyle = '#5b6673'; ctx.font = `${fs * 0.9}px sans-serif`;
        ctx.fillText(`${nl(r.areaM2, 1)} m²`, x, y + fs * 0.6);
      });

      // Buitenmaten (units) en noordpijl
      const ux0 = Math.min(...rs.map(r => r.x0)), ux1 = Math.max(...rs.map(r => r.x1));
      const uz0 = Math.min(...rs.map(r => r.z0)), uz1 = Math.max(...rs.map(r => r.z1));
      ctx.strokeStyle = '#1d5f99'; ctx.fillStyle = '#1d5f99'; ctx.lineWidth = 1; ctx.font = '12px sans-serif';
      const dim = (a, b, horiz, at) => {
        const [x0, y0] = horiz ? P(a, 0) : P(0, a), [x1, y1] = horiz ? P(b, 0) : P(0, b);
        const A = horiz ? [x0, at] : [at, y0], B = horiz ? [x1, at] : [at, y1];
        ctx.beginPath(); ctx.moveTo(...A); ctx.lineTo(...B);
        [A, B].forEach(([x, y]) => { ctx.moveTo(x - 4, y + 4); ctx.lineTo(x + 4, y - 4); ctx.moveTo(...(horiz ? [x, y - 6] : [x - 6, y])); ctx.lineTo(...(horiz ? [x, y + 6] : [x + 6, y])); });
        ctx.stroke();
        ctx.save();
        ctx.translate((A[0] + B[0]) / 2, (A[1] + B[1]) / 2);
        if (!horiz) ctx.rotate(-Math.PI / 2);
        ctx.fillText(nl(Math.round(b - a)), 0, -9);
        ctx.restore();
      };
      dim(ux0, ux1, true, P(0, bz0)[1] - 22);
      dim(uz0, uz1, false, P(bx0, 0)[0] - 22);
      const nx = W - 28, ny = top + 6;
      ctx.beginPath(); ctx.moveTo(nx, ny); ctx.lineTo(nx - 7, ny + 18); ctx.lineTo(nx + 7, ny + 18); ctx.closePath(); ctx.fill();
      ctx.fillText('N', nx, ny + 30);
    }

    // Keuze doorrekenen; past de indeling niet, dan blijft de vorige keuze staan. Bij een maat (fit) eerst de
    // dichtstbijzijnde maat zoeken die nog wel past.
    let toastTimer = null;
    function toast(msg) {
      const t = $('.tl-toast');
      t.textContent = msg;
      t.classList.add('on');
      clearTimeout(toastTimer);
      toastTimer = setTimeout(() => t.classList.remove('on'), 5000);
    }
    let busy = false;
    function tryApply(next, fit) {
      if (busy) return;
      busy = true;
      root.classList.add('is-busy');
      setTimeout(() => {
        try {
          let st = LightModel.build(model, next), parts = compute(st);
          let msg = LightModel.check(model, st, parts), note = null;
          if (msg && fit) {
            rootsOf(parts).forEach(disposeGeo);
            const v = LightModel.fit(model, next, fit.set, fit.ok, fit.want);
            if (v !== fit.ok) {
              fit.set(next, v);
              st = LightModel.build(model, next);
              parts = compute(st);
              note = `${msg} Dichtstbijzijnde maat die past: ${meters(v)}.`;
              msg = LightModel.check(model, st, parts);
            } else parts = null;
          }
          if (msg) {
            if (parts) rootsOf(parts).forEach(disposeGeo);
            toast(msg);
            renderPanel();
          } else {
            ch = next;
            show(st, parts);
            if (note) toast(note);
          }
        } catch (err) {
          console.error(err);
          toast('Dit kon niet worden doorgerekend.');
          renderPanel();
        }
        busy = false;
        root.classList.remove('is-busy');
      }, 30);
    }

    // Paneel: alleen keuzes, geen vrije invoer.
    const field = (label, html, extra, cls) => `<div class="tl-field${cls ? ' ' + cls : ''}"><div class="tl-label"><span>${label}</span>${extra ? `<span class="tl-val">${extra}</span>` : ''}</div>${html}</div>`;
    // disabled(k) geeft false of de reden (tooltip).
    const seg = (key, options, value, disabled) => `<div class="tl-seg" role="radiogroup">${Object.entries(options).map(([k, label]) => {
      const why = disabled && disabled(k);
      return `<button type="button" role="radio" aria-checked="${k === value}" class="${k === value ? 'on' : ''}" data-set="${key}" data-val="${esc(k)}"${why ? ` disabled title="${esc(why)}"` : ''}>${esc(label)}</button>`;
    }).join('')}</div>`;
    // Kleurstalen; de naam van de gekozen kleur komt in de labelregel (swatchField).
    const swatches = (key, items, value, disabled) => {
      const sel = items.find(it => it.key === value);
      return `<div class="tl-swatches" role="radiogroup" data-name="${sel ? esc(sel.label) : ''}">${items.map(it => {
        const why = disabled && disabled(it.key);
        return `<button type="button" role="radio" aria-checked="${it.key === value}" class="tl-sw${it.key === value ? ' on' : ''}" data-set="${key}" data-val="${esc(it.key)}" title="${esc(why ? `${it.label}: ${why}` : it.label)}" aria-label="${esc(it.label)}" style="--sw:${it.hex}"${why ? ' disabled' : ''}>${it.img ? `<img src="${esc(it.img)}" alt="" loading="lazy">` : ''}</button>`;
      }).join('')}</div>`;
    };
    const swatchField = (label, html) => field(label, html, (html.match(/data-name="([^"]*)"/) || [])[1]);
    // Het bereik omvat altijd de maat van het model zelf; extra staat achter de waarde (bijv. de helling).
    const slider = (key, label, value, range, hint, extra) => {
      const lo = Math.min(range[0], value), hi = Math.max(range[1], value);
      return `<label class="tl-slider" title="${esc(hint || '')}">
        <span class="tl-sl-head"><span>${label}</span><output>${meters(value)}${extra || ''}</output></span>
        <input type="range" data-num="${key}" min="${lo}" max="${hi}" step="${LightModel.STEP}" value="${value}" aria-label="${esc(label.replace(/<[^>]+>/g, ''))}">
      </label>`;
    };
    // Wolfseind: hoogte waarop de kopgevels stoppen (tussen goot en nok); daarboven de schuine wolfseinden.
    const wolfSlider = (key, f) => {
      const at = (r) => Math.round((f.low + r * (f.high - f.low)) / LightModel.STEP) * LightModel.STEP;
      return slider(key, 'Wolfseind', at(f.cutRatio), [at(0.05), at(0.95)], 'Hoogte waarop de kopgevels stoppen; daarboven de schuine wolfseinden tot de nok');
    };
    const colorItems = (obj) => Object.entries(obj).map(([key, c]) => ({ key, label: c.label, hex: c.hex }));
    const facadeColors = (type, current) => {
      if (type === 'rabat') return colorItems(WallModel.RABAT_COLORS);
      if (type === 'stuc') return colorItems(WallModel.STUC_COLORS);
      if (type === 'fels') return colorItems(WallModel.FELS.COLORS);
      const codes = LightModel.STONES.includes(current) || !current ? LightModel.STONES : [current].concat(LightModel.STONES);
      return codes.map(code => ({ key: code, label: `Steenstrip ${code}`, hex: WallModel.STONE_COLORS[code] || '#a08070', img: WallModel.stoneThumbUrl(code, 64) }));
    };
    const facadeColor = (fc) => ({ rabat: fc.rabat, stuc: fc.stuc, fels: fc.fels, steen: fc.stone })[fc.type];
    const roofTypes = UnitModel.ROOF_TYPES;

    // Plattegrondje om een unit te kiezen (noord boven).
    function unitMap() {
      const rs = cur.parts.rects, pad = 300;
      const x0 = Math.min(...rs.map(r => r.x0)) - pad, x1 = Math.max(...rs.map(r => r.x1)) + pad;
      const z0 = Math.min(...rs.map(r => r.z0)) - pad, z1 = Math.max(...rs.map(r => r.z1)) + pad;
      const fs = Math.min(x1 - x0, z1 - z0) * 0.16;
      return `<svg class="tl-map" viewBox="${x0} ${z0} ${x1 - x0} ${z1 - z0}" role="group" aria-label="Units, noord boven">${rs.map(r =>
        `<g class="tl-map-u${r.id === unitSel ? ' on' : ''}" data-set="unit" data-val="${esc(r.id)}" role="button" tabindex="0" aria-label="Unit ${esc(r.id)}">
          <rect x="${r.x0 + 40}" y="${r.z0 + 40}" width="${r.W - 80}" height="${r.D - 80}" rx="${fs * 0.2}"/>
          <text x="${r.cx}" y="${r.cz}" font-size="${fs}" dy="0.35em" text-anchor="middle">${esc(r.id)}</text></g>`).join('')}</svg>`;
    }

    // Accordeon: één sectie open, in de kop een samenvatting van de keuze.
    let openSec = 'maten';
    const roofName = (t) => ({ plat: 'Plat dak', lessenaar: 'Lessenaardak', zadel: 'Zadeldak', wolf: 'Wolfsdak' })[t];
    function renderPanel() {
      if (!cur) return;
      const multi = model.base.units.length > 1, houseRoof = !!ch.house;
      const u = ch.units[unitSel], fr = model.frame.unit(unitSel);
      const sloped = cur.parts.units.some(x => x.roof.shape.type !== 'plat');
      const short = UnitModel.LIMITS.short;
      // Een unit mag maar in één richting langer zijn dan de transportmaat.
      const range = (r, other) => r && [r[0], other > short ? Math.min(r[1], short) : r[1]];
      const wR = range(fr.width, u.depth), dR = range(fr.depth, u.width);

      const sizeHtml = (multi ? `<div class="tl-mapbox">${unitMap()}<span class="tl-note">Klik op een unit</span></div>` : '') +
        (wR ? slider('width', 'Breedte <small>west–oost</small>', u.width, wR) : '') +
        (dR ? slider('depth', 'Diepte <small>noord–zuid</small>', u.depth, dR) : '');

      // Dak: per unit (of één keer bij een dak over de hele woning) vorm, richting en hoogtes; de bedekking geldt overal.
      const wolfOk = !houseRoof || HouseModel.houseRoofFits(cur.st);
      const K = houseRoof ? 'house' : 'unit', c = houseRoof ? ch.house : u, f = NUM[K + 'High'].form(ch);
      const covItems = Object.entries(RoofModel.COVERINGS).map(([key, cv]) => ({ key, label: cv.label, hex: cv.color, img: RoofModel.coveringThumbUrl(key, 64) }));
      const roofHtml = (multi && !houseRoof ? field('Unit', seg('unit', Object.fromEntries(model.base.units.map(x => [x.id, x.id])), unitSel), null, 'tl-units') : '') +
        field('Dakvorm', seg(K + 'Type', UnitModel.ROOF_TYPES, c.type, (k) => k === 'wolf' && !wolfOk && 'Een wolfsdak kan alleen als de units samen een rechthoek vormen')) +
        (c.type === 'lessenaar' ? field('Hoge kant', seg(K + 'Dir', LightModel.SIDES, f.dir)) : '') +
        (UnitModel.hasRidge(c.type) ? field('Nok', seg(K + 'Ridge', UnitModel.RIDGES, f.ridge)) : '') +
        slider(K + 'Low', c.type === 'plat' ? 'Hoogte' : 'Goothoogte', c.low, model.frame.height, 'Vanaf de vloer tot onderkant dak, aan de lage kant') +
        (c.type !== 'plat' ? slider(K + 'High', c.type === 'lessenaar' ? 'Hoge kant' : 'Nokhoogte', f.high,
          [Math.ceil((f.low + 300) / LightModel.STEP) * LightModel.STEP, UnitModel.LIMITS.ridge], 'Vanaf de vloer tot onderkant dak', ` · ${nl(f.pitch, 0)}°`) : '') +
        (c.type === 'wolf' ? wolfSlider(K + 'Cut', f) : '') +
        swatchField('Bedekking', swatches('covering', covItems, ch.covering, (k) => !sloped && RoofModel.COVERINGS[k].sloped && 'alleen op een hellend dak; een plat dak krijgt dakleer'));

      const fc = ch.facade;
      const facadeHtml = field('Bekleding', seg('facadeType', LightModel.FACADES, fc.type)) +
        (fc.type === 'rabat' ? field('Richting', seg('cladding', WallModel.CLADDING_DIRECTIONS, fc.cladding)) : '') +
        swatchField('Kleur', swatches('facadeColor', facadeColors(fc.type, fc.stone), facadeColor(fc))) +
        (model.hasAccent ? field('Accent <small>afwijkende gevel van het model</small>', seg('accentType', Object.assign({ geen: 'Geen' }, LightModel.FACADES), ch.accent ? ch.accent.type : 'geen')) +
          (ch.accent ? swatchField('Kleur accent', swatches('accentColor', facadeColors(ch.accent.type, ch.accent.color), ch.accent.type === 'rabat' ? fc.rabat : ch.accent.color)) : '') : '');

      // Trasraam: strook onderaan de gevel (onder rabat én steen).
      const tr = ch.trasraam;
      const trasraamHtml = field('Trasraam <small>stenen strook onderaan de gevel</small>', seg('trasraamType', { geen: 'Geen', steen: 'Steen' }, tr.on ? 'steen' : 'geen')) +
        (tr.on ? swatchField('Steen trasraam', swatches('trasraamStone', facadeColors('steen', tr.finish), tr.finish)) : '') +
        (tr.on ? slider('trasraamHigh', 'Hoogte trasraam', tr.height, [200, 1000], 'Vanaf bovenkant vloer') : '');

      const L = ch.lighting;
      const lightHtml = field('Binnen', seg('indoor', { aan: 'Inbouwspots', uit: 'Geen' }, L.indoor ? 'aan' : 'uit')) +
        field('Buiten', seg('lightMode', LightModel.LIGHTING, L.mode)) +
        (L.mode === 'gevel' ? field('Lichtrichting', seg('lightDir', LightingModel.DIRECTIONS, L.direction)) : '');

      const i = cur.info;
      const types = houseRoof ? [ch.house.type] : [...new Set(Object.values(ch.units).map(x => x.type))];
      const covLabel = sloped ? RoofModel.COVERINGS[ch.covering].label : 'Dakleer';
      const facadeSum = `${LightModel.FACADES[fc.type]} · ${LightModel.colorName(fc.type, facadeColor(fc))}${tr.on ? ' · trasraam' : ''}`;
      const lightSum = [L.indoor ? 'Spots binnen' : null, L.mode === 'geen' ? 'geen buitenlampen' : LightModel.LIGHTING[L.mode].toLowerCase()].filter(Boolean).join(' · ');
      const sec = (key, title, icon, sum, html) => {
        const open = openSec === key;
        return `<section class="tl-sec${open ? ' open' : ''}">
          <button type="button" class="tl-sec-head" data-sec="${key}" aria-expanded="${open}"><i class="bi bi-${icon}"></i><span class="tl-sec-title">${title}</span>
            <span class="tl-sec-sum">${esc(sum)}</span><i class="bi bi-chevron-down tl-chev"></i></button>
          ${open ? `<div class="tl-sec-body">${html}</div>` : ''}</section>`;
      };
      const el = $('.tl-sections'), scroll = el.scrollTop;
      el.innerHTML = sec('maten', 'Afmetingen', 'rulers', `${meters(i.lengthX)} × ${meters(i.lengthZ)}`, sizeHtml) +
        sec('dak', 'Dak', 'house', `${types.length > 1 ? 'Gemengd' : roofName(types[0])} · ${covLabel}`, roofHtml) +
        sec('gevel', 'Gevel', 'bricks', facadeSum, facadeHtml + trasraamHtml) +
        sec('licht', 'Verlichting', 'lightbulb', lightSum, lightHtml);
      el.scrollTop = scroll;
    }

    function renderSummary() {
      const i = cur.info;
      $('.tl-sub').textContent = `${meters(i.lengthX)} × ${meters(i.lengthZ)} · ${nl(i.brutoM2, 1)} m² · ${meters(i.height)} hoog`;
      const kv = (k, v) => `<div class="tl-kv"><span>${k}</span><b>${v}</b></div>`;
      $('.tl-facts').innerHTML = kv('Vloer bruto', `${nl(i.brutoM2, 1)} m²`) + kv('Leefbaar', `${nl(i.leefbaarM2, 1)} m²`) +
        kv('Inhoud', `${nl(i.inhoudM3, 0)} m³`) + kv('Gewicht', `${nl(Math.round(i.kg / 10) * 10, 0)} kg`);
      $('.tl-buy').innerHTML = `<div class="tl-price"><span class="tl-price-val">${CostModel.eur(Math.round(i.price / 100) * 100)}</span><span class="tl-price-note">indicatief, incl. btw</span></div>
        <button type="button" class="tl-btn tl-icon" data-act="reset" title="Alle keuzes terug naar het model" aria-label="Terug naar het model"><i class="bi bi-arrow-counterclockwise"></i></button>
        <button type="button" class="tl-btn tl-primary" data-act="pdf"><i class="bi bi-file-earmark-pdf"></i>PDF</button>`;
    }

    // Keuzes (knoppen en kleuren).
    const panel = $('.tl-panel');
    function choose(key, val) {
      if (key === 'unit') { unitSel = val; renderPanel(); return; }
      const R = (k) => k.startsWith('house') ? next.house : next.units[unitSel];
      const next = clone(ch), fc = next.facade;
      // Andere dakvorm: de nok volgt weer uit de helling (of uit het model, bij zijn eigen dakvorm).
      if (key === 'unitType' || key === 'houseType') Object.assign(R(key), { type: val, high: null });
      else if (key === 'unitDir' || key === 'houseDir') R(key).dir = val;
      else if (key === 'unitRidge' || key === 'houseRidge') R(key).ridge = val;
      else if (key === 'indoor') next.lighting.indoor = val === 'aan';
      else if (key === 'covering') next.covering = val;
      else if (key === 'facadeType') fc.type = val;
      else if (key === 'cladding') fc.cladding = val;
      else if (key === 'facadeColor') fc[{ rabat: 'rabat', stuc: 'stuc', fels: 'fels', steen: 'stone' }[fc.type]] = val;
      else if (key === 'accentType') next.accent = val === 'geen' ? null : { type: val, color: val === 'rabat' ? null : facadeColor(Object.assign({}, fc, { type: val })) };
      else if (key === 'accentColor') { if (next.accent.type === 'rabat') fc.rabat = val; else next.accent.color = val; }
      else if (key === 'trasraamType') {
        const t = next.trasraam;
        t.on = val === 'steen';
        if (t.on && !t.finish) t.finish = fc.type === 'steen' ? fc.stone : LightModel.STONES[0];
      } else if (key === 'trasraamStone') next.trasraam.finish = val;
      else if (key === 'lightMode') next.lighting.mode = val;
      else if (key === 'lightDir') next.lighting.direction = val;
      else return;
      tryApply(next);
    }
    panel.addEventListener('click', (e) => {
      const h = e.target.closest('[data-sec]');
      if (h) { openSec = openSec === h.dataset.sec ? null : h.dataset.sec; renderPanel(); return; }
      const b = e.target.closest('[data-set]');
      if (b && !b.disabled) { choose(b.dataset.set, b.dataset.val); return; }
      const a = e.target.closest('[data-act]');
      if (!a || !cur) return;
      if (a.dataset.act === 'pdf') savePdf();
      else if (a.dataset.act === 'reset') tryApply(clone(model.initial));
    });
    panel.addEventListener('keydown', (e) => {
      const g = e.target.closest('g[data-set]');
      if (g && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); choose(g.dataset.set, g.dataset.val); }
    });
    // Maten: label volgt het schuiven, doorrekenen bij loslaten.
    const NUM = {
      width: { get: (c) => c.units[unitSel].width, set: (c, v) => { c.units[unitSel].width = v; } },
      depth: { get: (c) => c.units[unitSel].depth, set: (c, v) => { c.units[unitSel].depth = v; } },
      // De goot omhoog of omlaag neemt een gekozen nok mee (zelfde dak, hoger of lager).
      unitLow: { get: (c) => c.units[unitSel].low, set: (c, v) => lift(c.units[unitSel], v) },
      houseLow: { get: (c) => c.house.low, set: (c, v) => lift(c.house, v) },
      trasraamHigh: { get: (c) => c.trasraam.height, set: (c, v) => { c.trasraam.height = v; } }
    };
    function lift(x, v) { if (x.high > 0) x.high += v - x.low; x.low = v; }
    // Wolfseind: de keuze is een verhouding (goot 0, nok 1), de schuif een hoogte.
    const unitForm = (c) => LightModel.formOf(model, c, unitSel), houseForm = (c) => LightModel.formOf(model, c, null, cur.st);
    NUM.unitHigh = { form: unitForm, get: (c) => unitForm(c).high, set: (c, v) => { c.units[unitSel].high = v; } };
    NUM.houseHigh = { form: houseForm, get: (c) => houseForm(c).high, set: (c, v) => { c.house.high = v; } };
    [['unitCut', (c) => c.units[unitSel], unitForm], ['houseCut', (c) => c.house, houseForm]].forEach(([k, of, form]) => {
      NUM[k] = {
        form,
        get: (c) => { const f = form(c); return Math.round((f.low + f.cutRatio * (f.high - f.low)) / LightModel.STEP) * LightModel.STEP; },
        set: (c, v) => { const f = form(c); of(c).cut = Math.max(0.05, Math.min(0.95, (v - f.low) / Math.max(1, f.high - f.low))); }
      };
    });
    panel.addEventListener('input', (e) => {
      const r = e.target.closest('[data-num]');
      if (r) r.closest('.tl-slider').querySelector('output').textContent = meters(Number(r.value));
    });
    panel.addEventListener('change', (e) => {
      const r = e.target.closest('[data-num]');
      if (!r) return;
      const n = NUM[r.dataset.num], v = Number(r.value), old = n.get(ch);
      if (v === old) return;
      const next = clone(ch);
      n.set(next, v);
      tryApply(next, { set: n.set, ok: old, want: v });
    });

    // Beeld voor het voorblad: de 3D-weergave (ook vanuit doorsnede of plattegrond) op vaste resolutie.
    function snapshot() {
      const W = 1600, H = 1500, prev = view, pr = renderer.getPixelRatio();
      const keep = { pos: camera.position.clone(), target: controls.target.clone() };
      if (view !== '3d') {
        view = '3d';
        applyView();
        if (poses['3d']) { camera.position.copy(poses['3d'].pos); controls.target.copy(poses['3d'].target); }
      }
      renderer.setPixelRatio(1);
      renderer.setSize(W, H, false);
      camera.aspect = W / H;
      camera.updateProjectionMatrix();
      controls.update();
      renderer.render(scene, camera);
      const url = renderer.domElement.toDataURL('image/jpeg', 0.88);
      renderer.setPixelRatio(pr);
      if (prev !== '3d') {
        view = prev;
        camera.position.copy(keep.pos);
        controls.target.copy(keep.target);
        controls.update();
        applyView();
      }
      resize();
      return { url, width: W, height: H };
    }
    const pageUrl = o.url || root.dataset.url || LightPdf.modelUrl(model.key);

    function savePdf() {
      const st = clone(cur.st);
      st.project.naam = model.label;
      st.project.opmerking = 'Indicatief ontwerp';
      try {
        let image = null;
        try { image = snapshot(); } catch (err) { console.warn(err); }
        LightPdf.generate({ st, label: model.label, info: cur.info, choices: LightModel.describe(model, ch, cur.st), url: pageUrl, image })
          .save(`${model.label.replace(/[^A-Za-z0-9_-]+/g, '-')}-${new Date().toISOString().slice(0, 10)}.pdf`);
      } catch (err) {
        console.error(err);
        toast('De PDF kon niet worden gemaakt.');
      }
    }

    // Prijzen komen uit de CSV's (async geladen): bijwerken zodra ze er zijn.
    const offCosts = CostModel.onChange(() => { if (cur && cur.parts) { cur.info = LightModel.summary(cur.st, cur.parts); renderSummary(); } });

    let visible = true, raf = 0;
    function resize() {
      const w = stage.clientWidth, h = stage.clientHeight;
      if (!w || !h) return;
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      renderer.setSize(w, h);
    }
    const ro = new ResizeObserver(() => { resize(); if (view === 'plan') drawPlan(); });
    ro.observe(stage);
    // Alleen tekenen als de configurator in beeld is (modelpagina scrolt).
    const io = new IntersectionObserver((es) => { visible = es.some(x => x.isIntersecting); });
    // In een pagina: het scrollwiel scrolt de pagina, tenzij je in de 3D hebt geklikt (tot je de muis eruit haalt) of
    // Ctrl/⌘ ingedrukt houdt; dan zoomt het.
    let engaged = false;
    const stageEl = $('.tl-stage');
    stageEl.addEventListener('pointerdown', () => { engaged = true; });
    stageEl.addEventListener('pointerleave', () => { engaged = false; });
    stageEl.addEventListener('wheel', (e) => {
      if (engaged || e.ctrlKey || e.metaKey || view === 'plan') return;
      e.stopPropagation();
      toast('Klik eerst in de weergave (of houd Ctrl ingedrukt) om te zoomen.');
    }, { capture: true });
    io.observe(stage);
    (function loop() {
      raf = requestAnimationFrame(loop);
      if (visible && view !== 'plan') renderer.render(scene, camera);
    })();

    root.classList.add('is-busy');
    setTimeout(() => {
      const st = LightModel.build(model, ch);
      show(st, compute(st));
      root.classList.remove('is-busy');
    }, 30);

    return {
      unmount() {
        cancelAnimationFrame(raf);
        ro.disconnect(); io.disconnect(); offCosts(); controls.dispose();
        if (group) disposeGeo(group);
        renderer.dispose();
        root.innerHTML = '';
      },
      getChoices: () => clone(ch)
    };
  }

  function autoMount() {
    document.querySelectorAll('.tectum-light[data-model]').forEach(el => {
      if (el.dataset.mounted) return;
      el.dataset.mounted = '1';
      try { mount(el); } catch (err) { console.error(err); el.textContent = `Configurator niet beschikbaar: ${err.message}`; }
    });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', autoMount);
  else autoMount();

  return { mount, autoMount };
})();