// Variant A4 — additional screens beyond the 3 already in variant-a4-sap.jsx
// (Main, Items, Invalid live in the main file). Here:
//   • Sap5Screen_Complete       — finished item with full breakdown
//   • Sap5Screen_SaveTemplate   — modal: save current config as template
//   • Sap5Screen_LoadTemplate   — modal: pick a template to apply
//
// All three follow the A4 / Fiori 3 (Horizon) refinements:
//   - rounded cards (8px) with a soft elevation shadow
//   - link-blue ghost buttons, no hard borders on toolbar buttons
//   - pill-shaped status badges in Title Case
//   - tabular-nums for numeric columns instead of monospace fonts
//   - quiet metadata labels, no UPPERCASE micro-text
// ─────────────────────────────────────────────────────────────

const A4_CARD = {
  background: '#fff',
  border: `1px solid ${sapTokens5.cardBorder}`,
  borderRadius: 9,
  boxShadow: '0 1px 2px rgba(15, 30, 50, 0.04)',
};

// ─────────────────────────────────────────────────────────────
// Screen 03 — Completed item with price breakdown
// Built from the same data as A1's SapScreen_Complete; restyled to A4.
// Layout: success banner, then 2-column grid (summary card + sticky price aside).
// ─────────────────────────────────────────────────────────────
function Sap5Screen_Complete() {
  const summary = [
    ['01', 'Pod model',                'QUAD L4 — 4 persons team room'],
    ['02', 'External dimensions',      '2400 × 2400 × 2250 mm'],
    ['03', 'Interior acoustic finish', 'Premium wool blend · Charcoal'],
    ['04', 'Exterior finish',          'Oak veneer — natural rift-cut, matte'],
    ['05', 'Glazing & door',           'Double glazing · Right-hinged'],
    ['06', 'Ventilation & lighting',   'HEPA 80 m³/h · Dimmable 3000 K'],
    ['07', 'Electrical outlets',       '4× EU socket, 2× USB-C, RJ45 network'],
    ['08', 'Furniture & floor',        'Integrated table + 4 upholstered seats · Carpet floor'],
    ['09', 'Add-ons',                  'Whiteboard (reverse side), Wireless charger ×2'],
  ];
  const priceLines = [
    ['Base QUAD L4',                   '62 400,00'],
    ['Dimensions upgrade 2400×2400',   '—'],
    ['Premium wool blend + Charcoal',  '+ 5 800,00'],
    ['Oak veneer exterior',            '+ 12 400,00'],
    ['Double glazing',                 '+ 6 200,00'],
    ['HEPA ventilation',               '+ 8 900,00'],
    ['Dimmable LED 3000 K',            '+ 3 400,00'],
    ['4× EU + 2× USB-C + RJ45',        '+ 4 200,00'],
    ['Furniture set (table + 4 seats)','+ 9 800,00'],
    ['Carpet floor',                   '+ 2 400,00'],
    ['Whiteboard add-on',              '+ 1 900,00'],
    ['Wireless chargers ×2',           '+ 3 600,00'],
  ];
  return (
    <Sap5Shell>
      <div style={{ padding: 18, display: 'grid', gridTemplateColumns: '1fr 380px', gap: 18, alignItems: 'start' }}>
        <main style={{ minWidth: 0 }}>
          {/* Success banner — Fiori 3 style: soft tinted card with green accent stripe */}
          <div style={{
            ...A4_CARD,
            background: sapTokens5.successBg,
            border: `1px solid #c5e0cd`,
            padding: '15px 20px 15px 15px',
            marginBottom: 15,
            display: 'flex', alignItems: 'center', gap: 15,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: 3, background: sapTokens5.success }}/>
            <div style={{
              width: 40, height: 40, borderRadius: '50%',
              background: '#fff', border: `1.5px solid ${sapTokens5.success}`,
              display: 'grid', placeItems: 'center', flexShrink: 0,
            }}>
              <svg width="20" height="20" viewBox="0 0 28 28">
                <path d="M7 14L12 19L21 9" stroke={sapTokens5.success} strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: sapTokens5.text }}>Item 030 · QUAD L4 is complete</div>
              <div style={{ fontSize: 13, color: sapTokens5.textMuted, marginTop: 2 }}>All 9 mandatory steps filled. Ready to update the quotation in SAP B1.</div>
            </div>
            <Sap5GhostBtn>Edit configuration</Sap5GhostBtn>
            <Sap5PrimaryBtn>Next item →</Sap5PrimaryBtn>
          </div>

          {/* Configuration summary card */}
          <div style={{ ...A4_CARD, overflow: 'hidden' }}>
            <div style={{ padding: '13px 18px', borderBottom: `1px solid ${sapTokens5.cardBorder}`, display: 'flex', alignItems: 'center', gap: 11 }}>
              <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600, color: sapTokens5.text }}>Configuration summary</h3>
              <Sap5Pill tone="success">Complete · 9 / 9</Sap5Pill>
              <div style={{ flex: 1 }}/>
              <Sap5GhostBtn>Duplicate</Sap5GhostBtn>
              <Sap5GhostBtn>Save as template</Sap5GhostBtn>
              <Sap5GhostBtn>Print preview</Sap5GhostBtn>
            </div>
            {summary.map(([n, k, v], i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '46px 220px 1fr 28px',
                padding: '13px 18px', gap: 13, alignItems: 'center',
                borderBottom: i < summary.length - 1 ? `1px solid ${sapTokens5.cardBorder}` : 'none',
                fontSize: 13,
              }}>
                <span style={{ color: sapTokens5.textFaint, fontVariantNumeric: 'tabular-nums', fontSize: 12, fontWeight: 500 }}>{n}</span>
                <span style={{ color: sapTokens5.textMuted }}>{k}</span>
                <span style={{ fontWeight: 500, color: sapTokens5.text }}>{v}</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 20, height: 20, borderRadius: '50%', background: sapTokens5.successBg }}>
                  <svg width="10" height="10" viewBox="0 0 12 12"><path d="M2 6.5L5 9L10 3.5" stroke={sapTokens5.success} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
              </div>
            ))}
          </div>
        </main>

        {/* Price breakdown — sticky aside */}
        <aside style={{ ...A4_CARD, position: 'sticky', top: 154, overflow: 'hidden' }}>
          <div style={{ padding: '13px 18px', borderBottom: `1px solid ${sapTokens5.cardBorder}`, fontWeight: 600, fontSize: 14, color: sapTokens5.text }}>Price breakdown</div>
          <div style={{ padding: '9px 18px' }}>
            {priceLines.map(([k, v], i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 13, color: sapTokens5.textMuted }}>
                <span>{k}</span>
                <span style={{ fontVariantNumeric: 'tabular-nums', color: sapTokens5.text }}>{v}</span>
              </div>
            ))}
          </div>
          <div style={{ padding: '13px 18px', background: '#fafbfc', borderTop: `1px solid ${sapTokens5.cardBorder}` }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: sapTokens5.textMuted, marginBottom: 4 }}>
              <span>Subtotal</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>91 250,00</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: sapTokens5.textMuted, marginBottom: 9 }}>
              <span>VAT 21%</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>19 162,50</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 18, fontWeight: 700, paddingTop: 9, borderTop: `1px solid ${sapTokens5.cardBorder}`, color: sapTokens5.text }}>
              <span>Item total</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>110 412,50 CZK</span>
            </div>
            <div style={{ fontSize: 12, color: sapTokens5.textMuted, marginTop: 9, lineHeight: 1.5 }}>
              Discounts (if applicable) will be applied on the quotation level in SAP B1.
            </div>
          </div>
        </aside>
      </div>
    </Sap5Shell>
  );
}

