// شاشة تسجيل الدخول + لوحة إدارة المستخدمين (للأدمن)

function LoginScreen({ onLoggedIn }) {
  const [username, setUsername] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");

  async function submit(e) {
    e.preventDefault();
    setError("");
    if (!username.trim() || !password) {
      setError("يرجى إدخال اسم المستخدم وكلمة المرور");
      return;
    }
    setLoading(true);
    try {
      const user = await window.api.login(username.trim(), password);
      onLoggedIn(user);
    } catch (err) {
      setError(err.message || "تعذّر تسجيل الدخول");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="login-wrap">
      <form className="login-card" onSubmit={submit}>
        <div className="login-brand">
          <div className="brand-mark lg">ش</div>
          <div className="login-title">قاعدة بيانات شيفات العراق</div>
          <div className="login-sub">نظام فهرسة وإدارة السير الذاتية</div>
        </div>

        {error && <div className="login-error"><Icon name="x" size={14} /> {error}</div>}

        <div className="field full">
          <label className="label">اسم المستخدم</label>
          <input
            className="input"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            placeholder="admin"
            autoFocus
            dir="ltr"
            style={{ textAlign: "right" }}
          />
        </div>
        <div className="field full">
          <label className="label">كلمة المرور</label>
          <input
            className="input"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="••••••••"
            dir="ltr"
            style={{ textAlign: "right" }}
          />
        </div>

        <button type="submit" className="btn btn-primary login-btn" disabled={loading}>
          {loading ? "جارٍ الدخول..." : (<><Icon name="check" size={15} /> تسجيل الدخول</>)}
        </button>

        <div className="login-hint">
          بيانات تجريبية: <b>admin / admin123</b> &nbsp;أو&nbsp; <b>user / user123</b>
        </div>
      </form>
    </div>
  );
}

function UsersPanel({ onClose }) {
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState("");
  const blank = { username: "", name: "", password: "", role: "user" };
  const [nu, setNu] = React.useState(blank);
  const me = window.api.getUser();

  async function load() {
    setLoading(true);
    try {
      setUsers(await window.api.listUsers());
      setError("");
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }
  React.useEffect(() => { load(); }, []);

  async function addUser(e) {
    e.preventDefault();
    setError("");
    try {
      await window.api.createUser(nu);
      setNu(blank);
      await load();
    } catch (err) {
      setError(err.message);
    }
  }
  async function delUser(id) {
    if (!confirm("حذف هذا المستخدم؟")) return;
    try {
      await window.api.deleteUser(id);
      await load();
    } catch (err) {
      setError(err.message);
    }
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div className="modal-title">إدارة المستخدمين</div>
            <div className="modal-title-sub">صلاحيات المدير</div>
          </div>
          <button className="modal-close" onClick={onClose} aria-label="إغلاق">
            <Icon name="x" size={18} />
          </button>
        </div>

        <div className="modal-body">
          {error && <div className="login-error" style={{ marginBottom: 12 }}><Icon name="x" size={14} /> {error}</div>}

          <div className="form-section">
            <div className="form-section-title">إضافة مستخدم جديد</div>
            <form className="form-grid" onSubmit={addUser}>
              <div className="field">
                <label className="label">اسم المستخدم</label>
                <input className="input" value={nu.username} dir="ltr" style={{ textAlign: "right" }}
                  onChange={(e) => setNu({ ...nu, username: e.target.value })} placeholder="username" />
              </div>
              <div className="field">
                <label className="label">الاسم</label>
                <input className="input" value={nu.name}
                  onChange={(e) => setNu({ ...nu, name: e.target.value })} placeholder="الاسم الكامل" />
              </div>
              <div className="field">
                <label className="label">كلمة المرور</label>
                <input className="input" type="password" value={nu.password} dir="ltr" style={{ textAlign: "right" }}
                  onChange={(e) => setNu({ ...nu, password: e.target.value })} placeholder="••••••" />
              </div>
              <div className="field">
                <label className="label">الدور</label>
                <select className="select" value={nu.role} onChange={(e) => setNu({ ...nu, role: e.target.value })}>
                  <option value="user">مستخدم عادي</option>
                  <option value="admin">مدير (Admin)</option>
                </select>
              </div>
              <div className="field full">
                <button type="submit" className="btn btn-primary"><Icon name="plus" size={14} /> إضافة المستخدم</button>
              </div>
            </form>
          </div>

          <div className="detail-section">
            <h4>المستخدمون الحاليون ({users.length})</h4>
            {loading ? (
              <div className="page-sub" style={{ padding: 12 }}>جارٍ التحميل...</div>
            ) : (
              <div className="users-list">
                {users.map((u) => (
                  <div className="user-row" key={u.id}>
                    <div className="user-meta">
                      <div className="user-name">{u.name} {u.id === me?.id && <span className="me-badge">أنت</span>}</div>
                      <div className="user-uname" dir="ltr">@{u.username}</div>
                    </div>
                    <span className={"tag " + (u.role === "admin" ? "rate-ممتاز" : "spec")}>
                      {u.role === "admin" ? "مدير" : "مستخدم"}
                    </span>
                    <button className="row-del" title="حذف" disabled={u.id === me?.id} onClick={() => delUser(u.id)}>
                      <Icon name="trash" size={14} />
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        <div className="modal-foot">
          <button className="btn btn-primary" onClick={onClose}>تم</button>
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;
window.UsersPanel = UsersPanel;