/* pages4.jsx — Users, Devices, Import, Settings, Login */

function Users() {
  const D = window.DATA;
  const toast = useToast();
  const roleMeta = {
    admin: { label: 'Admin', cls: 'b-customer' }, manager: { label: 'Manager', cls: 'b-full' },
    accounts: { label: 'Accounts', cls: 'b-test' }, operator: { label: 'Operator', cls: 'b-dispatched' }, viewer: { label: 'Viewer', cls: 'b-empty' },
  };
  const [users, setUsers] = React.useState(D.users);
  const [addOpen, setAddOpen] = React.useState(false);
  const [resetUser, setResetUser] = React.useState(null);
  const [menuFor, setMenuFor] = React.useState(null);

  const removeUser = (uname) => { setUsers(list => list.filter(u => u.user !== uname)); setMenuFor(null); toast.info('User removed', '@' + uname); };

  return React.createElement('div', null,
    React.createElement('div', { className: 'page-head' },
      React.createElement('div', null, React.createElement('h1', null, 'Users'), React.createElement('p', null, users.length + ' people · ' + users.filter(u => u.online).length + ' online now')),
      React.createElement('button', { className: 'btn btn-primary', onClick: () => setAddOpen(true) }, React.createElement(Icon, { name: 'add', size: 18 }), 'Add user')
    ),
    React.createElement('div', { className: 'grid', style: { gridTemplateColumns: 'repeat(auto-fill, minmax(290px, 1fr))' } },
      users.map(u => React.createElement('div', { key: u.user, className: 'card card-pad' },
        React.createElement('div', { className: 'center', style: { gap: 14, marginBottom: 16 } },
          React.createElement('div', { style: { position: 'relative' } },
            React.createElement('div', { className: 'avatar', style: { width: 52, height: 52, fontSize: 19, borderRadius: 15 } }, u.initials),
            React.createElement('span', { style: { position: 'absolute', bottom: -2, right: -2, width: 15, height: 15, borderRadius: '50%', background: u.online ? 'var(--brand)' : 'var(--text-3)', border: '3px solid var(--surface)' } })),
          React.createElement('div', { style: { flex: 1, minWidth: 0 } },
            React.createElement('b', { style: { fontSize: 16 } }, u.name),
            React.createElement('div', { className: 'mono', style: { fontSize: 12, color: 'var(--text-3)' } }, '@' + u.user)),
          React.createElement('div', { style: { position: 'relative' } },
            React.createElement('button', { className: 'x-btn', onClick: () => setMenuFor(menuFor === u.user ? null : u.user) }, React.createElement(Icon, { name: 'more', size: 18 })),
            menuFor === u.user && React.createElement('div', { style: { position: 'absolute', right: 0, top: 42, zIndex: 20, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', boxShadow: 'var(--shadow-lg)', padding: 6, width: 170 } },
              React.createElement('button', { className: 'sb-link', style: { width: '100%' }, onClick: () => { setResetUser(u); setMenuFor(null); } }, React.createElement(Icon, { name: 'lock', size: 16 }), React.createElement('span', null, 'Reset password')),
              React.createElement('button', { className: 'sb-link', style: { width: '100%', color: 'var(--danger)' }, onClick: () => removeUser(u.user) }, React.createElement(Icon, { name: 'trash', size: 16 }), React.createElement('span', null, 'Delete user'))))),
        React.createElement('div', { className: 'between', style: { paddingTop: 14, borderTop: '1px solid var(--border)' } },
          React.createElement('span', { className: `badge ${(roleMeta[u.role] || roleMeta.viewer).cls}` }, (roleMeta[u.role] || roleMeta.viewer).label),
          React.createElement('span', { className: 'center', style: { fontSize: 12.5, color: 'var(--text-3)', gap: 5 } }, React.createElement(Icon, { name: 'pin', size: 13 }), u.branch))
      ))
    ),
    addOpen && React.createElement(AddUserModal, { onClose: () => setAddOpen(false), onCreate: (u) => { setUsers(list => [u, ...list]); setAddOpen(false); toast.ok('User created', '@' + u.user + ' · temporary password set'); } }),
    resetUser && React.createElement(ResetPwModal, { user: resetUser, onClose: () => setResetUser(null), onDone: () => { toast.ok('Password reset', '@' + resetUser.user + ' must change it at next login'); setResetUser(null); } })
  );
}

const USER_ROLES = [
  { value: 'viewer', label: 'Viewer', sub: 'Read-only access', dot: '#8c8c8c' },
  { value: 'operator', label: 'Operator', sub: 'Scan & log movements', dot: '#1677ff' },
  { value: 'manager', label: 'Manager', sub: 'Transfers, assets, reports', dot: '#fa8c16' },
  { value: 'admin', label: 'Admin', sub: 'Full control + settings', dot: '#ff4d4f' },
];

function AddUserModal({ onClose, onCreate }) {
  const D = window.DATA;
  const [name, setName] = React.useState('');
  const [username, setUsername] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [role, setRole] = React.useState('operator');
  const [branch, setBranch] = React.useState('');
  const [showPw, setShowPw] = React.useState(false);
  const genPw = () => { setPw('Cryo@' + Math.floor(1000 + Math.random()*9000)); setShowPw(true); };
  const pwShort = pw.length > 0 && pw.length < 8;
  const initials = (name || username || 'U').split(/[\s.]+/).map(w => w[0]).slice(0,2).join('').toUpperCase();
  const create = () => onCreate({
    name: name || username, user: username, role, branch: branch ? D.branchById[branch].name : 'All',
    online: false, initials,
  });
  return React.createElement(Modal, { title: 'Add user', icon: 'user', onClose,
    footer: [
      React.createElement('button', { key: 'c', className: 'btn btn-ghost', onClick: onClose }, 'Cancel'),
      React.createElement('button', { key: 's', className: 'btn btn-primary', disabled: !username || pw.length < 8, onClick: create }, React.createElement(Icon, { name: 'check', size: 18 }), 'Create user')
    ]},
    React.createElement('div', { className: 'grid g-2', style: { marginBottom: 16 } },
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Full name'),
        React.createElement('input', { className: 'input', placeholder: 'Sunil More', value: name, onChange: e => setName(e.target.value) })),
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Username'),
        React.createElement('input', { className: 'input mono', placeholder: 'sunil.m', value: username, onChange: e => setUsername(e.target.value.replace(/\s+/g, '')) }))),
    React.createElement('div', { className: 'field', style: { marginBottom: 16 } },
      React.createElement('label', null, 'Temporary password'),
      React.createElement('div', { className: 'center', style: { gap: 10 } },
        React.createElement('input', { className: 'input mono', type: showPw ? 'text' : 'password', placeholder: 'At least 8 characters', value: pw, onChange: e => setPw(e.target.value) }),
        React.createElement('button', { className: 'btn btn-icon btn-ghost', type: 'button', onClick: () => setShowPw(s => !s), title: 'Show/hide' }, React.createElement(Icon, { name: 'eye', size: 18 })),
        React.createElement('button', { className: 'btn btn-ghost', style: { flexShrink: 0 }, type: 'button', onClick: genPw }, React.createElement(Icon, { name: 'sync', size: 16 }), 'Generate')),
      pwShort
        ? React.createElement('span', { style: { fontSize: 12, color: 'var(--danger)', fontWeight: 600 } }, 'Must be at least 8 characters')
        : React.createElement('span', { style: { fontSize: 12, color: 'var(--text-3)' } }, 'User will be asked to change this at first login.')),
    React.createElement('div', { className: 'field', style: { marginBottom: 16 } }, React.createElement('label', null, 'Role'),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 8 } },
        USER_ROLES.map(r => React.createElement('button', { key: r.value, type: 'button', onClick: () => setRole(r.value),
          style: { display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 'var(--r-sm)', textAlign: 'left',
            border: `2px solid ${role === r.value ? 'var(--info)' : 'var(--border)'}`, background: role === r.value ? 'var(--info-soft)' : 'var(--surface)', transition: 'all .14s' } },
          React.createElement('span', { style: { width: 9, height: 9, borderRadius: '50%', background: r.dot, flexShrink: 0 } }),
          React.createElement('div', null, React.createElement('b', { style: { fontSize: 13.5 } }, r.label), React.createElement('div', { style: { fontSize: 11, color: 'var(--text-3)' } }, r.sub))))
      )),
    React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Branch (optional)'),
      React.createElement('select', { className: 'select', value: branch, onChange: e => setBranch(e.target.value) },
        React.createElement('option', { value: '' }, 'All branches'),
        D.branches.map(b => React.createElement('option', { key: b.id, value: b.id }, b.id + ' — ' + b.name))))
  );
}