// ─────────────────────────────────────────────────────────────
// Helper: Fiori 3 modal shell — backdrop + rounded white panel with
// soft elevation. Used by SaveTemplate and LoadTemplate.
// ─────────────────────────────────────────────────────────────
function Sap5Modal({ width = 560, height = 560, title, children, footer }) {
  return (
    <div style={{ padding: 18, position: 'relative', minHeight: height + 80 }}>
      {/* Blurred placeholder for the page underneath the modal */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 18, filter: 'blur(2px)', opacity: 0.5, pointerEvents: 'none' }}>
        <div style={{ ...A4_CARD, height: height + 60 }}/>
        <div style={{ ...A4_CARD, height: height + 60 }}/>
      </div>
      {/* Backdrop */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(15, 30, 50, 0.45)' }}/>
      {/* Modal */}
      <div style={{
        position: 'absolute', top: 35, left: '50%', transform: 'translateX(-50%)',
        width, background: '#fff',
        border: `1px solid ${sapTokens5.cardBorder}`,
        borderRadius: 13,
        boxShadow: '0 24px 48px rgba(15, 30, 50, 0.24), 0 4px 12px rgba(15, 30, 50, 0.08)',
        overflow: 'hidden',
      }}>
        <div style={{ padding: '15px 22px', borderBottom: `1px solid ${sapTokens5.cardBorder}`, display: 'flex', alignItems: 'center' }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600, color: sapTokens5.text }}>{title}</h3>
          <div style={{ flex: 1 }}/>
          <button style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            color: sapTokens5.textMuted, fontSize: 20, lineHeight: 1,
            width: 31, height: 31, borderRadius: 7,
            display: 'grid', placeItems: 'center',
          }}>×</button>
        </div>
        {children}
        {footer && (
          <div style={{ padding: '13px 22px', borderTop: `1px solid ${sapTokens5.cardBorder}`, background: '#fafbfc', display: 'flex', alignItems: 'center', gap: 9 }}>
            {footer}
          </div>
        )}
      </div>
    </div>
  );
}

