/* global React, Icon, portalApi */

function PortalLoginPage({ 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 portalApi.post("/login", { email, password });
      portalApi.setToken(data.token);
      onLogin(data.customer);
    } catch (err) {
      setError(err.message || "Invalid email or password.");
    } finally {
      setLoading(false);
    }
  };

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

      {/* ── Left hero panel ── */}
      <div className="login-hero" style={{
        flex: 1,
        background: "linear-gradient(135deg, var(--plum-900) 0%, var(--plum-700) 100%)",
        display: "flex", flexDirection: "column", justifyContent: "center",
        padding: "56px 64px", position: "relative", overflow: "hidden",
      }}>
        <svg viewBox="0 0 200 200" width={520} height={520} fill="none"
          style={{ position: "absolute", right: -160, top: -120, opacity: 0.09, 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={280} height={280} fill="none"
          style={{ position: "absolute", left: -60, bottom: -60, 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>

        <div style={{ position: "relative", zIndex: 1, maxWidth: 480 }}>
          {/* Brand */}
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 64 }}>
            <img src="assets/logo-mark.svg" style={{ width: 40, height: 40, filter: "brightness(0) invert(1)" }} alt="" />
            <div>
              <div style={{ fontWeight: 700, letterSpacing: "0.2em", fontSize: 14, color: "#fff" }}>SMASH</div>
              <div style={{ fontSize: 9, letterSpacing: "0.22em", color: "var(--brand-pink)", marginTop: 1 }}>COMPANIES HOUSE</div>
            </div>
          </div>

          <h1 style={{
            fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 600,
            color: "#fff", lineHeight: 1.15, letterSpacing: "-0.02em", margin: "0 0 16px",
          }}>
            Your business services, simplified.
          </h1>
          <p style={{ fontSize: 16, color: "rgba(244,221,232,0.75)", lineHeight: 1.65, margin: "0 0 48px" }}>
            Track your visas, trade licenses, and PRO services — with live updates from your dedicated team.
          </p>

          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              "Real-time status on every engagement",
              "Secure document uploads and storage",
              "Direct messaging with your PRO officer",
              "Invoices and one-click payments",
            ].map((t, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 14, color: "rgba(244,221,232,0.85)" }}>
                <div style={{
                  width: 22, height: 22, borderRadius: 999,
                  background: "rgba(245,152,157,0.22)", border: "1px solid rgba(245,152,157,0.4)",
                  display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
                }}>
                  <Icon name="check" size={12} />
                </div>
                {t}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ── Right form panel ── */}
      <div className="login-form-panel" style={{ width: 480, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", background: "#fff", padding: 48 }}>
        <div style={{ width: "100%", maxWidth: 360 }}>

          <div style={{ marginBottom: 32 }}>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em", margin: "0 0 6px" }}>
              Welcome back
            </h2>
            <p style={{ fontSize: 14, color: "var(--fg-3)", margin: 0 }}>Sign in to your customer portal.</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="mohammed@aldarcap.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 to portal"}
            </button>
          </form>

          {/* Demo hint */}
          <div style={{ marginTop: 24, padding: "14px 16px", background: "var(--ink-50)", border: "1px solid var(--border-subtle)", borderRadius: 8 }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.12em", marginBottom: 10 }}>Demo credentials</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                { label: "Individual", email: "mohammed@aldarcap.ae", name: "Mohammed Al-Rashid", color: "var(--plum-700)" },
                { label: "Organisation", email: "ops@nordwind.ae", name: "Nordwind FZ-LLC", color: "var(--brand-burgundy)" },
              ].map(acc => (
                <div key={acc.email}
                  onClick={() => { setEmail(acc.email); setPassword("portal123"); }}
                  style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", borderRadius: 6, border: "1px solid var(--border-subtle)", background: "#fff", cursor: "pointer" }}
                  onMouseEnter={e => e.currentTarget.style.borderColor = "var(--brand-burgundy)"}
                  onMouseLeave={e => e.currentTarget.style.borderColor = "var(--border-subtle)"}
                >
                  <span style={{ fontSize: 10, fontWeight: 700, color: "#fff", background: acc.color, padding: "2px 7px", borderRadius: 4, flexShrink: 0 }}>{acc.label}</span>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, color: "var(--fg-2)", fontWeight: 500 }}>{acc.email}</div>
                    <div style={{ fontSize: 11.5, color: "var(--fg-3)" }}>{acc.name} · portal123</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 20, textAlign: "center", fontSize: 13, color: "var(--fg-3)" }}>
            New to Smash? <span style={{ color: "var(--brand-burgundy)", fontWeight: 500, cursor: "pointer" }}>Contact us</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PortalLoginPage });