// ============================================================
// app.jsx — Main shell, routing, state container
// ============================================================

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

const NAV = [
  { section: "หลัก", items: [
    { id: "dashboard", label: "ภาพรวม", icon: "dashboard" },
    { id: "stock", label: "สินค้า / สต๊อก", icon: "package" },
    { id: "warehouse", label: "แผนผังคลัง", icon: "warehouse" },
  ]},
  { section: "ธุรกรรม", items: [
    { id: "receive", label: "รับเข้าสินค้า", icon: "receive" },
    { id: "issue", label: "จ่ายออกสินค้า", icon: "issue" },
  ]},
  { section: "รายงาน", items: [
    { id: "reports", label: "รายงาน", icon: "chart" },
  ]},
  { section: "ระบบ", items: [
    { id: "users", label: "ผู้ใช้งาน", icon: "users", adminOnly: false },
  ]},
];

function LoadingScreen() {
  return (
    <div style={{
      height: "100vh", display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center", gap: 14,
      background: "var(--bg)", color: "var(--fg-3)", fontSize: 14,
    }}>
      <div style={{
        width: 36, height: 36, background: "var(--accent)", borderRadius: 8,
        display: "grid", placeItems: "center", fontWeight: 700, fontSize: 15, color: "#fff",
      }}>IM</div>
      <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
        <Icon name="loader" size={16} className="spin"/>
        กำลังโหลดข้อมูลจากฐานข้อมูล…
      </div>
    </div>
  );
}

function App() {
  const [state, setState] = useState(null);
  const [dbLoading, setDbLoading] = useState(true);
  const [page, setPage] = useState("dashboard");
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Load state: try Supabase first, fallback to localStorage
  useEffect(() => {
    (async () => {
      let loaded = null;
      if (DB.isConfigured()) {
        const empty = await DB.isEmpty();
        if (empty) await DB.seedAll(SEED_STATE);
        loaded = await DB.loadAll();
      }
      if (!loaded) loaded = loadState();
      setState(loaded);
      setDbLoading(false);
    })();
  }, []);

  // Persist to localStorage as local cache
  useEffect(() => { if (state) saveState(state); }, [state]);

  // Apply accent
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--accent-ring", t.accent + "30");
  }, [t.accent]);

  // Apply density
  useEffect(() => {
    document.body.style.setProperty("font-size", t.density === "compact" ? "13.5px" : "14.5px");
  }, [t.density]);

  if (dbLoading) return <LoadingScreen/>;

  const currentUser = state.users.find(u => u.id === state.currentUserId);

  if (!currentUser) {
    return (
      <ToastProvider>
        <LoginScreen state={state} setState={setState}/>
      </ToastProvider>
    );
  }

  // Guard: non-admin can still see users page (read-only)
  const navItems = NAV;

  return (
    <ToastProvider>
      <div className="app-shell">
        <Sidebar
          state={state}
          page={page}
          setPage={setPage}
          currentUser={currentUser}
          onLogout={() => setState(s => ({ ...s, currentUserId: null }))}
          nav={navItems}
        />
        <main className="main">
          <Topbar state={state} page={page} setPage={setPage}/>
          <div className="scroll-area">
            <PageRouter page={page} state={state} setState={setState} currentUser={currentUser}/>
          </div>
        </main>
      </div>

      <TweaksUI t={t} setTweak={setTweak} setState={setState}/>
    </ToastProvider>
  );
}

function PageRouter({ page, state, setState, currentUser }) {
  switch (page) {
    case "dashboard": return <Dashboard state={state}/>;
    case "stock": return <StockScreen state={state} setState={setState}/>;
    case "warehouse": return <WarehouseScreen state={state} setState={setState}/>;
    case "receive": return <ReceiveScreen state={state} setState={setState}/>;
    case "issue": return <IssueScreen state={state} setState={setState}/>;
    case "reports": return <ReportsScreen state={state}/>;
    case "users": return <UsersScreen state={state} setState={setState} currentUser={currentUser}/>;
    default: return <Dashboard state={state}/>;
  }
}

function Sidebar({ state, page, setPage, currentUser, onLogout, nav }) {
  const lowCount = state.products.filter(p => {
    const q = getStockBySKU(state, p.sku);
    return q > 0 && q < p.reorderPoint;
  }).length;

  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <img src="verena-logo.png" alt="Verena" style={{ height: 28, width: "auto", filter: "brightness(0) invert(1)" }}/>
        <div>
          <div className="sidebar-brand-name">Verena Inventory Manager</div>
          <div className="sidebar-brand-sub">F&B Edition · v2.4</div>
        </div>
      </div>

      {nav.map(section => (
        <div key={section.section}>
          <div className="nav-section-label">{section.section}</div>
          {section.items.map(it => (
            <button key={it.id} className={`nav-item ${page === it.id ? "active" : ""}`} onClick={() => setPage(it.id)}>
              <Icon name={it.icon} size={15} className="nav-ico"/>
              {it.label}
              {it.id === "stock" && lowCount > 0 && <span className="nav-badge">{lowCount}</span>}
            </button>
          ))}
        </div>
      ))}

      <div className="sidebar-user">
        <span className="avatar" style={{ background: currentUser.color + "22", color: currentUser.color }}>{currentUser.initials}</span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="sidebar-user-name" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{currentUser.name}</div>
          <div className="sidebar-user-role">{currentUser.role === "admin" ? "Administrator" : "User"} · @{currentUser.username}</div>
        </div>
        <button className="btn btn-ghost btn-icon" title="ออกจากระบบ" onClick={onLogout}>
          <Icon name="logout" size={15}/>
        </button>
      </div>
    </aside>
  );
}

