/* pages1.jsx — Dashboard (2 variants) + Scan (2 variants) */

/* ============ DASHBOARD ============ */
function Dashboard({ navigate }) {
  const D = window.DATA;
  const [branch, setBranch] = React.useState('ALL');
  const [variant, setVariant] = React.useState(() => localStorage.getItem('ap2-dash') || 'board');
  React.useEffect(() => localStorage.setItem('ap2-dash', variant), [variant]);

  const scope = branch === 'ALL' ? D.totals : (() => {
    const b = D.branchById[branch];
    return { total: b.total, full: b.full, empty: b.empty, out: b.out, defective: b.defective, due: b.due };
  })();

  return React.createElement('div', null,
    React.createElement('div', { className: 'between', style: { marginBottom: 18, flexWrap: 'wrap', gap: 12 } },
      React.createElement('div', { className: 'seg' },
        React.createElement('button', { className: variant === 'board' ? 'on' : '', onClick: () => setVariant('board') },
          React.createElement(Icon, { name: 'grid', size: 16 }), 'Operations board'),
        React.createElement('button', { className: variant === 'simple' ? 'on' : '', onClick: () => setVariant('simple') },
          React.createElement(Icon, { name: 'layers', size: 16 }), 'Simple view')
      ),
      React.createElement('div', { className: 'center', style: { fontSize: 12.5, color: 'var(--text-3)', fontWeight: 600 } },
        React.createElement('span', { className: 'dot-online' }), 'Live · updated just now'
      )
    ),
    variant === 'board'
      ? React.createElement(DashBoard, { D, scope, branch, setBranch, navigate })
      : React.createElement(DashSimple, { D, scope, navigate })
  );
}

