const { useState } = React;

function Login({ onLogin }) {
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  const submit = async (e) => {
    e && e.preventDefault();
    if (busy) return;
    setBusy(true);
    setError("");
    const res = await onLogin(email, pw);
    setBusy(false);
    if (res && res.error) setError(res.error);
  };

  return (
    <div style={{ minHeight: "100vh", display: "grid", gridTemplateColumns: "1.05fr 1fr", background: "#fff" }}>
      {/* Linke Markenfläche */}
      <div style={{ position: "relative", background: "var(--dv-navy)", overflow: "hidden", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "48px 56px" }}>
        <img src="./assets/images/hero-data-wave.jpg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.28 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(115deg,#163249 20%,rgba(22,50,73,.72) 100%)" }} />
        <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 12 }}>
          <img src="./assets/logo-datavise-white.svg" alt="Datavise" style={{ height: 30 }} />
          <span style={{ width: 1, height: 22, background: "rgba(255,255,255,.25)" }} />
          <span style={{ color: "#fff", fontSize: 15, fontWeight: 700, letterSpacing: "-0.01em" }}>Awareness Portal</span>
        </div>
        <div style={{ position: "relative", maxWidth: 440 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(0,208,132,.18)", border: "1px solid rgba(0,208,132,.35)", color: "#7ff0c4", fontSize: 12, fontWeight: 700, padding: "6px 12px", borderRadius: 9999, marginBottom: 22, fontFamily: "var(--dv-font-mono)" }}>
            <i data-lucide="shield-check" style={{ width: 14, height: 14 }}></i> ISO 27001 · DSGVO-konform
          </div>
          <h1 style={{ color: "#fff", fontSize: 40, lineHeight: 1.1, fontWeight: 700, letterSpacing: "-0.02em", margin: "0 0 16px" }}>
            Ihre Phishing-Resilienz.<br />In Zahlen.
          </h1>
          <p style={{ color: "var(--dv-slate-300)", fontSize: 16, lineHeight: 1.6, margin: 0 }}>
            Sehen Sie die Ergebnisse Ihrer Awareness-Kampagnen — vollständig anonymisiert,
            aggregiert auf Abteilungsebene. Keine Zuordnung zu Einzelpersonen.
          </p>
        </div>
        <div style={{ position: "relative", color: "var(--dv-slate-400)", fontSize: 12, fontFamily: "var(--dv-font-mono)" }}>
          Sicherheit. Vertrauen. Punkt.
        </div>
      </div>

      {/* Rechte Login-Fläche */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "40px" }}>
        <form onSubmit={submit} style={{ width: "100%", maxWidth: 380 }}>
          <h2 style={{ fontSize: 26, fontWeight: 700, color: "var(--dv-navy)", letterSpacing: "-0.02em", margin: "0 0 6px" }}>Anmelden</h2>
          <p style={{ fontSize: 14, color: "var(--dv-fg-muted)", margin: "0 0 28px", lineHeight: 1.5 }}>
            Für autorisierte Sicherheitsverantwortliche (CISO / ISO).
          </p>

          <label style={lblStyle}>Geschäftliche E-Mail</label>
          <div style={{ position: "relative", marginBottom: 16 }}>
            <i data-lucide="mail" style={inIcon}></i>
            <input value={email} onChange={(e) => { setEmail(e.target.value); setError(""); }} placeholder="ciso@ihr-unternehmen.de" style={{ ...ctrl, paddingLeft: 40 }} />
          </div>

          <label style={lblStyle}>Passwort</label>
          <div style={{ position: "relative", marginBottom: error ? 12 : 22 }}>
            <i data-lucide="lock" style={inIcon}></i>
            <input value={pw} onChange={(e) => setPw(e.target.value)} type="password" placeholder="••••••••••" style={{ ...ctrl, paddingLeft: 40 }} />
          </div>

          {error && (
            <div style={{ display: "flex", gap: 8, alignItems: "flex-start", background: "var(--dv-danger-bg)", color: "#b91c1c", fontSize: 13, padding: "10px 12px", borderRadius: 8, marginBottom: 18, lineHeight: 1.45 }}>
              <i data-lucide="alert-circle" style={{ width: 16, height: 16, flex: "none", marginTop: 1 }}></i>{error}
            </div>
          )}

          <button type="submit" disabled={busy} className="dv-portal-cta" style={{ width: "100%", background: "var(--dv-green)", color: "#fff", border: "none", fontFamily: "var(--dv-font-sans)", fontWeight: 700, fontSize: 16, padding: "14px", borderRadius: 9999, cursor: busy ? "wait" : "pointer", opacity: busy ? 0.7 : 1, boxShadow: "var(--dv-shadow-md)", transition: "all .3s var(--dv-ease)" }}>
            {busy ? "Anmelden …" : "Sicher anmelden"}
          </button>

          <p style={{ fontSize: 12, color: "var(--dv-fg-subtle)", textAlign: "center", margin: "20px 0 0", lineHeight: 1.5 }}>
            Zugang wird von Datavise bereitgestellt. Beim ersten Login vergeben Sie ein neues Passwort.
          </p>
        </form>
      </div>
    </div>
  );
}

const lblStyle = { display: "block", fontSize: 13, fontWeight: 600, color: "var(--dv-navy)", marginBottom: 6 };
const ctrl = { width: "100%", boxSizing: "border-box", fontFamily: "var(--dv-font-sans)", fontSize: 15, padding: "12px 14px", border: "1px solid var(--dv-border)", borderRadius: 8, color: "var(--dv-fg-strong)", background: "#fff", outline: "none" };
const inIcon = { position: "absolute", left: 13, top: 13, width: 16, height: 16, color: "var(--dv-fg-subtle)" };
const demoChip = { fontFamily: "var(--dv-font-mono)", fontSize: 11, color: "var(--dv-slate-600)", background: "var(--dv-slate-50)", border: "1px solid var(--dv-border)", borderRadius: 6, padding: "6px 9px", cursor: "pointer" };

window.Login = Login;