function Topbar({ state, page, setPage }) {
  const titles = {
    dashboard: { th: "ภาพรวม", en: "Dashboard" },
    stock: { th: "สินค้า / สต๊อก", en: "Stock" },
    warehouse: { th: "แผนผังคลัง", en: "Warehouse Map" },
    receive: { th: "รับเข้าสินค้า", en: "Goods Receipt" },
    issue: { th: "จ่ายออกสินค้า", en: "Goods Issue" },
    reports: { th: "รายงาน", en: "Reports" },
    users: { th: "ผู้ใช้งาน", en: "Users" },
  };
  const t = titles[page];

  const [q, setQ] = useState("");
  const [searchOpen, setSearchOpen] = useState(false);
  const results = q.length > 0 ? state.products.filter(p =>
    p.name.includes(q) || p.sku.toLowerCase().includes(q.toLowerCase()) || p.barcode.includes(q)
  ).slice(0, 6) : [];

  return (
    <header className="topbar">
      <div>
        <div className="topbar-title">{t.th}</div>
        <div className="topbar-sub mono text-xs">{t.en}</div>
      </div>
      <div className="topbar-spacer"/>
      <div style={{ position: "relative" }}>
        <div className="topbar-search">
          <Icon name="search" size={14} className="muted"/>
          <input placeholder="ค้นหาสินค้า, SKU, บาร์โค้ด..." value={q}
            onFocus={() => setSearchOpen(true)} onBlur={() => setTimeout(() => setSearchOpen(false), 120)}
            onChange={e => setQ(e.target.value)}/>
          <span className="kbd">⌘K</span>
        </div>
        {searchOpen && results.length > 0 && (
          <div style={{
            position: "absolute", top: "calc(100% + 6px)", right: 0,
            width: 380, background: "var(--surface)",
            border: "1px solid var(--border)", borderRadius: "var(--radius)",
            boxShadow: "var(--shadow-lg)", zIndex: 50, padding: 6,
          }}>
            {results.map(p => {
              const qty = getStockBySKU(state, p.sku);
              return (
                <button key={p.sku} className="nav-item" onClick={() => { setPage("stock"); setSearchOpen(false); setQ(""); }}>
                  <Icon name="package" size={14}/>
                  <div style={{ flex: 1, textAlign: "left" }}>
                    <div style={{ fontSize: 13 }}>{p.name}</div>
                    <div className="mono text-xs muted">{p.sku}</div>
                  </div>
                  <span className="tnum text-xs">{formatNumber(qty)}</span>
                </button>
              );
            })}
          </div>
        )}
      </div>
      <button className="btn btn-ghost btn-icon" title="แจ้งเตือน">
        <Icon name="bell" size={16}/>
      </button>
    </header>
  );
}

function TweaksUI({ t, setTweak, setState }) {
  const [confirmReset, setConfirmReset] = useState(false);
  return (
    <>
      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent color">
          <TweakColor label="สีหลัก"
            value={t.accent}
            options={["#2563eb", "#0a0a0a", "#16a34a", "#d97706", "#7c3aed"]}
            onChange={v => setTweak("accent", v)}/>
        </TweakSection>
        <TweakSection title="ความหนาแน่น">
          <TweakRadio label="Density"
            value={t.density}
            options={[{ value: "comfortable", label: "สบายตา" }, { value: "compact", label: "หนาแน่น" }]}
            onChange={v => setTweak("density", v)}/>
        </TweakSection>
        <TweakSection title="UI">
          <TweakToggle label="แสดง Live badge" value={t.showLiveBadge} onChange={v => setTweak("showLiveBadge", v)}/>
        </TweakSection>
        <TweakSection title="Data">
          <TweakButton label="รีเซ็ตข้อมูลกลับเป็นค่าเริ่มต้น" onClick={() => setConfirmReset(true)}/>
        </TweakSection>
      </TweaksPanel>
      <ConfirmDialog
        open={confirmReset}
        title="รีเซ็ตข้อมูล"
        message="การกระทำนี้จะคืนค่าสต๊อก รายการเคลื่อนไหว และผู้ใช้งานทั้งหมดเป็นค่าเริ่มต้น คุณต้องการดำเนินการต่อหรือไม่?"
        danger
        onConfirm={() => {
          const fresh = resetState();
          setState({ ...fresh, currentUserId: null });
        }}
        onClose={() => setConfirmReset(false)}
      />
    </>
  );
}

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