function DashBoard({ D, scope, branch, setBranch, navigate }) {
  const segs = [
    { value: scope.full, color: 'var(--brand)' },
    { value: scope.empty, color: 'var(--text-3)' },
    { value: scope.out, color: 'var(--warn)' },
    { value: scope.defective, color: 'var(--danger)' },
  ];
  const legend = [
    { label: 'Full · ready', value: scope.full, color: 'var(--brand)' },
    { label: 'Empty', value: scope.empty, color: 'var(--text-3)' },
    { label: 'Out / with customer', value: scope.out, color: 'var(--warn)' },
    { label: 'Defective', value: scope.defective, color: 'var(--danger)' },
  ];
  return React.createElement('div', null,
    React.createElement(BranchStrip, { value: branch, onChange: setBranch }),
    React.createElement('div', { className: 'grid g-4', style: { marginBottom: 18 } },
      React.createElement(Kpi, { tone: 'info', icon: 'inventory', label: 'Total cylinders', value: scope.total.toLocaleString('en-IN'), delta: '1.2%', deltaDir: 'up', spark: D.trend }),
      React.createElement(Kpi, { tone: 'brand', icon: 'check2', label: 'Full · ready to send', value: scope.full.toLocaleString('en-IN'), foot: `${Math.round(scope.full/scope.total*100)}% of fleet`, onClick: () => navigate('inventory') }),
      React.createElement(Kpi, { tone: 'warn', icon: 'truck', label: 'Out / dispatched', value: scope.out.toLocaleString('en-IN'), delta: '4', deltaDir: 'up', foot: 'with customers & in transit' }),
      React.createElement(Kpi, { tone: 'danger', icon: 'alert', label: 'Need attention', value: (scope.defective + scope.due).toLocaleString('en-IN'), foot: `${scope.defective} faulty · ${scope.due} test due`, onClick: () => navigate('inventory') })
    ),
    React.createElement('div', { className: 'grid', style: { gridTemplateColumns: '1.5fr 1fr', alignItems: 'start' } },
      React.createElement('div', { className: 'col' },
        // Status donut + legend
        React.createElement('div', { className: 'card' },
          React.createElement('div', { className: 'card-head' },
            React.createElement('h3', null, 'Live yard status'),
            React.createElement('span', { className: 'spacer' }),
            React.createElement('a', { className: 'link-more', onClick: () => navigate('inventory') }, 'Open inventory', React.createElement(Icon, { name: 'chevR' }))
          ),
          React.createElement('div', { className: 'card-pad', style: { display: 'flex', gap: 28, alignItems: 'center', flexWrap: 'wrap' } },
            React.createElement(Ring, { size: 180, stroke: 18, segments: segs, total: scope.total },
              React.createElement('div', null,
                React.createElement('div', { className: 'num', style: { fontSize: 34, fontWeight: 800, lineHeight: 1 } }, (scope.total/1000).toFixed(1) + 'k'),
                React.createElement('div', { style: { fontSize: 11, fontWeight: 700, letterSpacing: '.1em', color: 'var(--text-3)', marginTop: 4 } }, 'CYLINDERS')
              )
            ),
            React.createElement('div', { style: { flex: 1, minWidth: 220, display: 'flex', flexDirection: 'column', gap: 14 } },
              legend.map((l, i) => React.createElement('div', { key: i, className: 'between' },
                React.createElement('div', { className: 'center' },
                  React.createElement('span', { style: { width: 11, height: 11, borderRadius: 4, background: l.color } }),
                  React.createElement('span', { style: { fontWeight: 600, fontSize: 14 } }, l.label)
                ),
                React.createElement('div', { className: 'center', style: { gap: 10 } },
                  React.createElement('span', { className: 'num', style: { fontWeight: 800, fontSize: 15 } }, l.value.toLocaleString('en-IN')),
                  React.createElement('span', { className: 'tag-soft' }, Math.round(l.value/scope.total*100) + '%')
                )
              ))
            )
          )
        ),
        // Weekly movements
        React.createElement('div', { className: 'card' },
          React.createElement('div', { className: 'card-head' },
            React.createElement('h3', null, 'Cylinder movements'),
            React.createElement('span', { className: 'card-head sub', style: { padding: 0, border: 0 } }, '·  last 7 days'),
            React.createElement('span', { className: 'spacer' }),
            React.createElement('span', { className: 'kpi-delta kpi-up', style: { fontSize: 13 } }, React.createElement(Icon, { name: 'trendUp', size: 14 }), '+12% vs last week')
          ),
          React.createElement('div', { className: 'card-pad' },
            React.createElement(Bars, { data: D.trend, labels: D.trendDays, color: 'var(--info)', height: 120, highlight: 6 })
          )
        ),
        // Branch breakdown
        React.createElement('div', { className: 'card desktop-only' },
          React.createElement('div', { className: 'card-head' }, React.createElement('h3', null, 'Branches')),
          React.createElement('table', { className: 'tbl' },
            React.createElement('thead', null, React.createElement('tr', null,
              ['Branch', 'Total', 'Full', 'Out', 'Attention', ''].map((h, i) => React.createElement('th', { key: i }, h)))),
            React.createElement('tbody', null, D.branches.map(b => React.createElement('tr', { key: b.id, onClick: () => setBranch(b.id) },
              React.createElement('td', null, React.createElement('div', { className: 'center' },
                b.hq ? React.createElement(Icon, { name: 'factory', size: 16, style: { color: 'var(--brand)' } }) : React.createElement('span', { style: { width: 16 } }),
                React.createElement('b', null, b.label))),
              React.createElement('td', { className: 'num' }, b.total.toLocaleString('en-IN')),
              React.createElement('td', { className: 'num', style: { color: 'var(--brand-deep)' } }, b.full.toLocaleString('en-IN')),
              React.createElement('td', { className: 'num' }, b.out.toLocaleString('en-IN')),
              React.createElement('td', null, (b.defective + b.due) > 0
                ? React.createElement('span', { className: 'badge b-danger' }, (b.defective + b.due)) : React.createElement('span', { className: 'muted' }, '—')),
              React.createElement('td', null, React.createElement(Icon, { name: 'chevR', size: 16, style: { color: 'var(--text-3)' } }))
            )))
          )
        )
      ),
      React.createElement('div', { className: 'col' },
        React.createElement(LiveFeed, { D, navigate }),
        React.createElement(TestsDueCard, { D, navigate })
      )
    )
  );
}

