// Variant A — SAP B1 enterprise style
// Dense, utilitarian, text-first tiles, neutral grayscale, Fiori-adjacent.

const sapTokens = {
  bg: '#f5f6f7',
  surface: '#ffffff',
  border: '#d9dde1',
  borderStrong: '#b4bcc4',
  text: '#1d2327',
  textMuted: '#556070',
  textFaint: '#8a93a0',
  accent: '#0a6ed1',      // SAP Fiori blue
  accentBg: '#e8f1fb',
  success: '#107e3e',
  successBg: '#ebf5ee',
  warn: '#c35500',
  warnBg: '#fdf2e5',
  error: '#bb0000',
  errorBg: '#fbeaea',
  mandatory: '#cc3300',
  rowHover: '#f0f4f8',
  selected: '#0a6ed1',
  selectedBg: '#e8f1fb',
};

const sapFont = '"72", "Segoe UI", Roboto, -apple-system, sans-serif';

// Shared SAP shell (header + footer chrome)
function SapShell({ children, footerRight, quoteNum = 'QUO-2026-00482', partner = 'Brezina Architects s.r.o.', items = 6, itemsDone = 2, total = '184 250,00 CZK', priceList = 'Wholesale EUR→CZK · 04/2026' }) {
  return (
    <div style={{ fontFamily: sapFont, background: sapTokens.bg, color: sapTokens.text, minHeight: '100%', fontSize: 13, display: 'flex', flexDirection: 'column' }}>
      {/* Top bar — SilentLab branded */}
      <div style={{ height: 44, background: '#27272C', color: '#FCF9F4', display: 'flex', alignItems: 'center', padding: '0 20px', fontSize: 12, letterSpacing: 0.2 }}>
        <img src={(window.__resources && window.__resources.logoNeg) || 'assets/logo-neg-color.svg'} alt="SilentLab" style={{ height: 18, display: 'block' }}/>
        <span style={{ margin: '0 14px', opacity: 0.35 }}>|</span>
        <span style={{ opacity: 0.9, fontWeight: 500, letterSpacing: 0.3 }}>Product Configurator</span>
        <span style={{ flex: 1 }} />
        <span style={{ opacity: 0.55, marginRight: 10, fontSize: 11 }}>Connected to SAP B1 · Web Client</span>
        <span style={{ margin: '0 14px', opacity: 0.25 }}>|</span>
        <span style={{ opacity: 0.75, marginRight: 12 }}>J. Novák</span>
        <div style={{ width: 26, height: 26, borderRadius: '50%', background: '#F49819', color: '#27272C', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700 }}>JN</div>
      </div>

      {/* Breadcrumb strip */}
      <div style={{ background: '#fff', borderBottom: `1px solid ${sapTokens.border}`, padding: '8px 24px', display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: sapTokens.textMuted }}>
        <span>Sales</span>
        <ChevronRight />
        <span>Quotations</span>
        <ChevronRight />
        <span>{quoteNum}</span>
        <ChevronRight />
        <span style={{ color: sapTokens.text, fontWeight: 600 }}>Product configurator</span>
      </div>

      {/* Sticky page header */}
      <div style={{ background: '#fff', borderBottom: `1px solid ${sapTokens.border}`, padding: '14px 24px 0', position: 'sticky', top: 0, zIndex: 10 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
              <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: -0.1 }}>Quotation {quoteNum}</div>
              <span style={{ fontSize: 11, padding: '2px 7px', borderRadius: 2, background: sapTokens.warnBg, color: sapTokens.warn, fontWeight: 600, letterSpacing: 0.3 }}>DRAFT</span>
            </div>
            <div style={{ fontSize: 12, color: sapTokens.textMuted, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <span><b style={{ color: sapTokens.text, fontWeight: 600 }}>Customer:</b> {partner}</span>
              <span><b style={{ color: sapTokens.text, fontWeight: 600 }}>Price list:</b> {priceList}</span>
              <span><b style={{ color: sapTokens.text, fontWeight: 600 }}>Validity:</b> 31/05/2026</span>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <SapGhostBtn>Save as template</SapGhostBtn>
            <SapGhostBtn>Load from code</SapGhostBtn>
            <SapGhostBtn>⋯ Menu</SapGhostBtn>
          </div>
        </div>

        {/* Item tabs */}
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, marginTop: 14, marginLeft: -2 }}>
          <ItemTab num="010" label="SOLO · S1" status="done" />
          <ItemTab num="020" label="DUO · M2" status="done" />
          <ItemTab num="030" label="QUAD · L4" status="active" />
          <ItemTab num="040" label="SOLO · S1" status="draft" />
          <ItemTab num="050" label="DUO · M2" status="draft" />
          <ItemTab num="060" label="Add-ons" status="draft" />
          <button style={{ marginLeft: 6, background: 'transparent', border: `1px dashed ${sapTokens.borderStrong}`, color: sapTokens.textMuted, padding: '7px 12px', fontSize: 12, cursor: 'pointer', borderRadius: 2 }}>+ Add item</button>
          <div style={{ flex: 1 }} />
          <div style={{ fontSize: 12, color: sapTokens.textMuted, padding: '0 0 8px' }}>
            Progress: <b style={{ color: sapTokens.text }}>{itemsDone}</b> of <b style={{ color: sapTokens.text }}>{items}</b> configurations complete
          </div>
        </div>
      </div>

      <div style={{ flex: 1, minHeight: 0 }}>{children}</div>

      {/* Sticky footer */}
      <div style={{ borderTop: `1px solid ${sapTokens.border}`, background: '#fff', padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 10, position: 'sticky', bottom: 0 }}>
        <SapGhostBtn>← Previous item</SapGhostBtn>
        <SapGhostBtn>Next item →</SapGhostBtn>
        <div style={{ flex: 1 }} />
        <div style={{ fontSize: 12, color: sapTokens.textMuted, marginRight: 12 }}>
          Quotation total (6 items): <b style={{ color: sapTokens.text, fontSize: 13 }}>{total}</b>
        </div>
        {footerRight || (
          <>
            <SapGhostBtn>Save draft</SapGhostBtn>
            <SapPrimaryBtn>Update quotation in SAP B1</SapPrimaryBtn>
          </>
        )}
      </div>
    </div>
  );
}