function ResetPwModal({ user, onClose, onDone }) {
  const [pw, setPw] = React.useState('');
  const [showPw, setShowPw] = React.useState(false);
  return React.createElement(Modal, { title: 'Reset password · @' + user.user, icon: 'lock', onClose,
    footer: [
      React.createElement('button', { key: 'c', className: 'btn btn-ghost', onClick: onClose }, 'Cancel'),
      React.createElement('button', { key: 's', className: 'btn btn-primary', disabled: pw.length < 8, onClick: onDone }, React.createElement(Icon, { name: 'check', size: 18 }), 'Set new password')
    ]},
    React.createElement('div', { className: 'field' }, React.createElement('label', null, 'New password'),
      React.createElement('div', { className: 'center', style: { gap: 10 } },
        React.createElement('input', { className: 'input mono', type: showPw ? 'text' : 'password', placeholder: 'At least 8 characters', value: pw, onChange: e => setPw(e.target.value) }),
        React.createElement('button', { className: 'btn btn-icon btn-ghost', type: 'button', onClick: () => setShowPw(s => !s) }, React.createElement(Icon, { name: 'eye', size: 18 }))),
      React.createElement('span', { style: { fontSize: 12, color: 'var(--text-3)', marginTop: 6, display: 'block' } }, user.name + ' will be asked to change it at next login.'))
  );
}

