/* pages2.jsx — Inventory + Asset detail */

function Inventory({ navigate }) {
  const D = window.DATA;
  const [q, setQ] = React.useState('');
  const [view, setView] = React.useState('list');
  const [branch, setBranch] = React.useState('ALL');
  const [filter, setFilter] = React.useState('all');

  const filters = [
    { id: 'all', label: 'All' },
    { id: 'in-storage', label: 'Full · ready' },
    { id: 'empty', label: 'Empty' },
    { id: 'dispatched', label: 'Out' },
    { id: 'with-customer', label: 'With customer' },
    { id: 'in-test', label: 'Test due' },
    { id: 'defective', label: 'Defective' },
  ];

  let rows = D.cylinders;
  if (branch !== 'ALL') rows = rows.filter(r => r.branch === branch);
  if (filter !== 'all') rows = rows.filter(r => r.status === filter);
  if (q) rows = rows.filter(r => (r.asset_no + r.tag_id + r.gas + r.owner).toLowerCase().includes(q.toLowerCase()));

  return React.createElement('div', null,
    React.createElement('div', { className: 'page-head' },
      React.createElement('div', null,
        React.createElement('h1', null, 'Inventory'),
        React.createElement('p', null, rows.length.toLocaleString('en-IN') + ' cylinders shown · ' + D.totals.total.toLocaleString('en-IN') + ' total')
      ),
      React.createElement('div', { className: 'actions' },
        React.createElement('button', { className: 'btn btn-ghost desktop-only' }, React.createElement(Icon, { name: 'download', size: 18 }), 'Export'),
        React.createElement('button', { className: 'btn btn-primary', onClick: () => navigate('add') }, React.createElement(Icon, { name: 'add', size: 18 }), 'Add asset')
      )
    ),
    // search + view toggle
    React.createElement('div', { className: 'between', style: { marginBottom: 16, gap: 12, flexWrap: 'wrap' } },
      React.createElement('div', { className: 'tb-search', style: { width: 'min(420px, 100%)', flex: 1, background: 'var(--surface)' } },
        React.createElement(Icon, { name: 'search', size: 18 }),
        React.createElement('input', { placeholder: 'Search cylinder no, tag, gas, customer…', value: q, onChange: e => setQ(e.target.value) })
      ),
      React.createElement('div', { className: 'seg desktop-only' },
        React.createElement('button', { className: view === 'list' ? 'on' : '', onClick: () => setView('list') }, React.createElement(Icon, { name: 'list', size: 16 }), 'List'),
        React.createElement('button', { className: view === 'grid' ? 'on' : '', onClick: () => setView('grid') }, React.createElement(Icon, { name: 'grid', size: 16 }), 'Grid')
      )
    ),
    React.createElement(BranchStrip, { value: branch, onChange: setBranch }),
    React.createElement('div', { className: 'branch-strip', style: { marginTop: -6 } },
      filters.map(f => React.createElement('button', { key: f.id, className: `chip ${filter === f.id ? 'on' : ''}`, onClick: () => setFilter(f.id) }, f.label))
    ),
    rows.length === 0
      ? React.createElement('div', { className: 'card empty' }, React.createElement(Icon, { name: 'inventory', size: 44 }), React.createElement('div', null, 'No cylinders match your search'))
      : view === 'grid'
        ? React.createElement(InvGrid, { rows, navigate })
        : React.createElement(InvList, { rows, navigate })
  );
}

