/* Motion · admin-panel illustrations
   Faithful 1:1 mock of the real Motion admin (Filament-based).
   Variants for the marketing site:
     · products       — Lista produktów (table with thumbnail, ID, Symbol, Kod kresk., Nazwa, Kategoria)
     · productDetail  — Podgląd Produkt (Symbol, Nazwa, Cechy, Status, Cena katalogowa/promocyjna, Omnibus)
     · deliveries     — Przyjęcia dostaw (Magazyn punktu select + Przyjmij wszystko + Dokumenty oczekujące / Ostatnio przyjęte)
     · analytics      — small reports panel (used in Hero/related places; full one lives in admin-analytics.jsx)

   Data is invented across multiple industries (cosmetics, books, electronics, sport, hardware)
   so nothing leaks from any real customer. */

const { useState: usePosState } = React;

/* ─── Shared admin chrome ────────────────────────────────────────────── */

const NAV = [
  { group: "Katalog", items: [
    { key: "products",   icon: "package", label: "Produkty" },
    { key: "groups",     icon: "layers",  label: "Grupy" },
    { key: "attrs",      icon: "tags",    label: "Cechy" },
    { key: "prices",     icon: "tag",     label: "Ceny" },
    { key: "policies",   icon: "shieldCheck", label: "Polityki cenowe" },
  ]},
  { group: "Sprzedaż", items: [
    { key: "pos",        icon: "monitor",   label: "POS" },
    { key: "pos-users",  icon: "users",     label: "Pracownicy POS" },
    { key: "sales",      icon: "receipt",   label: "Sprzedaż" },
    { key: "returns",    icon: "rotateCcw", label: "Zwroty" },
    { key: "tickets",    icon: "helpCircle", label: "Zgłoszenia POS" },
    { key: "deliveries", icon: "truck",     label: "Przyjęcia dostaw" },
  ]},
  { group: "Analityka", items: [
    { key: "an-time",    icon: "clock",  label: "Przegląd czasowy" },
    { key: "an-emp",     icon: "user",   label: "Wg pracownika" },
    { key: "an-store",   icon: "store",  label: "Wg magazynu" },
    { key: "an-group",   icon: "layers", label: "Wg grupy produktów" },
  ]},
];

function AdminSidebar({ active }) {
  return (
    <aside className="mpa-sidebar mpa-sidebar-app">
      <div className="mpa-sidebar-logo">
        <LogoMark size={22} />
        <span>Motion</span>
      </div>
      {NAV.map((sec) => (
        <div className="mpa-nav-section" key={sec.group}>
          <div className="mpa-nav-section-head">
            <span>{sec.group}</span>
            <Icon name="chevronDown" size={11} />
          </div>
          {sec.items.map((it) => (
            <div
              key={it.key}
              className={`mpa-tab mpa-app-tab${it.key === active ? " is-active" : ""}`}
            >
              <Icon name={it.icon} size={15} />
              <span>{it.label}</span>
            </div>
          ))}
        </div>
      ))}
    </aside>
  );
}

function AdminChrome({ active, breadcrumb, title, actions, children }) {
  return (
    <div className="mpa-panel mpa-app">
      <div className="mpa-window-bar">
        <span className="mpos-dot mpos-dot-success"></span>
        <span className="mpa-window-title">Motion · Panel administracyjny</span>
        <span className="mpa-window-clock">webpos.motionpos.pl</span>
      </div>
      <div className="mpa-app-body">
        <AdminSidebar active={active} />
        <div className="mpa-app-main">
          <div className="mpa-app-head">
            <div className="mpa-app-breadcrumb">
              {breadcrumb.map((b, i) => (
                <React.Fragment key={i}>
                  <span>{b}</span>
                  {i < breadcrumb.length - 1 && <Icon name="chevronRight" size={12} />}
                </React.Fragment>
              ))}
            </div>
            <div className="mpa-app-page-head">
              <h2 className="mpa-app-page-title">{title}</h2>
              {actions && <div className="mpa-app-page-actions">{actions}</div>}
            </div>
          </div>
          <div className="mpa-app-content">{children}</div>
        </div>
      </div>
    </div>
  );
}

