/* ============================================================
   APP ROOT — routing, language provider, shell
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const { LangCtx, ThemeCtx, useT, Icon, TopBar, Sidebar, Panel, PageHead } = window.UI;

  function Settings({ onNav }) {
    const t = useT();
    return (
      <div className="main">
        <PageHead crumbs={<><a onClick={() => onNav("city")}>{t("System Map", "แผนที่ระบบ")}</a><Icon name="chev" size={12} /><span>Settings</span></>} title="Settings" th="ตั้งค่า" />
        <div className="grid" style={{ gridTemplateColumns: "repeat(2,1fr)" }}>
          <Panel title={t("Roles & permissions", "สิทธิ์การใช้งาน")} th={t("who sees what", "ใครเห็นอะไร")}>
            <div style={{ padding: "6px 10px" }}>
              {[["Owner", "เจ้าของ", "ทุกอย่าง รวมข้อมูลลูกค้าครบ", "accent"], ["Accounting", "บัญชี", "เห็นเฉพาะยอดและกำไร", "ok"], ["Admin", "แอดมิน", "เห็นเฉพาะงานที่รับผิดชอบ", "info"], ["Warehouse", "คลัง", "เห็นเฉพาะสต๊อกและจัดซื้อ", "warn"]].map((r, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 8px", borderBottom: i < 3 ? "1px solid var(--hairline-soft)" : "none" }}>
                  <span className={"sdot " + r[3]} />
                  <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 13 }}>{r[0]} <span style={{ color: "var(--tx-faint)", fontWeight: 400 }}>{r[1]}</span></div><div style={{ fontSize: 11.5, color: "var(--tx-faint)" }}>{r[2]}</div></div>
                  <button className="chip" style={{ padding: "5px 11px" }}>{t("Edit", "แก้ไข")}</button>
                </div>
              ))}
            </div>
          </Panel>
          <Panel title={t("Data hygiene", "ความสะอาดข้อมูล")} th={t("the things to watch", "สิ่งที่ต้องระวัง")}>
            <div className="panel-pad" style={{ display: "grid", gap: 12 }}>
              {[["Central SKU mapping", "รหัสกลางสินค้า", "8 unmatched aliases", "warn"], ["Date normalization", "แปลงวันที่", "auto on import", "ok"], ["Set products → items", "แตกเซ็ตเป็นชิ้น", "enabled", "ok"], ["Backend calculations", "คำนวณใน backend", "no sheet formulas", "ok"]].map((r, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12.5 }}>
                  <div><div style={{ fontWeight: 600 }}>{r[0]}</div><div style={{ fontSize: 11, color: "var(--tx-faint)" }}>{r[1]}</div></div>
                  <span className={"badge " + r[3]}>{r[2]}</span>
                </div>
              ))}
            </div>
          </Panel>
        </div>
      </div>
    );
  }

  function App() {
    const [lang, setLang] = useState(() => localStorage.getItem("pg_lang") || "th");
    const [theme, setTheme] = useState(() => localStorage.getItem("pg_theme") || "dark");
    const [route, setRoute] = useState(() => localStorage.getItem("pg_route") || "city");
    const [navOpen, setNavOpen] = useState(() => localStorage.getItem("pg_nav") !== "0");
    useEffect(() => { localStorage.setItem("pg_lang", lang); }, [lang]);
    useEffect(() => { localStorage.setItem("pg_theme", theme); document.documentElement.dataset.theme = theme; }, [theme]);
    useEffect(() => { localStorage.setItem("pg_route", route); }, [route]);
    useEffect(() => { localStorage.setItem("pg_nav", navOpen ? "1" : "0"); }, [navOpen]);
    const onNav = (key) => { setRoute(key); document.querySelector(".main, .city-screen")?.scrollTo?.(0, 0); };

    const Pages = {
      facebook: window.FacebookOffice, stock: window.StockWarehouse, finance: window.FinanceOffice,
      tiktok: window.TiktokOffice, hr: window.HrOffice, import: window.ImportCenter, settings: Settings,
    };
    const Page = Pages[route];

    return React.createElement(ThemeCtx.Provider, { value: { theme, setTheme } },
      React.createElement(LangCtx.Provider, { value: { lang, setLang } },
        React.createElement("div", { className: "app-shell" },
          React.createElement(TopBar, { onBrand: () => onNav("city") }),
          React.createElement("div", { className: "body-split" },
            React.createElement(Sidebar, { active: route, onNav, open: navOpen, onToggle: () => setNavOpen((v) => !v) }),
            route === "city"
              ? React.createElement(window.CityMap, { onEnter: onNav })
              : (Page ? React.createElement(Page, { key: route, onNav }) : null)))));
  }

  ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));
})();