/* SettingsView — manage ผู้ทำเบิก, สาขา/หน่วยงาน, Suppliers */

const { useState: useStateS } = React;

function SettingsView({
  activeTab, onTabChange,
  users, departments, suppliers, products, keys, currentRole,
  onAddUser, onUpdateUser, onDeleteUser, onResetPassword,
  onAddDept, onUpdateDept, onDeleteDept,
  onAddSupplier, onUpdateSupplier, onDeleteSupplier,
  onAddProduct, onUpdateProduct, onDeleteProduct,
  onAddKey, onUpdateKey, onDeleteKey,
}) {
  const [internalTab, setInternalTab] = useStateS('users');
  const tab = activeTab !== undefined ? activeTab : internalTab;
  const setTab = onTabChange || setInternalTab;
  const isAdmin = currentRole === 'admin';

  return (
    <div className="row-gap">
      <div className="tabs">
        <button className={`tab ${tab === 'users' ? 'active' : ''}`} onClick={() => setTab('users')}>
          ผู้ทำเบิก<span className="count mono">{users.length}</span>
        </button>
        <button className={`tab ${tab === 'products' ? 'active' : ''}`} onClick={() => setTab('products')}>
          หมึก<span className="count mono">{products?.length || 0}</span>
        </button>
        <button className={`tab ${tab === 'depts' ? 'active' : ''}`} onClick={() => setTab('depts')}>
          สาขา / หน่วยงาน<span className="count mono">{departments.length}</span>
        </button>
        <button className={`tab ${tab === 'sup' ? 'active' : ''}`} onClick={() => setTab('sup')}>
          Suppliers<span className="count mono">{suppliers.length}</span>
        </button>
        {isAdmin && (
          <button className={`tab ${tab === 'keys' ? 'active' : ''}`} onClick={() => setTab('keys')}>
            🔑 Keys & Users<span className="count mono">{keys?.length || 0}</span>
          </button>
        )}
        {isAdmin && (
          <button className={`tab ${tab === 'audit' ? 'active' : ''}`} onClick={() => setTab('audit')}>
            📋 Audit Log
          </button>
        )}
      </div>

      {tab === 'users' && (
        <UsersPanel users={users} departments={departments} currentRole={currentRole}
          onAdd={onAddUser} onUpdate={onUpdateUser} onDelete={onDeleteUser}
          onResetPassword={onResetPassword}/>
      )}
      {tab === 'products' && (
        <ProductsPanel products={products} currentRole={currentRole}
          onAdd={onAddProduct} onUpdate={onUpdateProduct} onDelete={onDeleteProduct}/>
      )}
      {tab === 'depts' && (
        <DeptsPanel departments={departments}
          onAdd={onAddDept} onUpdate={onUpdateDept} onDelete={onDeleteDept}/>
      )}
      {tab === 'sup' && (
        <SuppliersPanel suppliers={suppliers}
          onAdd={onAddSupplier} onUpdate={onUpdateSupplier} onDelete={onDeleteSupplier}/>
      )}
      {tab === 'keys' && isAdmin && (
        <KeysPanel keys={keys}
          onAdd={onAddKey} onUpdate={onUpdateKey} onDelete={onDeleteKey}/>
      )}
      {tab === 'audit' && isAdmin && <AuditLogPanel/>}
      {(tab === 'keys' || tab === 'audit') && !isAdmin && (
        <div className="card"><div className="empty" style={{padding: 40}}>เฉพาะผู้ดูแลระบบเท่านั้น</div></div>
      )}
    </div>
  );
}

// ---- Users ----
const ROLE_COLOR = { admin: '#a63232', staff: '#1a78c2', viewer: '#2d9d5b' };
const ROLE_LABEL = { admin: 'Admin', staff: 'Staff', viewer: 'Viewer (ดูอย่างเดียว)' };