// Reusable form field — quiet label above an input, like Fiori form layout
function Sap5Field({ label, required, children, hint }) {
  return (
    <div style={{ marginBottom: 15 }}>
      <label style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 13, fontWeight: 500, color: sapTokens5.textMuted, marginBottom: 7 }}>
        {label}
        {required && <span style={{ color: sapTokens5.mandatory, fontWeight: 600 }}>*</span>}
      </label>
      {children}
      {hint && <div style={{ fontSize: 12, color: sapTokens5.textFaint, marginTop: 4 }}>{hint}</div>}
    </div>
  );
}

// Fiori-style text input — softer border, subtle focus ring would be CSS-only
function Sap5Input(props) {
  return (
    <input
      {...props}
      style={{
        width: '100%', padding: '9px 11px', fontSize: 14,
        border: `1px solid ${sapTokens5.cardBorderStrong}`,
        borderRadius: 7, fontFamily: 'inherit',
        color: sapTokens5.text, background: '#fff',
        outline: 'none', boxSizing: 'border-box',
        ...(props.style || {}),
      }}
    />
  );
}
function Sap5Textarea(props) {
  return (
    <textarea
      {...props}
      style={{
        width: '100%', padding: '9px 11px', fontSize: 14,
        border: `1px solid ${sapTokens5.cardBorderStrong}`,
        borderRadius: 7, fontFamily: 'inherit',
        color: sapTokens5.text, background: '#fff',
        outline: 'none', boxSizing: 'border-box', resize: 'vertical',
        ...(props.style || {}),
      }}
    />
  );
}
function Sap5Select(props) {
  return (
    <select
      {...props}
      style={{
        padding: '8px 11px', fontSize: 13,
        border: `1px solid ${sapTokens5.cardBorderStrong}`,
        borderRadius: 7, fontFamily: 'inherit',
        color: sapTokens5.text, background: '#fff',
        outline: 'none',
        ...(props.style || {}),
      }}
    >{props.children}</select>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen 04 — Save as template (modal)
// ─────────────────────────────────────────────────────────────
function Sap5Screen_SaveTemplate() {
  return (
    <Sap5Shell>
      <Sap5Modal
        width={580} height={580}
        title="Save configuration as template"
        footer={
          <>
            <div style={{ flex: 1 }}/>
            <Sap5GhostBtn>Cancel</Sap5GhostBtn>
            <Sap5PrimaryBtn>Save template</Sap5PrimaryBtn>
          </>
        }
      >
        <div style={{ padding: 22 }}>
          {/* Source descriptor — quiet card showing what's being saved */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 11,
            padding: '11px 13px', marginBottom: 20,
            background: sapTokens5.accentBg,
            borderRadius: 7,
            fontSize: 13, color: sapTokens5.text,
          }}>
            <Sap5Pill tone="accent">Item 030</Sap5Pill>
            <span style={{ color: sapTokens5.textMuted }}>QUAD L4 · 2400×2400 · Premium wool / Oak</span>
          </div>

          <Sap5Field label="Template name" required>
            <Sap5Input defaultValue="Brezina Architects – QUAD oak standard"/>
          </Sap5Field>

          <Sap5Field label="Description">
            <Sap5Textarea
              defaultValue="Quad room, oak exterior, premium wool Charcoal interior, double glazing, HEPA. Use for Brezina-style projects."
              style={{ minHeight: 79 }}
            />
          </Sap5Field>

          <Sap5Field label="Visibility">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 11 }}>
              <div style={{
                padding: 15,
                border: `1px solid ${sapTokens5.cardBorder}`,
                borderRadius: 9,
                background: '#fff',
                cursor: 'pointer',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 7 }}>
                  <span style={{ width: 18, height: 18, borderRadius: '50%', border: `1.5px solid ${sapTokens5.cardBorderStrong}`, background: '#fff' }}/>
                  <b style={{ fontSize: 14, color: sapTokens5.text }}>Private</b>
                </div>
                <div style={{ fontSize: 12, color: sapTokens5.textMuted, lineHeight: 1.45 }}>Only visible to you (J. Novák).</div>
              </div>
              <div style={{
                padding: 15,
                border: `1.5px solid ${sapTokens5.accent}`,
                borderRadius: 9,
                background: sapTokens5.accentBg,
                cursor: 'pointer',
                boxShadow: '0 0 0 3px rgba(0, 112, 242, 0.08)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 7 }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: '50%',
                    border: `1.5px solid ${sapTokens5.accent}`,
                    background: '#fff',
                    display: 'grid', placeItems: 'center',
                  }}>
                    <span style={{ width: 9, height: 9, borderRadius: '50%', background: sapTokens5.accent }}/>
                  </span>
                  <b style={{ fontSize: 14, color: sapTokens5.text }}>Global</b>
                </div>
                <div style={{ fontSize: 12, color: sapTokens5.textMuted, lineHeight: 1.45 }}>Available to all SilentLab sales users.</div>
              </div>
            </div>
          </Sap5Field>

          <label style={{
            display: 'flex', alignItems: 'center', gap: 11,
            padding: '13px 15px',
            background: '#fafbfc',
            border: `1px solid ${sapTokens5.cardBorder}`,
            borderRadius: 9,
            fontSize: 13, color: sapTokens5.text,
            cursor: 'pointer',
          }}>
            <input type="checkbox" defaultChecked style={{ margin: 0, accentColor: sapTokens5.accent }}/>
            <span>Validate configuration against current BOM before saving <span style={{ color: sapTokens5.textMuted }}>(recommended)</span></span>
          </label>
        </div>
      </Sap5Modal>
    </Sap5Shell>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen 05 — Load from template (modal)
// ─────────────────────────────────────────────────────────────
function Sap5Screen_LoadTemplate() {
  const templates = [
    { name: 'QUAD oak standard',          scope: 'global',  by: 'T. Veselý',     date: '04/03/2026', used: 12, summary: 'QUAD L4 · 2400×2400 · Oak · Premium wool Charcoal',                price: '110 412,50 CZK', valid: true },
    { name: 'DUO budget white',           scope: 'global',  by: 'M. Dvořáková',  date: '22/02/2026', used: 34, summary: 'DUO M2 · 1500×1500 · Laminate white · Felt',                       price: '64 300,00 CZK',  valid: true, featured: true },
    { name: 'SOLO executive walnut',      scope: 'private', by: 'J. Novák',      date: '15/01/2026', used: 3,  summary: 'SOLO S1 · Walnut · Wool Dune — contains 1 discontinued item',     price: '74 100,00 CZK',  valid: false },
    { name: 'QUAD focus room (HEPA+)',    scope: 'global',  by: 'P. Horák',      date: '08/01/2026', used: 8,  summary: 'QUAD L4 · HEPA 120 · Double glazing · Acoustic door',             price: '128 450,00 CZK', valid: true },
    { name: 'DUO — Brezina house style',  scope: 'private', by: 'J. Novák',      date: '12/12/2025', used: 5,  summary: 'DUO M2 · Oak · Premium wool Charcoal',                            price: '78 900,00 CZK',  valid: true },
  ];
  return (
    <Sap5Shell>
      <Sap5Modal
        width={820} height={620}
        title="Load configuration from template"
        footer={
          <>
            <span style={{ fontSize: 12, color: sapTokens5.textMuted, flex: 1 }}>
              Loading a template will replace current selections. Configuration is validated against the active BOM.
            </span>
            <Sap5GhostBtn>Cancel</Sap5GhostBtn>
          </>
        }
      >
        {/* Filter bar — search + scope */}
        <div style={{ padding: '15px 22px', display: 'flex', alignItems: 'center', gap: 11, borderBottom: `1px solid ${sapTokens5.cardBorder}` }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 7,
            background: '#f7f8f9', borderRadius: 7,
            padding: '8px 13px', flex: 1,
          }}>
            <Sap5Icon name="search" size={13} color={sapTokens5.textMuted}/>
            <input
              placeholder="Search templates…"
              style={{ border: 'none', outline: 'none', background: 'transparent', fontSize: 14, color: sapTokens5.text, fontFamily: 'inherit', flex: 1, padding: 0 }}
            />
          </div>
          <Sap5Select>
            <option>All templates</option>
            <option>Global only</option>
            <option>My templates</option>
          </Sap5Select>
        </div>

        {/* Template list */}
        <div style={{ maxHeight: 440, overflow: 'auto' }}>
          {templates.map((t, i) => (
            <div key={i} style={{
              padding: '15px 22px', display: 'grid',
              gridTemplateColumns: '1fr 150px 100px',
              gap: 18, alignItems: 'center',
              borderBottom: i < templates.length - 1 ? `1px solid ${sapTokens5.cardBorder}` : 'none',
              background: t.featured ? sapTokens5.selectedBg : '#fff',
              cursor: 'pointer',
              position: 'relative',
            }}>
              {t.featured && (
                <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, width: 3, background: sapTokens5.accent }}/>
              )}
              <div style={{ minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 4 }}>
                  <span style={{ fontSize: 14, fontWeight: 600, color: sapTokens5.text }}>{t.name}</span>
                  <Sap5Pill tone={t.scope === 'global' ? 'accent' : 'neutral'}>
                    {t.scope === 'global' ? 'Global' : 'Private'}
                  </Sap5Pill>
                </div>
                <div style={{ fontSize: 13, color: sapTokens5.textMuted, marginBottom: 4 }}>{t.summary}</div>
                <div style={{ fontSize: 12, color: sapTokens5.textFaint, fontVariantNumeric: 'tabular-nums' }}>
                  by {t.by} · {t.date}
                </div>
              </div>
              <div style={{ fontSize: 14, fontVariantNumeric: 'tabular-nums', color: sapTokens5.text, fontWeight: 600, textAlign: 'right' }}>{t.price}</div>
              <div style={{ textAlign: 'right' }}>
                {t.featured
                  ? <Sap5PrimaryBtn>Apply</Sap5PrimaryBtn>
                  : <Sap5GhostBtn>Apply</Sap5GhostBtn>}
              </div>
            </div>
          ))}
        </div>
      </Sap5Modal>
    </Sap5Shell>
  );
}

Object.assign(window, {
  Sap5Screen_Complete, Sap5Screen_SaveTemplate, Sap5Screen_LoadTemplate,
  Sap5Modal, Sap5Field, Sap5Input, Sap5Textarea, Sap5Select,
});