/* global React, ReactDOM, Sidebar, TopBar, PageDashboard, PageReceive, PageIssue, PageTransfer, PageCount, PageScanner, PageItems, PageItemDetail, PageLocations, PageStockReport, PageMovement, PageLifeShelf, PageUsers, LoginPage, StoreProvider, ToastProvider, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, TweakColor, TweakButton, useStore, Ic, useToast */
const { useState: useAS, useEffect: useAE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2563eb",
  "density": "comfortable",
  "fontMode": "default",
  "showAnimations": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ['#2563eb', '#0891b2', '#16a34a', '#7c3aed', '#dc2626'];

function App() {
  const store = useStore();
  const toast = useToast();
  const [page, setPage] = useAS(() => store.firstAllowedPage());
  const [activeSku, setActiveSku] = useAS(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Toast when another user's change arrives via Supabase Realtime
  useAE(() => {
    const handler = () => toast.info('ข้อมูลอัปเดต', 'มีการเปลี่ยนแปลงจากผู้ใช้อื่น');
    window.addEventListener('wms-remote-update', handler);
    return () => window.removeEventListener('wms-remote-update', handler);
  }, []);

  // Toast when our save collided with another user's (optimistic concurrency)
  useAE(() => {
    const handler = () => toast.error('บันทึกชนกัน', 'มีผู้ใช้อื่นบันทึกก่อน ระบบโหลดข้อมูลล่าสุดให้แล้ว กรุณาตรวจสอบและทำรายการล่าสุดซ้ำ');
    window.addEventListener('wms-save-conflict', handler);
    return () => window.removeEventListener('wms-save-conflict', handler);
  }, []);

  // Alert when a cloud save FAILS (used to be silent) and when it recovers
  useAE(() => {
    let last = window.WMSData.syncStatus ? window.WMSData.syncStatus() : 'synced';
    const announce = (status) => {
      if (status === 'error') toast.error('บันทึกขึ้นระบบไม่สำเร็จ', 'รายการล่าสุดยังอยู่ในเครื่องนี้เท่านั้น ระบบกำลังลองบันทึกใหม่อัตโนมัติ — อย่าปิดหรือรีเฟรชหน้านี้จนกว่าป้ายจะกลับเป็น SYNCED');
      else if (status === 'offline') toast.error('ยังไม่ได้เชื่อมต่อระบบ', 'โหลดข้อมูลจากระบบไม่สำเร็จ รายการที่ทำตอนนี้จะไม่ถูกบันทึกขึ้นระบบ — ตรวจอินเทอร์เน็ตแล้วรีเฟรชหน้านี้ก่อนทำรายการ');
    };
    if (last === 'error' || last === 'offline') announce(last);   // already failing before this listener attached
    const handler = (e) => {
      const status = (e.detail && e.detail.status) || 'synced';
      if (status === 'error' && last !== 'error') announce('error');
      else if (status === 'offline' && last !== 'offline') announce('offline');
      else if (status === 'synced' && last === 'error') toast.success('บันทึกขึ้นระบบแล้ว', 'การเชื่อมต่อกลับมาปกติ ข้อมูลล่าสุดถูกบันทึกเรียบร้อย');
      if (status !== 'saving') last = status;   // 'saving' between retries must not reset the error episode
    };
    window.addEventListener('wms-sync-status', handler);
    return () => window.removeEventListener('wms-sync-status', handler);
  }, []);

  // Apply tweaks live
  useAE(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    // derive accent dim
    root.style.setProperty('--accent-glow', `${t.accent}40`);
    root.style.setProperty('--accent-soft', `${t.accent}1a`);

    if (t.density === 'compact') {
      root.style.setProperty('--row-pad', '6px');
    } else {
      root.style.setProperty('--row-pad', '12px');
    }

    document.body.style.fontFamily = t.fontMode === 'thai-first'
      ? "'IBM Plex Sans Thai', 'Noto Sans Thai', 'Inter', system-ui, sans-serif"
      : "'Inter', 'IBM Plex Sans Thai', system-ui, sans-serif";

    if (!t.showAnimations) {
      root.style.setProperty('--anim-state', 'paused');
    }
  }, [t]);

  const titles = {
    dashboard: { t: 'Dashboard', s: 'OPS_OVERVIEW' },
    receive: { t: 'รับสินค้าเข้า · Goods Receipt', s: 'INBOUND' },
    issue: { t: 'จ่ายสินค้าออก · Goods Issue', s: 'OUTBOUND' },
    transfer: { t: 'Stock Transfer', s: 'INTERNAL_MOVE' },
    count: { t: 'Stock Count', s: 'CYCLE_COUNT' },
    items: { t: 'Item Master', s: 'CATALOG' },
    'item-detail': { t: 'Item Detail', s: `SKU · ${activeSku}` },
    locations: { t: 'Locations · Warehouse Map', s: 'WH-01' },
    'stock-report': { t: 'Stock Balance Report', s: 'REPORTS' },
    movement: { t: 'Movement Report', s: 'AUDIT_TRAIL' },
    lifeshelf: { t: 'Life Shelf Monitor', s: 'SHELF_LIFE · ห้าง' },
    documents: { t: 'ประวัติเอกสาร · Document Trail', s: 'DOC_TRAIL' },
    scanner: { t: 'Barcode Scanner', s: 'CAPTURE' },
    users: { t: 'จัดการผู้ใช้งาน · User Management', s: 'ADMIN' },
  };

  const handleNav = (id) => {
    if (!store.hasPerm(id)) return;
    setActiveSku(null);
    setPage(id);
  };

  const openItem = (sku) => { setActiveSku(sku); setPage('item-detail'); };

  return (
    <div className="app">
      <Sidebar active={page === 'item-detail' ? 'items' : page} onNav={handleNav}/>
      <div className="main">
        <TopBar title={titles[page]?.t || 'WMS'} subtitle={titles[page]?.s}/>
        <main className="content" data-screen-label={`${page}`}>
          <PageHost page={page} activeSku={activeSku} onNav={handleNav} onOpenItem={openItem}/>
        </main>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual">
          <TweakColor label="Accent color" value={t.accent} onChange={v => setTweak('accent', v)} options={ACCENT_OPTIONS}/>
          <TweakRadio label="Density" value={t.density}
            options={['comfortable', 'compact']}
            onChange={v => setTweak('density', v)}/>
          <TweakRadio label="Font" value={t.fontMode}
            options={['default', 'thai-first']}
            onChange={v => setTweak('fontMode', v)}/>
        </TweakSection>
        <TweakSection label="Data">
          <TweakButton label="Reset to seed data" onClick={() => { window.WMSData.reset(); window.location.reload(); }}/>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function PageHost({ page, activeSku, onNav, onOpenItem }) {
  return (
    <div>
      {page === 'dashboard' && <PageDashboard onNav={onNav}/>}
      {page === 'receive' && <PageReceive onNav={onNav}/>}
      {page === 'issue' && <PageIssue onNav={onNav}/>}
      {page === 'transfer' && <PageTransfer/>}
      {page === 'count' && <PageCount/>}
      {page === 'scanner' && <PageScanner/>}
      {page === 'items' && <PageItems onOpenItem={onOpenItem}/>}
      {page === 'item-detail' && <PageItemDetail sku={activeSku} onBack={() => onNav('items')}/>}
      {page === 'locations' && <PageLocations/>}
      {page === 'stock-report' && <PageStockReport/>}
      {page === 'movement' && <PageMovement/>}
      {page === 'lifeshelf' && <PageLifeShelf/>}
      {page === 'documents' && <PageDocuments/>}
      {page === 'users' && <PageUsers/>}
    </div>
  );
}

// Auth gate: show login when not authenticated, else the full app
function Root() {
  const store = useStore();
  if (!store.currentUser) return <LoginPage/>;
  return <App/>;
}

// Mount only after the Supabase preload has hydrated localStorage (or timed out),
// so StoreProvider's synchronous load() reads the freshest cross-device state.
// Falls back to immediate mount if Supabase is not configured.
(window.__wmsBootReady || Promise.resolve()).then(() => {
  ReactDOM.createRoot(document.getElementById('root')).render(
    <StoreProvider>
      <ToastProvider>
        <Root/>
      </ToastProvider>
    </StoreProvider>
  );
});