function UsersPanel({ users, departments, currentRole, onAdd, onUpdate, onDelete, onResetPassword }) {
  const isAdmin = currentRole === 'admin';

  // ─── Add form ─────────────────────────────────────────────────────────
  const [name,        setName]        = useStateS('');
  const [username,    setUsername]    = useStateS('');
  const [password,    setPassword]    = useStateS('');
  const [role,        setRole]        = useStateS('staff');
  const [defaultDept, setDefaultDept] = useStateS('');

  // ─── Edit form ────────────────────────────────────────────────────────
  const [editingId,   setEditingId]   = useStateS(null);
  const [editName,    setEditName]    = useStateS('');
  const [editDept,    setEditDept]    = useStateS('');
  const [editRole,    setEditRole]    = useStateS('staff');

  // ─── Reset password ───────────────────────────────────────────────────
  const [resetId,     setResetId]     = useStateS(null);
  const [resetPw,     setResetPw]     = useStateS('');

  // ─── Filter ───────────────────────────────────────────────────────────
  const [filter, setFilter] = useStateS('');

  function submit() {
    if (!name.trim()) return;
    if (isAdmin && (!username.trim() || !password.trim())) return;
    onAdd({ name: name.trim(), username: username.trim(), password, role, defaultDept: defaultDept || null });
    setName(''); setUsername(''); setPassword(''); setRole('staff'); setDefaultDept('');
  }

  function startEdit(u) {
    setEditingId(u.id); setEditName(u.name);
    setEditDept(u.defaultDept || ''); setEditRole(u.role || 'staff');
  }
  function saveEdit() {
    onUpdate(editingId, { name: editName.trim(), defaultDept: editDept || null, role: editRole });
    setEditingId(null);
  }
  function doReset() {
    if (!resetPw || resetPw.length < 8) return;
    onResetPassword(resetId, resetPw);
    setResetId(null); setResetPw('');
  }

  const filtered = users.filter(u => u.name.toLowerCase().includes(filter.toLowerCase())
    || (u.username || '').toLowerCase().includes(filter.toLowerCase()));

  return (
    <div className="row-gap">

      {/* ─── Add form ─── */}
      <div className="card">
        <div className="card-head">
          <h3 className="card-title">{isAdmin ? 'เพิ่มผู้ใช้ใหม่' : 'เพิ่มผู้ทำเบิกใหม่'}</h3>
          {!isAdmin && <span className="card-sub" style={{marginLeft: 'auto'}}>รายชื่อจะปรากฏใน dropdown ฟอร์ม "เบิกออก"</span>}
        </div>
        <div className="card-pad">
          {isAdmin ? (
            <>
              <div className="field-row" style={{gridTemplateColumns: '1fr 1fr', alignItems: 'end', marginBottom: 10}}>
                <div className="field" style={{marginBottom: 0}}>
                  <label>ชื่อแสดง</label>
                  <input value={name} onChange={e => setName(e.target.value)} placeholder="เช่น โม"/>
                </div>
                <div className="field" style={{marginBottom: 0}}>
                  <label>Username (ใช้ login)</label>
                  <input value={username} onChange={e => setUsername(e.target.value)}
                         placeholder="เช่น mo" style={{fontFamily: 'monospace'}}/>
                </div>
              </div>
              <div className="field-row" style={{gridTemplateColumns: '1fr 130px 1fr auto', alignItems: 'end'}}>
                <div className="field" style={{marginBottom: 0}}>
                  <label>Password เริ่มต้น (≥8 ตัว)</label>
                  <input type="password" value={password} onChange={e => setPassword(e.target.value)}
                         placeholder="ผู้ใช้ต้องเปลี่ยนเมื่อ login ครั้งแรก"/>
                </div>
                <div className="field" style={{marginBottom: 0}}>
                  <label>Role</label>
                  <select value={role} onChange={e => setRole(e.target.value)}>
                    <option value="admin">Admin</option>
                    <option value="staff">Staff</option>
                    <option value="viewer">Viewer</option>
                  </select>
                </div>
                <div className="field" style={{marginBottom: 0}}>
                  <label>สาขาหลัก</label>
                  <select value={defaultDept} onChange={e => setDefaultDept(e.target.value)}>
                    <option value="">— ไม่กำหนด —</option>
                    <optgroup label="สาขา">
                      {departments.filter(d => d.kind === 'branch').map(d => <option key={d.id} value={d.id}>{d.id} — {d.name}</option>)}
                    </optgroup>
                    <optgroup label="สำนักงานใหญ่">
                      {departments.filter(d => d.kind === 'hq').map(d => <option key={d.id} value={d.id}>{d.name}</option>)}
                    </optgroup>
                  </select>
                </div>
                <button className="btn btn-primary" style={{height: 34}}
                        onClick={submit} disabled={!name.trim() || !username.trim() || !password.trim()}>
                  {I.plus} เพิ่ม
                </button>
              </div>
            </>
          ) : (
            <div className="field-row" style={{gridTemplateColumns: '2fr 2fr auto', alignItems: 'end'}}>
              <div className="field" style={{marginBottom: 0}}>
                <label>ชื่อ</label>
                <input value={name} onChange={e => setName(e.target.value)}
                       placeholder="เช่น โม, นีน่าร์, แชมป์"
                       onKeyDown={e => e.key === 'Enter' && submit()}/>
              </div>
              <div className="field" style={{marginBottom: 0}}>
                <label>สาขาหลัก (auto-fill)</label>
                <select value={defaultDept} onChange={e => setDefaultDept(e.target.value)}>
                  <option value="">— ไม่กำหนด —</option>
                  <optgroup label="สาขา">
                    {departments.filter(d => d.kind === 'branch').map(d => <option key={d.id} value={d.id}>{d.id} — {d.name}</option>)}
                  </optgroup>
                  <optgroup label="สำนักงานใหญ่">
                    {departments.filter(d => d.kind === 'hq').map(d => <option key={d.id} value={d.id}>{d.name}</option>)}
                  </optgroup>
                </select>
              </div>
              <button className="btn btn-primary" style={{height: 34}} onClick={submit} disabled={!name.trim()}>
                {I.plus} เพิ่ม
              </button>
            </div>
          )}
        </div>
      </div>

      {/* ─── Reset password modal ─── */}
      {resetId && (
        <div className="modal-back" onClick={() => setResetId(null)}>
          <div className="modal" style={{maxWidth: 400}} onClick={e => e.stopPropagation()}>
            <div className="modal-head">
              <h3>Reset Password</h3>
              <button className="btn btn-ghost btn-icon" style={{marginLeft: 'auto'}} onClick={() => setResetId(null)}>{I.close}</button>
            </div>
            <div className="modal-body">
              <div className="field" style={{marginBottom: 0}}>
                <label>รหัสผ่านใหม่ (อย่างน้อย 8 ตัวอักษร)</label>
                <input type="password" value={resetPw} onChange={e => setResetPw(e.target.value)}
                       placeholder="รหัสผ่านใหม่" autoFocus
                       onKeyDown={e => e.key === 'Enter' && doReset()}/>
                <div className="field-hint">ผู้ใช้จะต้องเปลี่ยนรหัสผ่านอีกครั้งเมื่อ login</div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn" onClick={() => setResetId(null)}>ยกเลิก</button>
              <button className="btn btn-primary" onClick={doReset} disabled={!resetPw || resetPw.length < 8}>
                Reset Password
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ─── Users table ─── */}
      <div className="card">
        <div className="card-head">
          <h3 className="card-title">รายชื่อผู้ใช้ทั้งหมด</h3>
          <div className="search" style={{marginLeft: 'auto', width: 220}}>
            {I.search}
            <input placeholder="ค้นหาชื่อหรือ username..." value={filter} onChange={e => setFilter(e.target.value)}/>
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width: 40}}>#</th>
              <th>ชื่อ {isAdmin && '/ Username'}</th>
              {isAdmin && <th style={{width: 130}}>Role</th>}
              <th>สาขา/หน่วยงานหลัก</th>
              <th style={{width: 1}}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((u, idx) => {
              const isEdit = editingId === u.id;
              const dept = departments.find(d => d.id === u.defaultDept);
              const roleColor = ROLE_COLOR[u.role] || '#8294a8';
              return (
                <tr key={u.id}>
                  <td className="mono muted text-sm">{idx + 1}</td>
                  <td>
                    {isEdit ? (
                      <input value={editName} onChange={e => setEditName(e.target.value)}
                             style={{padding: '4px 8px', fontSize: 13, width: '100%'}}
                             onKeyDown={e => e.key === 'Enter' && saveEdit()}/>
                    ) : (
                      <div>
                        <span className="fw-500">{u.name}</span>
                        {isAdmin && u.username && (
                          <div className="text-xs mono muted" style={{marginTop: 1}}>{u.username}</div>
                        )}
                      </div>
                    )}
                  </td>
                  {isAdmin && (
                    <td>
                      {isEdit ? (
                        <select value={editRole} onChange={e => setEditRole(e.target.value)}
                                style={{padding: '4px 8px', fontSize: 13}}>
                          <option value="admin">Admin</option>
                          <option value="staff">Staff</option>
                          <option value="viewer">Viewer</option>
                        </select>
                      ) : (
                        <span className="pill" style={{background: roleColor + '18', color: roleColor, borderColor: 'transparent'}}>
                          {ROLE_LABEL[u.role] || u.role}
                        </span>
                      )}
                    </td>
                  )}
                  <td>
                    {isEdit ? (
                      <select value={editDept} onChange={e => setEditDept(e.target.value)}
                              style={{padding: '4px 8px', fontSize: 13}}>
                        <option value="">— ไม่กำหนด —</option>
                        {departments.map(d => <option key={d.id} value={d.id}>{d.name}</option>)}
                      </select>
                    ) : dept ? (
                      <span className="pill" style={{background: dept.color + '18', color: dept.color, borderColor: 'transparent'}}>
                        <span className="dot" style={{background: dept.color}}></span>{dept.name}
                      </span>
                    ) : <span className="muted text-sm">— ไม่กำหนด —</span>}
                  </td>
                  <td style={{whiteSpace: 'nowrap'}}>
                    {isEdit ? (
                      <div className="flex gap-6">
                        <button className="btn btn-sm btn-primary" onClick={saveEdit}>บันทึก</button>
                        <button className="btn btn-sm" onClick={() => setEditingId(null)}>ยกเลิก</button>
                      </div>
                    ) : (
                      <div className="flex gap-6">
                        <button className="btn btn-sm" onClick={() => startEdit(u)}>แก้ไข</button>
                        {isAdmin && (
                          <button className="btn btn-sm" style={{color: 'var(--ink)'}}
                                  onClick={() => { setResetId(u.id); setResetPw(''); }}>
                            🔑 Reset
                          </button>
                        )}
                        <button className="btn btn-sm" style={{color: 'var(--red)'}}
                                onClick={() => { if (confirm('ลบ ' + u.name + '?')) onDelete(u.id); }}>ลบ</button>
                      </div>
                    )}
                  </td>
                </tr>
              );
            })}
            {filtered.length === 0 && <tr><td colSpan={isAdmin ? 5 : 4}><div className="empty">ไม่พบรายชื่อ</div></td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ---- Departments ----
function DeptsPanel({ departments, onAdd, onUpdate, onDelete }) {
  const [id, setId] = useStateS('');
  const [name, setName] = useStateS('');
  const [kind, setKind] = useStateS('branch');
  const [filter, setFilter] = useStateS('');
  const [kindFilter, setKindFilter] = useStateS('all');
  const [editingId, setEditingId] = useStateS(null);
  const [editName, setEditName] = useStateS('');
  const [editKind, setEditKind] = useStateS('');

  function submit() {
    if (!id.trim() || !name.trim()) return;
    if (departments.find(d => d.id === id.trim().toUpperCase())) {
      alert('รหัสนี้มีอยู่แล้ว');
      return;
    }
    const colors = {
      airport: '#1a78c2', branch: '#2c8dd6', hq: '#7a5fbf'
    };
    onAdd({ id: id.trim().toUpperCase(), name: name.trim(), en: name.trim(), color: colors[kind], kind });
    setId(''); setName(''); setKind('branch');
  }
  function startEdit(d) {
    setEditingId(d.id); setEditName(d.name); setEditKind(d.kind);
  }
  function saveEdit() {
    onUpdate(editingId, { name: editName.trim(), kind: editKind });
    setEditingId(null);
  }

  const filtered = departments
    .filter(d => kindFilter === 'all' || d.kind === kindFilter)
    .filter(d => d.name.toLowerCase().includes(filter.toLowerCase()) || d.id.toLowerCase().includes(filter.toLowerCase()));

  const kindLabel = k => k === 'hq' ? 'สำนักงานใหญ่' : 'สาขา';
  const counts = {
    all: departments.length,
    branch: departments.filter(d => d.kind === 'branch').length,
    hq: departments.filter(d => d.kind === 'hq').length,
  };

  return (
    <div className="row-gap">
      <div className="card">
        <div className="card-head">
          <h3 className="card-title">เพิ่มสาขา / หน่วยงานใหม่</h3>
        </div>
        <div className="card-pad">
          <div className="field-row" style={{gridTemplateColumns: '90px 2fr 1fr auto', alignItems: 'end'}}>
            <div className="field" style={{marginBottom: 0}}>
              <label>รหัส</label>
              <input value={id} onChange={e => setId(e.target.value.toUpperCase())}
                     placeholder="BKK"
                     style={{fontFamily: 'IBM Plex Mono, monospace'}}
                     maxLength="6"/>
            </div>
            <div className="field" style={{marginBottom: 0}}>
              <label>ชื่อ</label>
              <input value={name} onChange={e => setName(e.target.value)}
                     placeholder="เช่น Suvarnabhumi Airport"
                     onKeyDown={e => e.key === 'Enter' && submit()}/>
            </div>
            <div className="field" style={{marginBottom: 0}}>
              <label>ประเภท</label>
              <select value={kind} onChange={e => setKind(e.target.value)}>
                <option value="branch">สาขา</option>
                <option value="hq">สำนักงานใหญ่ (H.O.)</option>
              </select>
            </div>
            <button className="btn btn-primary" style={{height: 34}} onClick={submit} disabled={!id.trim() || !name.trim()}>
              {I.plus} เพิ่ม
            </button>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3 className="card-title">รายชื่อสาขา / หน่วยงาน</h3>
          <div className="search" style={{marginLeft: 'auto', width: 220}}>
            {I.search}
            <input placeholder="ค้นหาชื่อ หรือรหัส..." value={filter} onChange={e => setFilter(e.target.value)}/>
          </div>
        </div>
        <div className="tabs" style={{margin: '8px 18px 0', borderBottom: 'none'}}>
          {[
            {k: 'all', label: 'ทั้งหมด'},
            {k: 'branch', label: 'สาขา'},
            {k: 'hq', label: 'สำนักงานใหญ่'},
          ].map(t => (
            <button key={t.k} className={`tab ${kindFilter === t.k ? 'active' : ''}`} onClick={() => setKindFilter(t.k)}>
              {t.label}<span className="count mono">{counts[t.k]}</span>
            </button>
          ))}
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width: 70}}>รหัส</th>
              <th>ชื่อ</th>
              <th>ประเภท</th>
              <th style={{width: 1}}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(d => {
              const isEdit = editingId === d.id;
              return (
                <tr key={d.id}>
                  <td className="mono fw-500 text-sm">{d.id}</td>
                  <td>
                    {isEdit ? (
                      <input value={editName} onChange={e => setEditName(e.target.value)}
                             style={{padding: '4px 8px', fontSize: 13, width: '100%'}}
                             onKeyDown={e => e.key === 'Enter' && saveEdit()}/>
                    ) : (
                      <span className="flex gap-8">
                        <span style={{width: 8, height: 8, borderRadius: '50%', background: d.color}}></span>
                        <span className="fw-500">{d.name}</span>
                      </span>
                    )}
                  </td>
                  <td>
                    {isEdit ? (
                      <select value={editKind} onChange={e => setEditKind(e.target.value)}
                              style={{padding: '4px 8px', fontSize: 13}}>
                        <option value="branch">สาขา</option>
                        <option value="hq">สำนักงานใหญ่</option>
                      </select>
                    ) : (
                      <span className="pill" style={{background: d.color + '18', color: d.color, borderColor: 'transparent'}}>
                        {kindLabel(d.kind)}
                      </span>
                    )}
                  </td>
                  <td style={{whiteSpace: 'nowrap'}}>
                    {isEdit ? (
                      <div className="flex gap-6">
                        <button className="btn btn-sm btn-primary" onClick={saveEdit}>บันทึก</button>
                        <button className="btn btn-sm" onClick={() => setEditingId(null)}>ยกเลิก</button>
                      </div>
                    ) : (
                      <div className="flex gap-6">
                        <button className="btn btn-sm" onClick={() => startEdit(d)}>แก้ไข</button>
                        <button className="btn btn-sm" style={{color: 'var(--red)'}}
                                onClick={() => { if (confirm('ลบสาขา ' + d.name + '?\n(การลบจะมีผลต่อรายการเบิกที่อ้างถึงสาขานี้)')) onDelete(d.id); }}>
                          ลบ
                        </button>
                      </div>
                    )}
                  </td>
                </tr>
              );
            })}
            {filtered.length === 0 && <tr><td colSpan="4"><div className="empty">ไม่พบรายการ</div></td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ---- Suppliers ----
function SuppliersPanel({ suppliers, onAdd, onUpdate, onDelete }) {
  const [name, setName] = useStateS('');
  const [editingIdx, setEditingIdx] = useStateS(null);
  const [editName, setEditName] = useStateS('');
  const [filter, setFilter] = useStateS('');

  function submit() {
    if (!name.trim()) return;
    if (suppliers.includes(name.trim())) {
      alert('ชื่อ supplier นี้มีอยู่แล้ว');
      return;
    }
    onAdd(name.trim());
    setName('');
  }
  function startEdit(i, s) {
    setEditingIdx(i); setEditName(s);
  }
  function saveEdit() {
    onUpdate(editingIdx, editName.trim());
    setEditingIdx(null);
  }

  const filtered = suppliers
    .map((s, i) => ({ s, i }))
    .filter(({ s }) => s.toLowerCase().includes(filter.toLowerCase()));

  return (
    <div className="row-gap">
      <div className="card">
        <div className="card-head">
          <h3 className="card-title">เพิ่ม Supplier ใหม่</h3>
          <span className="card-sub" style={{marginLeft: 'auto'}}>ใช้ใน dropdown ของฟอร์ม "ซื้อเข้า"</span>
        </div>
        <div className="card-pad">
          <div className="field-row" style={{gridTemplateColumns: '1fr auto', alignItems: 'end'}}>
            <div className="field" style={{marginBottom: 0}}>
              <label>ชื่อร้าน / Supplier</label>
              <input value={name} onChange={e => setName(e.target.value)}
                     placeholder="เช่น ออฟฟิศเมท, IT City"
                     onKeyDown={e => e.key === 'Enter' && submit()}/>
            </div>
            <button className="btn btn-primary" style={{height: 34}} onClick={submit} disabled={!name.trim()}>
              {I.plus} เพิ่ม
            </button>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3 className="card-title">รายชื่อ Suppliers</h3>
          <div className="search" style={{marginLeft: 'auto', width: 220}}>
            {I.search}
            <input placeholder="ค้นหา..." value={filter} onChange={e => setFilter(e.target.value)}/>
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width: 40}}>#</th>
              <th>ชื่อร้าน / Supplier</th>
              <th style={{width: 1}}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(({ s, i }) => {
              const isEdit = editingIdx === i;
              return (
                <tr key={i}>
                  <td className="mono muted text-sm">{i + 1}</td>
                  <td>
                    {isEdit ? (
                      <input value={editName} onChange={e => setEditName(e.target.value)}
                             style={{padding: '4px 8px', fontSize: 13, width: '100%'}}
                             onKeyDown={e => e.key === 'Enter' && saveEdit()}/>
                    ) : <span className="fw-500">{s}</span>}
                  </td>
                  <td style={{whiteSpace: 'nowrap'}}>
                    {isEdit ? (
                      <div className="flex gap-6">
                        <button className="btn btn-sm btn-primary" onClick={saveEdit}>บันทึก</button>
                        <button className="btn btn-sm" onClick={() => setEditingIdx(null)}>ยกเลิก</button>
                      </div>
                    ) : (
                      <div className="flex gap-6">
                        <button className="btn btn-sm" onClick={() => startEdit(i, s)}>แก้ไข</button>
                        <button className="btn btn-sm" style={{color: 'var(--red)'}}
                                onClick={() => { if (confirm('ลบ ' + s + ' จาก suppliers?')) onDelete(i); }}>ลบ</button>
                      </div>
                    )}
                  </td>
                </tr>
              );
            })}
            {filtered.length === 0 && <tr><td colSpan="3"><div className="empty">ยังไม่มี supplier</div></td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ---- Products (หมึก) ----
function ProductsPanel({ products, onAdd, onUpdate, onDelete, currentRole }) {
  const [sku, setSku] = useStateS('');
  const [name, setName] = useStateS('');
  const [unit, setUnit] = useStateS('ตลับ');
  const [kind, setKind] = useStateS('toner');
  const [price, setPrice] = useStateS('');
  const [min, setMin] = useStateS('');
  const [stock, setStock] = useStateS('0');
  const [editingId, setEditingId] = useStateS(null);
  const [editing, setEditing] = useStateS({});
  const [filter, setFilter] = useStateS('');
  const [sortKey, setSortKey] = useStateS('sku');
  const [sortDir, setSortDir] = useStateS('asc');

  const toggleSort = (key) => {
    if (sortKey === key) {
      setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
    } else {
      setSortKey(key);
      setSortDir(key === 'stock' || key === 'price' ? 'desc' : 'asc');
    }
  };

  function submit() {
    if (!sku.trim() || !name.trim() || !price || !min) return;
    if (products.find(p => p.sku === sku.trim())) {
      alert('รหัส SKU นี้มีอยู่แล้ว');
      return;
    }
    const stockNum = Number(stock || 0);
    const priceNum = Number(price);
    onAdd({
      id: 'p' + Date.now(),
      sku: sku.trim(),
      name: name.trim(),
      unit: 'ตลับ', kind: 'toner',
      price: priceNum,
      min: Number(min),
      stock: stockNum,
      initialStock: stockNum,
      initialPrice: priceNum,
    });
    setSku(''); setName(''); setPrice(''); setMin(''); setStock('0');
  }
  function startEdit(p) {
    setEditingId(p.id);
    setEditing({ sku: p.sku, name: p.name, unit: p.unit, kind: p.kind, price: p.price, min: p.min });
  }
  function saveEdit() {
    onUpdate(editingId, {
      sku: editing.sku.trim(),
      name: editing.name.trim(),
      price: Number(editing.price),
      min: Number(editing.min),
    });
    setEditingId(null);
  }

  const filtered = products.filter(p =>
    p.name.toLowerCase().includes(filter.toLowerCase())
    || p.sku.toLowerCase().includes(filter.toLowerCase())
  );

  const sorted = [...filtered].sort((a, b) => {
    let av, bv;
    switch (sortKey) {
      case 'sku': av = a.sku; bv = b.sku; break;
      case 'name': av = a.name; bv = b.name; break;
      case 'stock': av = a.stock; bv = b.stock; break;
      case 'min': av = a.min; bv = b.min; break;
      case 'price': av = a.price; bv = b.price; break;
      case 'status': av = a.active === false ? 1 : 0; bv = b.active === false ? 1 : 0; break;
      default: av = a.sku; bv = b.sku;
    }
    if (typeof av === 'string') {
      const cmp = av.localeCompare(bv, 'th', { numeric: true });
      return sortDir === 'asc' ? cmp : -cmp;
    }
    return sortDir === 'asc' ? av - bv : bv - av;
  });

  const kindLabel = k => k === 'toner' ? 'ตลับโทนเนอร์' : k === 'bottle' ? 'หมึกขวด' : 'ผ้าหมึก/ริบบอน';

  return (
    <div className="row-gap">
      <div className="card">
        <div className="card-head">
          <h3 className="card-title">เพิ่มรุ่นหมึกใหม่</h3>
          <span className="card-sub" style={{marginLeft: 'auto'}}>กรอกข้อมูลพื้นฐานของรุ่นหมึก</span>
        </div>
        <div className="card-pad">
          <div className="field-row" style={{gridTemplateColumns: '140px 1fr', alignItems: 'end'}}>
            <div className="field" style={{marginBottom: 10}}>
              <label>รหัส (SKU)</label>
              <input value={sku} onChange={e => setSku(e.target.value)}
                     placeholder="CF230A"
                     style={{fontFamily: 'IBM Plex Mono, monospace'}}/>
            </div>
            <div className="field" style={{marginBottom: 10}}>
              <label>ชื่อรุ่นหมึก</label>
              <input value={name} onChange={e => setName(e.target.value)}
                     placeholder="เช่น HP 30A CF230A (M227 FDW)"
                     onKeyDown={e => e.key === 'Enter' && submit()}/>
            </div>
          </div>
          <div className="field-row" style={{gridTemplateColumns: '160px 160px 160px auto', alignItems: 'end'}}>
            <div className="field" style={{marginBottom: 0}}>
              <label>ราคา/หน่วย (฿)</label>
              <input type="number" min="0" value={price} onChange={e => setPrice(e.target.value)}
                     placeholder="170"/>
            </div>
            <div className="field" style={{marginBottom: 0}}>
              <label>ขั้นต่ำ</label>
              <input type="number" min="0" value={min} onChange={e => setMin(e.target.value)}
                     placeholder="5"/>
            </div>
            <div className="field" style={{marginBottom: 0}}>
              <label>สต็อกเริ่มต้น</label>
              <input type="number" min="0" value={stock} onChange={e => setStock(e.target.value)}/>
            </div>
            <button className="btn btn-primary" style={{height: 34}} onClick={submit}
                    disabled={!sku.trim() || !name.trim() || !price || !min}>
              {I.plus} เพิ่ม
            </button>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3 className="card-title">รายการหมึกทั้งหมด</h3>
          <div className="search" style={{marginLeft: 'auto', width: 240}}>
            {I.search}
            <input placeholder="ค้นหารหัสหรือชื่อ..." value={filter} onChange={e => setFilter(e.target.value)}/>
          </div>
        </div>
        <table className="tbl tbl-sortable">
          <thead>
            <tr>
              <th style={{width: 110}}><window.SortTh label="รหัส SKU" k="sku" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort}/></th>
              <th><window.SortTh label="ชื่อรุ่นหมึก" k="name" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort}/></th>
              <th style={{textAlign: 'right', width: 90}}><window.SortTh label="คงเหลือ" k="stock" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} align="right"/></th>
              <th style={{textAlign: 'right', width: 90}}><window.SortTh label="ขั้นต่ำ" k="min" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} align="right"/></th>
              <th style={{textAlign: 'right', width: 120}}><window.SortTh label="ราคา/หน่วย" k="price" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} align="right"/></th>
              <th style={{width: 110}}><window.SortTh label="สถานะ" k="status" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort}/></th>
              <th style={{width: 1}}></th>
            </tr>
          </thead>
          <tbody>
            {sorted.map(p => {
              const isEdit = editingId === p.id;
              return (
                <tr key={p.id}>
                  <td className="mono fw-500 text-sm">
                    {isEdit ? (
                      <input value={editing.sku} onChange={e => setEditing({...editing, sku: e.target.value})}
                             style={{padding: '4px 8px', fontSize: 13, width: '100%', fontFamily: 'inherit'}}/>
                    ) : p.sku}
                  </td>
                  <td>
                    {isEdit ? (
                      <input value={editing.name} onChange={e => setEditing({...editing, name: e.target.value})}
                             style={{padding: '4px 8px', fontSize: 13, width: '100%'}}/>
                    ) : <span className="fw-500">{p.name}</span>}
                  </td>
                  <td className="num">
                    <span className="mono fw-600">{p.stock}</span>
                  </td>
                  <td className="num">
                    {isEdit ? (
                      <input type="number" value={editing.min} onChange={e => setEditing({...editing, min: e.target.value})}
                             style={{padding: '4px 8px', fontSize: 13, width: 70, textAlign: 'right'}}/>
                    ) : <span className="mono">{p.min}</span>}
                  </td>
                  <td className="num">
                    {isEdit ? (
                      <input type="number" value={editing.price} onChange={e => setEditing({...editing, price: e.target.value})}
                             style={{padding: '4px 8px', fontSize: 13, width: 90, textAlign: 'right'}}/>
                    ) : <span className="mono">฿{fmtMoney(p.price)}</span>}
                  </td>
                  <td>
                    {p.active === false ? (
                      <span className="pill" style={{background: 'var(--bg)', color: 'var(--text-3)', borderColor: 'var(--border)'}}>
                        ○ ปิดใช้งาน
                      </span>
                    ) : (
                      <span className="pill" style={{background: 'rgba(45,157,91,0.12)', color: '#2d9d5b', borderColor: 'transparent'}}>
                        ● ใช้งาน
                      </span>
                    )}
                  </td>
                  <td style={{whiteSpace: 'nowrap'}}>
                    {isEdit ? (
                      <div className="flex gap-6">
                        <button className="btn btn-sm btn-primary" onClick={saveEdit}>บันทึก</button>
                        <button className="btn btn-sm" onClick={() => setEditingId(null)}>ยกเลิก</button>
                      </div>
                    ) : (
                      <div className="flex gap-6">
                        <button className="btn btn-sm" onClick={() => startEdit(p)}>แก้ไข</button>
                        <button className="btn btn-sm"
                                style={{color: p.active === false ? 'var(--green)' : 'var(--amber)'}}
                                onClick={() => onUpdate(p.id, { active: p.active === false })}>
                          {p.active === false ? 'เปิดใช้งาน' : 'ปิดใช้งาน'}
                        </button>
                        {currentRole === 'admin' && (
                          <button className="btn btn-sm" style={{color: 'var(--red)'}}
                                  onClick={() => { if (confirm('ลบ ' + p.name + '?\n⚠️ จะมีผลต่อรายการซื้อ/เบิกย้อนหลังที่อ้างถึง\nแนะนำให้ใช้ "ปิดใช้งาน" แทน')) onDelete(p.id); }}>
                            ลบ
                          </button>
                        )}
                      </div>
                    )}
                  </td>
                </tr>
              );
            })}
            {filtered.length === 0 && <tr><td colSpan="7"><div className="empty">ไม่พบรายการ</div></td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ---- Keys & Roles (admin only) ----
function KeysPanel({ keys, onAdd, onUpdate, onDelete }) {
  const [key, setKey] = useStateS('');
  const [name, setName] = useStateS('');
  const [role, setRole] = useStateS('dispenser');
  const [editingId, setEditingId] = useStateS(null);
  const [editing, setEditing] = useStateS({});
  const [showKeyId, setShowKeyId] = useStateS(null);

  function submit() {
    if (!key.trim() || !name.trim()) return;
    if (keys.find(k => k.key === key.trim())) {
      alert('Key นี้มีในระบบแล้ว');
      return;
    }
    onAdd({
      id: 'k' + Date.now(),
      key: key.trim(),
      name: name.trim(),
      role,
      active: true,
      createdAt: new Date().toISOString().slice(0, 10),
    });
    setKey(''); setName(''); setRole('dispenser');
  }

  function startEdit(k) {
    if (isProtectedKey(k) && k.key === PROTECTED_ADMIN_KEY) {
      // allow editing display name but not the key itself or role
    }
    setEditingId(k.id);
    setEditing({ key: k.key, name: k.name, role: k.role });
  }
  function saveEdit() {
    const orig = keys.find(k => k.id === editingId);
    const patch = {
      key: editing.key.trim(),
      name: editing.name.trim(),
      role: editing.role,
    };
    if (isProtectedKey(orig)) {
      // Force protected key + admin role to stay
      patch.key = PROTECTED_ADMIN_KEY;
      patch.role = 'admin';
    }
    onUpdate(editingId, patch);
    setEditingId(null);
  }

  function generateKey() {
    const chars = 'ABCDEFGHJKMNPQRSTUVWXYZ23456789';
    const parts = Array(3).fill(0).map(() => {
      return Array(4).fill(0).map(() => chars[Math.floor(Math.random() * chars.length)]).join('');
    });
    setKey('INK-' + parts.join('-'));
  }

  return (
    <div className="row-gap">
      <div className="card">
        <div className="card-head">
          <h3 className="card-title">เพิ่ม Key ใหม่</h3>
          <span className="card-sub" style={{marginLeft: 'auto'}}>สำหรับให้ผู้ใช้งานเข้าระบบ</span>
        </div>
        <div className="card-pad">
          <div className="field-row" style={{gridTemplateColumns: '1.5fr 1fr 150px auto', alignItems: 'end'}}>
            <div className="field" style={{marginBottom: 0}}>
              <label>Private Key</label>
              <div style={{display: 'flex', gap: 6}}>
                <input value={key} onChange={e => setKey(e.target.value)}
                       placeholder="INK-XXXX-XXXX-XXXX"
                       style={{fontFamily: 'IBM Plex Mono, monospace', flex: 1}}/>
                <button className="btn btn-sm" type="button" onClick={generateKey} title="สุ่ม key">⚡</button>
              </div>
            </div>
            <div className="field" style={{marginBottom: 0}}>
              <label>ชื่อผู้ใช้</label>
              <input value={name} onChange={e => setName(e.target.value)}
                     placeholder="เช่น คุณโม"
                     onKeyDown={e => e.key === 'Enter' && submit()}/>
            </div>
            <div className="field" style={{marginBottom: 0}}>
              <label>Role</label>
              <select value={role} onChange={e => setRole(e.target.value)}>
                <option value="admin">ผู้ดูแลระบบ</option>
                <option value="dispenser">ผู้จ่ายหมึก</option>
                <option value="accountant">บัญชี</option>
              </select>
            </div>
            <button className="btn btn-primary" style={{height: 34}} onClick={submit}
                    disabled={!key.trim() || !name.trim()}>
              {I.plus} เพิ่ม
            </button>
          </div>
          <div className="field-hint" style={{marginTop: 12, padding: 10, background: 'var(--bg)', borderRadius: 7, lineHeight: 1.7}}>
            <div className="fw-600" style={{marginBottom: 4}}>สิทธิ์ของแต่ละ Role:</div>
            <div>• <span className="fw-500" style={{color: '#a63232'}}>ผู้ดูแลระบบ</span> — ทำได้ทุกอย่าง รวมถึงจัดการ keys และผู้ใช้</div>
            <div>• <span className="fw-500" style={{color: '#1a78c2'}}>ผู้จ่ายหมึก</span> — ทำได้ทุกอย่าง ยกเว้นจัดการ keys</div>
            <div>• <span className="fw-500" style={{color: '#2d9d5b'}}>บัญชี</span> — ดูข้อมูล + Export ได้อย่างเดียว แก้ไขไม่ได้</div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3 className="card-title">รายชื่อ Keys ในระบบ</h3>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width: 220}}>Key</th>
              <th>ชื่อผู้ใช้</th>
              <th style={{width: 150}}>Role</th>
              <th style={{width: 110}}>สถานะ</th>
              <th style={{width: 100}}>สร้างเมื่อ</th>
              <th style={{width: 1}}></th>
            </tr>
          </thead>
          <tbody>
            {keys.map(k => {
              const isEdit = editingId === k.id;
              const isShown = showKeyId === k.id;
              const protectedKey = isProtectedKey(k);
              const roleColor = k.role === 'admin' ? '#a63232' : k.role === 'dispenser' ? '#1a78c2' : '#2d9d5b';
              return (
                <tr key={k.id} style={protectedKey ? {background: 'rgba(166,50,50,0.04)'} : {}}>
                  <td className="mono text-sm">
                    {isEdit && !protectedKey ? (
                      <input value={editing.key} onChange={e => setEditing({...editing, key: e.target.value})}
                             style={{padding: '4px 8px', fontSize: 13, width: '100%', fontFamily: 'inherit'}}/>
                    ) : (
                      <div className="flex gap-6">
                        {protectedKey && <span title="System-protected key" style={{color: '#a63232'}}>🔒</span>}
                        <span style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>
                          {isShown ? k.key : '•'.repeat(Math.min(k.key.length, 16))}
                        </span>
                        <button className="btn btn-sm btn-ghost" onClick={() => setShowKeyId(isShown ? null : k.id)}
                                title={isShown ? 'ซ่อน' : 'แสดง'}>
                          {isShown ? '🙈' : '👁'}
                        </button>
                        <button className="btn btn-sm btn-ghost" onClick={() => { navigator.clipboard.writeText(k.key); }}
                                title="Copy">⎘</button>
                      </div>
                    )}
                  </td>
                  <td>
                    {isEdit ? (
                      <input value={editing.name} onChange={e => setEditing({...editing, name: e.target.value})}
                             style={{padding: '4px 8px', fontSize: 13, width: '100%'}}/>
                    ) : <span className="fw-500">{k.name}</span>}
                  </td>
                  <td>
                    {isEdit && !protectedKey ? (
                      <select value={editing.role} onChange={e => setEditing({...editing, role: e.target.value})}
                              style={{padding: '4px 8px', fontSize: 13, width: '100%'}}>
                        <option value="admin">ผู้ดูแลระบบ</option>
                        <option value="dispenser">ผู้จ่ายหมึก</option>
                        <option value="accountant">บัญชี</option>
                      </select>
                    ) : (
                      <span className="pill" style={{background: roleColor + '18', color: roleColor, borderColor: 'transparent'}}>
                        {ROLE_LABELS[k.role] || k.role}
                      </span>
                    )}
                  </td>
                  <td>
                    {protectedKey ? (
                      <span className="pill" style={{background: '#2d9d5b18', color: '#2d9d5b', borderColor: 'transparent'}}>
                        ● ใช้งาน <span style={{marginLeft: 4}} title="ปิดไม่ได้">🔒</span>
                      </span>
                    ) : (
                      <button className="btn btn-sm" onClick={() => onUpdate(k.id, { active: !k.active })}>
                        {k.active ? <span style={{color: 'var(--green)'}}>● ใช้งาน</span> : <span className="muted">○ ปิด</span>}
                      </button>
                    )}
                  </td>
                  <td className="text-xs muted mono">{k.createdAt}</td>
                  <td style={{whiteSpace: 'nowrap'}}>
                    {isEdit ? (
                      <div className="flex gap-6">
                        <button className="btn btn-sm btn-primary" onClick={saveEdit}>บันทึก</button>
                        <button className="btn btn-sm" onClick={() => setEditingId(null)}>ยกเลิก</button>
                      </div>
                    ) : (
                      <div className="flex gap-6">
                        <button className="btn btn-sm" onClick={() => startEdit(k)}>แก้ไข</button>
                        {!protectedKey && (
                          <button className="btn btn-sm" style={{color: 'var(--red)'}}
                                  onClick={() => { if (confirm('ลบ ' + k.name + '?')) onDelete(k.id); }}>
                            ลบ
                          </button>
                        )}
                      </div>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.KeysPanel = KeysPanel;
window.SettingsView = SettingsView;