/* ============================================
   LOGIN — Centered card, two inputs, primary + SSO
   ============================================ */
function LoginScreen({ onLogin }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [showPw, setShowPw] = useState(false);
  const [error, setError] = useState(null);

  const submit = async (e) => {
    e?.preventDefault();
    setError(null);
    if (!/.+@.+\..+/.test(email.trim())) {
      setError("Enter a valid email.");
      return;
    }
    if (!password) {
      setError("Password is required.");
      return;
    }
    setLoading(true);
    try {
      const { token, user } = await window.API.login(email.trim(), password);
      window.API.setToken(token);
      onLogin(user);
    } catch (err) {
      setError(err.message || "Login failed.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      minHeight: "100vh",
      background: "var(--bg)",
      display: "grid",
      gridTemplateColumns: "1fr 1.1fr"
    }}>
      {/* LEFT: Decorative industrial panel */}
      <div style={{
        background: "var(--navy-800)",
        color: "white",
        padding: "48px 56px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        position: "relative",
        overflow: "hidden"
      }}>
        {/* technical grid bg */}
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: `
            linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)`,
          backgroundSize: "32px 32px",
          maskImage: "radial-gradient(ellipse at 50% 60%, black 30%, transparent 80%)"
        }} />
        <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 8,
            background: "linear-gradient(135deg, var(--orange-500), var(--orange-700))",
            display: "grid", placeItems: "center",
            color: "white", fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 16
          }}>ORS</div>
          <div>
            <div className="text-xs" style={{ color: "rgba(255,255,255,0.6)", letterSpacing: "0.08em", textTransform: "uppercase" }}>BHUMI JATI POWER</div>
            <div style={{ fontWeight: 600, fontSize: 16, letterSpacing: "-0.01em" }}>Operation Reference System</div>
          </div>
        </div>

        <div style={{ position: "relative" }}>
          <h1 style={{ fontSize: 38, lineHeight: 1.15, fontWeight: 600, margin: "0 0 16px", letterSpacing: "-0.02em" }}>
            Ground-truth answers,<br />direct from your shop floor manuals.
          </h1>
          <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 14, maxWidth: 460, lineHeight: 1.6 }}>
            Retrieval-augmented assistance over 4,128 indexed manuals across CNC, hydraulic, electrical, and safety domains. Every answer is citation-grounded and auditable.
          </p>

          <div style={{ display: "flex", gap: 16, marginTop: 28, flexWrap: "wrap" }}>
            {[
            { k: "4,128", v: "Indexed documents" },
            { k: "62 ms", v: "Median retrieval" },
            { k: "99.94%", v: "Service availability" }].
            map((s) =>
            <div key={s.k} style={{ padding: "10px 14px", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 6, background: "rgba(255,255,255,0.03)" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 700, color: "var(--orange-400)" }}>{s.k}</div>
                <div className="text-xs" style={{ color: "rgba(255,255,255,0.6)" }}>{s.v}</div>
              </div>
            )}
          </div>
        </div>

        <div style={{ position: "relative", display: "flex", gap: 18, color: "rgba(255,255,255,0.5)", fontSize: 12 }}>
          <span>© 2026 Bhumi Jati Power</span>
          <span>·</span>
          <span className="mono">build 2026.05.13</span>
        </div>
      </div>

      {/* RIGHT: Login card */}
      <div style={{ display: "grid", placeItems: "center", padding: 48 }}>
        <form className="card" onSubmit={submit} style={{ width: 420, padding: 0 }}>
          <div style={{ padding: "32px 36px 8px" }}>
            <h2 style={{ fontSize: 24, margin: "0 0 6px", fontWeight: 600, letterSpacing: "-0.01em" }}>Welcome back</h2>
            <p className="muted text-sm" style={{ margin: 0 }}>Use your BJP corporate credentials to access the operation reference system.</p>
          </div>

          <div style={{ padding: "20px 36px 28px" }}>
            {error && (
              <div style={{
                marginBottom: 16, padding: "10px 14px",
                background: "rgba(220, 38, 38, 0.08)",
                border: "1px solid rgba(220, 38, 38, 0.35)",
                borderRadius: 6, color: "#991b1b",
                fontSize: 13, lineHeight: 1.5
              }}>
                {error}
              </div>
            )}
            <div className="form-group">
              <label className="label">Corporate Email</label>
              <div style={{ position: "relative" }}>
                <input
                  className="input"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="firstname.lastname@bjp-industries.id"
                  style={{ paddingLeft: 36 }} />
                
                <span style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "var(--ink-500)" }}><Icons.Mail size={15} /></span>
              </div>
            </div>

            <div className="form-group">
              <label className="label">
                Password
                <a style={{ float: "right", fontSize: 12, color: "var(--orange-600)", textDecoration: "none", fontWeight: 500 }} href="#">Forgot password?</a>
              </label>
              <div style={{ position: "relative" }}>
                <input
                  className="input"
                  type={showPw ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="Enter password"
                  style={{ paddingLeft: 36, paddingRight: 60 }} />
                
                <span style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "var(--ink-500)" }}><Icons.Lock size={15} /></span>
                <button type="button" onClick={() => setShowPw(!showPw)} style={{ position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", background: "none", border: "none", color: "var(--ink-500)", fontSize: 12, fontWeight: 600 }}>
                  {showPw ? "HIDE" : "SHOW"}
                </button>
              </div>
            </div>

            <div className="row" style={{ marginBottom: 18, justifyContent: "space-between" }}>
              <label style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 13, color: "var(--ink-600)", cursor: "pointer" }}>
                <Checkbox checked />
                <span>Remember this workstation</span>
              </label>
            </div>

            <button className="btn btn--primary btn--block btn--lg" type="submit" disabled={loading}>
              {loading ? "Authenticating…" : "Sign In"}
            </button>

            <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "18px 0", color: "var(--ink-400)" }}>
              <div style={{ flex: 1, height: 1, background: "var(--ink-200)" }} />
              <span className="text-xs">OR</span>
              <div style={{ flex: 1, height: 1, background: "var(--ink-200)" }} />
            </div>

            <button
              type="button"
              className="btn btn--secondary btn--block btn--lg"
              disabled
              title="Azure AD SSO is planned for Phase 2 of the rollout."
              style={{ opacity: 0.55, cursor: "not-allowed" }}>
              <Icons.Lock size={15} />
              <span>Sign in with SSO</span>
              <span className="mono text-xs" style={{ marginLeft: 6, opacity: 0.6 }}>·  Azure AD (soon)</span>
            </button>
          </div>

          <div style={{ background: "var(--ink-50)", borderTop: "1px solid var(--ink-200)", padding: "12px 36px", borderRadius: "0 0 8px 8px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span className="text-xs muted">Need access? Contact your plant administrator.</span>
            <span className="badge badge--complete"><span className="dot" />Systems healthy</span>
          </div>
        </form>
      </div>
    </div>);

}

window.LoginScreen = LoginScreen;