function Devices() {
  const D = window.DATA;
  const toast = useToast();
  const [show, setShow] = React.useState(false);
  const dtLabel = (v) => (D.deviceTypes.find(t => t.value === v) || {}).label || 'RFID scanner';
  const dtIcon = (v) => (D.deviceTypes.find(t => t.value === v) || {}).icon || 'devices';
  return React.createElement('div', null,
    React.createElement('div', { className: 'page-head' },
      React.createElement('div', null, React.createElement('h1', null, 'Devices'), React.createElement('p', null, D.devices.filter(d => d.online).length + ' of ' + D.devices.length + ' readers online')),
      React.createElement('button', { className: 'btn btn-primary', onClick: () => setShow(true) }, React.createElement(Icon, { name: 'add', size: 18 }), 'Register device')
    ),
    React.createElement('div', { className: 'grid g-3', style: { marginBottom: 20 } },
      React.createElement(Kpi, { tone: 'brand', icon: 'wifi', label: 'Online readers', value: D.devices.filter(d => d.online).length, foot: 'live & syncing' }),
      React.createElement(Kpi, { tone: 'info', icon: 'sync', label: 'Reads today', value: D.devices.reduce((a, d) => a + d.reads, 0).toLocaleString('en-IN'), foot: 'across all readers' }),
      React.createElement(Kpi, { tone: 'danger', icon: 'wifiOff', label: 'Offline', value: D.devices.filter(d => !d.online).length, foot: 'need attention' })
    ),
    React.createElement('div', { className: 'grid', style: { gridTemplateColumns: 'repeat(auto-fill, minmax(290px, 1fr))' } },
      D.devices.map(d => React.createElement('div', { key: d.id, className: 'card card-pad' },
        React.createElement('div', { className: 'between', style: { marginBottom: 14 } },
          React.createElement('div', { className: 'feed-ico', style: { width: 46, height: 46, background: d.dtype === 'gps_tracker' ? 'var(--violet-soft)' : d.type.includes('Handheld') ? 'var(--info-soft)' : 'var(--brand-soft)', color: d.dtype === 'gps_tracker' ? 'var(--violet)' : d.type.includes('Handheld') ? 'var(--info)' : 'var(--brand-deep)' } },
            React.createElement(Icon, { name: dtIcon(d.dtype), size: 22 })),
          d.online ? React.createElement('span', { className: 'badge b-online' }, React.createElement('span', { className: 'dot' }), 'Online') : React.createElement('span', { className: 'badge b-offline' }, React.createElement('span', { className: 'dot' }), 'Offline')),
        React.createElement('b', { style: { fontSize: 15.5 } }, d.name),
        React.createElement('div', { className: 'center', style: { gap: 8, marginTop: 6 } },
          React.createElement('span', { className: 'tag-soft' }, dtLabel(d.dtype)),
          React.createElement('span', { className: 'mono', style: { fontSize: 11.5, color: 'var(--text-3)' } }, d.id)),
        React.createElement('div', { className: 'between', style: { marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--border)' } },
          React.createElement('div', null, React.createElement('div', { className: 'num', style: { fontWeight: 800, fontSize: 16 } }, d.reads.toLocaleString('en-IN')), React.createElement('div', { style: { fontSize: 11, color: 'var(--text-3)' } }, 'reads today')),
          d.battery != null
            ? React.createElement('div', { className: 'center', style: { gap: 6, color: d.battery < 20 ? 'var(--danger)' : 'var(--text-2)' } }, React.createElement(Icon, { name: 'battery', size: 18 }), React.createElement('b', { className: 'num' }, d.battery + '%'))
            : React.createElement('span', { className: 'center', style: { fontSize: 12, color: 'var(--text-3)', gap: 5 } }, React.createElement(Icon, { name: 'bolt', size: 14 }), 'Wired'))
      ))
    ),
    show && React.createElement(RegisterDeviceModal, { onClose: () => setShow(false), onDone: () => toast.ok('Device registered', 'API key generated') })
  );
}

function RegisterDeviceModal({ onClose, onDone }) {
  const D = window.DATA;
  const [type, setType] = React.useState('rfid_scanner');
  const [devId, setDevId] = React.useState('');
  const [name, setName] = React.useState('');
  const [branch, setBranch] = React.useState('');
  const [apiKey, setApiKey] = React.useState(null);
  const [copied, setCopied] = React.useState(false);

  const register = () => {
    const k = 'fk_live_' + Array.from({length:32},()=>'abcdef0123456789'[Math.floor(Math.random()*16)]).join('');
    setApiKey(k); onDone();
  };
  const copy = () => { try { navigator.clipboard.writeText(apiKey); } catch(e){}; setCopied(true); setTimeout(()=>setCopied(false), 1500); };

  if (apiKey) {
    return React.createElement(Modal, { title: 'Device registered', icon: 'check', onClose,
      footer: [React.createElement('button', { key: 'd', className: 'btn btn-primary', onClick: onClose }, 'Done')] },
      React.createElement('div', { style: { textAlign: 'center', padding: '4px 0 16px' } },
        React.createElement('div', { style: { width: 56, height: 56, borderRadius: '50%', background: 'var(--brand)', color: '#fff', display: 'grid', placeItems: 'center', margin: '0 auto 14px' } }, React.createElement(Icon, { name: 'check', size: 28 })),
        React.createElement('b', { style: { fontSize: 17 } }, name || devId), React.createElement('div', { className: 'muted', style: { fontSize: 13, marginTop: 2 } }, 'is ready to post scans')),
      React.createElement('div', { style: { padding: 14, borderRadius: 'var(--r)', background: 'var(--amber-soft)', border: '1px solid var(--amber)', marginBottom: 8 } },
        React.createElement('div', { className: 'center', style: { gap: 8, color: 'var(--amber)', fontWeight: 700, fontSize: 13, marginBottom: 8 } }, React.createElement(Icon, { name: 'alert', size: 16 }), 'Copy this API key now — it won\u2019t be shown again'),
        React.createElement('div', { className: 'between', style: { gap: 10 } },
          React.createElement('code', { className: 'mono', style: { fontSize: 12.5, wordBreak: 'break-all', flex: 1 } }, apiKey),
          React.createElement('button', { className: 'btn btn-ghost', style: { flexShrink: 0 }, onClick: copy }, React.createElement(Icon, { name: copied ? 'check' : 'download', size: 16 }), copied ? 'Copied' : 'Copy')))
    );
  }

  return React.createElement(Modal, { title: 'Register device', icon: 'devices', onClose,
    footer: [
      React.createElement('button', { key: 'c', className: 'btn btn-ghost', onClick: onClose }, 'Cancel'),
      React.createElement('button', { key: 's', className: 'btn btn-primary', onClick: register, disabled: !devId || !name }, React.createElement(Icon, { name: 'check', size: 18 }), 'Register & get key')
    ]},
    React.createElement('div', { className: 'field', style: { marginBottom: 16 } }, React.createElement('label', null, 'Device type'),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 } },
        D.deviceTypes.map(t => React.createElement('button', { key: t.value, onClick: () => setType(t.value),
          style: { display: 'flex', alignItems: 'center', gap: 10, padding: '11px 12px', borderRadius: 'var(--r-sm)', textAlign: 'left',
            border: `2px solid ${type === t.value ? 'var(--info)' : 'var(--border)'}`, background: type === t.value ? 'var(--info-soft)' : 'var(--surface)', transition: 'all .14s' } },
          React.createElement(Icon, { name: t.icon, size: 18, style: { color: type === t.value ? 'var(--info)' : 'var(--text-3)', flexShrink: 0 } }),
          React.createElement('span', { style: { fontSize: 13, fontWeight: 700 } }, t.label)))
      )),
    React.createElement('div', { className: 'grid g-2', style: { marginBottom: 16 } },
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Device ID'),
        React.createElement('input', { className: 'input', placeholder: 'e.g. UTOUCH2-001', value: devId, onChange: e => setDevId(e.target.value) })),
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Display name'),
        React.createElement('input', { className: 'input', placeholder: 'e.g. Gate IN Scanner', value: name, onChange: e => setName(e.target.value) }))),
    React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Branch (optional)'),
      React.createElement('select', { className: 'select', value: branch, onChange: e => setBranch(e.target.value) },
        React.createElement('option', { value: '' }, 'Unassigned'),
        D.branches.map(b => React.createElement('option', { key: b.id, value: b.id }, b.name)))),
    React.createElement('p', { className: 'muted', style: { fontSize: 12, marginTop: 14 } }, 'The API key is shown once after registration. Store it securely — it cannot be retrieved later.')
  );
}