/* ─── Product thumbnail (stylised, not a real photo) ─────────────────── */

const THUMB_PRESETS = {
  cosmetics: { bg: "linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%)", color: "#9d174d", icon: (
    <g><circle cx="12" cy="9" r="4"/><path d="M10 6.5 L10 5 L14 5 L14 6.5"/></g>
  )},
  book: { bg: "linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)", color: "#92400e", icon: (
    <g><path d="M4 5h7v14H4z"/><path d="M13 5h7v14h-7z"/><line x1="11" y1="5" x2="11" y2="19"/></g>
  )},
  electronics: { bg: "linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%)", color: "#1e3a8a", icon: (
    <g><rect x="5" y="6" width="14" height="12" rx="1.5"/><rect x="8" y="9" width="8" height="3"/><circle cx="9" cy="15" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="15" cy="15" r="1"/></g>
  )},
  hardware: { bg: "linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%)", color: "#7f1d1d", icon: (
    <g><path d="M14 5l5 5-9 9H5v-5z"/><line x1="13" y1="6" x2="18" y2="11"/></g>
  )},
  toy: { bg: "linear-gradient(135deg, #d1fae5 0%, #86efac 100%)", color: "#065f46", icon: (
    <g><rect x="5" y="5" width="6" height="6" rx="1"/><rect x="13" y="5" width="6" height="6" rx="1"/><rect x="5" y="13" width="6" height="6" rx="1"/><rect x="13" y="13" width="6" height="6" rx="1"/></g>
  )},
  sport: { bg: "linear-gradient(135deg, #e0e7ff 0%, #a5b4fc 100%)", color: "#3730a3", icon: (
    <g><circle cx="12" cy="12" r="7"/><path d="M5 12h14M12 5v14"/></g>
  )},
  food: { bg: "linear-gradient(135deg, #fef9c3 0%, #fde047 100%)", color: "#854d0e", icon: (
    <g><circle cx="12" cy="12" r="7"/><circle cx="10" cy="10" r="1.5"/><circle cx="14" cy="13" r="1.2"/></g>
  )},
  fashion: { bg: "linear-gradient(135deg, #f5f3ff 0%, #c4b5fd 100%)", color: "#5b21b6", icon: (
    <g><path d="M8 5 L8 8 L4 11 L7 14 L7 19 L17 19 L17 14 L20 11 L16 8 L16 5"/></g>
  )},
};

function ProductThumb({ kind = "cosmetics", size = 32 }) {
  const preset = THUMB_PRESETS[kind] || THUMB_PRESETS.cosmetics;
  return (
    <div
      className="mpa-thumb"
      style={{ width: size, height: size, background: preset.bg, color: preset.color }}
      aria-hidden="true"
    >
      <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24"
           fill="none" stroke="currentColor" strokeWidth="1.6"
           strokeLinecap="round" strokeLinejoin="round">
        {preset.icon}
      </svg>
    </div>
  );
}

/* ─── Mixed-industry product catalog (no NDA data) ───────────────────── */

const PRODUCTS = [
  { id: 8421, sym: "NC-KREM-DZ-50",  ean: "5904180024681", name: "Krem dzienny nawilżający 50ml",       cat: "Kosmetyki",        kind: "cosmetics" },
  { id: 8420, sym: "NC-SER-WIT-30",  ean: "5904180024674", name: "Serum z witaminą C 30ml",             cat: "Kosmetyki",        kind: "cosmetics",  active: true },
  { id: 8419, sym: "KS-BES-SLO-TW",  ean: "9788373783621", name: "Bestiariusz Słowiański — twarda opr.", cat: "Książki",          kind: "book" },
  { id: 8418, sym: "ET-MUL-WM18",    ean: "5901482018724", name: "Multimetr cyfrowy ETI WM-18",         cat: "Elektronika",      kind: "electronics" },
  { id: 8417, sym: "NK-AKU-12V",     ean: "5901482018717", name: "Wkrętarka akumulatorowa 12V",         cat: "Narzędzia",        kind: "hardware" },
  { id: 8416, sym: "ZB-KLOC-100",    ean: "5901620042108", name: "Klocki konstrukcyjne 100 elementów",  cat: "Zabawki",          kind: "toy" },
  { id: 8415, sym: "SP-ROL-INL-42",  ean: "5901620042092", name: "Rolki inline rozmiar 42",             cat: "Sport",            kind: "sport" },
  { id: 8414, sym: "KS-ATL-SWI",     ean: "9788373783614", name: "Atlas świata 2026 — wydanie XXL",     cat: "Książki",          kind: "book" },
  { id: 8413, sym: "FD-KAW-ETI-1KG", ean: "5904567823109", name: "Kawa ziarnista Etiopia Yirgacheffe 1kg", cat: "Spożywcze",      kind: "food" },
];

