/* Bonyan ERP — login (دخول مستقل: اسم مستخدم + كلمة مرور يمنحها المدير) */
function LoginScreen({ onLogin }) {
  const D = window.BnyData;
  const I = window.BnyIcon;
  const { Button } = window.BonyanDesignSystem_ad3ca0;
  const [u, setU] = React.useState("");
  const [p, setP] = React.useState("");
  const [show, setShow] = React.useState(false);
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const live = !!window.BnyConfigured;

  const submit = async (e) => {
    if (e) e.preventDefault();
    if (busy) return;
    setErr("");
    // الوضع المباشر: مصادقة Supabase (اسم المستخدم يُحوَّل لإيميل تلقائيًا)
    if (live && window.BnyAuth) {
      setBusy(true);
      try {
        const user = await window.BnyAuth.login(u, p);
        onLogin(user);
      } catch (ex) {
        // ميّز بين «بيانات خاطئة» و«فشل اتصال/إعداد» — الرسالة العامة تخفي السبب
        const status = ex && ex.status;
        const code = ex && (ex.code || ex.name);
        const msg = String((ex && ex.message) || ex || "");
        console.error("Bonyan login error:", ex);
        if (code === "tenant_expired") {
          setErr(msg); // اشتراك منتهٍ/موقوف — رسالة واضحة من الخادم
        } else if (status === 400 || code === "invalid_credentials") {
          setErr("اسم المستخدم أو كلمة المرور غير صحيحة");
        } else if (/fetch|network|load failed|cors/i.test(msg) || status === 0) {
          setErr("تعذّر الاتصال بالخادم. افتح الصفحة عبر Live Server (عنوان http://) لا كملف، وتأكّد من الإنترنت.");
        } else {
          setErr("خطأ غير متوقّع: " + msg + " — راجع Console (F12).");
        }
      } finally { setBusy(false); }
      return;
    }
    // الوضع التجريبي: تحقّق محلي من قائمة المستخدمين
    const found = D.users.find((x) => (x.username || "").toLowerCase() === u.trim().toLowerCase() && x.password === p);
    if (found) onLogin({ ...found, perms: [...found.perms] });
    else setErr("اسم المستخدم أو كلمة المرور غير صحيحة");
  };

  const label = { fontSize: 13, fontWeight: 500, color: "var(--text-strong)", marginBottom: 6, display: "block" };

  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--bg-app)", padding: "var(--space-6)" }}>
      <div className="bny-card bny-card--pad" style={{ width: "100%", maxWidth: 380 }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 6, marginBottom: 22 }}>
          <img src="../../assets/logo/bonyan-mark.svg" alt="بُنيان" style={{ width: 52, height: 52 }} />
          <div style={{ fontWeight: 700, fontSize: 26, color: "var(--text-strong)" }}>بُن<span style={{ color: "var(--amber-500)" }}>يان</span></div>
          <div style={{ fontSize: 13, color: "var(--text-muted)" }}>نظام محاسبي متكامل</div>
        </div>

        <form onSubmit={submit}>
          <div style={{ marginBottom: 14 }}>
            <label style={label}>اسم المستخدم</label>
            <input className="bny-input" value={u} onChange={(e) => { setU(e.target.value); setErr(""); }} placeholder="اسم المستخدم" autoFocus />
          </div>
          <div style={{ marginBottom: 14 }}>
            <label style={label}>كلمة المرور</label>
            <div style={{ position: "relative", display: "flex", alignItems: "center" }}>
              <input className="bny-input" type={show ? "text" : "password"} value={p} onChange={(e) => { setP(e.target.value); setErr(""); }} placeholder="كلمة المرور" style={{ paddingInlineEnd: 64 }} />
              <button type="button" onClick={() => setShow((s) => !s)} style={{ position: "absolute", insetInlineEnd: 10, border: 0, background: "none", cursor: "pointer", color: "var(--text-muted)", fontSize: 12, fontFamily: "var(--font-body)" }}>{show ? "إخفاء" : "إظهار"}</button>
            </div>
          </div>
          {err && (
            <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 12px", background: "var(--danger-soft)", color: "var(--danger-text)", borderRadius: "var(--radius-md)", fontSize: 13, marginBottom: 14 }}>
              <I.alert size={16} /> {err}
            </div>
          )}
          <Button variant="accent" size="lg" block type="submit" disabled={busy} icon={<I.check size={18} />}>{busy ? "جارٍ الدخول…" : "تسجيل الدخول"}</Button>
        </form>

        {!live && <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px dashed var(--border-strong)" }}>
          <div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 8 }}>حسابات للتجربة (اضغط للتعبئة):</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {D.users.map((x) => (
              <button key={x.id} type="button" onClick={() => { setU(x.username); setP(x.password); setErr(""); }} style={{
                display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8, padding: "8px 11px",
                background: "var(--surface-sunken)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)",
                cursor: "pointer", textAlign: "start", fontFamily: "var(--font-body)",
              }}>
                <span style={{ fontSize: 12.5, color: "var(--text-body)" }}>{x.name}</span>
                <span style={{ fontSize: 11.5, color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>{x.username} / {x.password}</span>
              </button>
            ))}
          </div>
        </div>}
      </div>
    </div>
  );
}
window.LoginScreen = LoginScreen;