function LiveFeed({ D, navigate, tall }) {
  const [scans, setScans] = React.useState(D.feed);
  React.useEffect(() => {
    const t = setInterval(() => {
      setScans(prev => {
        const fresh = D.makeScan(true);
        const aged = prev.map(s => ({ ...s, time: s.time === 'Just now' ? '1 min ago' : s.time }));
        return [fresh, ...aged].slice(0, tall ? 8 : 5);
      });
    }, 4200);
    return () => clearInterval(t);
  }, []);
  return React.createElement('div', { className: 'card' },
    React.createElement('div', { className: 'card-head' },
      React.createElement('h3', null, 'Live scan feed'),
      React.createElement('span', { className: 'spacer' }),
      React.createElement('span', { className: 'center', style: { fontSize: 11.5, fontWeight: 700, color: 'var(--brand-deep)' } },
        React.createElement('span', { className: 'dot-online' }), 'LIVE')
    ),
    React.createElement('div', { className: 'card-pad', style: { display: 'flex', flexDirection: 'column', gap: 10 } },
      scans.map((s, i) => React.createElement('div', { key: s.id, className: `feed-row ${i === 0 ? 'fresh' : ''}` },
        React.createElement('span', { style: { flexShrink: 0 } }, React.createElement(Cylinder, { w: 16, gas: s.gas })),
        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
          React.createElement('div', { className: 'center', style: { gap: 8 } },
            React.createElement('b', { className: 'num', style: { fontSize: 14, whiteSpace: 'nowrap' } }, s.asset_no),
            React.createElement(GasPill, { gas: s.gas })
          ),
          React.createElement('div', { style: { fontSize: 12.5, color: 'var(--text-2)', marginTop: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } },
            s.flow, ' · ', s.verb, ' ', React.createElement('b', { style: { color: 'var(--text)' } }, s.location))
        ),
        React.createElement('div', { style: { textAlign: 'right', flexShrink: 0 } },
          React.createElement('div', { style: { fontSize: 12, color: 'var(--text-3)', fontWeight: 600, whiteSpace: 'nowrap' } }, s.time),
          React.createElement('div', { style: { fontSize: 10.5, color: 'var(--text-3)', whiteSpace: 'nowrap' } }, s.scanner.split(' · ')[0])
        )
      ))
    )
  );
}

function TestsDueCard({ D, navigate }) {
  return React.createElement('div', { className: 'card' },
    React.createElement('div', { className: 'card-head' },
      React.createElement('h3', null, 'Hydro-tests due'),
      React.createElement('span', { className: 'spacer' }),
      React.createElement('a', { className: 'link-more', onClick: () => navigate('inventory') }, 'All', React.createElement(Icon, { name: 'chevR' }))
    ),
    React.createElement('div', { className: 'card-pad', style: { display: 'flex', flexDirection: 'column', gap: 10 } },
      D.testsDue.map(t => {
        const cls = t.status === 'overdue' ? 'b-danger' : t.status === 'urgent' ? 'b-dispatched' : 'b-test';
        const txt = t.dueIn < 0 ? `${Math.abs(t.dueIn)} days overdue` : `in ${t.dueIn} days`;
        return React.createElement('div', { key: t.asset_no, className: 'between', style: { padding: '10px 12px', background: 'var(--surface-2)', borderRadius: 'var(--r-sm)' } },
          React.createElement('div', { className: 'center' },
            React.createElement('div', { className: 'feed-ico', style: { width: 38, height: 38, background: 'var(--amber-soft)', color: 'var(--amber)' } }, React.createElement(Icon, { name: 'thermo', size: 18 })),
            React.createElement('div', null,
              React.createElement('b', { className: 'num', style: { fontSize: 13.5 } }, t.asset_no),
              React.createElement('div', { style: { fontSize: 12, color: 'var(--text-3)' } }, t.gas + ' · ' + t.branch))
          ),
          React.createElement('span', { className: `badge ${cls}` }, txt)
        );
      })
    )
  );
}

