/* app.jsx — root: theme, routing, shell composition */
const { useState, useEffect, useCallback } = React;

function useTheme() {
  const [theme, setTheme] = useState(() => localStorage.getItem('ap2-theme') || 'light');
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('ap2-theme', theme);
  }, [theme]);
  const toggle = useCallback(() => setTheme(t => t === 'dark' ? 'light' : 'dark'), []);
  return [theme, toggle];
}

function App() {
  const [theme, toggleTheme] = useTheme();
  const [authed, setAuthed] = useState(() => sessionStorage.getItem('ap2-authed') === '1');
  const [route, setRoute] = useState(() => localStorage.getItem('ap2-route') || 'dashboard');
  const [params, setParams] = useState(null);
  const [menuOpen, setMenuOpen] = useState(false);
  const [alertsOpen, setAlertsOpen] = useState(false);

  const navigate = useCallback((r, p) => {
    setRoute(r); setParams(p || null); localStorage.setItem('ap2-route', r);
    window.scrollTo(0, 0);
  }, []);

  useEffect(() => { sessionStorage.setItem('ap2-authed', authed ? '1' : '0'); }, [authed]);

  const user = window.DATA.users[4]; // Vikram (operator) as the signed-in floor user feel; managers see same

  if (!authed) {
    return React.createElement(Login, { onLogin: () => setAuthed(true), theme, toggleTheme });
  }

  const PAGES = {
    dashboard: () => React.createElement(Dashboard, { navigate }),
    scan: () => React.createElement(ScanPage, { navigate }),
    inventory: () => React.createElement(Inventory, { navigate }),
    asset: () => React.createElement(AssetDetail, { navigate, params }),
    activity: () => React.createElement(Activity, null),
    transfers: () => React.createElement(Transfers, { navigate }),
    add: () => React.createElement(AddAsset, { navigate }),
    vendors: () => React.createElement(Vendors, { navigate }),
    users: () => React.createElement(Users, null),
    devices: () => React.createElement(Devices, null),
    import: () => React.createElement(Import, null),
    settings: () => React.createElement(Settings, { theme, toggleTheme }),
  };
  const navRoute = route === 'asset' ? 'inventory' : route;
  const render = PAGES[route] || PAGES.dashboard;

  return React.createElement('div', { className: 'app' },
    React.createElement(Sidebar, { route: navRoute, navigate, user }),
    React.createElement('div', { className: 'main' },
      React.createElement(Topbar, { route, navigate, theme, toggleTheme, onMenu: () => setMenuOpen(true), openAlerts: () => setAlertsOpen(true) }),
      React.createElement('main', { className: 'page' }, render()),
    ),
    React.createElement(BottomNav, { route: navRoute, navigate }),
    menuOpen && React.createElement(MobileMenu, { route: navRoute, navigate, onClose: () => setMenuOpen(false), user, theme, toggleTheme }),
    alertsOpen && React.createElement(AlertsPanel, { onClose: () => setAlertsOpen(false), navigate })
  );
}

function AlertsPanel({ onClose, navigate }) {
  const D = window.DATA;
  const alerts = [
    { icon: 'alert', tone: 'danger', title: 'CYL-10781 hydro-test overdue', sub: '3 days past due · Mumbai', go: 'inventory' },
    { icon: 'rupee', tone: 'amber', title: 'Tata Steel dues crossed ₹2.4L', sub: '62 days ageing', go: 'vendors' },
    { icon: 'wifiOff', tone: 'danger', title: 'Reader HHD-NAS-07 offline', sub: 'Last seen 2 hr ago · battery 12%', go: 'devices' },
    { icon: 'transfer', tone: 'info', title: '2 transfers need your action', sub: 'TRF-2041, TRF-2039', go: 'transfers' },
    { icon: 'thermo', tone: 'amber', title: '4 cylinders due for test soon', sub: 'within 30 days', go: 'inventory' },
  ];
  return React.createElement('div', { className: 'modal-back', onClick: onClose, style: { alignItems: 'stretch', justifyContent: 'flex-end' } },
    React.createElement('div', { onClick: e => e.stopPropagation(), style: { width: 'min(400px, 92vw)', background: 'var(--surface)', height: '100%', borderLeft: '1px solid var(--border)', display: 'flex', flexDirection: 'column', animation: 'modalIn .25s ease' } },
      React.createElement('div', { className: 'modal-head' },
        React.createElement('div', { className: 'feed-ico', style: { width: 40, height: 40, background: 'var(--warn-soft)', color: 'var(--warn)' } }, React.createElement(Icon, { name: 'bell', size: 20 })),
        React.createElement('h3', null, 'Alerts'),
        React.createElement('button', { className: 'x-btn', onClick: onClose }, React.createElement(Icon, { name: 'x', size: 18 }))),
      React.createElement('div', { style: { flex: 1, overflow: 'auto', padding: 16, display: 'flex', flexDirection: 'column', gap: 10 } },
        alerts.map((a, i) => React.createElement('button', { key: i, className: 'feed-row', style: { textAlign: 'left', width: '100%' }, onClick: () => { navigate(a.go); onClose(); } },
          React.createElement('div', { className: 'feed-ico', style: { background: `var(--${a.tone}-soft)`, color: `var(--${a.tone})` } }, React.createElement(Icon, { name: a.icon, size: 21 })),
          React.createElement('div', { style: { flex: 1 } }, React.createElement('b', { style: { fontSize: 14 } }, a.title), React.createElement('div', { style: { fontSize: 12.5, color: 'var(--text-3)', marginTop: 2 } }, a.sub)),
          React.createElement(Icon, { name: 'chevR', size: 16, style: { color: 'var(--text-3)' } }))))
    )
  );
}

window.AlertsPanel = AlertsPanel;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(ToastHost, null, React.createElement(App, null)));