// ============ APP ============
const { Sidebar, Topbar, Icon: AIcon } = window.UI;
const { Dashboard, Income } = window.PAGES_A;
const { Expenses, Salary } = window.PAGES_B;
const { Reports, Stock } = window.PAGES_C;

const PAGE_META = {
  dashboard: { title: 'ໜ້າຫຼັກພາບລວມ', sub: 'ສະຫຼຸບສະຖານະຮ້ານມື້ນີ້ · 14 ພຶດສະພາ 2026' },
  income:    { title: 'ລາຍຮັບ / ວຽກສ້ອມ', sub: 'ຈັດການບິນແລະວຽກສ້ອມໂທລະສັບ' },
  expense:   { title: 'ລາຍຈ່າຍ', sub: 'ບັນທຶກຄ່າອາໄຫຼ່ແລະຄ່າໃຊ້ຈ່າຍທັງໝົດ' },
  salary:    { title: 'ລະບົບເງິນເດືອນພະນັກງານ', sub: 'ຄຳນວນເງິນເດືອນພື້ນຖານ + ໂບນັດ ແລະອອກສະລິບ' },
  reports:   { title: 'ລາຍງານ / ວິເຄາະ', sub: 'ພາບລວມປະສິດທິພາບແລະສະຫຼຸບກຳໄລຂາດທຶນ' },
  stock:     { title: 'ສະຕັອກອາໄຫຼ່', sub: 'ຕິດຕາມຈຳນວນຄົງເຫຼືອແລະມູນຄ່າສະຕັອກ' },
};

function App() {
  const [page, setPage] = React.useState('dashboard');
  const [sidebarOpen, setSidebarOpen] = React.useState(false);
  const meta = PAGE_META[page];

  const PageComp = {
    dashboard: Dashboard, income: Income, expense: Expenses,
    salary: Salary, reports: Reports, stock: Stock
  }[page];

  // Close drawer on viewport resize past tablet breakpoint
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 720 && sidebarOpen) setSidebarOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [sidebarOpen]);

  return (
    <div className="app" data-screen-label={meta.title}>
      <Sidebar
        active={page}
        onChange={setPage}
        open={sidebarOpen}
        onClose={() => setSidebarOpen(false)}
      />
      <main className="main">
        <Topbar
          title={meta.title}
          subtitle={meta.sub}
          onMenuClick={() => setSidebarOpen(true)}
          actions={<>
            <button className="btn"><AIcon.Download/> ສົ່ງອອກ</button>
            <button className="btn btn-primary"><AIcon.Plus/> ເພີ່ມລາຍການ</button>
          </>}/>
        <div key={page}>
          <PageComp/>
        </div>
      </main>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);