function Import() {
  const toast = useToast();
  const [stage, setStage] = React.useState('drop');
  const steps = [
    { n: 248, label: 'Rows found', tone: 'info' },
    { n: 242, label: 'Valid & ready', tone: 'brand' },
    { n: 6, label: 'Need fixing', tone: 'danger' },
  ];
  return React.createElement('div', { style: { maxWidth: 760, margin: '0 auto' } },
    React.createElement('div', { className: 'page-head' },
      React.createElement('div', null, React.createElement('h1', null, 'Bulk import'), React.createElement('p', null, 'Commission many cylinders at once from a spreadsheet'))),
    stage === 'drop'
      ? React.createElement('div', null,
          React.createElement('div', { className: 'card', style: { padding: 0, overflow: 'hidden' } },
            React.createElement('button', { onClick: () => setStage('review'),
              style: { width: '100%', padding: '56px 24px', border: '2px dashed var(--border-strong)', borderRadius: 'var(--r-lg)', background: 'var(--surface-2)', textAlign: 'center', color: 'var(--text-2)' } },
              React.createElement('div', { className: 'feed-ico', style: { width: 64, height: 64, margin: '0 auto 16px', background: 'var(--info-soft)', color: 'var(--info)' } }, React.createElement(Icon, { name: 'import', size: 30 })),
              React.createElement('div', { style: { fontSize: 17, fontWeight: 700, color: 'var(--text)' } }, 'Drop your Excel / CSV here'),
              React.createElement('div', { style: { fontSize: 13.5, marginTop: 6 } }, 'or click to browse · max 5,000 rows'))
          ),
          React.createElement('div', { className: 'card card-pad', style: { marginTop: 16 } },
            React.createElement('div', { className: 'center', style: { gap: 12 } },
              React.createElement(Icon, { name: 'download', size: 20, style: { color: 'var(--info)' } }),
              React.createElement('div', { style: { flex: 1 } }, React.createElement('b', null, 'Need the template?'), React.createElement('div', { style: { fontSize: 12.5, color: 'var(--text-3)' } }, 'Columns: cylinder_no, gas, capacity, tag_id, branch, owner')),
              React.createElement('button', { className: 'btn btn-ghost' }, 'Download .xlsx')))
        )
      : React.createElement('div', null,
          React.createElement('div', { className: 'grid g-3', style: { marginBottom: 18 } },
            steps.map((s, i) => React.createElement('div', { key: i, className: `kpi tone-${s.tone}` },
              React.createElement('div', { className: 'kpi-value' }, s.n), React.createElement('div', { className: 'kpi-label', style: { marginTop: 8 } }, s.label)))),
          React.createElement('div', { className: 'card card-pad', style: { marginBottom: 16 } },
            React.createElement('div', { className: 'between', style: { marginBottom: 10 } }, React.createElement('b', null, 'cryo_cylinders_batch_july.xlsx'), React.createElement('span', { className: 'tag-soft' }, '248 rows')),
            React.createElement('div', { className: 'progress', style: { marginBottom: 8 } }, React.createElement('i', { style: { width: '97.5%', background: 'var(--brand)' } })),
            React.createElement('div', { style: { fontSize: 12.5, color: 'var(--text-3)' } }, '242 of 248 rows passed validation — 6 rows have a duplicate tag or missing gas type.')),
          React.createElement('div', { className: 'between' },
            React.createElement('button', { className: 'btn btn-ghost', onClick: () => setStage('drop') }, React.createElement(Icon, { name: 'chevL', size: 18 }), 'Start over'),
            React.createElement('button', { className: 'btn btn-primary', onClick: () => { toast.ok('242 cylinders imported!', '6 rows skipped'); setStage('drop'); } }, React.createElement(Icon, { name: 'check', size: 18 }), 'Import 242 cylinders'))
        )
  );
}