function InvList({ rows, navigate }) {
  const D = window.DATA;
  return React.createElement('div', { className: 'card', style: { overflow: 'hidden' } },
    React.createElement('div', { style: { overflowX: 'auto' } },
      React.createElement('table', { className: 'tbl' },
        React.createElement('thead', null, React.createElement('tr', null,
          ['', 'Cylinder', 'Gas', 'Status', 'Owner', 'Branch', 'Last seen', ''].map((h, i) => React.createElement('th', { key: i }, h)))),
        React.createElement('tbody', null, rows.map(r => React.createElement('tr', { key: r.asset_no, onClick: () => navigate('asset', r) },
          React.createElement('td', { style: { width: 28 } }, React.createElement(Cylinder, { w: 14, status: r.status })),
          React.createElement('td', null,
            React.createElement('b', { className: 'num' }, r.asset_no),
            React.createElement('div', { className: 'mono', style: { fontSize: 10.5, color: 'var(--text-3)' } }, r.tag_id.slice(0, 14) + '…')),
          React.createElement('td', null, React.createElement(GasPill, { gas: r.gas })),
          React.createElement('td', null, React.createElement(Badge, { status: r.status })),
          React.createElement('td', { className: 't2' }, r.owner),
          React.createElement('td', null, React.createElement('span', { className: 'tag-soft' }, r.branchName)),
          React.createElement('td', { className: 'muted', style: { fontSize: 12.5 } }, r.lastSeen),
          React.createElement('td', null, React.createElement(Icon, { name: 'chevR', size: 16, style: { color: 'var(--text-3)' } }))
        )))
      )
    )
  );
}

function InvGrid({ rows, navigate }) {
  return React.createElement('div', { className: 'grid', style: { gridTemplateColumns: 'repeat(auto-fill, minmax(190px, 1fr))' } },
    rows.map(r => React.createElement('button', { key: r.asset_no, className: 'card card-pad', onClick: () => navigate('asset', r),
      style: { textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 0, alignItems: 'stretch' } },
      React.createElement('div', { className: 'between', style: { marginBottom: 14 } },
        React.createElement('b', { className: 'num', style: { fontSize: 15 } }, r.asset_no),
        React.createElement(Cylinder, { w: 18, status: r.status })
      ),
      React.createElement('div', { style: { marginBottom: 12 } }, React.createElement(Badge, { status: r.status })),
      React.createElement('div', { className: 'between' },
        React.createElement(GasPill, { gas: r.gas }),
        React.createElement('span', { className: 'tag-soft' }, r.capacity + 'L')),
      React.createElement('div', { className: 'divider', style: { margin: '12px 0' } }),
      React.createElement('div', { style: { fontSize: 12, color: 'var(--text-3)' } },
        React.createElement('div', { className: 'center', style: { gap: 6 } }, React.createElement(Icon, { name: 'pin', size: 13 }), r.location)),
      React.createElement('div', { className: 'center', style: { gap: 6, fontSize: 12, color: 'var(--text-3)', marginTop: 5 } }, React.createElement(Icon, { name: 'clock', size: 13 }), r.lastSeen)
    ))
  );
}

