// OLLYMEN Store OS — App shell
const { useState, useEffect } = React;

const CRUMBS = {
  dashboard: ["Workspace", "대시보드"],
  ops:       ["강남 빗썸금융타워점", "운영일지"],
  inv:       ["강남 빗썸금융타워점", "메뉴 · 재고"],
  mobile:    ["강남 빗썸금융타워점", "마감 체크리스트"],
  onboard:   ["인사 운영", "직원 온보딩"],
  opening:   ["신규 오픈", "서울역그랜드점 보드"],
  report:    ["대표 브리핑", "주간 리포트 · W21"],
};

function App() {
  const [view, setView] = useState("login"); // 'login' | nav id | 'staff'
  const [active, setActive] = useState("dashboard");
  const [sbOpen, setSbOpen] = useState(false);

  const onLogin = (mode) => {
    if (mode === "staff") {
      setView("app");
      setActive("mobile");
    } else {
      setView("app");
      setActive("dashboard");
    }
  };

  const onLogout = () => setView("login");

  if (view === "login") return <LoginScreen onLogin={onLogin} />;

  return (
    <div className="app">
      <Sidebar active={active} onChange={setActive} open={sbOpen} onClose={() => setSbOpen(false)} />
      <div className="main">
        <Topbar crumbs={CRUMBS[active]} onLogout={onLogout} onMenu={() => setSbOpen(true)} />
        <div style={{ overflow: "hidden", minHeight: 0 }}>
          {active === "dashboard" && <OwnerDashboard onNavigate={setActive} />}
          {active === "ops"       && <StoreOperations />}
          {active === "inv"       && <InventoryCheck />}
          {active === "mobile"    && <MobileClosing />}
          {active === "onboard"   && <StaffOnboarding />}
          {active === "opening"   && <OpeningBoard />}
          {active === "report"    && <WeeklyReport />}
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);