function Settings({ theme, toggleTheme }) {
  const D = window.DATA;
  const toast = useToast();
  const [tab, setTab] = React.useState('branches');
  const tabs = [['branches', 'Branches', 'factory'], ['gases', 'Gas types', 'droplet'], ['locations', 'Locations', 'pin'], ['flows', 'Flow types', 'scan'], ['prefs', 'Preferences', 'settings']];

  // live-editable copies
  const [branches, setBranches] = React.useState(() => D.branches.map(b => ({ id: b.id, code: b.id, name: b.name, location: b.city, hq: b.hq, total: b.total })));
  const [locations, setLocations] = React.useState(D.locationsList);
  const [flows, setFlows] = React.useState(D.flowTypes);
  const [gasColors, setGasColors] = React.useState(() => Object.fromEntries(Object.keys(D.gases).map(g => [g, D.gases[g].color])));

  // modals
  const [branchOpen, setBranchOpen] = React.useState(false);
  const [flowOpen, setFlowOpen] = React.useState(false);
  const [newLoc, setNewLoc] = React.useState('');

  const Row = ({ title, sub, children }) => React.createElement('div', { className: 'between', style: { padding: '16px 0', borderBottom: '1px solid var(--border)' } },
    React.createElement('div', { style: { flex: 1 } }, React.createElement('b', { style: { fontSize: 14.5 } }, title), React.createElement('div', { style: { fontSize: 12.5, color: 'var(--text-3)', marginTop: 2 } }, sub)), children);
  const Toggle = ({ on, onClick }) => React.createElement('button', { onClick, style: { width: 50, height: 30, borderRadius: 99, background: on ? 'var(--brand)' : 'var(--surface-3)', padding: 3, transition: 'background .2s', flexShrink: 0 } },
    React.createElement('span', { style: { display: 'block', width: 24, height: 24, borderRadius: '50%', background: '#fff', transform: on ? 'translateX(20px)' : 'translateX(0)', transition: 'transform .2s', boxShadow: '0 1px 3px rgba(0,0,0,.3)' } }));
  const [t1, setT1] = React.useState(true), [t2, setT2] = React.useState(true), [t3, setT3] = React.useState(false), [t4, setT4] = React.useState(false);
  const statusLabel = (s) => (D.flowStatusOptions.find(o => o.value === s) || {}).label || s;

  const addLoc = () => { const v = newLoc.trim(); if (!v) return; setLocations(l => [...l, v]); setNewLoc(''); toast.ok('Location added', v); };
  const delLoc = (n) => { setLocations(l => l.filter(x => x !== n)); toast.info('Location removed', n); };
  const delBranch = (id) => { setBranches(b => b.filter(x => x.id !== id)); toast.info('Branch deleted'); };
  const delFlow = (k) => { setFlows(f => f.filter(x => x.key !== k)); toast.info('Flow type deleted'); };
  const saveGases = () => {
    Object.keys(gasColors).forEach(g => { if (D.gases[g]) D.gases[g].color = gasColors[g]; });
    try { localStorage.setItem('ap2-gascolors', JSON.stringify(gasColors)); } catch (e) {}
    toast.ok('Gas colours saved', 'Applied to cylinders across the app');
  };

  const tabExtra = tab === 'branches'
    ? React.createElement('button', { className: 'btn btn-primary', onClick: () => setBranchOpen(true) }, React.createElement(Icon, { name: 'add', size: 18 }), 'Add branch')
    : tab === 'flows'
      ? React.createElement('button', { className: 'btn btn-primary', onClick: () => setFlowOpen(true) }, React.createElement(Icon, { name: 'add', size: 18 }), 'Add flow type')
      : null;

  return React.createElement('div', null,
    React.createElement('div', { className: 'page-head' },
      React.createElement('div', null, React.createElement('h1', null, 'Settings'), React.createElement('p', null, 'Configure your Cryo Air Fluid workspace')),
      tabExtra && React.createElement('div', { className: 'actions' }, tabExtra)
    ),
    React.createElement('div', { className: 'grid', style: { gridTemplateColumns: '220px 1fr', alignItems: 'start' } },
      React.createElement('div', { className: 'card', style: { padding: 10, position: 'sticky', top: 90 } },
        tabs.map(([id, label, icon]) => React.createElement('button', { key: id, className: `sb-link ${tab === id ? 'active' : ''}`, style: { width: '100%' }, onClick: () => setTab(id) },
          React.createElement(Icon, { name: icon }), React.createElement('span', null, label)))),
      React.createElement('div', { className: 'card card-pad' },
        // BRANCHES
        tab === 'branches' && React.createElement('div', null,
          React.createElement('h3', { style: { fontSize: 17, fontWeight: 800, marginBottom: 12 } }, 'Branches'),
          branches.length === 0 && React.createElement('div', { className: 'empty' }, React.createElement(Icon, { name: 'factory', size: 44 }), React.createElement('div', null, 'No branches yet — add your first branch')),
          branches.map(b => React.createElement('div', { key: b.id, className: 'between', style: { padding: '14px 0', borderBottom: '1px solid var(--border)' } },
            React.createElement('div', { className: 'center', style: { gap: 12 } }, React.createElement('div', { className: 'feed-ico', style: { width: 40, height: 40, background: 'var(--brand-soft)', color: 'var(--brand-deep)' } }, React.createElement(Icon, { name: 'factory', size: 19 })),
              React.createElement('div', null,
                React.createElement('div', { className: 'center', style: { gap: 8 } }, React.createElement('span', { className: 'mono', style: { fontSize: 12, fontWeight: 700, color: 'var(--info)' } }, b.code), React.createElement('b', null, b.name), b.hq && React.createElement('span', { className: 'tag-soft' }, 'HQ')),
                React.createElement('div', { style: { fontSize: 12, color: 'var(--text-3)', marginTop: 2 } }, b.location || '—'))),
            React.createElement('div', { className: 'center', style: { gap: 8 } },
              React.createElement('button', { className: 'chip' }, React.createElement(Icon, { name: 'edit', size: 14 }), 'Edit'),
              React.createElement('button', { className: 'chip', style: { color: 'var(--danger)' }, onClick: () => delBranch(b.id) }, React.createElement(Icon, { name: 'trash', size: 14 }))))),
        ),
        // GAS TYPES & COLOURS
        tab === 'gases' && React.createElement('div', null,
          React.createElement('h3', { style: { fontSize: 17, fontWeight: 800, marginBottom: 4 } }, 'Gas types & colours'),
          React.createElement('p', { className: 'muted', style: { fontSize: 13, marginBottom: 14 } }, 'Give each gas a colour so workers can recognise a cylinder at a glance — it shows on every cylinder across the app.'),
          Object.keys(D.gases).map(g => React.createElement('div', { key: g, className: 'between', style: { padding: '14px 0', borderBottom: '1px solid var(--border)', flexWrap: 'wrap', gap: 12 } },
            React.createElement('div', { className: 'center', style: { gap: 14, minWidth: 150 } },
              React.createElement(Cylinder, { w: 20, color: gasColors[g] }),
              React.createElement('div', null, React.createElement('b', { style: { fontSize: 14.5 } }, g), React.createElement('div', { className: 'mono', style: { fontSize: 12, color: 'var(--text-3)' } }, D.gases[g].code))),
            React.createElement('div', { className: 'center', style: { gap: 7, flexWrap: 'wrap' } },
              GAS_SWATCHES.map(c => React.createElement('button', { key: c, title: c, onClick: () => setGasColors(m => ({ ...m, [g]: c })),
                style: { width: 26, height: 26, borderRadius: 8, background: c, cursor: 'pointer', flexShrink: 0,
                  border: (gasColors[g] || '').toLowerCase() === c.toLowerCase() ? '2px solid var(--text)' : '2px solid transparent',
                  boxShadow: (gasColors[g] || '').toLowerCase() === c.toLowerCase() ? '0 0 0 2px var(--surface), 0 0 0 4px ' + c : 'none' } })),
              React.createElement('label', { className: 'chip', style: { gap: 7, cursor: 'pointer', position: 'relative' } },
                React.createElement('span', { style: { width: 14, height: 14, borderRadius: 4, background: gasColors[g] } }), 'Custom',
                React.createElement('input', { type: 'color', value: gasColors[g], onChange: e => setGasColors(m => ({ ...m, [g]: e.target.value })), style: { position: 'absolute', inset: 0, opacity: 0, cursor: 'pointer' } })))
          )),
          React.createElement('div', { style: { marginTop: 22, display: 'flex', justifyContent: 'flex-end' } },
            React.createElement('button', { className: 'btn btn-primary', onClick: saveGases }, React.createElement(Icon, { name: 'check', size: 18 }), 'Save colours'))
        ),
        // LOCATIONS
        tab === 'locations' && React.createElement('div', null,
          React.createElement('h3', { style: { fontSize: 17, fontWeight: 800, marginBottom: 4 } }, 'Locations'),
          React.createElement('p', { className: 'muted', style: { fontSize: 13, marginBottom: 14 } }, 'Named spots inside a branch where assets are scanned — gates, bays, docks.'),
          React.createElement('div', { className: 'center', style: { gap: 10, marginBottom: 8 } },
            React.createElement('input', { className: 'input', placeholder: 'New location name', value: newLoc, onChange: e => setNewLoc(e.target.value), onKeyDown: e => { if (e.key === 'Enter') addLoc(); } }),
            React.createElement('button', { className: 'btn btn-primary', style: { flexShrink: 0 }, onClick: addLoc }, React.createElement(Icon, { name: 'add', size: 18 }), 'Add')),
          locations.map(l => React.createElement('div', { key: l, className: 'between', style: { padding: '12px 0', borderBottom: '1px solid var(--border)' } },
            React.createElement('div', { className: 'center', style: { gap: 10 } }, React.createElement(Icon, { name: 'pin', size: 16, style: { color: 'var(--text-3)' } }), React.createElement('b', { style: { fontSize: 14 } }, l)),
            React.createElement('button', { className: 'chip', style: { color: 'var(--danger)' }, onClick: () => delLoc(l) }, 'Remove')))),
        // FLOW TYPES
        tab === 'flows' && React.createElement('div', null,
          React.createElement('h3', { style: { fontSize: 17, fontWeight: 800, marginBottom: 4 } }, 'Flow types'),
          React.createElement('p', { className: 'muted', style: { fontSize: 13, marginBottom: 14 } }, 'Movement types define what happens when an asset is scanned — and become the big buttons on the Scan screen.'),
          React.createElement('div', { style: { overflowX: 'auto' } }, React.createElement('table', { className: 'tbl' },
            React.createElement('thead', null, React.createElement('tr', null, ['Name', 'Asset becomes', 'Default location', ''].map((h, i) => React.createElement('th', { key: i }, h)))),
            React.createElement('tbody', null, flows.map(f => React.createElement('tr', { key: f.key },
              React.createElement('td', null, React.createElement('b', null, f.label)),
              React.createElement('td', null, React.createElement('span', { className: 'tag-soft' }, statusLabel(f.status))),
              React.createElement('td', { className: 't2' }, f.location),
              React.createElement('td', { style: { textAlign: 'right' } }, React.createElement('button', { className: 'chip', style: { color: 'var(--danger)' }, onClick: () => delFlow(f.key) }, 'Delete'))))))),
        ),
        // PREFERENCES
        tab === 'prefs' && React.createElement('div', null,
          React.createElement('h3', { style: { fontSize: 17, fontWeight: 800, marginBottom: 4 } }, 'Preferences'),
          React.createElement(Row, { title: 'Dark mode', sub: 'Easier on the eyes in low-light plants' }, React.createElement(Toggle, { on: theme === 'dark', onClick: toggleTheme })),
          React.createElement(Row, { title: 'Large text & buttons', sub: 'Recommended for floor operators' }, React.createElement(Toggle, { on: t1, onClick: () => setT1(!t1) })),
          React.createElement(Row, { title: 'Sound + vibrate on scan', sub: 'Confirms a successful read' }, React.createElement(Toggle, { on: t2, onClick: () => setT2(!t2) })),
          React.createElement(Row, { title: 'Hydro-test due reminder', sub: 'Notify 30 days before test date' }, React.createElement(Toggle, { on: t2, onClick: () => setT2(!t2) })),
          React.createElement(Row, { title: 'Reader offline alert', sub: 'If a gate reader stops responding' }, React.createElement(Toggle, { on: t3, onClick: () => setT3(!t3) })),
          React.createElement(Row, { title: 'Language', sub: 'Interface language for this device' }, React.createElement('select', { className: 'select', style: { width: 170, height: 44 } }, ['English', 'हिन्दी (Hindi)', 'मराठी (Marathi)'].map(l => React.createElement('option', { key: l }, l)))),
          React.createElement('div', { style: { marginTop: 22, display: 'flex', justifyContent: 'flex-end' } },
            React.createElement('button', { className: 'btn btn-primary', onClick: () => toast.ok('Preferences saved') }, React.createElement(Icon, { name: 'check', size: 18 }), 'Save changes')))
      )
    ),
    branchOpen && React.createElement(AddBranchModal, { onClose: () => setBranchOpen(false), onCreate: (b) => { setBranches(list => [...list, b]); setBranchOpen(false); toast.ok('Branch added', b.code + ' — ' + b.name); } }),
    flowOpen && React.createElement(AddFlowModal, { locations, onClose: () => setFlowOpen(false), onCreate: (f) => { setFlows(list => [...list, f]); setFlowOpen(false); toast.ok('Flow type added', f.label); } })
  );
}