function ItemTab({ num, label, status }) {
  const isActive = status === 'active';
  const isDone = status === 'done';
  const borderColor = isActive ? sapTokens.accent : sapTokens.border;
  const bg = isActive ? '#fff' : '#f8f9fa';
  return (
    <div style={{
      padding: '8px 12px 9px',
      background: bg,
      borderTop: `2px solid ${isActive ? sapTokens.accent : 'transparent'}`,
      borderLeft: `1px solid ${borderColor}`,
      borderRight: `1px solid ${borderColor}`,
      borderBottom: isActive ? '1px solid #fff' : `1px solid ${sapTokens.border}`,
      marginBottom: isActive ? -1 : 0,
      cursor: 'pointer',
      display: 'flex', alignItems: 'center', gap: 8,
      minWidth: 140,
      fontSize: 12,
      position: 'relative',
      top: isActive ? 1 : 0,
    }}>
      <StatusDot status={status} />
      <span style={{ fontFamily: 'ui-monospace, Menlo, monospace', color: sapTokens.textMuted }}>{num}</span>
      <span style={{ fontWeight: isActive ? 600 : 400 }}>{label}</span>
    </div>
  );
}

function StatusDot({ status }) {
  const color = status === 'done' ? sapTokens.success : status === 'active' ? sapTokens.accent : sapTokens.textFaint;
  if (status === 'done') return <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill={color}/><path d="M3.5 6L5 7.5L8.5 4" stroke="#fff" strokeWidth="1.5" fill="none"/></svg>;
  return <div style={{ width: 8, height: 8, borderRadius: '50%', background: status === 'draft' ? 'transparent' : color, border: `1.5px solid ${color}` }} />;
}

function ChevronRight() {
  return <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2L6.5 5L3 8" stroke="currentColor" strokeWidth="1.2" opacity="0.5"/></svg>;
}

function SapPrimaryBtn({ children, onClick }) {
  return <button onClick={onClick} style={{ background: sapTokens.accent, color: '#fff', border: 'none', padding: '7px 14px', fontSize: 12, fontWeight: 600, borderRadius: 2, cursor: 'pointer', letterSpacing: 0.1 }}>{children}</button>;
}
function SapGhostBtn({ children, onClick }) {
  return <button onClick={onClick} style={{ background: '#fff', color: sapTokens.text, border: `1px solid ${sapTokens.borderStrong}`, padding: '6px 12px', fontSize: 12, fontWeight: 500, borderRadius: 2, cursor: 'pointer' }}>{children}</button>;
}