/* ─── Variant: Products list ─────────────────────────────────────────── */
function POSPanelProducts() {
  return (
    <AdminChrome
      active="products"
      breadcrumb={["Produkty", "Lista"]}
      title="Produkty"
    >
      <div className="mpa-toolbar">
        <div className="mpa-search" style={{ width: 280 }}>
          <Icon name="search" size={13} color="#94a3b8" />
          <input placeholder="Szukaj" readOnly />
        </div>
        <button className="mpa-icon-btn" aria-label="Filtry">
          <Icon name="filter" size={14} />
          <span className="mpa-icon-btn-badge">0</span>
        </button>
        <button className="mpa-icon-btn" aria-label="Kolumny">
          <Icon name="layers" size={14} />
        </button>
      </div>
      <div className="mpa-tbl-wrap">
        <table className="mpa-tbl">
          <thead>
            <tr>
              <th className="mpa-tbl-check">
                <span className="mpa-checkbox"></span>
              </th>
              <th>Miniatura <Icon name="chevronDown" size={10} /></th>
              <th>ID <Icon name="chevronDown" size={10} /></th>
              <th>Symbol <Icon name="chevronDown" size={10} /></th>
              <th>Kod kresk. <Icon name="chevronDown" size={10} /></th>
              <th>Nazwa <Icon name="chevronDown" size={10} /></th>
              <th>Kategoria <Icon name="chevronDown" size={10} /></th>
            </tr>
          </thead>
          <tbody>
            {PRODUCTS.slice(0, 7).map((p) => (
              <tr key={p.id} className={p.active ? "is-active" : ""}>
                <td><span className="mpa-checkbox"></span></td>
                <td><ProductThumb kind={p.kind} size={32} /></td>
                <td className="mpa-num">{p.id}</td>
                <td className="mpa-mono">{p.sym}</td>
                <td className="mpa-mono mpa-muted">{p.ean}</td>
                <td>{p.name}</td>
                <td>{p.cat}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </AdminChrome>
  );
}

/* ─── Variant: Product detail (Podgląd Produkt) — compact marketing card ── */
function POSPanelProductDetail() {
  return (
    <div className="mpa-panel mpa-pd-card">
      <div className="mpa-window-bar">
        <span className="mpos-dot mpos-dot-success"></span>
        <span className="mpa-window-title">Karta produktu · Podgląd</span>
        <span className="mpa-window-clock">NC-SER-WIT-30</span>
      </div>
      <div className="mpa-pd-card-body">
        <div className="mpa-pd-card-head">
          <ProductThumb kind="cosmetics" size={88} />
          <div className="mpa-pd-card-info">
            <div className="mpa-pd-card-name">Serum z witaminą C 30ml — formuła rozjaśniająca</div>
            <div className="mpa-pd-card-meta">NC-SER-WIT-30 · 5904180024674 · Pielęgnacja twarzy</div>
            <div className="mpa-pd-card-tags">
              {["serum", "witamina C", "30ml", "wegańskie"].map((t) => (
                <span key={t} className="mpa-pd-tag">{t}</span>
              ))}
              <span className="mpa-pd-tag mpa-pd-tag-status">active</span>
            </div>
          </div>
        </div>

        <div className="mpa-pd-card-prices">
          <div className="mpa-pd-card-price">
            <div className="mpa-pd-card-price-label">Cena katalogowa</div>
            <div className="mpa-pd-card-price-value">129,00 zł</div>
            <div className="mpa-pd-card-price-net">104,88 zł netto</div>
          </div>
          <div className="mpa-pd-card-price is-highlight">
            <div className="mpa-pd-card-price-label">Cena promocyjna</div>
            <div className="mpa-pd-card-price-value">103,20 zł</div>
            <div className="mpa-pd-card-price-net">Rabat na wszystko −20%</div>
          </div>
          <div className="mpa-pd-card-price">
            <div className="mpa-pd-card-price-label">Najniższa cena (30 dni)</div>
            <div className="mpa-pd-card-price-value">99,00 zł</div>
            <div className="mpa-pd-card-price-net">Omnibus · widoczne na paragonie</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Field({ label, value, muted = false, highlight = false, help }) {
  return (
    <div className="mpa-pd-field">
      <div className="mpa-pd-label">{label}</div>
      <div className={`mpa-pd-value${muted ? " is-muted" : ""}${highlight ? " is-highlight" : ""}`}>{value}</div>
      {help && <div className="mpa-pd-help">{help}</div>}
    </div>
  );
}

/* ─── Variant: Deliveries (Przyjęcia dostaw) ─────────────────────────── */
function POSPanelDeliveries() {
  const pending = [
    { type: "PZ", num: "PZ 4218/MG/05/2026",  date: "14.05.2026", supplier: "Beauty Lab Distribution Sp. z o.o.", pos: 12, sum: 142 },
    { type: "MM", num: "MM 4217/MG/05/2026",  date: "13.05.2026", supplier: "Magazyn centralny → Magazyn Główny", pos: 6,  sum: 88 },
    { type: "PW", num: "PW 4216/MG/05/2026",  date: "13.05.2026", supplier: "Zwrot z punktu sprzedaży",            pos: 2,  sum: 4 },
  ];
  const accepted = [
    { num: "PZ 4215/MG/05/2026", date: "10.05.2026", time: "11:09:13", user: "Jan Kowalski (admin)", pos: 1,  sum: 20 },
    { num: "MM 4214/MG/05/2026", date: "07.05.2026", time: "09:52:11", user: "Anna K. (manager)",   pos: 14, sum: 200 },
    { num: "PZ 4213/MG/05/2026", date: "06.05.2026", time: "10:32:07", user: "Jan Kowalski (admin)", pos: 8,  sum: 49 },
  ];

  return (
    <AdminChrome
      active="deliveries"
      breadcrumb={["Sprzedaż", "Przyjęcia dostaw"]}
      title="Przyjęcia dostaw"
    >
      <section className="mpa-pd-section">
        <h3 className="mpa-pd-section-title">Przyjęcia dostaw</h3>
        <p className="mpa-pd-section-desc">
          Dokumenty MM, PZ i PW z Insert GT oczekujące na przyjęcie na wybranym magazynie punktu.
        </p>
        <div className="mpa-pd-section-body">
          <div className="mpa-del-controls">
            <div className="mpa-pd-field" style={{ flex: 1 }}>
              <div className="mpa-pd-label">Magazyn punktu</div>
              <button className="mpa-select" type="button">
                <span>Magazyn Główny — MG (3)</span>
                <Icon name="chevronDown" size={14} />
              </button>
              <div className="mpa-pd-help">
                Symbol magazynu z synchronizacji Insert GT; w nawiasie — liczba dokumentów oczekujących
                na przyjęcie (MM, PZ, PW).
              </div>
            </div>
            <button className="mpa-btn mpa-btn-accent">Przyjmij wszystko</button>
          </div>
        </div>
      </section>

      <section className="mpa-pd-section">
        <h3 className="mpa-pd-section-title">Dokumenty oczekujące</h3>
        <div className="mpa-pd-section-body">
          {pending.map((d) => (
            <div className="mpa-del-doc" key={d.num}>
              <div className="mpa-del-doc-head">
                <span className="mpa-del-badge mpa-del-badge-wait">OCZEKUJE</span>
                <strong>{d.num}</strong>
                <a className="mpa-del-doc-link" href="#" onClick={(e) => e.preventDefault()}>PODGLĄD</a>
              </div>
              <div className="mpa-del-doc-meta">
                Dokument: {d.date} 02:00:00 | {d.supplier} | Pozycji: {d.pos} | Suma: {d.sum}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="mpa-pd-section">
        <h3 className="mpa-pd-section-title">Ostatnio przyjęte (podgląd)</h3>
        <p className="mpa-pd-section-desc">
          Dokumenty już zaakceptowane na tym magazynie — tylko do wglądu, bez akcji przyjęcia.
        </p>
        <div className="mpa-pd-section-body">
          {accepted.map((d) => (
            <div className="mpa-del-doc" key={d.num}>
              <div className="mpa-del-doc-head">
                <span className="mpa-del-badge mpa-del-badge-ok">PRZYJĘTE</span>
                <strong>{d.num}</strong>
                <a className="mpa-del-doc-link" href="#" onClick={(e) => e.preventDefault()}>PODGLĄD</a>
              </div>
              <div className="mpa-del-doc-meta">
                Dokument: {d.date} | Przyjęto: {d.date} {d.time} | {d.user} | Pozycji: {d.pos} | Suma: {d.sum}
              </div>
            </div>
          ))}
        </div>
      </section>
    </AdminChrome>
  );
}

/* ─── Variant: Analytics preview (small bar chart) ──────────────────── */
function POSPanelAnalyticsSales() {
  const groups = [
    { label: "Kosmetyki",   pln: 12840, par: 78 },
    { label: "Książki",     pln: 9420,  par: 42 },
    { label: "Elektronika", pln: 6184,  par: 24 },
    { label: "Sport",       pln: 4260,  par: 18 },
    { label: "Narzędzia",   pln: 3120,  par: 14 },
    { label: "Zabawki",     pln: 1862,  par: 9  },
  ];
  const maxPln = Math.max(...groups.map((g) => g.pln));
  return (
    <AdminChrome
      active="an-group"
      breadcrumb={["Analityka", "Wg grupy produktów"]}
      title="Sprzedaż wg grupy produktów"
    >
      <div className="mpa-app-filters">
        <div className="mpa-pd-field" style={{ flex: "0 0 200px" }}>
          <div className="mpa-pd-label">Okres <span className="mpa-req">*</span></div>
          <button className="mpa-select"><span>Bieżący miesiąc</span><Icon name="chevronDown" size={14} /></button>
        </div>
        <button className="mpa-btn mpa-btn-primary mpa-btn-apply">Zastosuj</button>
      </div>

      <section className="mpa-pd-section">
        <h3 className="mpa-pd-section-title">Grupy: wartość pozycji i liczba paragonów</h3>
        <div className="mpa-pd-section-body">
          <div className="mpa-chart-legend">
            <span className="mpa-legend-item">
              <span className="mpa-legend-swatch" style={{ background: "#ed8936" }}></span>
              Przychód brutto (PLN)
            </span>
            <span className="mpa-legend-item">
              <span className="mpa-legend-swatch" style={{ background: "#5fb59a" }}></span>
              Paragony
            </span>
          </div>
          <div className="mpa-mini-bars">
            {groups.map((g) => (
              <div key={g.label} className="mpa-mini-row">
                <div className="mpa-mini-label">{g.label}</div>
                <div className="mpa-mini-bars-col">
                  <div className="mpa-mini-bar" style={{ width: `${(g.pln / maxPln) * 100}%`, background: "#ed8936" }}></div>
                  <div className="mpa-mini-bar" style={{ width: `${(g.par / 78) * 100}%`, background: "#5fb59a" }}></div>
                </div>
                <div className="mpa-mini-value">{g.pln.toLocaleString("pl-PL").replace(/,/g, " ")} zł</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </AdminChrome>
  );
}

/* ─── Variant: POS App (cashier UI — not the admin) ──────────────────── */
const POS_APP_PRODUCTS = [
  { sym: "NC-KREM-DZ-50",   name: "Krem dzienny nawilżający 50ml",        price: "89,00",  kind: "cosmetics" },
  { sym: "NC-SER-WIT-30",   name: "Serum z witaminą C 30ml",              price: "129,00", kind: "cosmetics", highlight: true },
  { sym: "NC-PEEL-AHA-100", name: "Peeling AHA 8% — tonik 100ml",         price: "69,00",  kind: "cosmetics" },
  { sym: "KS-BES-SLO-TW",   name: "Bestiariusz Słowiański (twarda opr.)", price: "79,90",  kind: "book" },
  { sym: "KS-ATL-SWI",      name: "Atlas świata 2026 — wydanie XXL",      price: "149,00", kind: "book" },
  { sym: "ET-MUL-WM18",     name: "Multimetr cyfrowy ETI WM-18",          price: "189,00", kind: "electronics" },
  { sym: "NK-AKU-12V",      name: "Wkrętarka akumulatorowa 12V",          price: "249,00", kind: "hardware" },
];

const POS_APP_CART = [
  { qty: 2, name: "NC-SER-WIT-30 · Serum z witaminą C 30ml",  total: "206,40", promo: true,  unit: "129,00" },
  { qty: 1, name: "NC-KREM-DZ-50 · Krem dzienny 50ml",        total: "71,20",  promo: true,  unit: "89,00" },
  { qty: 1, name: "KS-BES-SLO-TW · Bestiariusz Słowiański",   total: "79,90",  promo: false, unit: "79,90" },
];

const POS_APP_SHORTCUTS = [
  { label: "Dodaj pozycję", k: "Enter",  primary: true },
  { label: "Towary",        k: "F6" },
  { label: "Przyjęcia",     k: "F7" },
  { label: "Transakcje",    k: "" },
  { label: "Zwrot",         k: "F4" },
  { label: "Promocje",      k: "" },
  { label: "Synchronizuj",  k: "F9" },
  { label: "Ustawienia",    k: "F10" },
  { label: "Wyloguj",       k: "F12" },
];

function POSAppPanel() {
  return (
    <div className="mpa-panel mpa-pos">
      <div className="mpa-pos-topbar">
        <div className="mpa-pos-brand">
          <LogoMark size={20} />
          <span>Motion</span>
        </div>
        <div className="mpa-pos-clock">
          <span>Piątek, 15.05.2026</span>
          <strong>14:32:07</strong>
        </div>
      </div>
      <div className="mpa-pos-body">
        {/* LEFT — operator + cart + pay */}
        <div className="mpa-pos-cart-col">
          <div className="mpa-pos-operator">
            <span>Operator: <strong>Jan Kowalski</strong></span>
            <a className="mpa-pos-link" href="#" onClick={(e) => e.preventDefault()}>Raport dzienny</a>
          </div>
          <div className="mpa-pos-cart">
            {POS_APP_CART.map((row, i) => (
              <div className="mpa-pos-cart-row" key={i}>
                <span className="mpa-pos-cart-qty">{row.qty}</span>
                <div className="mpa-pos-cart-body">
                  <div className="mpa-pos-cart-name">{row.name}</div>
                  {row.promo && (
                    <div className="mpa-pos-cart-promo">Promocja: Rabat na wszystko −20% · VAT 23%</div>
                  )}
                </div>
                <div className="mpa-pos-cart-amount">
                  <div className="mpa-pos-cart-total">{row.total} zł</div>
                  <div className="mpa-pos-cart-unit">{row.qty} × {row.unit} zł</div>
                </div>
                <div className="mpa-pos-cart-tools">
                  <button className="mpa-pos-mini mpa-pos-mini-soft">Rabat %</button>
                  <button className="mpa-pos-mini">−</button>
                  <button className="mpa-pos-mini mpa-pos-mini-strong">{row.qty}</button>
                  <button className="mpa-pos-mini">+</button>
                  <button className="mpa-pos-mini mpa-pos-mini-danger"><Icon name="x" size={11} /></button>
                </div>
              </div>
            ))}
          </div>
          <div className="mpa-pos-pay">
            <div>
              <div className="mpa-pos-pay-label">Do zapłaty</div>
              <div className="mpa-pos-pay-meta">Rabaty: 89,20 zł · Finalizuj sprzedaż <span className="mpa-pos-kbd">[F8]</span></div>
            </div>
            <div className="mpa-pos-pay-amount">357,50</div>
          </div>
          <div className="mpa-pos-foot">
            <strong>POS testowy 01</strong>
            <button className="mpa-pos-help">
              <Icon name="helpCircle" size={12} />
              Zgłoś problem
            </button>
          </div>
        </div>

        {/* MIDDLE — search + product list */}
        <div className="mpa-pos-list-col">
          <div className="mpa-pos-list-head">
            <div className="mpa-pos-search">
              <span className="mpa-pos-search-warning"><Icon name="alertCircle" size={13} /></span>
              <input placeholder="Szukaj po nazwie, symbolu, kodzie kreskowym lub opisie…" readOnly />
              <span className="mpa-pos-kbd-tiny">[Ctrl]</span>
              <button className="mpa-pos-search-abc">Abc</button>
              <button className="mpa-pos-search-clear"><Icon name="x" size={14} color="#16a34a" /><span className="mpa-pos-kbd-tiny">[Del]</span></button>
            </div>
          </div>
          <div className="mpa-pos-list">
            {POS_APP_PRODUCTS.map((p, i) => (
              <div key={p.sym} className={`mpa-pos-list-item${p.highlight ? " is-highlight" : ""}`}>
                <ProductThumb kind={p.kind} size={36} />
                <div className="mpa-pos-list-body">
                  <div className="mpa-pos-list-name">{p.name}</div>
                  <div className="mpa-pos-list-sku">{p.sym} ::</div>
                </div>
                <div className="mpa-pos-list-price">{p.price} zł</div>
              </div>
            ))}
          </div>
          <div className="mpa-pos-list-foot">
            <span>Wiersz: <strong>1–7 / 2 735</strong></span>
            <span>Strona: <strong>1 / 28</strong></span>
            <button className="mpa-pos-mini"><Icon name="chevronDown" size={11} style={{ transform: "rotate(180deg)" }} /></button>
            <button className="mpa-pos-mini"><Icon name="chevronDown" size={11} /></button>
          </div>
        </div>

        {/* RIGHT — keyboard shortcuts */}
        <div className="mpa-pos-keys">
          {POS_APP_SHORTCUTS.map((s) => (
            <button
              key={s.label}
              className={`mpa-pos-key${s.primary ? " is-primary" : ""}`}
            >
              <span>{s.label}</span>
              {s.k && <span className="mpa-pos-kbd-tiny">[{s.k}]</span>}
            </button>
          ))}
          <button className="mpa-pos-key mpa-pos-key-lock">
            <span>Zablokuj</span>
            <span className="mpa-pos-kbd-tiny">[Alt+L]</span>
          </button>
        </div>
      </div>
      <div className="mpa-pos-statusbar">
        <span>Wersja <strong>v1.4.2</strong></span>
        <span className="mpa-pos-status-sep">·</span>
        <span>Drukarka <strong style={{ color: "#16a34a" }}>OK</strong></span>
        <span className="mpa-pos-status-sep">·</span>
        <span>Lokalne API <strong style={{ color: "#16a34a" }}>OK</strong></span>
        <span className="mpa-pos-status-sep">·</span>
        <span>Motion <strong style={{ color: "#16a34a" }}>online</strong></span>
      </div>
    </div>
  );
}

const POS_PANELS = {
  posApp: POSAppPanel,
  products: POSPanelProducts,
  productDetail: POSPanelProductDetail,
  deliveries: POSPanelDeliveries,
  analytics: POSPanelAnalyticsSales,
  // legacy aliases — kept so older feature pages don't break
  inventory: POSPanelProducts,
  reports: POSPanelAnalyticsSales,
  sales: POSAppPanel,
  payments: POSPanelDeliveries,
};

function POSPanel({ variant = "products" }) {
  const C = POS_PANELS[variant] || POSPanelProducts;
  return <C />;
}

Object.assign(window, { POSPanel, AdminChrome, ProductThumb });