/* ===== app.jsx — Router + App ===== */
(function () {
  const {
    StoreProvider, useStore, useRoute, navigate, matchRoute,
    Sidebar, TopBar, CmdK, MobileFrame, MobileBottomNav, MobileTopBar, ToastHost,
    cls, Icon,
  } = window;

  /* ---------- Route resolver ---------- */
  function resolveRoute(path) {
    if (path === '/' || path === '') return { name: 'dashboard' };
    if (path === '/login') return { name: 'login' };
    if (path === '/alerts' || path.startsWith('/alerts?')) return { name: 'alerts' };
    if (path === '/suppliers') return { name: 'suppliers' };
    if (path === '/suppliers/new') return { name: 'supplier_new' };
    let m = matchRoute(path.split('?')[0], '/suppliers/:id'); if (m) return { name: 'supplier_detail', params: m };
    if (path === '/customers') return { name: 'customers' };
    if (path === '/customers/new') return { name: 'customer_new' };
    m = matchRoute(path.split('?')[0], '/customers/:id'); if (m) return { name: 'customer_detail', params: m };
    if (path === '/reagents/products') return { name: 'reagent_products' };
    if (path.startsWith('/reagents/batches/new')) return { name: 'reagent_batch_new' };
    if (path === '/reagents/batches' || path.startsWith('/reagents/batches?')) return { name: 'reagent_batches' };
    m = matchRoute(path.split('?')[0], '/reagents/batches/:id'); if (m) return { name: 'reagent_batch_detail', params: m };
    if (path.startsWith('/reagents/outflow/new')) return { name: 'reagent_outflow_new' };
    if (path === '/devices/products') return { name: 'device_products' };
    if (path === '/devices/units/new') return { name: 'device_unit_new' };
    if (path === '/devices/units' || path.startsWith('/devices/units?')) return { name: 'device_units' };
    m = matchRoute(path.split('?')[0], '/devices/units/:id'); if (m) return { name: 'device_unit_detail', params: m };
    if (path.startsWith('/devices/transfer/new')) return { name: 'device_transfer_new' };
    if (path === '/settings/users') return { name: 'settings_users' };
    if (path === '/settings/thresholds') return { name: 'settings_thr' };
    return { name: 'notfound' };
  }

  /* ---------- Renders page body for a route ---------- */
  function Page({ name, params, mobile }) {
    switch (name) {
      case 'dashboard':        return <window.Dashboard mobile={mobile} />;
      case 'alerts':           return <window.AlertsPage mobile={mobile} />;
      case 'suppliers':        return <window.SuppliersPage mobile={mobile} />;
      case 'supplier_new':     return <window.SupplierNew mobile={mobile} />;
      case 'supplier_detail':  return <window.SupplierDetail id={params.id} mobile={mobile} />;
      case 'customers':        return <window.CustomersPage mobile={mobile} />;
      case 'customer_new':     return <window.CustomerNew mobile={mobile} />;
      case 'customer_detail':  return <window.CustomerDetail id={params.id} mobile={mobile} />;
      case 'reagent_products': return <window.ReagentProducts mobile={mobile} />;
      case 'reagent_batches':  return <window.ReagentBatches mobile={mobile} />;
      case 'reagent_batch_detail': return <window.ReagentBatchDetail id={params.id} mobile={mobile} />;
      case 'reagent_batch_new':return <window.ReagentBatchNew mobile={mobile} />;
      case 'reagent_outflow_new': return <window.ReagentOutflowNew mobile={mobile} />;
      case 'device_products':  return <window.DeviceProducts mobile={mobile} />;
      case 'device_units':     return <window.DeviceUnits mobile={mobile} />;
      case 'device_unit_detail': return <window.DeviceUnitDetail id={params.id} mobile={mobile} />;
      case 'device_unit_new':  return <window.DeviceUnitNew mobile={mobile} />;
      case 'device_transfer_new': return <window.DeviceTransferNew mobile={mobile} />;
      case 'settings_users':   return <window.SettingsUsers mobile={mobile} />;
      case 'settings_thr':     return <window.SettingsThresholds mobile={mobile} />;
      default:
        return (
          <div className="p-12 text-center">
            <window.EmptyState title="页面未找到" hint={`路由 ${window.location.pathname} 未匹配`}
              action={<window.Button size="sm" onClick={() => navigate('/')}>回到仪表盘</window.Button>} />
          </div>
        );
    }
  }

  /* ---------- Get title for route ---------- */
  function getCrumbs(name, params) {
    const store = useStore();
    switch (name) {
      case 'dashboard': return [{ label: '仪表盘' }];
      case 'alerts': return [{ label: '全部报警' }];
      case 'suppliers': return [{ label: '供货商' }];
      case 'supplier_new': return [{ label: '供货商', to: '/suppliers' }, { label: '新建' }];
      case 'supplier_detail': {
        const r = store.suppliers.find(x => x.id === params.id);
        return [{ label: '供货商', to: '/suppliers' }, { label: r?.short || '?' }];
      }
      case 'customers': return [{ label: '客户' }];
      case 'customer_new': return [{ label: '客户', to: '/customers' }, { label: '新建' }];
      case 'customer_detail': {
        const r = store.customers.find(x => x.id === params.id);
        return [{ label: '客户', to: '/customers' }, { label: r?.short || '?' }];
      }
      case 'reagent_products': return [{ label: '试剂', to: '/reagents/batches' }, { label: '产品目录' }];
      case 'reagent_batches':  return [{ label: '试剂' }, { label: '批次' }];
      case 'reagent_batch_detail': {
        const b = store.reagent_batches.find(x => x.id === params.id);
        return [{ label: '试剂', to: '/reagents/batches' }, { label: '批次', to: '/reagents/batches' }, { label: b?.lot || '?' }];
      }
      case 'reagent_batch_new':   return [{ label: '试剂', to: '/reagents/batches' }, { label: '新建批次' }];
      case 'reagent_outflow_new': return [{ label: '试剂', to: '/reagents/batches' }, { label: '取货' }];
      case 'device_products':     return [{ label: '设备' }, { label: '型号目录' }];
      case 'device_units':        return [{ label: '设备' }, { label: '列表' }];
      case 'device_unit_detail': {
        const u = store.device_units.find(x => x.id === params.id);
        return [{ label: '设备', to: '/devices/units' }, { label: u?.sn || '(SN 缺失)' }];
      }
      case 'device_unit_new':     return [{ label: '设备', to: '/devices/units' }, { label: '登记新设备' }];
      case 'device_transfer_new': return [{ label: '设备', to: '/devices/units' }, { label: '新转移' }];
      case 'settings_users':      return [{ label: '系统' }, { label: '用户管理' }];
      case 'settings_thr':        return [{ label: '系统' }, { label: '低库存阈值' }];
      default: return [{ label: '页面未找到' }];
    }
  }

  /* ---------- Desktop shell ---------- */
  function DesktopShell({ children, route }) {
    const { sidebarCollapsed, set } = useStore();
    const crumbs = getCrumbs(route.name, route.params);
    return (
      <div className="flex h-full bg-ink-50">
        <Sidebar collapsed={sidebarCollapsed} onCollapse={(v) => set({ sidebarCollapsed: v })} />
        <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
          <TopBar breadcrumbs={crumbs} />
          <main className="flex-1 overflow-y-auto">
            {children}
          </main>
        </div>
      </div>
    );
  }

  /* ---------- Mobile shell ---------- */
  function MobileShellInner({ children, route }) {
    const crumbs = getCrumbs(route.name, route.params);
    const title = crumbs[crumbs.length - 1]?.label || '';
    const back = crumbs.length > 1;
    const isFullBleed = route.name === 'login';

    if (isFullBleed) return children;

    return (
      <>
        <MobileTopBar title={title} back={back} />
        <div className="flex-1 overflow-y-auto pb-16">{children}</div>
        <MobileBottomNav />
      </>
    );
  }

  /* ---------- Auth gate / loading ---------- */
  function LoadingScreen() {
    return (
      <div className="h-full flex items-center justify-center bg-ink-50">
        <div className="flex flex-col items-center gap-3 text-ink-500">
          <div className="h-10 w-10 rounded-full border-2 border-ink-300 border-t-ink-900 animate-spin"></div>
          <div className="text-xs font-mono">加载中…</div>
        </div>
      </div>
    );
  }

  /* ---------- App ---------- */
  function App() {
    const route = useRoute();
    const r = resolveRoute(route.path);
    const { device, currentUser, authChecked } = useStore();

    // Still checking session — show spinner
    if (!authChecked) return <LoadingScreen />;

    // Not logged in → force /login
    if (!currentUser) {
      if (r.name !== 'login') {
        // Redirect to /login (replaceState to avoid back-button trap)
        if (window.location.pathname !== '/login') navigate('/login');
        return <LoadingScreen />;
      }
      return (
        <div className="h-full">
          <window.LoginPage mobile={device === 'mobile'} />
        </div>
      );
    }

    // Logged in but route is /login → go home
    if (r.name === 'login') {
      navigate('/');
      return <LoadingScreen />;
    }

    // Mobile: fill viewport, bottom nav, no device frame
    if (device === 'mobile') {
      return (
        <div className="h-full flex flex-col bg-ink-50">
          <MobileShellInner route={r}>
            <Page name={r.name} params={r.params} mobile={true} />
          </MobileShellInner>
        </div>
      );
    }

    // Desktop: sidebar + topbar
    return (
      <DesktopShell route={r}>
        <Page name={r.name} params={r.params} mobile={false} />
      </DesktopShell>
    );
  }

  /* ---------- Root ---------- */
  function Root() {
    return (
      <StoreProvider>
        <App />
        <CmdK />
        <ToastHost />
      </StoreProvider>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<Root />);
})();