/* ----- Simple worker dashboard ----- */
function DashSimple({ D, scope, navigate }) {
  const tiles = [
    { tone: 'brand', icon: 'check2', big: scope.full, label: 'Ready to send', sub: 'Full cylinders', status: 'in-storage' },
    { tone: 'warn', icon: 'truck', big: scope.out, label: 'Out with customers', sub: 'Dispatched', status: 'dispatched' },
    { tone: 'info', icon: 'inventory', big: scope.empty, label: 'Empty — need refill', sub: 'In storage', status: 'empty' },
    { tone: 'danger', icon: 'alert', big: scope.defective + scope.due, label: 'Need a check', sub: 'Faulty or test due', status: 'defective' },
  ];
  const tasks = [
    { icon: 'truck', text: 'Load 120 Oxygen cylinders for Tata Steel', meta: 'Dispatch Dock · 11:00 AM', tone: 'warn' },
    { icon: 'transfer', text: 'Receive transfer from Nashik (90 cylinders)', meta: 'Gate IN · arriving soon', tone: 'info' },
    { icon: 'thermo', text: 'Send CYL-10455 for hydro-test', meta: 'Due in 8 days', tone: 'amber' },
  ];
  return React.createElement('div', null,
    React.createElement('div', { className: 'card', style: { padding: '26px 26px', marginBottom: 18, background: 'linear-gradient(120deg, var(--brand-soft), transparent 60%)' } },
      React.createElement('div', { className: 'between', style: { flexWrap: 'wrap', gap: 16 } },
        React.createElement('div', null,
          React.createElement('div', { style: { fontSize: 26, fontWeight: 800, letterSpacing: '-.02em' } }, 'Good morning, Vikram 👋'),
          React.createElement('div', { style: { fontSize: 15, color: 'var(--text-2)', marginTop: 4 } }, 'Pune plant · ', React.createElement('b', null, scope.total.toLocaleString('en-IN')), ' cylinders tracked today')
        ),
        React.createElement('button', { className: 'btn btn-primary btn-xl', onClick: () => navigate('scan') },
          React.createElement(Icon, { name: 'scan', size: 24 }), 'Scan a cylinder')
      )
    ),
    React.createElement('div', { className: 'grid g-4', style: { marginBottom: 8 } },
      tiles.map((t, i) => React.createElement('button', { key: i, className: `kpi tone-${t.tone}`, onClick: () => navigate('inventory'),
        style: { textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 0, minHeight: 168 } },
        React.createElement('div', { className: 'center', style: { justifyContent: 'space-between', width: '100%', marginBottom: 'auto' } },
          React.createElement('div', { className: 'kpi-ico', style: { width: 54, height: 54, borderRadius: 16 } }, React.createElement(Icon, { name: t.icon, size: 27 })),
          React.createElement(Cylinder, { w: 22, status: t.status })
        ),
        React.createElement('div', { className: 'kpi-value', style: { fontSize: 46, marginTop: 16 } }, t.big.toLocaleString('en-IN')),
        React.createElement('div', { style: { fontSize: 16, fontWeight: 700, marginTop: 6 } }, t.label),
        React.createElement('div', { style: { fontSize: 12.5, color: 'var(--text-3)', marginTop: 2 } }, t.sub)
      ))
    ),
    React.createElement('div', { className: 'grid', style: { gridTemplateColumns: '1.3fr 1fr', marginTop: 18, alignItems: 'start' } },
      React.createElement('div', { className: 'card' },
        React.createElement('div', { className: 'card-head' },
          React.createElement('h3', null, 'Your tasks today'),
          React.createElement('span', { className: 'spacer' }),
          React.createElement('span', { className: 'tag-soft' }, tasks.length + ' to do')
        ),
        React.createElement('div', { className: 'card-pad', style: { display: 'flex', flexDirection: 'column', gap: 12 } },
          tasks.map((t, i) => React.createElement('div', { key: i, className: 'center', style: { gap: 14, padding: 14, border: '1px solid var(--border)', borderRadius: 'var(--r)' } },
            React.createElement('div', { className: 'feed-ico', style: { width: 48, height: 48, background: `var(--${t.tone}-soft)`, color: `var(--${t.tone})` } }, React.createElement(Icon, { name: t.icon, size: 23 })),
            React.createElement('div', { style: { flex: 1 } },
              React.createElement('div', { style: { fontSize: 15.5, fontWeight: 600 } }, t.text),
              React.createElement('div', { style: { fontSize: 12.5, color: 'var(--text-3)', marginTop: 2 } }, t.meta)
            ),
            React.createElement(Icon, { name: 'chevR', size: 20, style: { color: 'var(--text-3)' } })
          ))
        )
      ),
      React.createElement(LiveFeed, { D, navigate, tall: true })
    )
  );
}

