// VMAX prototype — shared Tweaks dock. A gear FAB opens an in-app panel for flipping
// review states: day state, populated vs first-run data, connection,
// quick role/active-user jump, and (POS) simulate-idle.
(function () {
  const { Icon, Overline } = window.VMAXUI;
  const { Avatar, Toggle } = window.VMAXW;
  const { useVMAX } = window.VMAXStore;

  function Seg({ value, onChange, options }) {
    return (
      <div style={{ display: 'flex', gap: 6, background: 'var(--surface-ground)', borderRadius: 'var(--radius-md)', padding: 4 }}>
        {options.map((o) => { const v = typeof o === 'string' ? o : o.value; const l = typeof o === 'string' ? o : o.label; const on = value === v; return (
          <button key={v} onClick={() => onChange(v)} style={{ flex: 1, padding: '8px 6px', border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, background: on ? 'var(--surface-card)' : 'transparent', color: on ? 'var(--vmax-ink)' : 'var(--vmax-ink-soft)', boxShadow: on ? 'var(--shadow-sm)' : 'none' }}>{l}</button>
        ); })}
      </div>
    );
  }
  function Section({ title, children }) {
    return <div style={{ marginBottom: 18 }}><Overline style={{ marginBottom: 9 }}>{title}</Overline>{children}</div>;
  }

  function TweakDock({ app, roles, onJump, onSimulateIdle }) {
    const [s, a] = useVMAX();
    const [open, setOpen] = React.useState(false);
    const tw = s.tweaks;
    const confirmReset = (mode) => { a.reset(mode); };
    return (
      <React.Fragment>
        <button onClick={() => setOpen((o) => !o)} title="Tweaks" style={{ position: 'fixed', right: 18, bottom: 18, width: 50, height: 50, borderRadius: '50%', background: 'var(--vmax-ink)', color: '#fff', border: 'none', cursor: 'pointer', display: 'grid', placeItems: 'center', boxShadow: 'var(--shadow-pop)', zIndex: 150 }}>
          <Icon name="sliders" size={23} color="#fff" />
        </button>
        {open && (
          <React.Fragment>
            <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 150 }} />
            <div style={{ position: 'fixed', right: 16, bottom: 78, width: 300, maxHeight: '82vh', overflowY: 'auto', background: 'var(--surface-card)', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-pop)', zIndex: 151, padding: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17 }}>Tweaks</div>
                <button onClick={() => setOpen(false)} style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--vmax-ink-soft)' }}><Icon name="x" size={18} /></button>
              </div>

              {roles && roles.length > 0 && (
                <Section title="Jump to role · skips PIN">
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                    {roles.map((r) => (
                      <button key={r.person.id} onClick={() => onJump(r.person)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 10px', border: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', borderRadius: 'var(--radius-md)', cursor: 'pointer', textAlign: 'left' }}>
                        <Avatar name={r.person.name} size={28} />
                        <span style={{ flex: 1 }}><span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13 }}>{r.label}</span><span style={{ fontSize: 11, color: 'var(--vmax-ink-soft)' }}>{r.person.name}</span></span>
                        <Icon name="login" size={15} color="var(--vmax-ink-soft)" />
                      </button>
                    ))}
                  </div>
                </Section>
              )}

              <Section title="Day state"><Seg value={tw.dayState} onChange={(v) => a.setTweak('dayState', v)} options={[{ value: 'clean', label: 'Clean' }, { value: 'flagged', label: 'Flagged' }, { value: 'closing', label: 'Mid-close' }]} /></Section>

              <Section title="Shop data">
                <div style={{ display: 'flex', gap: 7 }}>
                  <button onClick={() => confirmReset('populated')} style={{ flex: 1, padding: '9px 6px', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontWeight: 700, fontSize: 12, border: '1.5px solid ' + (s.mode === 'populated' ? 'var(--vmax-red)' : 'var(--vmax-line)'), background: s.mode === 'populated' ? 'var(--vmax-mint)' : 'var(--surface-card)', color: 'var(--vmax-ink)' }}>Running shop</button>
                  <button onClick={() => confirmReset('firstrun')} style={{ flex: 1, padding: '9px 6px', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontWeight: 700, fontSize: 12, border: '1.5px solid ' + (s.mode === 'firstrun' ? 'var(--vmax-red)' : 'var(--vmax-line)'), background: s.mode === 'firstrun' ? 'var(--vmax-mint)' : 'var(--surface-card)', color: 'var(--vmax-ink)' }}>Fresh / first-run</button>
                </div>
                <p style={{ fontSize: 11, color: 'var(--vmax-ink-soft)', marginTop: 7, lineHeight: 1.45 }}>Switching reseeds the demo and clears accumulated records.</p>
              </Section>

              <Section title="Connection"><Seg value={tw.net} onChange={(v) => a.setTweak('net', v)} options={[{ value: 'online', label: 'Online' }, { value: 'syncing', label: 'Syncing' }, { value: 'offline', label: 'Offline' }]} /></Section>

              {onSimulateIdle && (
                <Section title="Identity">
                  <button onClick={() => { onSimulateIdle(); setOpen(false); }} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '11px', borderRadius: 'var(--radius-md)', border: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', cursor: 'pointer', fontWeight: 600, fontSize: 13 }}><Icon name="clock" size={16} color="var(--vmax-amber-deep)" />Simulate idle till</button>
                  <p style={{ fontSize: 11, color: 'var(--vmax-ink-soft)', marginTop: 7, lineHeight: 1.45 }}>Marks the active user stale — the next receipt print will ask for a PIN to re-verify.</p>
                </Section>
              )}
            </div>
          </React.Fragment>
        )}
      </React.Fragment>
    );
  }

  window.VMAXTWEAKS = { TweakDock };
})();