const GAS_SWATCHES = ['#0075cc', '#00a86b', '#6938ef', '#b97e00', '#d92d20', '#e2620c', '#0e9488', '#9333ea', '#475569', '#0891b2'];

function AddBranchModal({ onClose, onCreate }) {
  const [code, setCode] = React.useState('');
  const [name, setName] = React.useState('');
  const [location, setLocation] = React.useState('');
  return React.createElement(Modal, { title: 'Add branch', icon: 'factory', onClose,
    footer: [
      React.createElement('button', { key: 'c', className: 'btn btn-ghost', onClick: onClose }, 'Cancel'),
      React.createElement('button', { key: 's', className: 'btn btn-primary', disabled: !code || !name, onClick: () => onCreate({ id: code.toUpperCase(), code: code.toUpperCase(), name, location, hq: false, total: 0 }) }, React.createElement(Icon, { name: 'check', size: 18 }), 'Add branch')
    ]},
    React.createElement('div', { className: 'field', style: { marginBottom: 16 } }, React.createElement('label', null, 'Code (e.g. HYD)'),
      React.createElement('input', { className: 'input mono', placeholder: 'HYD', value: code, maxLength: 4, onChange: e => setCode(e.target.value.toUpperCase()) })),
    React.createElement('div', { className: 'field', style: { marginBottom: 16 } }, React.createElement('label', null, 'Name'),
      React.createElement('input', { className: 'input', placeholder: 'Hyderabad', value: name, onChange: e => setName(e.target.value) })),
    React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Location / city'),
      React.createElement('input', { className: 'input', placeholder: 'Hyderabad, TS', value: location, onChange: e => setLocation(e.target.value) }))
  );
}