/* ============ SCAN ============ */
function ScanPage({ navigate }) {
  const [variant, setVariant] = React.useState(() => localStorage.getItem('ap2-scan') || 'single');
  React.useEffect(() => localStorage.setItem('ap2-scan', variant), [variant]);
  return React.createElement('div', { style: { maxWidth: 720, margin: '0 auto' } },
    React.createElement('div', { className: 'seg', style: { marginBottom: 20, width: '100%' } },
      React.createElement('button', { className: variant === 'single' ? 'on' : '', style: { flex: 1, justifyContent: 'center' }, onClick: () => setVariant('single') },
        React.createElement(Icon, { name: 'scan', size: 16 }), 'Single scan'),
      React.createElement('button', { className: variant === 'bulk' ? 'on' : '', style: { flex: 1, justifyContent: 'center' }, onClick: () => setVariant('bulk') },
        React.createElement(Icon, { name: 'layers', size: 16 }), 'Bulk count')
    ),
    variant === 'single' ? React.createElement(ScanSingle, { navigate }) : React.createElement(ScanBulk, { navigate })
  );
}

const FLOWS = [
  { id: 'gate_in', label: 'Gate IN', sub: 'Cylinder arrived', icon: 'down', tone: 'brand', status: 'in-storage' },
  { id: 'gate_out', label: 'Gate OUT', sub: 'Dispatching out', icon: 'up', tone: 'warn', status: 'dispatched' },
  { id: 'filled', label: 'Filled', sub: 'Now full', icon: 'droplet', tone: 'info', status: 'in-storage' },
  { id: 'returned', label: 'Returned', sub: 'Came back empty', icon: 'refresh', tone: 'amber', status: 'empty' },
  { id: 'defective', label: 'Faulty', sub: 'Mark defective', icon: 'alert', tone: 'danger', status: 'defective' },
];

