/* Bonyan ERP — Users & permissions (المدير يضيف مستخدمين بصلاحيات متعددة) */
function UsersScreen({ user, onSwitchUser }) {
  const I = window.BnyIcon;
  const D = window.BnyData;
  const { Card, Button, Badge, Input, Select, Avatar } = window.BonyanDesignSystem_ad3ca0;
  const isMobile = window.useBnyMobile();
  const [users, setUsers] = React.useState(() => D.users.map((u) => ({ ...u, perms: [...u.perms] })));

  React.useEffect(() => { window.BnyData.users = users.map((u) => ({ ...u, perms: [...u.perms] })); }, [users]);

  // أمان: الشاشة لمن يملك صلاحية إدارة المستخدمين فقط
  if (!window.BnyCan(user, "users_manage")) {
    return (
      <div style={{ padding: "var(--space-8)" }}>
        <div className="bny-card" style={{ padding: 48, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
          <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 64, height: 64, borderRadius: "var(--radius-lg)", background: "var(--danger-soft)", color: "var(--danger)" }}><I.alert size={32} /></span>
          <h2 style={{ fontSize: 20, margin: 0 }}>لا تملك صلاحية الوصول</h2>
          <p style={{ color: "var(--text-muted)", margin: 0 }}>إدارة المستخدمين والصلاحيات متاحة للمدير فقط.</p>
        </div>
      </div>
    );
  }

  const roleName = (id) => (D.roles.find((r) => r.id === id) || {}).name || id;
  const togglePerm = (id, key) => setUsers((us) => us.map((u) => u.id === id ? { ...u, role: "custom", perms: u.perms.includes(key) ? u.perms.filter((k) => k !== key) : [...u.perms, key] } : u));
  const setRole = (id, role) => setUsers((us) => us.map((u) => u.id === id ? { ...u, role, perms: [...(D.roleDefaults[role] || [])] } : u));
  const rename = (id, name) => setUsers((us) => us.map((u) => u.id === id ? { ...u, name } : u));
  const setField = (id, key, val) => setUsers((us) => us.map((u) => u.id === id ? { ...u, [key]: val } : u));
  const addUser = () => setUsers((us) => [...us, { id: Date.now(), name: "مستخدم جديد", role: "warehouse", username: "", password: "", perms: [...D.roleDefaults.warehouse] }]);
  const lbl = { fontSize: 12, fontWeight: 500, color: "var(--text-strong)", marginBottom: 5, display: "block" };
  const live = !!window.BnyConfigured;
  const [busyId, setBusyId] = React.useState(null);
  const [msg, setMsg] = React.useState(null); // {id, kind, text}
  const flash = (id, kind, text) => { setMsg({ id, kind, text }); setTimeout(() => setMsg(null), 4500); };

  // حفظ المستخدم في النظام (ينشئ/يحدّث حساب دخول فعليًا في الوضع المباشر)
  const saveUser = async (u) => {
    if (!u.username || String(u.username).trim().length < 3) return flash(u.id, "err", "أدخل اسم مستخدم (3 أحرف لاتينية فأكثر)");
    if (!live) return flash(u.id, "ok", "تم الحفظ محليًا (وضع تجريبي)");
    setBusyId(u.id);
    try {
      const res = await window.BnyDB.saveAppUser(u);
      flash(u.id, "ok", res === "created" ? "أُنشئ حساب الدخول — سلّم البيانات للموظف" : "تم تحديث الحساب" + (u.password ? " وكلمة المرور" : ""));
      if (window.BnyOps) window.BnyOps.log("user_save", (res === "created" ? "إنشاء مستخدم: " : "تحديث مستخدم: ") + (u.name || u.username) + " · دور: " + u.role);
      setField(u.id, "password", ""); // لا نُبقي كلمة المرور معروضة
    } catch (e) {
      flash(u.id, "err", String((e && e.message) || e));
    } finally { setBusyId(null); }
  };
  const removeUser = async (u) => {
    if (live && u.username) {
      if (!window.confirm("حذف المستخدم «" + (u.name || u.username) + "» نهائيًا؟ لن يستطيع الدخول بعدها.")) return;
      setBusyId(u.id);
      try {
        await window.BnyDB.deleteAppUser(u.username);
        if (window.BnyOps) window.BnyOps.log("user_delete", "حذف مستخدم: " + (u.name || u.username));
      } catch (e) { setBusyId(null); return flash(u.id, "err", String((e && e.message) || e)); }
      setBusyId(null);
    }
    setUsers((us) => us.filter((x) => x.id !== u.id));
  };

  return (
    <div style={{ padding: isMobile ? "var(--space-4)" : "var(--space-8)", display: "flex", flexDirection: "column", gap: isMobile ? "var(--space-4)" : "var(--space-6)" }}>
      <Card title="المستخدمون والصلاحيات" actions={<Button size="sm" icon={<I.plus size={16} />} onClick={addUser}>إضافة مستخدم</Button>}>
        <p style={{ color: "var(--text-muted)", fontSize: 13, margin: 0 }}>
          أنشئ مستخدمين، وعيّن لكلٍّ اسم مستخدم وكلمة مرور يدخل بها بشكل مستقل، ثم امنحه دورًا جاهزًا (مدير / مسؤول مخازن / محاسب) كنقطة بداية وفعّل أو عطّل أي صلاحية على حدة. سلّم بيانات الدخول للموظف ليدخل بحسابه الخاص.
        </p>
      </Card>

      {users.map((u) => {
        const active = u.id === user.id;
        return (
          <Card key={u.id}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
              <Avatar name={u.name} size="lg" />
              <div style={{ flex: 1, minWidth: 200 }}>
                <div style={{ maxWidth: 300, marginBottom: 6 }}>
                  <Input value={u.name} onChange={(e) => rename(u.id, e.target.value)} placeholder="اسم المستخدم" />
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                  <span style={{ fontSize: 12, color: "var(--text-muted)" }}>الدور:</span>
                  <div style={{ width: 170 }}>
                    <Select value={u.role} onChange={(e) => setRole(u.id, e.target.value)}>
                      {D.roles.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
                    </Select>
                  </div>
                  {active && <Badge tone="success"><span className="bny-badge__dot" />الحساب النشط</Badge>}
                </div>
              </div>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
                {active && <Badge tone="brand">أنت</Badge>}
                <Button variant="accent" size="sm" icon={<I.check size={15} />} onClick={() => saveUser(u)} disabled={busyId === u.id}>
                  {busyId === u.id ? "جارٍ الحفظ…" : "حفظ في النظام"}
                </Button>
                {!active && <button className="bny-iconbtn bny-iconbtn--bordered" aria-label="حذف المستخدم" onClick={() => removeUser(u)} style={{ color: "var(--danger)" }}><I.trash size={18} /></button>}
              </div>
            </div>

            {/* بيانات الدخول — يسلّمها المدير للموظف ليدخل بحسابه */}
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 14 }}>
              <div style={{ flex: 1, minWidth: 160 }}>
                <label style={lbl}>اسم المستخدم</label>
                <Input value={u.username || ""} onChange={(e) => setField(u.id, "username", e.target.value)} placeholder="اسم المستخدم" />
              </div>
              <div style={{ flex: 1, minWidth: 160 }}>
                <label style={lbl}>كلمة المرور {live ? "(اتركها فارغة للإبقاء على الحالية)" : ""}</label>
                <Input value={u.password || ""} onChange={(e) => setField(u.id, "password", e.target.value)} placeholder={live ? "كلمة مرور جديدة (6+)" : "كلمة المرور"} />
              </div>
            </div>
            {msg && msg.id === u.id && (
              <div style={{ marginTop: 10, padding: "8px 12px", borderRadius: "var(--radius-md)", fontSize: 12.5, fontWeight: 600, background: msg.kind === "ok" ? "var(--success-soft, #e6f7ef)" : "var(--danger-soft)", color: msg.kind === "ok" ? "var(--success, #1d9e63)" : "var(--danger-text)" }}>{msg.text}</div>
            )}

            <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--border-subtle)" }}>
              <div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 10 }}>الصلاحيات ({u.perms.length} من {D.permissions.length}) — اضغط للتفعيل/التعطيل</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {D.permissions.map((p) => {
                  const on = u.perms.includes(p.key);
                  return (
                    <button key={p.key} type="button" onClick={() => togglePerm(u.id, p.key)} style={{
                      display: "inline-flex", alignItems: "center", gap: 6, padding: "7px 11px", borderRadius: "var(--radius-pill)",
                      border: "1px solid", borderColor: on ? "var(--brand)" : "var(--border-subtle)",
                      background: on ? "var(--brand-soft)" : "var(--surface-card)", color: on ? "var(--brand-strong)" : "var(--text-muted)",
                      fontSize: 12.5, fontWeight: on ? 600 : 500, cursor: "pointer", fontFamily: "var(--font-body)", transition: "var(--transition-control)",
                    }}>
                      {on ? <I.check size={13} /> : <I.x size={13} />}{p.label}
                    </button>
                  );
                })}
              </div>
            </div>
          </Card>
        );
      })}
    </div>
  );
}
window.UsersScreen = UsersScreen;