// app.jsx — App shell + router

const { useState: useState_a, useEffect: useEffect_a, useRef: useRef_a } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "indigo",
  "density": "comfortable",
  "showSidebar": true
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  indigo:  { a: "#6d7cff", a2: "#38d3a3", aDeep: "#4d59cc" },
  emerald: { a: "#38d3a3", a2: "#6d7cff", aDeep: "#27a07a" },
  amber:   { a: "#ffb454", a2: "#6d7cff", aDeep: "#cc8a3a" },
  rose:    { a: "#ff7591", a2: "#6d7cff", aDeep: "#cc5b73" },
  cyan:    { a: "#5ad7f0", a2: "#38d3a3", aDeep: "#3aa6bc" },
};

function App() {
  const [route, setRoute] = useState_a({ name: "dashboard", params: {} });
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { toasts } = useStore();

  // Apply accent
  useEffect_a(() => {
    const c = ACCENT_MAP[t.accent] || ACCENT_MAP.indigo;
    document.documentElement.style.setProperty("--accent", c.a);
    document.documentElement.style.setProperty("--accent-2", c.a2);
  }, [t.accent]);

  const nav = (name, params = {}) => setRoute({ name, params });

  const navItems = [
    { id: "dashboard", label: "แดชบอร์ด", icon: "dashboard" },
    { id: "receive",   label: "รับเข้า",   icon: "in", group: "ops" },
    { id: "issue",     label: "จ่ายออก",   icon: "out", group: "ops" },
    { id: "items",     label: "สินค้าทั้งหมด", icon: "items", group: "data" },
    { id: "locations", label: "ที่จัดเก็บ",   icon: "location", group: "data" },
    { id: "reports",   label: "รายงาน",     icon: "reports", group: "data" },
  ];

  const pageTitle = {
    dashboard: "แดชบอร์ด",
    receive:   "รับเข้าสินค้า",
    issue:     "จ่ายออกสินค้า",
    items:     "สินค้าและสต๊อก",
    locations: "ที่จัดเก็บสินค้า",
    reports:   "รายงาน",
  }[route.name];

  const breadcrumb = {
    dashboard: "ภาพรวมระบบสต๊อก",
    receive:   "สร้างเอกสารรับเข้าสินค้าใหม่",
    issue:     "สร้างเอกสารจ่ายออกสินค้า",
    items:     "Master ข้อมูลสินค้าทั้งหมด · ดูรายละเอียดแต่ละ SKU",
    locations: "ติดตามสต๊อกแต่ละที่จัดเก็บแบบอัตโนมัติ",
    reports:   "รายงานสต๊อกคงเหลือและการเคลื่อนไหว",
  }[route.name];

  return (
    <div className="app">
      {/* Sidebar */}
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark"></div>
          <div>
            <div className="brand-name">Stockflow</div>
            <div className="brand-sub">Inventory v2</div>
          </div>
        </div>

        <div className="nav-section">หน้าหลัก</div>
        <div className="nav-list">
          {navItems.filter(n => !n.group).map(n => (
            <div key={n.id} className={"nav-item " + (route.name === n.id ? "active" : "")} onClick={() => nav(n.id)}>
              <Icon name={n.icon} size={17} className="nav-ico"/>
              <span>{n.label}</span>
            </div>
          ))}
        </div>

        <div className="nav-section">ดำเนินการ</div>
        <div className="nav-list">
          {navItems.filter(n => n.group === "ops").map(n => (
            <div key={n.id} className={"nav-item " + (route.name === n.id ? "active" : "")} onClick={() => nav(n.id)}>
              <Icon name={n.icon} size={17} className="nav-ico"/>
              <span>{n.label}</span>
            </div>
          ))}
        </div>

        <div className="nav-section">ข้อมูล</div>
        <div className="nav-list">
          {navItems.filter(n => n.group === "data").map(n => (
            <div key={n.id} className={"nav-item " + (route.name === n.id ? "active" : "")} onClick={() => nav(n.id)}>
              <Icon name={n.icon} size={17} className="nav-ico"/>
              <span>{n.label}</span>
              {n.id === "items" && <LowStockBadge/>}
            </div>
          ))}
        </div>

        <div style={{flex:1}}/>

        <div className="nav-list" style={{marginBottom:10}}>
          <div className="nav-item">
            <Icon name="settings" size={17} className="nav-ico"/>
            <span>ตั้งค่า</span>
          </div>
        </div>

        <div className="user-card">
          <div className="avatar">ส</div>
          <div style={{flex:1, minWidth:0}}>
            <div className="user-name">คุณ สมชาย ก.</div>
            <div className="user-role">Stock Manager</div>
          </div>
          <button className="icon-btn" style={{width:30, height:30}}><Icon name="logout" size={14}/></button>
        </div>
      </aside>

      {/* Main */}
      <main className="main">
        <header className="topbar">
          <div>
            <div className="page-title">{pageTitle}</div>
            <div className="crumbs">{breadcrumb}</div>
          </div>
          <div className="search">
            <Icon name="search" size={15}/>
            <input placeholder="ค้นหาสินค้า, SKU, เอกสาร..."/>
          </div>
          <button className="icon-btn"><Icon name="qr" size={17}/></button>
          <button className="icon-btn"><Icon name="bell" size={17}/><span className="dot-noti"/></button>
          {route.name !== "receive" && route.name !== "issue" && (
            <React.Fragment>
              <button className="btn ok" onClick={() => nav("receive")}><Icon name="in" size={14}/>รับเข้า</button>
              <button className="btn danger" onClick={() => nav("issue")}><Icon name="out" size={14}/>จ่ายออก</button>
            </React.Fragment>
          )}
        </header>

        <div className="content">
          <div className="glow-line"/>
          {route.name === "dashboard" && <Dashboard onNavigate={nav}/>}
          {route.name === "receive" && <ReceiveScreen initialSku={route.params.sku} onDone={() => nav("dashboard")}/>}
          {route.name === "issue" && <IssueScreen onDone={() => nav("dashboard")}/>}
          {route.name === "items" && <ItemsScreen onNavigate={nav}/>}
          {route.name === "locations" && <LocationsScreen onNavigate={nav}/>}
          {route.name === "reports" && <ReportsScreen/>}
        </div>
      </main>

      {/* Toasts */}
      <div className="toasts">
        {toasts.map(t => (
          <div key={t.id} className={"toast " + t.kind}>
            <div className="toast-ico">
              <Icon name={t.kind === "ok" ? "check" : "alert"} size={13} stroke={2.4}/>
            </div>
            <div>{t.msg}</div>
          </div>
        ))}
      </div>

      {/* Tweaks panel */}
      <TweaksPanel>
        <TweakSection label="ธีม"/>
        <TweakRadio label="โทนสี (Accent)" value={t.accent}
          options={["indigo", "emerald", "amber", "rose", "cyan"]}
          onChange={v => setTweak("accent", v)}
        />
        <div style={{fontSize:11, color:"rgba(41,38,27,.55)", marginTop:6, lineHeight:1.5}}>
          ระบบ Inventory นี้สามารถปรับโทน accent ของทั้งระบบได้แบบทันที — กราฟ ปุ่ม และ navigation จะอัปเดตตามทันที
        </div>
      </TweaksPanel>
    </div>
  );
}

function LowStockBadge() {
  const { items, totalQty } = useStore();
  const n = items.filter(it => totalQty(it.sku) < it.reorder).length;
  if (!n) return null;
  return <span className="nav-badge warn">{n}</span>;
}

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