function ScanSingle({ navigate }) {
  const toast = useToast();
  const D = window.DATA;
  const [flow, setFlow] = React.useState(FLOWS[0]);
  const [scanning, setScanning] = React.useState(false);
  const [result, setResult] = React.useState(null);
  const [recent, setRecent] = React.useState([]);
  const [online, setOnline] = React.useState(true);

  const doScan = () => {
    if (scanning) return;
    setScanning(true); setResult(null);
    setTimeout(() => {
      const s = D.makeScan(true);
      s.status = flow.status; s.flow = flow.label;
      setScanning(false); setResult({ ...s, flow });
      setRecent(r => [{ ...s, flow }, ...r].slice(0, 6));
      toast.ok('Saved · ' + s.asset_no, flow.label + (online ? '' : ' · queued offline'));
    }, 1300);
  };

  return React.createElement('div', null,
    React.createElement('div', { className: 'between', style: { marginBottom: 14 } },
      React.createElement('div', { className: 'center', style: { fontSize: 13, fontWeight: 700, color: online ? 'var(--brand-deep)' : 'var(--warn)' } },
        React.createElement(Icon, { name: online ? 'cloud' : 'cloudOff', size: 18 }),
        online ? 'Online · saving live' : 'Offline · 3 scans queued'),
      React.createElement('button', { className: 'chip', onClick: () => setOnline(o => !o) }, 'Simulate ', online ? 'offline' : 'online')
    ),
    // Flow selector — big buttons
    React.createElement('div', { className: 'card-pad card', style: { marginBottom: 18 } },
      React.createElement('div', { style: { fontSize: 13, fontWeight: 700, color: 'var(--text-2)', marginBottom: 12 } }, '1 · What are you doing?'),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: 10 } },
        FLOWS.map(f => React.createElement('button', { key: f.id, onClick: () => setFlow(f),
          style: {
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7, padding: '16px 8px', borderRadius: 'var(--r)',
            border: `2px solid ${flow.id === f.id ? `var(--${f.tone})` : 'var(--border)'}`,
            background: flow.id === f.id ? `var(--${f.tone}-soft)` : 'var(--surface)', transition: 'all .15s'
          }},
          React.createElement('div', { style: { width: 44, height: 44, borderRadius: 13, display: 'grid', placeItems: 'center', background: `var(--${f.tone}-soft)`, color: `var(--${f.tone})` } }, React.createElement(Icon, { name: f.icon, size: 22 })),
          React.createElement('b', { style: { fontSize: 14 } }, f.label),
          React.createElement('span', { style: { fontSize: 11, color: 'var(--text-3)' } }, f.sub)
        ))
      )
    ),
    // Scan button + result
    React.createElement('div', { className: 'card card-pad', style: { textAlign: 'center' } },
      React.createElement('div', { style: { fontSize: 13, fontWeight: 700, color: 'var(--text-2)', marginBottom: 18 } }, '2 · Tap the tag with your reader'),
      React.createElement('button', { onClick: doScan, disabled: scanning, 'aria-label': 'Scan now',
        style: {
          width: 200, height: 200, borderRadius: '50%', margin: '0 auto 8px', position: 'relative',
          background: `radial-gradient(circle at 50% 38%, var(--${flow.tone}-soft), var(--surface))`,
          border: `3px solid var(--${flow.tone})`, display: 'grid', placeItems: 'center', cursor: scanning ? 'default' : 'pointer'
        }},
        scanning && [0,1,2].map(i => React.createElement('span', { key: i, style: {
          position: 'absolute', inset: 0, borderRadius: '50%', border: `2px solid var(--${flow.tone})`,
          animation: `ping 1.4s ${i*0.45}s ease-out infinite`, opacity: 0 } })),
        React.createElement('div', { style: { color: `var(--${flow.tone})` } },
          React.createElement(Icon, { name: 'scan', size: 64 }),
          React.createElement('div', { style: { fontSize: 15, fontWeight: 800, marginTop: 8 } }, scanning ? 'Reading…' : 'Tap to scan')
        )
      ),
      React.createElement('style', null, '@keyframes ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.35);opacity:0}}'),
      result && React.createElement('div', { style: { marginTop: 20, padding: 18, borderRadius: 'var(--r-lg)', background: 'var(--brand-soft)', border: '1px solid var(--brand)', animation: 'pop .4s ease' } },
        React.createElement('div', { className: 'center', style: { justifyContent: 'center', gap: 10, marginBottom: 12 } },
          React.createElement('div', { style: { width: 44, height: 44, borderRadius: '50%', background: 'var(--brand)', color: '#fff', display: 'grid', placeItems: 'center' } }, React.createElement(Icon, { name: 'check', size: 26 })),
          React.createElement('b', { style: { fontSize: 18 } }, 'Saved!')
        ),
        React.createElement('div', { className: 'center', style: { justifyContent: 'center', gap: 16, flexWrap: 'wrap' } },
          React.createElement(Cylinder, { w: 26, gas: result.gas }),
          React.createElement('div', { style: { textAlign: 'left' } },
            React.createElement('div', { className: 'num', style: { fontSize: 20, fontWeight: 800 } }, result.asset_no),
            React.createElement('div', { className: 'center', style: { gap: 8, marginTop: 4 } },
              React.createElement(GasPill, { gas: result.gas }),
              React.createElement(Badge, { status: result.status }))
          ),
          React.createElement('a', { className: 'btn btn-ghost', onClick: () => navigate('asset') }, 'View')
        )
      )
    ),
    recent.length > 0 && React.createElement('div', { style: { marginTop: 20 } },
      React.createElement('div', { className: 'sec-title' }, React.createElement('h2', null, 'Scanned just now'), React.createElement('span', { className: 'spacer' }), React.createElement('span', { className: 'tag-soft' }, recent.length)),
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
        recent.map((s, i) => React.createElement('div', { key: i, className: 'feed-row' },
          React.createElement(Cylinder, { w: 14, gas: s.gas }),
          React.createElement('b', { className: 'num', style: { fontSize: 14, flex: 1 } }, s.asset_no),
          React.createElement(Badge, { status: s.status }),
          React.createElement('span', { style: { fontSize: 12, color: 'var(--text-3)' } }, 'now')
        ))
      )
    )
  );
}