// ─────────────────────────────────────────────────────────────
// Configurator step card (SAP-style) — text-first, dense tiles
// ─────────────────────────────────────────────────────────────
function SapStep({ num, totalSteps, title, subtitle, required, complete, children, valid = true }) {
  return (
    <section style={{
      background: sapTokens.surface,
      border: `1px solid ${sapTokens.border}`,
      borderLeft: !valid ? `3px solid ${sapTokens.error}` : complete ? `3px solid ${sapTokens.success}` : `3px solid ${sapTokens.border}`,
      marginBottom: 12,
    }}>
      <header style={{ padding: '11px 16px', borderBottom: `1px solid ${sapTokens.border}`, display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: sapTokens.textMuted, letterSpacing: 0.5, minWidth: 44 }}>
          {String(num).padStart(2,'0')} / {String(totalSteps).padStart(2,'0')}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <h3 style={{ margin: 0, fontSize: 13, fontWeight: 600 }}>{title}</h3>
            {required && <span style={{ color: sapTokens.mandatory, fontSize: 11, fontWeight: 600 }}>*</span>}
            {!required && <span style={{ fontSize: 11, color: sapTokens.textFaint, padding: '1px 6px', border: `1px solid ${sapTokens.border}`, borderRadius: 2 }}>optional</span>}
            {complete && valid && <span style={{ fontSize: 11, color: sapTokens.success, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 4 }}><SapCheckIcon /> Set</span>}
            {!valid && <span style={{ fontSize: 11, color: sapTokens.error, fontWeight: 600 }}>⚠ Invalid — item inactive</span>}
          </div>
          {subtitle && <div style={{ fontSize: 12, color: sapTokens.textMuted, marginTop: 2 }}>{subtitle}</div>}
        </div>
        <button style={{ background: 'transparent', border: 'none', color: sapTokens.textMuted, cursor: 'pointer', fontSize: 11 }}>Collapse ▾</button>
      </header>
      <div style={{ padding: 16 }}>{children}</div>
    </section>
  );
}

function SapCheckIcon() {
  return <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6L5 9L10 3" stroke={sapTokens.success} strokeWidth="1.8" fill="none"/></svg>;
}

function SapTile({ selected, invalid, title, desc, price, priceDelta, badge, onClick, thumb, info, disabled, qty }) {
  const borderCol = invalid ? sapTokens.error : selected ? sapTokens.accent : sapTokens.border;
  return (
    <div onClick={disabled ? null : onClick} style={{
      background: selected ? sapTokens.selectedBg : invalid ? sapTokens.errorBg : '#fff',
      border: `1px solid ${borderCol}`,
      borderLeft: selected ? `3px solid ${sapTokens.accent}` : `1px solid ${borderCol}`,
      padding: '10px 12px',
      cursor: disabled ? 'not-allowed' : 'pointer',
      position: 'relative',
      display: 'flex',
      gap: 12,
      alignItems: 'flex-start',
      opacity: disabled ? 0.55 : 1,
    }}>
      {thumb && (
        <div style={{ width: 52, height: 52, background: '#f3f5f7', border: `1px solid ${sapTokens.border}`, flexShrink: 0, display: 'grid', placeItems: 'center', color: sapTokens.textMuted }}>
          {thumb}
        </div>
      )}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: sapTokens.text }}>{title}</div>
          {badge && <span style={{ fontSize: 10, padding: '1px 5px', background: sapTokens.accentBg, color: sapTokens.accent, borderRadius: 2, fontWeight: 600, letterSpacing: 0.2 }}>{badge}</span>}
          {info && (
            <span style={{ marginLeft: 'auto', width: 14, height: 14, borderRadius: '50%', border: `1px solid ${sapTokens.borderStrong}`, color: sapTokens.textMuted, display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 600, fontFamily: 'serif', cursor: 'help' }} title={info}>i</span>
          )}
        </div>
        {desc && <div style={{ fontSize: 11.5, color: sapTokens.textMuted, lineHeight: 1.4, marginBottom: 6 }}>{desc}</div>}
        {(price || priceDelta) && (
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, fontFamily: 'ui-monospace, monospace' }}>
            {price && <span style={{ fontSize: 12, fontWeight: 600, color: sapTokens.text }}>{price}</span>}
            {priceDelta && <span style={{ fontSize: 11, color: priceDelta.startsWith('+') ? sapTokens.warn : sapTokens.success }}>{priceDelta}</span>}
          </div>
        )}
        {qty != null && selected && (
          <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontSize: 10, color: sapTokens.textMuted, textTransform: 'uppercase', letterSpacing: 0.4, fontWeight: 600 }}>Qty</span>
            <div style={{ display: 'inline-flex', alignItems: 'stretch', border: `1px solid ${sapTokens.borderStrong}`, background: '#fff' }}>
              <button style={{ width: 22, height: 22, border: 'none', background: 'transparent', cursor: 'pointer', color: sapTokens.textMuted, fontSize: 14, lineHeight: 1, padding: 0 }}>−</button>
              <div style={{ width: 28, display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 600, fontFamily: 'ui-monospace, monospace', borderLeft: `1px solid ${sapTokens.border}`, borderRight: `1px solid ${sapTokens.border}` }}>{qty}</div>
              <button style={{ width: 22, height: 22, border: 'none', background: 'transparent', cursor: 'pointer', color: sapTokens.accent, fontSize: 14, lineHeight: 1, padding: 0 }}>+</button>
            </div>
          </div>
        )}
      </div>
      {selected && (
        <div style={{ position: 'absolute', top: 8, right: 8, width: 16, height: 16, background: sapTokens.accent, display: 'grid', placeItems: 'center' }}>
          <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 5L4 7L8 3" stroke="#fff" strokeWidth="1.5" fill="none"/></svg>
        </div>
      )}
    </div>
  );
}

