/* GarageWiz — Door preview (CSS-built, updates live with the config)
   Renders all six Invicta panel styles: raised, flush, carriage, slat. */
(function () {
  const e = React.createElement;

  const glassTint = {
    plain: 'linear-gradient(135deg,#cfeefb,#a9def5)',
    obscure: 'linear-gradient(135deg,#e3eef2,#cfdee4)',
    grey: 'linear-gradient(135deg,#9fb2bb,#7d949e)',
    acid: 'linear-gradient(135deg,#eaf3f6,#d4e6ec)',
  };
  const steelFace = 'linear-gradient(180deg,#eaf1f4,#d3e0e6)';
  const steelRaise = 'inset 0 2px 4px rgba(255,255,255,.7), inset 0 -3px 5px rgba(8,37,47,.14)';

  function lite(key, glassId, extra) {
    return e('div', {
      key, style: Object.assign({
        flex: 1, borderRadius: 3, position: 'relative', overflow: 'hidden',
        background: glassTint[glassId] || glassTint.plain,
        boxShadow: 'inset 0 0 0 2px rgba(255,255,255,.5)',
        border: '1px solid rgba(8,37,47,.18)',
      }, extra),
    }, e('div', { style: { position: 'absolute', inset: 0, background: 'linear-gradient(115deg, rgba(255,255,255,.6) 0 28%, transparent 30% 100%)', opacity: .7 } }));
  }

  function insertDot(key) {
    return e('div', { key, style: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', width: 11, height: 11, borderRadius: 999, border: '2px solid var(--yellow-700)', background: 'var(--yellow)' } });
  }

  function DoorPreview({ config }) {
    const model = GW.findModel(config.modelCode);
    const height = GW.findHeight(config.heightId);
    const width = config.width;
    const sections = height ? height.sections : 4;
    const panelDef = (GW.panels || []).find(p => p.id === (config.panel || 'short')) || GW.panels[0];
    const group = GW.panelGroup(config.panel || 'short');
    const across = (GW.windowCount[width] || {})[group] || (group === 'short' ? 4 : 2);
    const render = panelDef.render;

    const wft = width || 9;
    const hMap = { "6'6\"": 6.5, "7'0\"": 7, "7'6\"": 7.5, "8'0\"": 8, "9'0\"": 9, "10'0\"": 10, "11'0\"": 11, "12'0\"": 12, "14'0\"": 14 };
    const hft = height ? hMap[height.id] : 7;
    const ratio = Math.max(0.55, Math.min(2.4, wft / hft));
    const litesAcross = config.windowsOn ? across : 0;

    const rows = [];
    for (let r = 0; r < sections; r++) {
      const isTop = r === 0;
      let rowChildren;

      if (render === 'slat') {
        // each section is a stack of thin horizontal slats; top row may hold windows
        if (isTop && config.windowsOn) {
          rowChildren = e('div', { style: { display: 'flex', gap: 4, height: '100%' } },
            Array.from({ length: litesAcross }).map((_, i) => lite(i, glass(config), { borderRadius: 2 })));
        } else {
          rowChildren = e('div', { style: { display: 'flex', flexDirection: 'column', gap: 2, height: '100%', padding: '2px 0' } },
            Array.from({ length: 3 }).map((_, i) => e('div', { key: i, style: { flex: 1, background: steelFace, borderRadius: 2, boxShadow: 'inset 0 1px 2px rgba(255,255,255,.6), inset 0 -2px 3px rgba(8,37,47,.12)' } })),
            config.insertsOn && isTop ? insertDot('d') : null,
          );
        }
        rows.push(e('div', { key: r, style: { flex: 1, position: 'relative', borderRadius: 4, border: '1px solid rgba(8,37,47,.14)', background: steelFace, overflow: 'hidden' } }, rowChildren));
        continue;
      }

      if (render === 'flush') {
        // smooth full-width section, faint horizontal grain; windows sit on top section
        const hasLites = isTop && config.windowsOn;
        rows.push(e('div', { key: r, style: { flex: 1, position: 'relative', borderRadius: 4, border: '1px solid rgba(8,37,47,.14)', background: 'linear-gradient(180deg,#edf3f5,#dde7eb)', boxShadow: 'inset 0 1px 2px rgba(255,255,255,.6)', overflow: 'hidden', display: 'flex', gap: 4, padding: hasLites ? 4 : 0 } },
          hasLites
            ? Array.from({ length: litesAcross }).map((_, i) => lite(i, glass(config)))
            : e('div', { style: { position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(180deg, transparent 0 6px, rgba(8,37,47,.05) 6px 7px)' } }),
          config.insertsOn && isTop && !hasLites ? insertDot('d') : null,
        ));
        continue;
      }

      // raised + carriage: grid of cells across
      const cells = [];
      for (let cI = 0; cI < across; cI++) {
        const hasLite = isTop && config.windowsOn && cI < litesAcross;
        const carriage = render === 'carriage';
        cells.push(hasLite
          ? lite('c' + cI, glass(config))
          : e('div', {
              key: 'c' + cI,
              style: {
                flex: 1, borderRadius: 4, position: 'relative', overflow: 'hidden',
                background: steelFace, boxShadow: steelRaise, border: '1px solid rgba(8,37,47,.14)',
              },
            },
            // carriage detailing: inset frame + center vertical groove
            carriage ? e('div', { style: { position: 'absolute', inset: 3, borderRadius: 3, boxShadow: 'inset 0 0 0 1.5px rgba(8,37,47,.16)' } }) : null,
            carriage ? e('div', { style: { position: 'absolute', left: '50%', top: 4, bottom: 4, width: 1.5, background: 'rgba(8,37,47,.14)' } }) : null,
            config.insertsOn && isTop ? insertDot('d' + cI) : null,
          ));
      }
      rows.push(e('div', { key: r, style: { display: 'flex', gap: 4, flex: 1 } }, cells));
    }

    return e('div', { style: { width: '100%' } },
      e('div', { style: {
        margin: '0 auto', width: '100%', maxWidth: 320,
        aspectRatio: String(ratio), background: '#f4f8fa',
        borderRadius: 8, padding: 8, border: '3px solid var(--navy)',
        boxShadow: '0 14px 30px rgba(1,30,40,.22)',
        display: 'flex', flexDirection: 'column', gap: 4,
        transition: 'aspect-ratio .3s ease',
      } }, rows),
      e('div', { style: { textAlign: 'center', marginTop: 10, fontSize: 13, fontWeight: 700, color: 'var(--ink-3)' } },
        (width ? width + "′ W" : '— W') + '  ×  ' + (height ? height.label + ' H' : '— H'),
      ),
      e('div', { style: { textAlign: 'center', marginTop: 2, fontSize: 12, color: 'var(--ink-3)' } },
        panelDef.name + (model ? '  ·  ' + model.name : ''),
      ),
    );
  }

  function glass(config) { return (config.windowsOn ? (GW.findGlass(config.glassId) || GW.glass[0]).id : 'plain'); }

  window.DoorPreview = DoorPreview;
})();