function AddFlowModal({ locations, onClose, onCreate }) {
  const D = window.DATA;
  const [label, setLabel] = React.useState('');
  const [statusV, setStatusV] = React.useState('in-storage');
  const [location, setLocation] = React.useState(locations[0] || 'Gate IN');
  const make = () => {
    const key = label.trim().toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
    onCreate({ key: key || ('flow_' + Date.now()), label: label.trim(), status: statusV, location });
  };
  return React.createElement(Modal, { title: 'Add movement type', icon: 'scan', onClose,
    footer: [
      React.createElement('button', { key: 'c', className: 'btn btn-ghost', onClick: onClose }, 'Cancel'),
      React.createElement('button', { key: 's', className: 'btn btn-primary', disabled: !label.trim(), onClick: make }, React.createElement(Icon, { name: 'check', size: 18 }), 'Add flow type')
    ]},
    React.createElement('p', { className: 'muted', style: { fontSize: 13, marginBottom: 16 } }, 'Movement types define what happens when an asset is scanned — e.g. "Gate In" when it arrives, or "To Vendor" when it goes for maintenance.'),
    React.createElement('div', { className: 'field', style: { marginBottom: 16 } }, React.createElement('label', null, 'Movement name'),
      React.createElement('input', { className: 'input', placeholder: 'e.g. Gate In, To Vendor, Returned', value: label, onChange: e => setLabel(e.target.value) })),
    React.createElement('div', { className: 'field', style: { marginBottom: 16 } }, React.createElement('label', null, 'After this movement, the asset is:'),
      React.createElement('select', { className: 'select', value: statusV, onChange: e => setStatusV(e.target.value) }, D.flowStatusOptions.map(o => React.createElement('option', { key: o.value, value: o.value }, o.label)))),
    React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Default location'),
      React.createElement('select', { className: 'select', value: location, onChange: e => setLocation(e.target.value) }, locations.map(l => React.createElement('option', { key: l, value: l }, l))))
  );
}

