// Settings & RBAC — Users, Roles & permission matrix, Audit Log.
(function () {
  window.SCREENS = window.SCREENS || {};
  const { useState } = React;
  const IC = window.IC, D = window.DATA;

  function RolesTab({ role, setRole }) {
    return (
      <div>
        <div className="role-grid role-grid-2">
          {Object.values(D.roles).map((r) => (
            <div className={"role-card" + (role === r.id ? " active-role" : "")} key={r.id}>
              <div className="rc-top">
                <span className={"rc-badge role-av " + r.color}>{r.en.slice(0, 2).toUpperCase()}</span>
                <div style={{ flex: 1 }}><div className="rc-name">{r.name}{r.locked && <span className="ro-lock">{IC.lock}</span>}</div><div className="rc-en">{r.en}</div></div>
                {role === r.id && <span className="pill ok"><i />ใช้งานอยู่</span>}
              </div>
              <div className="rc-desc">{r.desc}</div>
              <div className="rc-scope">{IC.eye}<b>{r.scope}</b></div>
              {role === r.id
                ? <div className="rc-cur">● โหมดปัจจุบัน</div>
                : <button className="btn sm rc-try" onClick={() => { setRole(r.id); if (!(r.id === "admin" && !window.__adminAuthed)) window.toast("สลับเป็น " + r.name); }}>{r.locked ? <>{IC.lock} เข้าสู่ระบบ Admin</> : "ใช้โหมดนี้"}</button>}
            </div>
          ))}
        </div>

        <div className="block">
          <div className="sh"><span className="sec-title">ตารางสิทธิ์การเข้าถึง (Permission Matrix)</span></div>
          <div className="perm-wrap">
            <table className="perm-table">
              <thead>
                <tr>
                  <th>ความสามารถ</th>
                  {["executive", "admin"].map((rk) => { const r = D.roles[rk]; return <th key={rk}>{r.name}<span className="pth-en">{r.en}</span></th>; })}
                </tr>
              </thead>
              <tbody>
                {D.permMatrix.map((row, i) => (
                  <tr key={i}>
                    <td>{row.feature}</td>
                    {["executive", "admin"].map((rk) => {
                      const lvl = D.permLevels[row[rk]];
                      return <td key={rk}><span className="perm-dot" style={{ background: "var(--" + lvl.tone + "-bg)", color: "var(--" + lvl.tone + ")" }}><i style={{ background: "var(--" + lvl.tone + ")" }} />{lvl.label}</span></td>;
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }

  const uSel = { border:0, background:"none", outline:"none", font:"inherit", fontSize:13.5, flex:1, color:"var(--ink)" };
  function UserModal({ edit, onClose, onDone }) {
    const isEdit = !!edit;
    const [f, setF, safeClose] = window.useDirty({ name: isEdit ? edit.name : "", role: isEdit ? edit.role : "executive", title: isEdit ? edit.title : "", email: isEdit ? edit.email : "" }, onClose);
    const [saving, setSaving] = useState(false);
    const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));
    const submit = async (e) => {
      e.preventDefault(); if (!f.name.trim()) return; setSaving(true);
      if (isEdit) await window.DB.updateUser(edit.id, f); else await window.DB.createUser(f);
      setSaving(false); window.toast(isEdit ? "บันทึกผู้ใช้แล้ว" : "เพิ่มผู้ใช้แล้ว"); onDone(); onClose();
    };
    const remove = async () => { if (!confirm("ลบผู้ใช้ \"" + edit.name + "\" ?")) return; await window.DB.deleteUser(edit.id); window.toast("ลบผู้ใช้แล้ว"); onDone(); onClose(); };
    return (
      <div className="login-overlay" onClick={window.NOOP}>
        <form className="login-card" style={{ maxWidth: 440, width: "92vw" }} onClick={(e) => e.stopPropagation()} onSubmit={submit}>
          <button type="button" className="login-x icon-btn" onClick={safeClose}>{IC.x}</button>
          <div className="login-badge">{IC.user}</div>
          <h2>{isEdit ? "แก้ไขผู้ใช้งาน" : "เพิ่มผู้ใช้งาน"}</h2>
          <div style={{ display: "grid", gap: 11, marginTop: 4 }}>
            <label className="login-field"><span>ชื่อ *</span><div className="login-input"><input value={f.name} onChange={set("name")} placeholder="ชื่อ-นามสกุล" required /></div></label>
            <label className="login-field"><span>ตำแหน่ง</span><div className="login-input"><input value={f.title} onChange={set("title")} placeholder="ตำแหน่งงาน" /></div></label>
            <label className="login-field"><span>อีเมล</span><div className="login-input"><input type="email" value={f.email} onChange={set("email")} placeholder="email@company.co.th" /></div></label>
            <label className="login-field"><span>สิทธิ์</span><div className="login-input"><select value={f.role} onChange={set("role")} style={uSel}><option value="executive">ผู้บริหาร (อ่านอย่างเดียว)</option><option value="admin">ผู้ดูแลระบบ</option></select></div></label>
          </div>
          <div className="login-acts" style={{ marginTop: 16 }}>
            {isEdit && <button type="button" className="btn danger" onClick={remove}>{IC.x} ลบ</button>}
            <button type="button" className="btn" onClick={safeClose}>ยกเลิก</button>
            <button type="submit" className="btn pri" disabled={saving}>{saving ? "กำลังบันทึก…" : (isEdit ? "บันทึก" : "เพิ่มผู้ใช้")}</button>
          </div>
        </form>
      </div>
    );
  }

  function UsersTab() {
    const [q, setQ] = useState("");
    const [, bump] = useState(0);
    const refresh = () => bump((n) => n + 1);
    const [modal, setModal] = useState(null);
    const canEdit = window.can("manageUsers");
    const list = D.users.filter((u) => !q || u.name.toLowerCase().includes(q.toLowerCase()) || (u.title || "").toLowerCase().includes(q.toLowerCase()));
    return (
      <div>
        <div className="toolbar" style={{ marginTop: 0 }}>
          {canEdit
            ? <button className="btn pri" onClick={() => setModal({})}>{IC.plus} เพิ่มผู้ใช้</button>
            : <span className="pill neutral" style={{ padding: "8px 13px" }}>{IC.eye}<span style={{ marginLeft: 2 }}>อ่านอย่างเดียว — เข้าสู่ระบบ Admin เพื่อจัดการผู้ใช้</span></span>}
          <div className="chip" style={{ flex: "1 1 200px", maxWidth: 320, padding: "0 13px" }}>
            {IC.search}<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="ค้นหาผู้ใช้งาน…" style={{ border: 0, background: "none", outline: "none", font: "inherit", fontSize: 14, flex: 1, color: "var(--ink)", height: 40 }} />
          </div>
          <div className="spacer" />
          <span className="page-sub" style={{ marginTop: 0 }}>{list.length} คน</span>
        </div>
        <div className="rail-card">
          {list.map((u) => {
            const r = D.roles[u.role] || D.roles.executive;
            return (
              <div className="user-row" key={u.id}>
                <span className={"avatar md role-av " + r.color}>{u.init}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="un">{u.name}</div>
                  <div className="ut">{u.title}{u.email ? " · " + u.email : ""}</div>
                </div>
                <span className="u-role"><span className="pill" style={{ background: "var(--" + r.color + "-bg)", color: "var(--" + r.color + ")" }}><i style={{ background: "var(--" + r.color + ")" }} />{r.name}</span></span>
                <div className="u-meta">{u.status === "active" ? "ใช้งาน" : u.status}</div>
                {canEdit && <button className="icon-btn" style={{ width: 34, height: 34 }} title="แก้ไข" onClick={() => setModal({ edit: u })}>{IC.dots}</button>}
              </div>
            );
          })}
          {list.length === 0 && <div className="empty" style={{ padding: 16, fontSize: 13 }}>ไม่พบผู้ใช้งาน</div>}
        </div>
        {modal && <UserModal edit={modal.edit} onClose={() => setModal(null)} onDone={refresh} />}
      </div>
    );
  }

  function AuditTab() {
    return (
      <div className="rail-card" style={{ marginTop: 4 }}>
        {D.auditLog.map((a) => {
          const r = D.roles[a.role];
          return (
            <div className="audit-row" key={a.id}>
              <span className={"audit-ic " + a.tone}>{a.tone === "ok" ? IC.check : a.tone === "danger" ? IC.x : a.action.includes("เอกสาร") || a.action.includes("Quotation") ? IC.doc : a.action.includes("ผู้ใช้") ? IC.user : IC.dec}</span>
              <div className="a-main">
                <div className="a-act"><b>{a.actor}</b> {a.action} <span style={{ color: "var(--muted)" }}>· {r ? r.name : "ระบบ"}</span></div>
                <div className="a-tgt">{a.target}</div>
              </div>
              <span className="a-time">{a.time}</span>
            </div>
          );
        })}
      </div>
    );
  }

  window.SCREENS.settings = function Settings() {
    window.useLiveData();
    const [role, setRole] = window.useRole();
    const [tab, setTab] = useState("roles");
    const TABS = [
      { id: "roles", label: "บทบาท & สิทธิ์", icon: "users" },
      { id: "users", label: "ผู้ใช้งาน", icon: "user" },
      { id: "audit", label: "Audit Log", icon: "clock" },
    ];
    return (
      <div className="page wide">
        <header>
          <div className="eyebrow">System</div>
          <h1 className="page-title">ตั้งค่า & สิทธิ์</h1>
          <p className="page-sub">จัดการบทบาท สิทธิ์การเข้าถึง (RBAC) ผู้ใช้งาน และบันทึกการใช้งานระบบ</p>
        </header>
        <div className="set-tabs">
          {TABS.map((t) => <button key={t.id} className={"set-tab" + (tab === t.id ? " on" : "")} onClick={() => setTab(t.id)}>{IC[t.icon]}{t.label}</button>)}
        </div>
        <div className="tab-body">
          {tab === "roles" && <RolesTab role={role} setRole={setRole} />}
          {tab === "users" && <UsersTab />}
          {tab === "audit" && <AuditTab />}
        </div>
      </div>
    );
  };
})();