function SapQtyStepper({ value, label, price }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 10px', border: `1px solid ${sapTokens.border}`, background: '#fff', fontSize: 12 }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 600 }}>{label}</div>
        {price && <div style={{ fontSize: 11, color: sapTokens.textMuted, fontFamily: 'ui-monospace, monospace' }}>{price}</div>}
      </div>
      <button style={{ width: 22, height: 22, border: `1px solid ${sapTokens.borderStrong}`, background: '#fff', cursor: 'pointer' }}>−</button>
      <div style={{ minWidth: 28, textAlign: 'center', fontWeight: 600, fontFamily: 'ui-monospace, monospace' }}>{value}</div>
      <button style={{ width: 22, height: 22, border: `1px solid ${sapTokens.borderStrong}`, background: '#fff', cursor: 'pointer' }}>+</button>
    </div>
  );
}

function SapLayout({ left, right }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr 300px', gap: 16, padding: 16, alignItems: 'start' }}>
      {/* Left nav — step index */}
      <aside style={{ position: 'sticky', top: 140, background: '#fff', border: `1px solid ${sapTokens.border}`, fontSize: 12 }}>
        <div style={{ padding: '10px 12px', borderBottom: `1px solid ${sapTokens.border}`, fontWeight: 600, fontSize: 11, color: sapTokens.textMuted, letterSpacing: 0.5, textTransform: 'uppercase' }}>Configuration steps</div>
        {left}
      </aside>
      {/* Main */}
      <main style={{ minWidth: 0 }}>{right}</main>
      {/* Right summary */}
      <aside style={{ position: 'sticky', top: 140 }}><SapSummaryCard/></aside>
    </div>
  );
}

function SapNavItem({ n, label, status, active }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '8px 12px',
      borderLeft: active ? `3px solid ${sapTokens.accent}` : '3px solid transparent',
      background: active ? sapTokens.selectedBg : 'transparent',
      fontWeight: active ? 600 : 400,
      cursor: 'pointer',
      borderBottom: `1px solid ${sapTokens.border}`,
      fontSize: 12,
    }}>
      <StatusDot status={status} />
      <span style={{ fontFamily: 'ui-monospace, monospace', color: sapTokens.textMuted, fontSize: 11 }}>{String(n).padStart(2,'0')}</span>
      <span style={{ flex: 1 }}>{label}</span>
    </div>
  );
}