/* ---- Login ---- */
function Login({ onLogin, theme, toggleTheme }) {
  const [pin, setPin] = React.useState('');
  const press = (d) => { if (pin.length < 4) { const np = pin + d; setPin(np); if (np.length === 4) setTimeout(onLogin, 350); } };
  return React.createElement('div', { style: { minHeight: '100vh', display: 'grid', gridTemplateColumns: '1fr', placeItems: 'center', background: 'var(--bg)', backgroundImage: 'var(--bg-grad)', padding: 20 } },
    React.createElement('button', { className: 'tb-icon-btn', onClick: toggleTheme, style: { position: 'fixed', top: 20, right: 20 } }, React.createElement(Icon, { name: theme === 'dark' ? 'sun' : 'moon', size: 20 })),
    React.createElement('div', { style: { width: 'min(400px, 100%)', textAlign: 'center' } },
      React.createElement('div', { className: 'sb-logo', style: { width: 68, height: 68, margin: '0 auto 18px', borderRadius: 20 } }, React.createElement(CylGlyph, { size: 38, color: '#fff' })),
      React.createElement('h1', { style: { fontSize: 28, fontWeight: 800, letterSpacing: '-.02em' } }, 'Cryo Air Fluid'),
      React.createElement('p', { style: { color: 'var(--text-3)', marginTop: 4, marginBottom: 4 } }, 'Cylinder Tracking'),
      React.createElement('p', { style: { color: 'var(--text-2)', fontSize: 14, marginTop: 24, marginBottom: 16, fontWeight: 600 } }, 'Enter your 4-digit PIN'),
      React.createElement('div', { className: 'center', style: { justifyContent: 'center', gap: 14, marginBottom: 28 } },
        [0,1,2,3].map(i => React.createElement('div', { key: i, style: { width: 18, height: 18, borderRadius: '50%', background: i < pin.length ? 'var(--brand)' : 'var(--surface-3)', border: '2px solid ' + (i < pin.length ? 'var(--brand)' : 'var(--border-strong)'), transition: 'all .15s' } }))),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, maxWidth: 280, margin: '0 auto' } },
        [1,2,3,4,5,6,7,8,9].map(n => React.createElement('button', { key: n, onClick: () => press(n), className: 'card', style: { height: 64, fontSize: 24, fontWeight: 700, fontFamily: "'JetBrains Mono', monospace" } }, n)),
        React.createElement('div', null),
        React.createElement('button', { onClick: () => press(0), className: 'card', style: { height: 64, fontSize: 24, fontWeight: 700, fontFamily: "'JetBrains Mono', monospace" } }, 0),
        React.createElement('button', { onClick: () => setPin(pin.slice(0, -1)), className: 'card', style: { height: 64, display: 'grid', placeItems: 'center', color: 'var(--text-3)' } }, React.createElement(Icon, { name: 'chevL', size: 22 }))),
      React.createElement('button', { onClick: onLogin, style: { marginTop: 24, color: 'var(--text-3)', fontSize: 13, fontWeight: 600 } }, 'Use password instead')
    )
  );
}

Object.assign(window, { Users, AddUserModal, ResetPwModal, Devices, RegisterDeviceModal, Import, Settings, AddBranchModal, AddFlowModal, Login });