// VMAX Store Manager — first-run onboarding checklist (the spine of standing up the shop).
(function () {
  const DS = window.VMAX365DesignSystem_0f78b2;
  const { Button, Badge } = DS;
  const { Icon } = window.VMAXUI;
  const { TextInput, pushToast } = window.VMAXW;
  const { useVMAX, onboardingDone, missingRecipes } = window.VMAXStore;

  function Onboarding({ mobile, go }) {
    const [s, a] = useVMAX();
    const od = onboardingDone(s);
    const missingR = missingRecipes(s);
    const [locEdit, setLocEdit] = React.useState(false);
    const [names, setNames] = React.useState(s.locations.map((l) => l.name));

    const steps = [
      { key: 'owner', title: 'Create the owner', sub: 'The root account — done when you first opened the app.', done: true, locked: true },
      { key: 'locations', title: 'Confirm your locations', sub: s.locations.map((l) => l.name).join(' · '), done: s.onboarding.locations },
      { key: 'people', title: 'Add your people', sub: od.people ? 'At least one cashier can sign in' : 'Add the staff who use the till', done: od.people, go: 'people' },
      { key: 'menu', title: 'Build your menu', sub: s.menu.length ? `${s.menu.length} items with prices` : 'Bulk-paste it, set both price tiers', done: od.menu, go: 'catalogue' },
      { key: 'stock', title: 'Add your stock', sub: od.stock ? 'Opening levels in' : 'Receive a delivery or run an opening count', done: od.stock, go: 'receiving' },
      { key: 'recipes', title: 'Set your recipes', sub: missingR.length ? `${missingR.length} drink${missingR.length > 1 ? 's' : ''} still need a recipe before they deduct stock` : (s.menu.length ? 'Every sellable drink has a recipe' : 'Link each drink to its ingredients'), done: od.recipes, go: 'recipes' },
    ];
    const doneCount = steps.filter((x) => x.done).length;
    const ready = od.ready;

    return (
      <div style={{ maxWidth: 680, margin: '0 auto' }}>
        <div style={{ background: 'var(--surface-card)', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-xl)', padding: mobile ? 20 : 28, boxShadow: 'var(--shadow-sm)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
            <div style={{ position: 'relative', width: 56, height: 56, flex: 'none' }}>
              <svg viewBox="0 0 36 36" style={{ transform: 'rotate(-90deg)' }}><circle cx="18" cy="18" r="16" fill="none" stroke="var(--vmax-line)" strokeWidth="3" /><circle cx="18" cy="18" r="16" fill="none" stroke="var(--vmax-red)" strokeWidth="3" strokeLinecap="round" strokeDasharray={`${(doneCount / steps.length) * 100} 100`} pathLength="100" /></svg>
              <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14 }}>{doneCount}/{steps.length}</div>
            </div>
            <div style={{ flex: 1 }}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: mobile ? 20 : 23 }}>Let's stand up the shop</h2>
              <p style={{ fontSize: 13.5, color: 'var(--vmax-ink-soft)', marginTop: 4, lineHeight: 1.5 }}>Do these in any order — the order below is just the easy path. Nothing here is a wall; you can trade before it's all done.</p>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {steps.map((st) => (
              <div key={st.key} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px', borderRadius: 'var(--radius-lg)', border: '1.5px solid var(--vmax-line)', background: st.done ? 'var(--vmax-ok-tint)' : 'var(--surface-card)' }}>
                <span style={{ width: 26, height: 26, borderRadius: '50%', flex: 'none', display: 'grid', placeItems: 'center', background: st.done ? 'var(--vmax-ok)' : 'var(--surface-ground)', border: st.done ? 'none' : '1.5px solid var(--vmax-line)' }}>{st.done ? <Icon name="check" size={15} color="#fff" strokeWidth={3} /> : <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--vmax-ink-soft)' }} />}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 }}>{st.title}</div>
                  <div style={{ fontSize: 12.5, color: st.done ? 'var(--vmax-ok)' : 'var(--vmax-ink-soft)', marginTop: 2 }}>{st.sub}</div>
                  {st.key === 'locations' && locEdit && (
                    <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
                      {names.map((nm, i) => <TextInput key={i} value={nm} onChange={(v) => setNames((a) => a.map((x, k) => k === i ? v : x))} style={{ padding: '8px 10px' }} />)}
                      <Button variant="primary" size="sm" onClick={() => { names.forEach((nm, i) => a.renameLocation(s.locations[i].id, nm)); a.completeStep('locations'); setLocEdit(false); pushToast('Locations confirmed'); }}>Save</Button>
                    </div>
                  )}
                </div>
                {st.locked ? <Badge tone="mint">root</Badge>
                  : st.key === 'locations' ? (!locEdit && <Button variant={st.done ? 'ghost' : 'secondary'} size="sm" onClick={() => setLocEdit(true)}>{st.done ? 'Rename' : 'Confirm'}</Button>)
                    : <Button variant={st.done ? 'ghost' : 'secondary'} size="sm" onClick={() => go(st.go)}>{st.done ? 'Open' : 'Do it'}</Button>}
              </div>
            ))}
          </div>

          <div style={{ marginTop: 18, padding: 16, borderRadius: 'var(--radius-lg)', background: ready ? 'var(--vmax-mint)' : 'var(--surface-ground)', display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, color: ready ? 'var(--vmax-red-deep)' : 'var(--vmax-ink)' }}>{ready ? "You're ready to trade" : 'Almost there'}</div>
              <div style={{ fontSize: 12.5, color: ready ? 'var(--vmax-red-deep)' : 'var(--vmax-ink-soft)', marginTop: 3 }}>{ready ? 'A cashier, a priced menu and stock are in. Open the POS whenever you like.' : 'You need at least a cashier, a priced menu, and some stock before the till is useful.'}</div>
            </div>
            <a href="../pos/index.html" style={{ textDecoration: 'none' }}><Button variant="primary" disabled={!ready}>Open the POS →</Button></a>
          </div>
        </div>
      </div>
    );
  }

  window.VMAXONBOARD = { Onboarding };
})();