/* Main app shell — data layer ใช้ /api แทน localStorage */

const { useState: useStateApp, useEffect: useEffectApp } = React;

// ─── Change Password Screen (บังคับตั้งรหัสครั้งแรก) ─────────────────────

function ChangePasswordScreen({ user, onChanged }) {
  const [oldPw,    setOldPw]    = useStateApp('');
  const [newPw,    setNewPw]    = useStateApp('');
  const [confirm,  setConfirm]  = useStateApp('');
  const [error,    setError]    = useStateApp('');
  const [loading,  setLoading]  = useStateApp(false);

  async function submit() {
    setError('');
    if (!oldPw) { setError('กรุณากรอกรหัสผ่านเดิม'); return; }
    if (newPw.length < 8) { setError('รหัสผ่านใหม่ต้องมีอย่างน้อย 8 ตัวอักษร'); return; }
    if (newPw !== confirm) { setError('รหัสผ่านไม่ตรงกัน'); return; }
    setLoading(true);
    try {
      await apiPost('/api/auth/change-password', { oldPassword: oldPw, newPassword: newPw });
      onChanged();
    } catch (e) {
      setError(e.message || 'เกิดข้อผิดพลาด');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="login-bg">
      <div className="login-card">
        <div className="login-brand">
          <div className="brand-logo" style={{width: 48, height: 48, borderRadius: 12}}>
            <svg viewBox="0 0 32 32" width="48" height="48" fill="none">
              <rect x="0" y="0" width="32" height="32" rx="9" fill="url(#ii-grad-cp)"/>
              <defs><linearGradient id="ii-grad-cp" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
                <stop offset="0" stopColor="#3d8fd1"/><stop offset="1" stopColor="#1a78c2"/>
              </linearGradient></defs>
              <path d="M16 6.5 C 12 12, 9.5 15.5, 9.5 19 a 6.5 6.5 0 0 0 13 0 C 22.5 15.5, 20 12, 16 6.5 Z" fill="#fff" opacity="0.96"/>
              <rect x="11" y="20" width="10" height="2" rx="1" fill="#1a78c2" opacity="0.85"/>
            </svg>
          </div>
          <div>
            <div className="login-name">Ink Inventory</div>
            <div className="login-sub">ระบบเช็คหมึก</div>
          </div>
        </div>

        <h2 className="login-title">ตั้งรหัสผ่านใหม่</h2>
        <div className="login-hint">
          สวัสดี <strong>{user.name}</strong> — บัญชีของคุณต้องตั้งรหัสผ่านก่อนเข้าใช้งาน
        </div>

        <div className="login-field">
          <label>รหัสผ่านเดิม</label>
          <input type="password" value={oldPw} onChange={e => setOldPw(e.target.value)}
                 placeholder="รหัสผ่านที่ใช้ login ครั้งนี้" autoFocus/>
        </div>
        <div className="login-field">
          <label>รหัสผ่านใหม่ (อย่างน้อย 8 ตัว)</label>
          <input type="password" value={newPw} onChange={e => setNewPw(e.target.value)}
                 placeholder="ตั้งรหัสผ่านใหม่"/>
        </div>
        <div className="login-field" style={error ? {animation: 'shake 0.4s'} : {}}>
          <label>ยืนยันรหัสผ่านใหม่</label>
          <input type="password" value={confirm} onChange={e => setConfirm(e.target.value)}
                 placeholder="พิมพ์ซ้ำอีกครั้ง"
                 onKeyDown={e => e.key === 'Enter' && submit()}/>
          {error && <div className="login-error">{error}</div>}
        </div>

        <button className="btn btn-primary login-btn" onClick={submit}
                disabled={!oldPw || !newPw || !confirm || loading}>
          {loading ? 'กำลังบันทึก...' : 'ตั้งรหัสผ่านและเข้าสู่ระบบ →'}
        </button>
      </div>
    </div>
  );
}

// ─── App root ──────────────────────────────────────────────────────────────

function App() {
  const [currentUser, setCurrentUser] = useStateApp(null);
  const [authChecked, setAuthChecked] = useStateApp(false);

  useEffectApp(() => {
    // ตรวจ session ที่มีอยู่ก่อน render login
    apiGet('/api/auth/me')
      .then(u => setCurrentUser(u))
      .catch(() => {})
      .finally(() => setAuthChecked(true));
  }, []);

  if (!authChecked) {
    return (
      <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', color: 'var(--text-3)'}}>
        กำลังโหลด...
      </div>
    );
  }

  if (!currentUser) return <LoginScreen onLogin={setCurrentUser}/>;

  // บังคับเปลี่ยน password ก่อนเข้าแอป
  if (currentUser.mustChangePw) {
    return (
      <ChangePasswordScreen
        user={currentUser}
        onChanged={() => setCurrentUser({ ...currentUser, mustChangePw: false })}
      />
    );
  }

  return <MainApp currentUser={currentUser} onLogout={() => setCurrentUser(null)}/>;
}

function MainApp({ currentUser, onLogout }) {
  const [t, setTweak] = useTweaks({
    "accent": "#1a78c2",
    "density": "default",
    "theme": "light",
    "showLowStockBadge": true
  });

  useEffectApp(() => {
    document.documentElement.style.setProperty('--ink', t.accent);
    document.documentElement.setAttribute('data-density', t.density);
    document.documentElement.setAttribute('data-theme', t.theme);
  }, [t.accent, t.density, t.theme]);

  // ─── Data state (โหลดจาก /api/bootstrap) ──────────────────────────────
  const [products,   setProducts]   = useStateApp([]);
  const [purchases,  setPurchases]  = useStateApp([]);
  const [issues,     setIssues]     = useStateApp([]);
  const [users,      setUsers]      = useStateApp([]);
  const [branches,   setBranches]   = useStateApp([]);
  const [suppliers,  setSuppliers]  = useStateApp([]);  // string[]
  const [suppliersFull, setSuppliersFull] = useStateApp([]); // [{id,name}] สำหรับ CRUD

  const [dataLoading, setDataLoading] = useStateApp(true);

  async function loadData() {
    try {
      const d = await apiGet('/api/bootstrap');
      setProducts(d.products   || []);
      setPurchases(d.purchases  || []);
      setIssues(d.issues      || []);
      setUsers(d.users       || []);
      setBranches(d.departments || []);
      // suppliers จาก bootstrap อาจเป็น string[] หรือ [{id,name}]
      if (Array.isArray(d.suppliers) && d.suppliers.length > 0 && typeof d.suppliers[0] === 'object') {
        setSuppliersFull(d.suppliers);
        setSuppliers(d.suppliers.map(s => s.name));
      } else {
        setSuppliers(d.suppliers || []);
      }
    } catch (e) {
      if (e.status === 401) onLogout();
    } finally {
      setDataLoading(false);
    }
  }

  useEffectApp(() => { loadData(); }, []);

  // ─── UI State ──────────────────────────────────────────────────────────
  const role     = currentUser.role;
  const readonly = role === 'viewer';

  const [page,        setPage]        = useStateApp('dashboard');
  const [settingsTab, setSettingsTab] = useStateApp('users');
  const [stockFilter, setStockFilter] = useStateApp('all');
  const [showPurchase, setShowPurchase] = useStateApp(false);
  const [showIssue,    setShowIssue]   = useStateApp(false);
  const [showNotif,    setShowNotif]   = useStateApp(false);
  const [toasts,       setToasts]      = useStateApp([]);

  function goToSettings(tab) { setSettingsTab(tab); setPage('settings'); }
  function goToStock(filter = 'all') { setStockFilter(filter); setPage('stock'); }

  function pushToast(msg) {
    const id = Date.now() + Math.random();
    setToasts(ts => [...ts, { id, msg }]);
    setTimeout(() => setToasts(ts => ts.filter(t => t.id !== id)), 2600);
  }

  async function withAPI(fn, successMsg) {
    try {
      await fn();
      await loadData();
      if (successMsg) pushToast(successMsg);
    } catch (e) {
      pushToast('เกิดข้อผิดพลาด: ' + (e.message || 'ไม่ทราบสาเหตุ'));
    }
  }

  // ─── Auth ──────────────────────────────────────────────────────────────
  async function handleLogout() {
    if (confirm('ออกจากระบบ?')) {
      await apiPost('/api/auth/logout').catch(() => {});
      onLogout();
    }
  }

  // ─── Purchases / Issues ────────────────────────────────────────────────
  async function addPurchase(tx) {
    const p = products.find(p => p.id === tx.pid);
    await withAPI(
      () => apiPost('/api/purchases', tx),
      `บันทึกซื้อ ${tx.qty} ${p?.unit || 'รายการ'} เข้าสต็อก ✓`
    );
  }

  async function addIssue(tx) {
    const p = products.find(p => p.id === tx.pid);
    const d = branches.find(d => d.id === tx.dept);
    await withAPI(
      () => apiPost('/api/issues', tx),
      `เบิก ${tx.qty} ${p?.unit || ''} ให้ ${d?.name || tx.dept} ✓`
    );
  }

  // ─── Settings handlers (ทุกอย่างผ่าน API แล้ว refetch) ──────────────

  // Users (ผู้ทำเบิก)
  async function handleAddUser(u) {
    const username = (u.name || 'user').toLowerCase().replace(/\s+/g, '').replace(/[^a-z0-9]/g, '') + '_' + Date.now().toString(36).slice(-4);
    await withAPI(
      () => apiPost('/api/users', { name: u.name, username, password: 'TempPass@' + Math.random().toString(36).slice(2, 8), role: 'staff', defaultDept: u.defaultDept || null }),
      `เพิ่ม ${u.name} ✓ (username: ${username})`
    );
  }
  async function handleUpdateUser(id, patch) {
    const apiPatch_ = {};
    if (patch.name !== undefined)        apiPatch_.name        = patch.name;
    if (patch.defaultDept !== undefined) apiPatch_.defaultDept = patch.defaultDept || null;
    if (patch.role !== undefined)        apiPatch_.role        = patch.role;
    if (patch.active !== undefined)      apiPatch_.active      = patch.active;
    await withAPI(() => apiPatch(`/api/users/${id}`, apiPatch_), 'บันทึกการแก้ไข ✓');
  }
  async function handleDeleteUser(id) {
    await withAPI(() => apiDelete(`/api/users/${id}`), 'ลบรายชื่อแล้ว');
  }

  // Departments
  async function handleAddDept(d) {
    await withAPI(() => apiPost('/api/departments', d), `เพิ่มสาขา ${d.name} ✓`);
  }
  async function handleUpdateDept(id, patch) {
    await withAPI(() => apiPatch(`/api/departments/${id}`, patch), 'บันทึกการแก้ไข ✓');
  }
  async function handleDeleteDept(id) {
    await withAPI(() => apiDelete(`/api/departments/${id}`), 'ลบสาขาแล้ว');
  }

  // Suppliers — ใช้ suppliersFull เพื่อหา ID จาก index
  async function handleAddSupplier(name) {
    await withAPI(() => apiPost('/api/suppliers', { name }), `เพิ่ม ${name} ✓`);
  }
  async function handleUpdateSupplier(idx, newName) {
    const sup = suppliersFull[idx];
    if (!sup) return;
    await withAPI(() => apiPatch(`/api/suppliers/${sup.id}`, { name: newName }), 'บันทึกการแก้ไข ✓');
  }
  async function handleDeleteSupplier(idx) {
    const sup = suppliersFull[idx];
    if (!sup) return;
    await withAPI(() => apiDelete(`/api/suppliers/${sup.id}`), 'ลบ supplier แล้ว');
  }

  // Reset password (admin → any user)
  async function handleResetPassword(id, newPassword) {
    await withAPI(() => apiPost(`/api/users/${id}/reset-password`, { newPassword }), 'Reset password แล้ว ✓');
  }

  // Products
  async function handleAddProduct(p) {
    await withAPI(() => apiPost('/api/products', p), `เพิ่ม ${p.name} ✓`);
  }
  async function handleUpdateProduct(id, patch) {
    await withAPI(() => apiPatch(`/api/products/${id}`, patch), 'บันทึกการแก้ไข ✓');
  }
  async function handleDeleteProduct(id) {
    await withAPI(() => apiDelete(`/api/products/${id}`), 'ลบหมึกแล้ว');
  }

  // ─── CSV Export ────────────────────────────────────────────────────────
  function exportCSV(kind) {
    let rows = []; let header = '';
    if (kind === 'purchases' || kind === 'full') {
      header = 'วันที่,เลขที่ PO,รหัส,สินค้า,Supplier,จำนวน,ราคา/หน่วย,รวม\n';
      rows = purchases.map(tx => {
        const p = products.find(p => p.id === tx.pid);
        return [tx.date, tx.ref, p?.sku, `"${p?.name}"`, `"${tx.supplier}"`, tx.qty, tx.price, tx.qty * tx.price].join(',');
      });
    } else if (kind === 'issues') {
      header = 'วันที่,รหัส,สินค้า,สาขา/หน่วยงาน,จำนวน,หมายเหตุ\n';
      rows = issues.map(tx => {
        const p = products.find(p => p.id === tx.pid);
        const d = branches.find(d => d.id === tx.dept);
        return [tx.date, p?.sku, `"${p?.name}"`, `"${d?.name || tx.dept}"`, tx.qty, `"${tx.note || ''}"`].join(',');
      });
    } else if (kind === 'stock') {
      header = 'รหัส,สินค้า,หน่วย,คงเหลือ,ขั้นต่ำ,ราคา/หน่วย\n';
      rows = products.map(p => [p.sku, `"${p.name}"`, p.unit, p.stock, p.min, p.price].join(','));
    } else if (kind === 'summary') {
      header = 'รายการ,ค่า\n';
      rows = [
        `รวมหมึกในสต็อก,${products.reduce((s,p) => s + (p.stock||0), 0)}`,
        `รายการที่ใกล้หมด,${products.filter(p => p.stock < p.min).length}`,
        `จำนวนการซื้อเข้าทั้งหมด,${purchases.length}`,
        `จำนวนการเบิกใช้ทั้งหมด,${issues.length}`,
      ];
    }
    const csv = '' + header + rows.join('\n');
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `ink-inventory-${kind}-${new Date().toISOString().slice(0,10)}.csv`;
    a.click();
    URL.revokeObjectURL(url);
    pushToast('ส่งออกไฟล์ CSV เรียบร้อย ✓');
  }

  const lowCount = products.filter(p => (p.stock || 0) < p.min).length;

  const navItems = [
    { id: 'dashboard', label: 'หน้าหลัก',   en: 'Dashboard', icon: I.dashboard },
    { id: 'stock',     label: 'สต็อกหมึก',  en: 'Stock',     icon: I.box, badge: t.showLowStockBadge && lowCount > 0 ? lowCount : null, onClick: () => goToStock('all') },
    { id: 'purchases', label: 'ซื้อเข้า',    en: 'Purchases', icon: I.truck },
    { id: 'issues',    label: 'เบิกออก',     en: 'Issues',    icon: I.out },
    { id: 'reports',   label: 'รายงานสรุป',  en: 'Reports',   icon: I.chart },
  ];

  const pageTitles = {
    dashboard: { title: 'แดชบอร์ด',            sub: 'ภาพรวมการเบิกหมึก',       breadcrumb: true },
    stock:     { title: 'สต็อกหมึก',            sub: products.length + ' รายการในระบบ' },
    purchases: { title: 'บันทึกซื้อหมึกเข้า',   sub: purchases.length + ' รายการ' },
    issues:    { title: 'บันทึกเบิกหมึกออก',    sub: issues.length + ' การเบิกใช้ ใน ' + branches.length + ' สาขา/หน่วยงาน' },
    reports:   { title: 'รายงานสรุป',           sub: 'สรุปการเคลื่อนไหวและการใช้งาน' },
    settings:  { title: 'ตั้งค่า',              sub: 'จัดการผู้ทำเบิก, สาขา, และ Suppliers' },
  };
  const pt = pageTitles[page] || pageTitles.dashboard;

  return (
    <div className="app">
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-logo" aria-hidden="true">
            <svg viewBox="0 0 32 32" width="32" height="32" fill="none">
              <rect x="0" y="0" width="32" height="32" rx="9" fill="url(#ii-grad)"/>
              <defs>
                <linearGradient id="ii-grad" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
                  <stop offset="0" stopColor="#3d8fd1"/>
                  <stop offset="1" stopColor="#1a78c2"/>
                </linearGradient>
              </defs>
              <path d="M16 6.5 C 12 12, 9.5 15.5, 9.5 19 a 6.5 6.5 0 0 0 13 0 C 22.5 15.5, 20 12, 16 6.5 Z"
                    fill="#ffffff" opacity="0.96"/>
              <path d="M13.2 17.5 c 0.2 -2 1.4 -3.6 2.6 -4.5"
                    stroke="#1a78c2" strokeWidth="1.1" strokeLinecap="round" opacity="0.5" fill="none"/>
              <rect x="11" y="20" width="10" height="2" rx="1" fill="#1a78c2" opacity="0.85"/>
            </svg>
          </div>
          <div>
            <div className="brand-name">Ink Inventory</div>
            <div className="brand-sub">ระบบเช็คหมึก</div>
          </div>
        </div>

        <div className="nav-section">เมนูหลัก</div>
        {navItems.map(n => (
          <button key={n.id} className={`nav-item ${page === n.id ? 'active' : ''}`} onClick={n.onClick || (() => setPage(n.id))}>
            {n.icon}<span>{n.label}</span>
            {n.badge && <span className="badge mono">{n.badge}</span>}
          </button>
        ))}

        <div className="nav-section">การจัดการ</div>
        {!readonly && <button className={`nav-item ${page==='settings'&&settingsTab==='products'?'active':''}`} onClick={() => goToSettings('products')}>{I.box}<span>รุ่นหมึก</span></button>}
        {!readonly && <button className={`nav-item ${page==='settings'&&settingsTab==='depts'?'active':''}`}   onClick={() => goToSettings('depts')}>{I.users}<span>สาขา / หน่วยงาน</span></button>}
        {!readonly && <button className={`nav-item ${page==='settings'&&settingsTab==='sup'?'active':''}`}     onClick={() => goToSettings('sup')}>{I.truck}<span>Suppliers</span></button>}
        {!readonly && <button className={`nav-item ${page==='settings'&&settingsTab==='users'?'active':''}`}   onClick={() => goToSettings('users')}>{I.cog}<span>ผู้ทำเบิก & ตั้งค่า</span></button>}
        {role === 'admin' && <button className={`nav-item ${page==='settings'&&settingsTab==='audit'?'active':''}`} onClick={() => goToSettings('audit')}>{I.chart}<span>Audit Log</span></button>}

        <div className="sidebar-foot">
          <div className="avatar">{(currentUser.name||'?')[0]}</div>
          <div style={{flex: 1, minWidth: 0}}>
            <div className="user-name">{currentUser.name}</div>
            <div className="user-role">{ROLE_LABELS[role] || role}</div>
          </div>
          <button className="logout-btn" onClick={handleLogout} title="ออกจากระบบ" aria-label="ออกจากระบบ">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
              <polyline points="16 17 21 12 16 7"/>
              <line x1="21" y1="12" x2="9" y2="12"/>
            </svg>
          </button>
        </div>
      </aside>

      <main className="main">
        <div className="topbar">
          {pt.breadcrumb ? (
            <div className="crumbs">
              <span className="crumb-dot"/>
              <span className="crumb-root">ระบบคลังหมึก</span>
              <span className="crumb-sep">›</span>
              <span className="crumb-leaf">{pt.title}</span>
            </div>
          ) : (
            <div>
              <h1 className="page-title">{pt.title}</h1>
              <div className="page-sub">{pt.sub}</div>
            </div>
          )}
          <div className="topbar-spacer"/>
          <div className="notif-wrap">
            <button className={"notif-btn" + (showNotif?" is-open":"")} title="การแจ้งเตือน"
                    onClick={() => setShowNotif(s => !s)}>
              {I.bell}
              {lowCount > 0 && <span className="notif-badge">{lowCount > 99 ? '99+' : lowCount}</span>}
            </button>
            {showNotif && (
              <>
                <div className="notif-scrim" onClick={() => setShowNotif(false)}/>
                <div className="notif-pop">
                  <div className="notif-pop-head">
                    <div>
                      <div className="notif-pop-title">การแจ้งเตือน</div>
                      <div className="notif-pop-sub">{lowCount > 0 ? `${lowCount} รายการต้องเติมสต็อก` : 'ไม่มีรายการเร่งด่วน'}</div>
                    </div>
                    {lowCount > 0 && <button className="btn btn-sm" onClick={() => { setShowNotif(false); goToStock('low'); }}>ดูทั้งหมด</button>}
                  </div>
                  <div className="notif-pop-list">
                    {products.filter(p => (p.stock||0) < p.min).sort((a,b) => (a.stock-a.min)-(b.stock-b.min)).slice(0,6).map(p => {
                      const out = (p.stock||0) === 0;
                      return (
                        <button key={p.id} className="notif-item" onClick={() => { setShowNotif(false); goToStock('low'); }}>
                          <span className={"notif-dot " + (out?"is-out":"is-low")}/>
                          <div className="notif-item-body">
                            <div className="notif-item-title">{p.name}</div>
                            <div className="notif-item-sub mono">{p.sku} · คงเหลือ {p.stock} / ขั้นต่ำ {p.min}</div>
                          </div>
                          <span className={"pill " + (out?"pill-red":"pill-amber")}>{out?'หมด':'ใกล้หมด'}</span>
                        </button>
                      );
                    })}
                    {lowCount === 0 && <div className="notif-empty"><div style={{fontSize:22,marginBottom:6}}>✓</div>ทุกอย่างอยู่ในเกณฑ์ปกติ</div>}
                  </div>
                </div>
              </>
            )}
          </div>
          <div className="topbar-divider"/>
          <div className="topbar-group">
            <button className="btn" onClick={() => setShowPurchase(true)} disabled={readonly}>{I.arrow_in} ซื้อเข้า</button>
            <button className="btn btn-primary" onClick={() => setShowIssue(true)} disabled={readonly}>{I.arrow_out} เบิกออก</button>
          </div>
        </div>

        {dataLoading ? (
          <div style={{display:'flex',alignItems:'center',justifyContent:'center',flex:1,color:'var(--text-3)'}}>
            กำลังโหลดข้อมูล...
          </div>
        ) : (
          <div className="content">
            {page === 'dashboard' && (
              <Dashboard products={products} purchases={purchases} issues={issues} departments={branches}
                onAddPurchase={() => setShowPurchase(true)} onAddIssue={() => setShowIssue(true)}
                goTo={goToStock} setPage={setPage} userName={currentUser.name}/>
            )}
            {page === 'stock' && (
              <StockView products={products} onAddPurchase={() => setShowPurchase(true)}
                onAddIssue={() => setShowIssue(true)} onExport={() => exportCSV('stock')} initialFilter={stockFilter}/>
            )}
            {page === 'purchases' && (
              <PurchasesView purchases={purchases} products={products}
                onAdd={() => setShowPurchase(true)} onExport={() => exportCSV('purchases')}/>
            )}
            {page === 'issues' && (
              <IssuesView issues={issues} products={products} departments={branches}
                onAdd={() => setShowIssue(true)} onExport={() => exportCSV('issues')}/>
            )}
            {page === 'reports' && (
              <ReportsView products={products} purchases={purchases} issues={issues}
                departments={branches} onExport={exportCSV}/>
            )}
            {page === 'settings' && (
              <SettingsView
                activeTab={settingsTab} onTabChange={setSettingsTab}
                currentRole={role}
                users={users} departments={branches} suppliers={suppliers} products={products} keys={[]}
                onAddUser={handleAddUser}       onUpdateUser={handleUpdateUser}   onDeleteUser={handleDeleteUser}
                onResetPassword={handleResetPassword}
                onAddDept={handleAddDept}       onUpdateDept={handleUpdateDept}   onDeleteDept={handleDeleteDept}
                onAddSupplier={handleAddSupplier} onUpdateSupplier={handleUpdateSupplier} onDeleteSupplier={handleDeleteSupplier}
                onAddProduct={handleAddProduct} onUpdateProduct={handleUpdateProduct} onDeleteProduct={handleDeleteProduct}
                onAddKey={() => {}} onUpdateKey={() => {}} onDeleteKey={() => {}}
              />
            )}
          </div>
        )}
      </main>

      {showPurchase && (
        <PurchaseModal products={products} suppliers={suppliers}
          onClose={() => setShowPurchase(false)} onSave={addPurchase}/>
      )}
      {showIssue && (
        <IssueModal products={products} departments={branches} users={users}
          onClose={() => setShowIssue(false)} onSave={addIssue}/>
      )}

      <div className="toasts">
        {toasts.map(t => <div key={t.id} className="toast">{t.msg}</div>)}
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="หน้าตา">
          <TweakRadio label="ธีม" value={t.theme}
            options={[{value:'light',label:'สว่าง'},{value:'dark',label:'มืด'}]}
            onChange={v => setTweak('theme', v)}/>
          <TweakColor label="สี Accent" value={t.accent}
            options={['#1a78c2','#0c5fb3','#2c8dd6','#3d8fd1','#1c6fa8']}
            onChange={v => setTweak('accent', v)}/>
          <TweakSelect label="ความหนาแน่นของข้อมูล" value={t.density}
            options={[{value:'compact',label:'แน่น'},{value:'default',label:'ปกติ'},{value:'comfy',label:'สบายตา'}]}
            onChange={v => setTweak('density', v)}/>
        </TweakSection>
        <TweakSection label="พฤติกรรม">
          <TweakToggle label="แสดง badge เตือนใกล้หมดที่ sidebar"
            value={t.showLowStockBadge} onChange={v => setTweak('showLowStockBadge', v)}/>
          <TweakButton label="+ ทดสอบบันทึกซื้อเข้า" onClick={() => setShowPurchase(true)}/>
          <TweakButton label="− ทดสอบเบิกออก" onClick={() => setShowIssue(true)} secondary/>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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