// VMAX Store Manager — Settings: which actions require a PIN, and notification preferences.
(function () {
  const { Icon } = window.VMAXUI;
  const { Toggle } = window.VMAXW;
  const { useVMAX } = window.VMAXStore;
  const { Panel } = window.VMAXMGRUI;

  const PIN_OPTS = [
    { key: 'pinForPrint', title: 'Printing a receipt', sub: 'The attribution moment. With this off, tapping a name prints without a PIN — faster, but anyone can attribute to anyone.', rec: 'Recommended on' },
    { key: 'pinForClaim', title: 'Claiming an order', sub: 'Makers confirm a PIN before taking an order off the queue, so the claim is verified.', rec: 'Recommended on' },
    { key: 'pinForRefund', title: 'Issuing a refund', sub: 'Require a PIN to record a refund. Off by default — the control is the audit record, not a gate.', rec: 'Off by default' },
  ];

  function Settings({ mobile, who }) {
    const [s, a] = useVMAX();
    const st = s.settings || {};
    return (
      <div style={{ maxWidth: 680, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: mobile ? 14 : 18 }}>
        <Panel mobile={mobile} title="Which actions need a PIN">
          <p style={{ fontSize: 13, color: 'var(--vmax-ink-soft)', marginBottom: 16, lineHeight: 1.5 }}>Identity is checked at the moments that matter. Turn the checks on or off per action — these apply across every till instantly.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {PIN_OPTS.map((o) => (
              <div key={o.key} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, padding: '14px 16px', borderRadius: 'var(--radius-lg)', border: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)' }}>
                <div style={{ width: 38, height: 38, borderRadius: 11, background: st[o.key] ? 'var(--vmax-mint)' : 'var(--surface-ground)', display: 'grid', placeItems: 'center', flex: 'none' }}><Icon name="lock" size={19} color={st[o.key] ? 'var(--vmax-red-deep)' : 'var(--vmax-ink-soft)'} /></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 }}>{o.title}</div><span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--vmax-ink-soft)', background: 'var(--surface-ground)', padding: '2px 8px', borderRadius: 999 }}>{o.rec}</span></div>
                  <div style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)', marginTop: 4, lineHeight: 1.5 }}>{o.sub}</div>
                </div>
                <div style={{ paddingTop: 4 }}><Toggle on={!!st[o.key]} onChange={(v) => a.setSetting(o.key, v)} /></div>
              </div>
            ))}
          </div>
        </Panel>
        <Panel mobile={mobile} title="Notifications">
          <p style={{ fontSize: 13, color: 'var(--vmax-ink-soft)', lineHeight: 1.5 }}>Low-stock and running-out alerts appear on the dashboard and hover on the relevant buttons across both apps. They follow each item's par level, set in the catalogue.</p>
        </Panel>
      </div>
    );
  }

  window.VMAXSETTINGS = { Settings };
})();