function SapSummaryCard({ title = 'Item 030 · QUAD-L4', complete = false, invalid = false }) {
  const rows = [
    ['Pod model', 'QUAD L4'],
    ['External dim.', '2400 × 2400 × 2250 mm'],
    ['Interior finish', 'Charcoal felt'],
    ['Exterior', 'Oak veneer'],
    ['Glazing', 'Single, clear'],
    ['Door', 'Right-hinged, handle ∅25'],
    ['Ventilation', 'HEPA, 80 m³/h'],
    ['Lighting', 'Dimmable 3000 K'],
    ['Power', '4× EU socket, 2× USB-C'],
    ['Floor', 'Integrated, carpet'],
    ['Furniture', 'Table + 4 seats'],
  ];
  return (
    <div style={{ background: '#fff', border: `1px solid ${sapTokens.border}`, fontSize: 12 }}>
      <div style={{ padding: '10px 14px', borderBottom: `1px solid ${sapTokens.border}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ fontWeight: 600, fontSize: 12 }}>{title}</div>
        {invalid ? (
          <span style={{ fontSize: 10, padding: '2px 6px', background: sapTokens.errorBg, color: sapTokens.error, fontWeight: 600 }}>INVALID</span>
        ) : complete ? (
          <span style={{ fontSize: 10, padding: '2px 6px', background: sapTokens.successBg, color: sapTokens.success, fontWeight: 600 }}>COMPLETE</span>
        ) : (
          <span style={{ fontSize: 10, padding: '2px 6px', background: sapTokens.warnBg, color: sapTokens.warn, fontWeight: 600 }}>IN PROGRESS</span>
        )}
      </div>
      <div style={{ padding: '4px 0' }}>
        {rows.map(([k, v], i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 14px', gap: 12, borderBottom: i < rows.length - 1 ? `1px dashed ${sapTokens.border}` : 'none' }}>
            <span style={{ color: sapTokens.textMuted }}>{k}</span>
            <span style={{ fontWeight: 500, textAlign: 'right', fontSize: 11.5 }}>{v}</span>
          </div>
        ))}
      </div>
      <div style={{ padding: '10px 14px', background: '#fafbfc', borderTop: `1px solid ${sapTokens.border}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: sapTokens.textMuted, marginBottom: 4 }}>
          <span>Base price</span><span style={{ fontFamily: 'ui-monospace, monospace' }}>62 400,00</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: sapTokens.textMuted, marginBottom: 4 }}>
          <span>Options (+9 items)</span><span style={{ fontFamily: 'ui-monospace, monospace' }}>+28 850,00</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: sapTokens.textMuted, marginBottom: 8 }}>
          <span>VAT 21%</span><span style={{ fontFamily: 'ui-monospace, monospace' }}>19 162,50</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 700, fontSize: 14, borderTop: `1px solid ${sapTokens.border}`, paddingTop: 8 }}>
          <span>Item total</span><span style={{ fontFamily: 'ui-monospace, monospace' }}>110 412,50 CZK</span>
        </div>
      </div>
    </div>
  );
}

// Tiny pod icon (mono) for sidebar thumbs
function PodIcon({ variant = 'solo' }) {
  if (variant === 'duo') return <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><rect x="4" y="6" width="24" height="22" stroke="currentColor" strokeWidth="1" opacity="0.5"/><rect x="7" y="9" width="8" height="16" stroke="currentColor" strokeWidth="0.6" opacity="0.4"/><rect x="17" y="9" width="8" height="10" stroke="currentColor" strokeWidth="0.6" opacity="0.4"/></svg>;
  if (variant === 'quad') return <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><rect x="2" y="6" width="28" height="22" stroke="currentColor" strokeWidth="1" opacity="0.5"/><rect x="5" y="9" width="6" height="10" stroke="currentColor" strokeWidth="0.6" opacity="0.4"/><rect x="13" y="9" width="6" height="16" stroke="currentColor" strokeWidth="0.6" opacity="0.4"/><rect x="21" y="9" width="6" height="10" stroke="currentColor" strokeWidth="0.6" opacity="0.4"/></svg>;
  return <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><rect x="8" y="5" width="16" height="24" stroke="currentColor" strokeWidth="1" opacity="0.5"/><rect x="11" y="8" width="10" height="15" stroke="currentColor" strokeWidth="0.6" opacity="0.4"/></svg>;
}

Object.assign(window, {
  sapTokens, sapFont,
  SapShell, SapStep, SapTile, SapQtyStepper, SapLayout, SapNavItem, SapSummaryCard,
  SapPrimaryBtn, SapGhostBtn, StatusDot, PodIcon, SapCheckIcon,
});