function ScanBulk({ navigate }) {
  const toast = useToast();
  const D = window.DATA;
  const [running, setRunning] = React.useState(false);
  const [items, setItems] = React.useState([]);
  const timer = React.useRef(null);

  const toggle = () => {
    if (running) { clearInterval(timer.current); setRunning(false); return; }
    setRunning(true);
    timer.current = setInterval(() => {
      setItems(prev => {
        const s = D.makeScan(true);
        if (prev.find(p => p.asset_no === s.asset_no)) return prev;
        return [s, ...prev];
      });
    }, 600);
  };
  React.useEffect(() => () => clearInterval(timer.current), []);
  const save = () => { clearInterval(timer.current); setRunning(false); toast.ok(`${items.length} cylinders counted`, 'Inventory updated'); };

  return React.createElement('div', null,
    React.createElement('div', { className: 'card card-pad', style: { textAlign: 'center', marginBottom: 16 } },
      React.createElement('div', { style: { fontSize: 13, fontWeight: 700, color: 'var(--text-2)', marginBottom: 8 } }, 'Bulk inventory count'),
      React.createElement('div', { className: 'num', style: { fontSize: 88, fontWeight: 800, lineHeight: 1, color: running ? 'var(--brand)' : 'var(--text)' } }, items.length),
      React.createElement('div', { style: { fontSize: 14, color: 'var(--text-3)', marginBottom: 20 } }, running ? 'Sweep the reader across the cage…' : 'cylinders counted'),
      React.createElement('div', { className: 'center', style: { justifyContent: 'center', gap: 12 } },
        React.createElement('button', { className: `btn btn-xl ${running ? 'btn-danger' : 'btn-primary'}`, onClick: toggle, style: { minWidth: 200 } },
          React.createElement(Icon, { name: running ? 'x' : 'scan', size: 24 }), running ? 'Stop' : 'Start counting'),
        items.length > 0 && !running && React.createElement('button', { className: 'btn btn-lg btn-info', onClick: save },
          React.createElement(Icon, { name: 'check', size: 20 }), 'Save count')
      )
    ),
    items.length > 0 && React.createElement('div', { className: 'card' },
      React.createElement('div', { className: 'card-head' }, React.createElement('h3', null, 'Tags read'), React.createElement('span', { className: 'spacer' }),
        React.createElement('button', { className: 'chip', onClick: () => setItems([]) }, React.createElement(Icon, { name: 'trash', size: 14 }), 'Clear')),
      React.createElement('div', { style: { maxHeight: 380, overflow: 'auto' } },
        React.createElement('table', { className: 'tbl' },
          React.createElement('tbody', null, items.map((s, i) => React.createElement('tr', { key: s.id },
            React.createElement('td', { style: { width: 30 } }, React.createElement(Cylinder, { w: 13, gas: s.gas })),
            React.createElement('td', { className: 'num' }, s.asset_no),
            React.createElement('td', null, React.createElement(GasPill, { gas: s.gas })),
            React.createElement('td', { className: 'mono muted', style: { fontSize: 11 } }, s.tag_id.slice(0, 12) + '…'),
            React.createElement('td', { style: { textAlign: 'right' } }, React.createElement(Icon, { name: 'check2', size: 18, style: { color: 'var(--brand)' } }))
          )))
        )
      )
    )
  );
}

Object.assign(window, { Dashboard, ScanPage, LiveFeed });