/* global React, api */

function CRMLoginPage({ onLogin }) {
  const [email, setEmail]       = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError]       = React.useState("");
  const [loading, setLoading]   = React.useState(false);

  const handle = async (e) => {
    e.preventDefault();
    if (!email || !password) { setError("Please enter your email and password."); return; }
    setError("");
    setLoading(true);
    try {
      const data = await api.post("/auth/login", { email, password });
      api.setToken(data.token);
      onLogin(data.user);
    } catch (err) {
      setError(err.message || "Invalid email or password.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ display: "flex", minHeight: "100vh", fontFamily: "var(--font-sans)" }}>

      {/* ── Left brand panel ── */}
      <div className="login-hero" style={{
        width: 440, flexShrink: 0,
        background: "linear-gradient(160deg, var(--plum-900) 0%, var(--plum-700) 100%)",
        display: "flex", flexDirection: "column", justifyContent: "space-between",
        padding: "48px 44px", position: "relative", overflow: "hidden",
      }}>
        {/* Decorative rings */}
        <svg viewBox="0 0 200 200" width={380} height={380} fill="none"
          style={{ position: "absolute", right: -110, top: -90, opacity: 0.08, color: "#F5989D", pointerEvents: "none" }}>
          <circle cx="100" cy="100" r="92" stroke="currentColor" strokeWidth="5" />
          <circle cx="100" cy="100" r="64" stroke="currentColor" strokeWidth="5" />
          <circle cx="100" cy="100" r="36" stroke="currentColor" strokeWidth="5" />
        </svg>
        <svg viewBox="0 0 200 200" width={220} height={220} fill="none"
          style={{ position: "absolute", left: -50, bottom: -50, opacity: 0.06, color: "#F5989D", pointerEvents: "none" }}>
          <circle cx="100" cy="100" r="92" stroke="currentColor" strokeWidth="5" />
          <circle cx="100" cy="100" r="64" stroke="currentColor" strokeWidth="5" />
          <circle cx="100" cy="100" r="36" stroke="currentColor" strokeWidth="5" />
        </svg>

        {/* Logo + headline */}
        <div style={{ position: "relative", zIndex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 52 }}>
            <img src="assets/logo-mark.svg" style={{ width: 36, height: 36, filter: "brightness(0) invert(1)" }} alt="" />
            <div>
              <div style={{ fontWeight: 700, letterSpacing: "0.2em", fontSize: 13, color: "#fff" }}>SMASH</div>
              <div style={{ fontSize: 9, letterSpacing: "0.22em", color: "var(--brand-pink)", marginTop: 1 }}>COMPANIES HOUSE</div>
            </div>
          </div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 600,
            color: "#fff", lineHeight: 1.25, letterSpacing: "-0.02em", margin: "0 0 14px",
          }}>
            The operations platform for your team.
          </h2>
          <p style={{ fontSize: 14, color: "rgba(244,221,232,0.7)", lineHeight: 1.65, margin: 0 }}>
            Manage visas, trade licenses, PRO services, and more — all in one place.
          </p>
        </div>

        {/* Stats strip */}
        <div style={{ position: "relative", zIndex: 1, display: "flex", gap: 32 }}>
          {[
            { n: "312", l: "Active clients" },
            { n: "142", l: "Open engagements" },
            { n: "27",  l: "Renewals due" },
          ].map((s, i) => (
            <div key={i}>
              <div style={{ fontSize: 28, fontWeight: 700, color: "#fff", letterSpacing: "-0.02em", fontFamily: "var(--font-display)" }}>{s.n}</div>
              <div style={{ fontSize: 11.5, color: "rgba(244,221,232,0.55)", marginTop: 3 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ── Right form panel ── */}
      <div className="login-form-panel" style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", background: "var(--ink-50)", padding: 32 }}>
        <div style={{ width: "100%", maxWidth: 380 }}>

          <div style={{ marginBottom: 32 }}>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 600, letterSpacing: "-0.02em", margin: "0 0 6px" }}>
              Sign in
            </h1>
            <p style={{ fontSize: 14, color: "var(--fg-3)", margin: 0 }}>Welcome back — sign in to your team account.</p>
          </div>

          <form onSubmit={handle} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {error && (
              <div style={{ background: "var(--danger-50)", color: "var(--danger-700)", border: "1px solid var(--danger-500)", borderRadius: 6, padding: "10px 14px", fontSize: 13 }}>
                {error}
              </div>
            )}

            <div className="field">
              <label>Email address</label>
              <input type="email" placeholder="admin@smash.ae"
                value={email} onChange={e => setEmail(e.target.value)} autoComplete="email" />
            </div>

            <div className="field">
              <label style={{ display: "flex", justifyContent: "space-between" }}>
                <span>Password</span>
                <span style={{ color: "var(--brand-burgundy)", fontSize: 12, fontWeight: 500, cursor: "pointer" }}>Forgot password?</span>
              </label>
              <input type="password" placeholder="••••••••"
                value={password} onChange={e => setPassword(e.target.value)} autoComplete="current-password" />
            </div>

            <button type="submit" className="btn btn-primary"
              style={{ width: "100%", justifyContent: "center", padding: "11px 16px", marginTop: 4, fontSize: 14, opacity: loading ? 0.7 : 1 }}
              disabled={loading}>
              {loading ? "Signing in…" : "Sign in"}
            </button>
          </form>

          {/* Demo hint */}
          <div style={{ marginTop: 24, padding: "14px 16px", background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: 8 }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.12em", marginBottom: 8 }}>Demo credentials</div>
            <div style={{ fontSize: 13, color: "var(--fg-2)" }}>admin@smash.ae · smash123</div>
            <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 3 }}>Super Admin · full access</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CRMLoginPage });