/* ============================================================================
   SWISS UI — shared component library for the MONOFORM screens
   All components render with the swiss.tokens.css vocabulary (.btn, .pcard,
   .sizes, .stepper, .pager, .acc, .kpi, .dtable ...) so the screens use the
   SAME components documented in components/Components.html.
   Exposes window.SwissUI.
   ============================================================================ */
(function () {
  const e = React.createElement;

  /* ---- assets ---- */
  const U = (id, w = 800) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&q=80&w=${w}`;
  const PH = {
    slip: '1487412720507-e7ab37603c6f', wrap: '1469334031218-e382a71b716b',
    midi: '1496747611176-843222e1e57c', shirt: '1525507119028-ed4c629a60a3',
    knit: '1485968579580-b6d095142e6e', gown: '1492447166138-50c3889fccb1',
  };
  const PRODUCTS = [
    { id: '01', nm: 'Silk Slip Dress', cat: 'Evening', sub: 'Ivory', price: 480, ph: PH.slip },
    { id: '02', nm: 'Wool Wrap Dress', cat: 'Day', sub: 'Charcoal', price: 620, ph: PH.wrap },
    { id: '03', nm: 'Pleated Midi Dress', cat: 'Day', sub: 'Bone', price: 420, ph: PH.midi },
    { id: '04', nm: 'Cotton Shirt Dress', cat: 'Day', sub: 'Optic White', price: 290, ph: PH.shirt },
    { id: '05', nm: 'Cashmere Knit Dress', cat: 'Knitwear', sub: 'Bone', price: 540, ph: PH.knit },
    { id: '06', nm: 'Satin Column Gown', cat: 'Evening', sub: 'Black', price: 890, ph: PH.gown },
  ];

  const money = (n) => '£' + n.toLocaleString();

  /* ---- atoms ---- */
  const Logo = ({ size = 18, color }) =>
    e('span', { style: { fontWeight: 700, fontSize: size, letterSpacing: '-.02em', color } },
      'MONOFORM', e('span', { style: { color: 'var(--accent)' } }, '.'));

  const Btn = ({ children, variant, style, full }) => {
    const cls = 'btn' + (variant === 'ghost' ? '--ghost btn' : variant === 'red' ? ' btn--red' : '');
    return e('button', { className: variant === 'ghost' ? 'btn btn--ghost' : (variant === 'red' ? 'btn btn--red' : 'btn'),
      style: { ...(full ? { width: '100%', justifyContent: 'center' } : {}), ...style } }, children);
  };

  const Eyebrow = ({ children, style }) => e('span', { className: 'eyebrow', style }, children);
  const Rule = ({ style }) => e('div', { className: 'rule', style });
  const Hair = ({ style }) => e('div', { className: 'hair', style });

  const Price = ({ value, was, big }) =>
    e('span', { className: 'price' + (was ? ' ' : ''), style: { fontSize: big ? 22 : 'inherit' } },
      was ? e('s', null, money(was)) : null,
      e('span', { className: was ? 'now' : '' }, money(value)));

  const TagChips = ({ items, active = 0 }) =>
    e('div', { style: { display: 'flex', gap: 10, flexWrap: 'wrap' } },
      items.map((t, i) => e('span', { key: t, className: 'tag-chip' + (i === active ? ' on' : '') + (t === 'New' ? ' red' : '') }, t)));

  const Sizes = ({ list = ['XS', 'S', 'M', 'L', 'XL'], sel = 'M', off = [] }) =>
    e('div', { className: 'sizes' },
      list.map((s) => e('span', { key: s, className: s === sel ? 'on' : (off.includes(s) ? 'off' : '') }, s)));

  const Stepper = ({ q = 1 }) =>
    e('div', { className: 'stepper' }, e('button', null, '−'), e('span', { className: 'q' }, q), e('button', null, '+'));

  const Plate = ({ id, w = 800, h, style, alt = '' }) =>
    e('div', { className: 'plate is-photo', style: { width: '100%', height: h || '100%', ...style } },
      e('img', { src: U(id, w), alt, loading: 'lazy' }));

  /* ---- product card (luxury minimal: image · name · price) ---- */
  const ProductCard = ({ p, w = 600 }) =>
    e('div', { className: 'pcard' },
      e('div', { className: 'shot' },
        e('img', { src: U(p.ph, w), alt: p.nm, loading: 'lazy' })),
      e('div', { className: 'info' },
        e('span', { className: 'nm' }, p.nm, e('small', null, p.cat)),
        e('span', { className: 'pr' }, money(p.price))));

  /* ---- web nav (responsive via bp) ---- */
  const WebNav = ({ bp = 'd', active = 'Home', pad = 28 }) => {
    const links = ['Home', 'Shop', 'Collections', 'Stockists'];
    if (bp === 'd') {
      return e('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `18px ${pad}px`, borderBottom: '1px solid var(--ink)' } },
        e(Logo, { size: 20 }),
        e('div', { style: { display: 'flex', gap: 26, fontSize: 14, fontWeight: 500 } },
          links.map((l) => e('span', { key: l, style: { color: l === active ? 'var(--ink)' : 'var(--muted)' } }, l))),
        e('div', { style: { display: 'flex', gap: 18, fontSize: 13, fontVariantNumeric: 'tabular-nums' } },
          e('span', null, 'Search'), e('span', null, 'Account'), e('span', { style: { color: 'var(--accent)' } }, 'Bag (2)')));
    }
    return e('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `14px ${pad}px`, borderBottom: '1px solid var(--ink)' } },
      e('span', { style: { fontSize: 18 } }, '≡'),
      e(Logo, { size: 18 }),
      e('span', { style: { fontSize: 13, color: 'var(--accent)' } }, 'Bag (2)'));
  };

  const Footer = ({ bp = 'd', pad = 28 }) =>
    e('div', { style: { background: 'var(--ink)', color: '#fff', padding: bp === 'd' ? `36px ${pad}px` : `26px ${pad}px`, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20, flexWrap: 'wrap' } },
      e('div', null, e(Logo, { size: bp === 'd' ? 30 : 22 }),
        e('div', { style: { color: '#9a9a9a', fontSize: 12, marginTop: 8 } }, 'The art of essential dressing — Milan 2026')),
      bp === 'd' ? e('div', { style: { display: 'flex', gap: 28, fontSize: 13, color: '#bbb' } },
        e('span', null, 'Newsletter'), e('span', null, 'Stockists'), e('span', null, 'Colophon')) : null);

  const Announce = ({ pad = 28 }) =>
    e('div', { className: 'announce', style: { padding: `9px ${pad}px` } }, 'Free returns within 30 days ', e('b', null, '·'), ' AW26 now shipping');

  const SecNum = ({ n, title, sub }) =>
    e('div', { style: { display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18 } },
      e('span', { className: 'num', style: { fontSize: 13 } }, n),
      e('h3', { className: 'h-3', style: { margin: 0 } }, title),
      sub ? e('span', { className: 'muted', style: { fontSize: 13, marginLeft: 'auto' } }, sub) : null);

  /* ---- mobile app chrome ---- */
  const StatusBar = ({ dark }) =>
    e('div', { style: { display: 'flex', justifyContent: 'space-between', padding: '9px 18px 6px', fontSize: 12, fontWeight: 600, fontVariantNumeric: 'tabular-nums', color: dark ? '#fff' : 'var(--ink)' } },
      e('span', null, '9:41'), e('span', null, '􀙇 􀛨 􀺗'));

  const AppBar = ({ title, left = '', right = '', border = true }) =>
    e('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 18px 14px', borderBottom: border ? '1px solid var(--ink)' : 'none' } },
      e('span', { style: { fontSize: 16, width: 40 } }, left),
      e('span', { style: { fontWeight: 700, fontSize: 15, letterSpacing: '.02em' } }, title),
      e('span', { style: { fontSize: 13, width: 40, textAlign: 'right', color: 'var(--accent)' } }, right));

  const TabBar = ({ active = 'Shop' }) => {
    const tabs = [
      ['Shop', 'M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z M3 6h18 M16 10a4 4 0 0 1-8 0'],
      ['Search', 'M21 21l-4.3-4.3 M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z'],
      ['Saved', 'M19 14c1.5-1.5 3-3.3 3-5.5A4.5 4.5 0 0 0 12 5 4.5 4.5 0 0 0 2 8.5C2 12 5 14.5 12 21c3-2.8 5.5-5 7-7z'],
      ['Bag', 'M3 3h2l2.4 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L21 7H6 M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm9 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'],
      ['You', 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'],
    ];
    return e('div', { style: { display: 'flex', borderTop: '1px solid var(--ink)', marginTop: 'auto' } },
      tabs.map(([t, d]) => { const on = t === active; return e('div', { key: t, style: { flex: 1, textAlign: 'center', padding: '12px 0 16px', fontSize: 10, letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, color: on ? 'var(--ink)' : '#b3b3b3' } },
        e('svg', { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: on ? 'var(--accent)' : '#b3b3b3', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round', style: { display: 'block', margin: '0 auto 6px' } }, e('path', { d })),
        t); }));
  };

  /* ---- admin components ---- */
  const AdminSidebar = ({ active = 'Dashboard' }) => {
    const nav = [['Dashboard', '01'], ['Orders', '02'], ['Products', '03'], ['Inventory', '04'], ['Customers', '05']];
    return e('div', { style: { width: 248, flex: '0 0 248px', borderRight: '1px solid var(--ink)', display: 'flex', flexDirection: 'column', height: '100%' } },
      e('div', { style: { padding: '22px 24px', borderBottom: '1px solid var(--ink)' } }, e(Logo, { size: 20 }),
        e('div', { className: 'eyebrow', style: { marginTop: 8 } }, 'Admin')),
      e('div', { style: { padding: '12px 0', flex: 1 } },
        nav.map(([n, i]) => e('div', { key: n, style: { display: 'flex', gap: 14, alignItems: 'center', padding: '13px 24px', borderLeft: n === active ? '3px solid var(--accent)' : '3px solid transparent', background: n === active ? 'var(--surface)' : 'transparent', fontWeight: n === active ? 600 : 400 } },
          e('span', { style: { color: 'var(--accent)', fontSize: 12, fontVariantNumeric: 'tabular-nums' } }, i),
          e('span', null, n)))),
      e('div', { style: { padding: '18px 24px', borderTop: '1px solid var(--ink)', fontSize: 12, color: 'var(--muted)' } }, 'A. Müller · Operations'));
  };

  const AdminTop = ({ title, sub }) =>
    e('div', { style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '24px 32px', borderBottom: '1px solid var(--ink)' } },
      e('div', null, e('div', { className: 'eyebrow', style: { marginBottom: 8 } }, sub),
        e('h2', { className: 'h-2', style: { fontSize: 30 } }, title)),
      e('div', { style: { display: 'flex', gap: 12 } }, e('span', { className: 'sel' }, 'Last 30 days ', e('span', { className: 'chev' }, '▾')), e(Btn, null, 'Export')));

  const KPI = ({ label, value, delta, up }) =>
    e('div', { style: { padding: '22px 24px', borderRight: '1px solid var(--ink)', flex: 1 } },
      e('div', { className: 'eyebrow', style: { color: 'var(--muted)' } }, label),
      e('div', { style: { fontSize: 40, fontWeight: 700, letterSpacing: '-.03em', lineHeight: 1, margin: '14px 0 10px' } }, value),
      e('div', { style: { fontSize: 13, color: up ? 'var(--accent)' : 'var(--muted)', fontVariantNumeric: 'tabular-nums' } }, (up ? '▲ ' : '▼ ') + delta));

  const BarChart = ({ data, h = 200 }) => {
    const max = Math.max(...data.map((d) => d.v));
    return e('div', { style: { display: 'flex', alignItems: 'flex-end', gap: 14, height: h, padding: '0 4px' } },
      data.map((d, i) => e('div', { key: i, style: { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, height: '100%', justifyContent: 'flex-end' } },
        e('div', { style: { width: '100%', height: (d.v / max * (h - 30)) + 'px', background: d.hi ? 'var(--accent)' : 'var(--ink)' } }),
        e('div', { style: { fontSize: 11, color: 'var(--muted)' } }, d.l))));
  };

  const StatusBadge = ({ kind, children }) => {
    const map = { paid: { c: 'var(--ink)', b: 'var(--ink)' }, pending: { c: 'var(--accent)', b: 'var(--accent)' }, refund: { c: 'var(--muted)', b: 'var(--hair)' } };
    const s = map[kind] || map.paid;
    return e('span', { style: { fontSize: 11, letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600, padding: '4px 9px', border: '1px solid ' + s.b, color: s.c } }, children);
  };

  const DataTable = ({ cols, rows }) =>
    e('div', { style: { borderTop: '1px solid var(--ink)' } },
      e('div', { style: { display: 'grid', gridTemplateColumns: cols.map((c) => c.w || '1fr').join(' '), gap: 16, padding: '12px 0', borderBottom: '1px solid var(--ink)' } },
        cols.map((c) => e('span', { key: c.k, className: 'eyebrow', style: { color: 'var(--muted)', textAlign: c.r ? 'right' : 'left' } }, c.k))),
      rows.map((r, i) => e('div', { key: i, style: { display: 'grid', gridTemplateColumns: cols.map((c) => c.w || '1fr').join(' '), gap: 16, padding: '14px 0', borderBottom: '1px solid var(--hair)', alignItems: 'center', fontSize: 14 } },
        cols.map((c) => e('span', { key: c.k, style: { textAlign: c.r ? 'right' : 'left', fontVariantNumeric: c.num ? 'tabular-nums' : 'normal', fontWeight: c.b ? 600 : 400 } }, r[c.k])))));

  window.SwissUI = {
    e, U, PH, PRODUCTS, money,
    Logo, Btn, Eyebrow, Rule, Hair, Price, TagChips, Sizes, Stepper, Plate, ProductCard,
    WebNav, Footer, Announce, SecNum,
    StatusBar, AppBar, TabBar,
    AdminSidebar, AdminTop, KPI, BarChart, StatusBadge, DataTable,
  };
})();