/* ============================================================================
   SWISS SCREENS — STORE ADMIN (MONOFORM)
   Sales dashboard + Orders / Products / Inventory / Customers.
   Composes window.SwissUI admin components (AdminSidebar, AdminTop, KPI,
   BarChart, StatusBadge, DataTable). window.SwissAdmin = {...}  (1440×1024)
   ============================================================================ */
(function () {
  const S = window.SwissUI, e = S.e;
  const { AdminSidebar, AdminTop, KPI, BarChart, StatusBadge, DataTable, Btn, U, money } = S;

  const root = { height: '100%', display: 'flex', overflow: 'hidden', background: '#fff', color: 'var(--ink)' };
  const main = { flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' };
  const body = { flex: 1, overflow: 'hidden', padding: 32 };

  const kpirow = (items) => e('div', { style: { display: 'flex', borderBottom: '1px solid var(--ink)' } },
    items.map((k, i) => e(KPI, { key: i, ...k })));

  const panel = (title, right, children, style) => e('div', { style: { border: '1px solid var(--ink)', display: 'flex', flexDirection: 'column', ...style } },
    e('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px', borderBottom: '1px solid var(--ink)' } },
      e('span', { className: 'eyebrow' }, title), right ? e('span', { className: 'eyebrow', style: { color: 'var(--muted)' } }, right) : null),
    e('div', { style: { padding: 20, flex: 1 } }, children));

  function Dashboard() {
    const chart = [{ l: 'W1', v: 62 }, { l: 'W2', v: 71 }, { l: 'W3', v: 58 }, { l: 'W4', v: 84 }, { l: 'W5', v: 76 }, { l: 'W6', v: 93 }, { l: 'W7', v: 81 }, { l: 'W8', v: 104, hi: true }];
    const top = [['01', 'Tailored Wool Coat', '142', '£90,880'], ['02', 'Merino Roll-Neck', '210', '£44,100'], ['03', 'Pleated Trouser', '98', '£25,480'], ['04', 'Cotton Shirt', '176', '£31,680']];
    return e('div', { style: root },
      e(AdminSidebar, { active: 'Dashboard' }),
      e('div', { style: main },
        e(AdminTop, { title: 'Sales overview', sub: 'Dashboard' }),
        kpirow([
          { label: 'Revenue', value: '£128,400', delta: '12.4% vs LM', up: true },
          { label: 'Orders', value: '1,284', delta: '6.1% vs LM', up: true },
          { label: 'Avg. order value', value: '£100', delta: '2.0% vs LM', up: true },
          { label: 'Conversion', value: '3.8%', delta: '0.3% vs LM', up: false },
        ]),
        e('div', { style: body },
          e('div', { style: { display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 24, height: '100%' } },
            panel('Revenue — last 8 weeks', '£ thousands', e(BarChart, { data: chart, h: 300 })),
            panel('Top products', 'units · revenue',
              e('div', null, top.map((t) => e('div', { key: t[0], style: { display: 'grid', gridTemplateColumns: '24px 1fr auto auto', gap: 14, alignItems: 'baseline', padding: '14px 0', borderBottom: '1px solid var(--hair)' } },
                e('span', { style: { color: 'var(--accent)', fontSize: 12, fontWeight: 600, fontVariantNumeric: 'tabular-nums' } }, t[0]),
                e('span', { style: { fontWeight: 600 } }, t[1]),
                e('span', { className: 'muted', style: { fontVariantNumeric: 'tabular-nums', fontSize: 13 } }, t[2]),
                e('span', { style: { fontVariantNumeric: 'tabular-nums', fontWeight: 600, textAlign: 'right' } }, t[3])))))))));
  }

  function Orders() {
    const badge = (k, t) => e(StatusBadge, { kind: k }, t);
    const rows = [
      { Order: '#MF-2041', Customer: 'A. Müller', Date: 'Jun 04', Items: '2', Total: '£850', Status: badge('paid', 'Paid') },
      { Order: '#MF-2040', Customer: 'J. Lindqvist', Date: 'Jun 04', Items: '1', Total: '£640', Status: badge('pending', 'Pending') },
      { Order: '#MF-2039', Customer: 'S. Okada', Date: 'Jun 03', Items: '3', Total: '£1,210', Status: badge('paid', 'Paid') },
      { Order: '#MF-2038', Customer: 'M. Rossi', Date: 'Jun 03', Items: '1', Total: '£210', Status: badge('refund', 'Refunded') },
      { Order: '#MF-2037', Customer: 'T. Brandt', Date: 'Jun 02', Items: '2', Total: '£440', Status: badge('paid', 'Paid') },
      { Order: '#MF-2036', Customer: 'L. Costa', Date: 'Jun 02', Items: '4', Total: '£1,520', Status: badge('paid', 'Paid') },
      { Order: '#MF-2035', Customer: 'N. Weber', Date: 'Jun 01', Items: '1', Total: '£180', Status: badge('pending', 'Pending') },
    ];
    return e('div', { style: root },
      e(AdminSidebar, { active: 'Orders' }),
      e('div', { style: main },
        e(AdminTop, { title: 'Orders', sub: '1,284 total' }),
        e('div', { style: { display: 'flex', gap: 10, padding: '16px 32px', borderBottom: '1px solid var(--ink)' } },
          e('span', { className: 'tag-chip on' }, 'All'), e('span', { className: 'tag-chip' }, 'Paid'), e('span', { className: 'tag-chip' }, 'Pending'), e('span', { className: 'tag-chip' }, 'Refunded')),
        e('div', { style: body },
          e(DataTable, {
            cols: [{ k: 'Order', w: '1fr', b: true }, { k: 'Customer', w: '1.4fr' }, { k: 'Date', w: '1fr' }, { k: 'Items', w: '.7fr', num: true }, { k: 'Total', w: '1fr', num: true, b: true }, { k: 'Status', w: '1.1fr', r: true }],
            rows,
          }))));
  }

  function Products() {
    const thumb = (id) => e('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
      e('div', { style: { width: 36, height: 46, overflow: 'hidden', background: 'var(--surface)' } }, e('img', { src: U(id, 120), alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1)' } })));
    const P = S.PRODUCTS;
    const rows = P.map((p, i) => ({
      Product: e('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } }, thumb(p.ph), e('span', { style: { fontWeight: 600 } }, p.nm)),
      SKU: 'MF-' + (1000 + i),
      Price: money(p.price),
      Stock: ['142', '38', '76', '9', '120', '64'][i],
      Status: e(StatusBadge, { kind: ['9', '38'].includes(['142', '38', '76', '9', '120', '64'][i]) ? 'pending' : 'paid' }, ['142', '38', '76', '9', '120', '64'][i] === '9' ? 'Low' : 'Active'),
    }));
    return e('div', { style: root },
      e(AdminSidebar, { active: 'Products' }),
      e('div', { style: main },
        e(AdminTop, { title: 'Products', sub: 'Catalogue' }),
        e('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 32px', borderBottom: '1px solid var(--ink)' } },
          e('div', { className: 'field', style: { width: 320 } }, e('input', { placeholder: 'Search products…', readOnly: true })),
          e(Btn, null, '+ Add product')),
        e('div', { style: body },
          e(DataTable, {
            cols: [{ k: 'Product', w: '2fr' }, { k: 'SKU', w: '1fr' }, { k: 'Price', w: '1fr', num: true, b: true }, { k: 'Stock', w: '.8fr', num: true }, { k: 'Status', w: '1fr', r: true }],
            rows,
          }))));
  }

  function Inventory() {
    const lvl = (pct, low) => e('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
      e('div', { style: { flex: 1, height: 8, background: 'var(--surface)', maxWidth: 180 } }, e('div', { style: { width: pct + '%', height: '100%', background: low ? 'var(--accent)' : 'var(--ink)' } })),
      e('span', { className: 'tnum', style: { fontSize: 13, color: low ? 'var(--accent)' : 'var(--ink)' } }, pct + '%'));
    const data = [['Tailored Wool Coat', '142', '320', 44, false], ['Merino Roll-Neck', '38', '300', 13, true], ['Pleated Trouser', '76', '240', 32, false], ['Boxy Cotton Shirt', '9', '260', 4, true], ['Wide-Leg Denim', '120', '300', 40, false]];
    const rows = data.map((d) => ({ Product: e('span', { style: { fontWeight: 600 } }, d[0]), 'On hand': d[1], Committed: d[2], Level: lvl(d[3], d[4]) }));
    return e('div', { style: root },
      e(AdminSidebar, { active: 'Inventory' }),
      e('div', { style: main },
        e(AdminTop, { title: 'Inventory', sub: 'Stock levels' }),
        kpirow([
          { label: 'In stock', value: '385', delta: 'units', up: true },
          { label: 'Low stock', value: '2', delta: 'styles', up: false },
          { label: 'Out of stock', value: '0', delta: 'styles', up: true },
          { label: 'Reorder soon', value: '3', delta: 'styles', up: false },
        ]),
        e('div', { style: body },
          e(DataTable, {
            cols: [{ k: 'Product', w: '1.6fr' }, { k: 'On hand', w: '1fr', num: true, b: true }, { k: 'Committed', w: '1fr', num: true }, { k: 'Level', w: '1.6fr' }],
            rows,
          }))));
  }

  function Customers() {
    const seg = (t) => e(StatusBadge, { kind: t === 'VIP' ? 'pending' : 'refund' }, t);
    const rows = [
      { Name: 'Anna Müller', Email: 'anna@studio.com', Orders: '14', Spend: '£8,420', Segment: seg('VIP') },
      { Name: 'Jonas Lindqvist', Email: 'jonas@mail.com', Orders: '6', Spend: '£3,180', Segment: seg('Returning') },
      { Name: 'Sara Okada', Email: 'sara.o@mail.com', Orders: '9', Spend: '£5,240', Segment: seg('VIP') },
      { Name: 'Marco Rossi', Email: 'marco@mail.com', Orders: '2', Spend: '£640', Segment: seg('New') },
      { Name: 'Thea Brandt', Email: 'thea.b@mail.com', Orders: '5', Spend: '£2,110', Segment: seg('Returning') },
      { Name: 'Luca Costa', Email: 'luca@mail.com', Orders: '11', Spend: '£6,900', Segment: seg('VIP') },
    ];
    return e('div', { style: root },
      e(AdminSidebar, { active: 'Customers' }),
      e('div', { style: main },
        e(AdminTop, { title: 'Customers', sub: 'Directory' }),
        kpirow([
          { label: 'Total customers', value: '4,210', delta: '8.0% vs LM', up: true },
          { label: 'New this month', value: '312', delta: '5.2% vs LM', up: true },
          { label: 'Returning rate', value: '46%', delta: '1.1% vs LM', up: true },
          { label: 'VIP segment', value: '184', delta: 'customers', up: true },
        ]),
        e('div', { style: body },
          e(DataTable, {
            cols: [{ k: 'Name', w: '1.4fr', b: true }, { k: 'Email', w: '1.6fr' }, { k: 'Orders', w: '.8fr', num: true }, { k: 'Spend', w: '1fr', num: true, b: true }, { k: 'Segment', w: '1.1fr', r: true }],
            rows,
          }))));
  }

  window.SwissAdmin = { Dashboard, Orders, Products, Inventory, Customers };
})();