/* ---- Asset detail ---- */
function AssetDetail({ navigate, params }) {
  const D = window.DATA;
  const r = params && params.asset_no ? params : D.cylinders[0];
  const meta = D.status[r.status];
  const timeline = [
    { icon: 'truck', tone: 'warn', title: 'Dispatched to ' + (r.owner !== 'Cryo Air Fluid' ? r.owner : 'Tata Steel Ltd'), meta: 'Gate OUT · Vikram Jadhav', time: '2 hours ago' },
    { icon: 'droplet', tone: 'info', title: 'Filled — now full', meta: 'Filling Bay A · auto', time: 'Today 08:12' },
    { icon: 'down', tone: 'brand', title: 'Returned empty', meta: 'Gate IN · Handheld UTouch2-04', time: 'Yesterday 16:40' },
    { icon: 'thermo', tone: 'amber', title: 'Hydro-test passed', meta: 'National Hydro Test', time: r.mfg + 5 + ' · cleared' },
    { icon: 'plusC', tone: 'brand', title: 'Commissioned & tag linked', meta: 'Bulk import · ' + r.tag_id.slice(0, 10), time: 'Mfd ' + r.mfg },
  ];
  return React.createElement('div', null,
    React.createElement('button', { className: 'chip', style: { marginBottom: 16 }, onClick: () => navigate('inventory') },
      React.createElement(Icon, { name: 'chevL', size: 15 }), 'Back to inventory'),
    React.createElement('div', { className: 'grid', style: { gridTemplateColumns: '340px 1fr', alignItems: 'start' } },
      // left: identity card
      React.createElement('div', { className: 'card card-pad', style: { textAlign: 'center', position: 'sticky', top: 90 } },
        React.createElement('div', { style: { display: 'grid', placeItems: 'center', padding: '14px 0 22px' } },
          React.createElement(Cylinder, { w: 64, status: r.status, style: { boxShadow: 'var(--shadow-lg)' } })),
        React.createElement('div', { className: 'num', style: { fontSize: 30, fontWeight: 800 } }, r.asset_no),
        React.createElement('div', { style: { marginTop: 10, marginBottom: 18 } }, React.createElement(Badge, { status: r.status, large: true })),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 0, textAlign: 'left' } },
          [['Gas type', React.createElement(GasPill, { gas: r.gas })],
           ['Capacity', r.capacity + ' L'],
           ['RFID tag', React.createElement('span', { className: 'mono', style: { fontSize: 12 } }, r.tag_id)],
           ['Owner', r.owner],
           ['Branch', r.branchName],
           ['Manufactured', r.mfg],
           ['Next test', String(r.testDue)],
           ['Location', r.location]].map(([k, v], i) =>
            React.createElement('div', { key: i, className: 'between', style: { padding: '11px 0', borderBottom: i < 7 ? '1px solid var(--border)' : 'none' } },
              React.createElement('span', { style: { fontSize: 13, color: 'var(--text-3)', fontWeight: 600 } }, k),
              React.createElement('span', { style: { fontSize: 13.5, fontWeight: 600, textAlign: 'right' } }, v))
          )
        ),
        React.createElement('div', { style: { display: 'flex', gap: 10, marginTop: 18 } },
          React.createElement('button', { className: 'btn btn-primary btn-block', onClick: () => navigate('scan') }, React.createElement(Icon, { name: 'scan', size: 18 }), 'Scan'),
          React.createElement('button', { className: 'btn btn-icon' }, React.createElement(Icon, { name: 'edit', size: 18 }))
        )
      ),
      // right: lifecycle
      React.createElement('div', { className: 'col' },
        React.createElement('div', { className: 'grid g-3' },
          React.createElement(Kpi, { tone: 'info', icon: 'sync', label: 'Total scans', value: '142', foot: 'lifetime movements' }),
          React.createElement(Kpi, { tone: 'brand', icon: 'truck', label: 'Trips', value: '38', foot: 'fill → dispatch → return' }),
          React.createElement(Kpi, { tone: 'amber', icon: 'thermo', label: 'Tests passed', value: '2', foot: 'next due ' + r.testDue })
        ),
        React.createElement('div', { className: 'card' },
          React.createElement('div', { className: 'card-head' }, React.createElement('h3', null, 'Lifecycle history'),
            React.createElement('span', { className: 'spacer' }),
            React.createElement('span', { className: 'tag-soft' }, 'Full audit trail')),
          React.createElement('div', { className: 'card-pad' },
            React.createElement('div', { style: { position: 'relative', paddingLeft: 8 } },
              timeline.map((t, i) => React.createElement('div', { key: i, style: { display: 'flex', gap: 16, paddingBottom: i < timeline.length - 1 ? 22 : 0, position: 'relative' } },
                i < timeline.length - 1 && React.createElement('span', { style: { position: 'absolute', left: 21, top: 44, bottom: 0, width: 2, background: 'var(--border)' } }),
                React.createElement('div', { className: 'feed-ico', style: { width: 44, height: 44, flex: '0 0 44px', background: `var(--${t.tone}-soft)`, color: `var(--${t.tone})`, zIndex: 1 } }, React.createElement(Icon, { name: t.icon, size: 21 })),
                React.createElement('div', { style: { flex: 1, paddingTop: 2 } },
                  React.createElement('div', { style: { fontSize: 15, fontWeight: 600 } }, t.title),
                  React.createElement('div', { style: { fontSize: 12.5, color: 'var(--text-3)', marginTop: 3 } }, t.meta),
                ),
                React.createElement('div', { style: { fontSize: 12, color: 'var(--text-3)', fontWeight: 600, whiteSpace: 'nowrap' } }, t.time)
              ))
            )
          )
        )
      )
    )
  );
}

Object.assign(window, { Inventory, AssetDetail });