const { useState: useStateCP } = React;

// Forced first-login password change. Shown whenever the session carries the
// must-change-password flag; blocks the rest of the app until resolved.
function ChangePassword({ api, user, onDone, onLogout }) {
  const [current, setCurrent] = useStateCP("");
  const [next, setNext] = useStateCP("");
  const [confirm, setConfirm] = useStateCP("");
  const [error, setError] = useStateCP("");
  const [busy, setBusy] = useStateCP(false);

  const MIN = 10;
  const submit = async (e) => {
    e && e.preventDefault();
    setError("");
    if (next.length < MIN) { setError(`Das neue Passwort muss mindestens ${MIN} Zeichen haben.`); return; }
    if (next !== confirm) { setError("Die Passwörter stimmen nicht überein."); return; }
    setBusy(true);
    const res = await api.changePassword(current, next);
    setBusy(false);
    if (res.ok) { onDone(); return; }
    const map = {
      wrong_current_password: "Das temporäre Passwort ist nicht korrekt.",
      weak_password: `Das neue Passwort muss mindestens ${MIN} Zeichen haben.`,
      password_reused: "Das neue Passwort muss sich vom temporären unterscheiden.",
    };
    setError(map[res.error] || "Passwort konnte nicht geändert werden.");
  };

  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", marginBottom: 14 };
  const lbl = { display: "block", fontSize: 13, fontWeight: 600, color: "var(--dv-navy)", marginBottom: 6 };

  return (
    <div style={{ minHeight: "100vh", background: "var(--dv-slate-50)", display: "flex", flexDirection: "column" }}>
      <header style={{ background: "var(--dv-navy)", padding: "0 24px", height: 62, display: "flex", alignItems: "center", gap: 12 }}>
        <img src="./assets/logo-datavise-white.svg" alt="Datavise" style={{ height: 26 }} />
        <span style={{ width: 1, height: 20, background: "rgba(255,255,255,.22)" }}></span>
        <span style={{ color: "#fff", fontSize: 14.5, fontWeight: 700 }}>Awareness Portal</span>
      </header>

      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
        <form onSubmit={submit} style={{ width: "100%", maxWidth: 420, background: "#fff", border: "1px solid var(--dv-border)", borderRadius: 16, boxShadow: "var(--dv-shadow-md)", padding: 32 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(0,208,132,.12)", color: "#0a6e48", fontSize: 12, fontWeight: 700, padding: "6px 12px", borderRadius: 9999, marginBottom: 18 }}>
            <i data-lucide="key-round" style={{ width: 14, height: 14 }}></i> Erstanmeldung
          </div>
          <h2 style={{ fontSize: 24, fontWeight: 700, color: "var(--dv-navy)", letterSpacing: "-0.02em", margin: "0 0 6px" }}>Neues Passwort festlegen</h2>
          <p style={{ fontSize: 14, color: "var(--dv-fg-muted)", margin: "0 0 24px", lineHeight: 1.5 }}>
            Willkommen{user && user.email ? `, ${user.email}` : ""}. Bitte ersetzen Sie Ihr temporäres Passwort, um fortzufahren.
          </p>

          <label style={lbl}>Temporäres Passwort</label>
          <input type="password" value={current} onChange={(e) => setCurrent(e.target.value)} placeholder="Vom Administrator erhalten" style={ctrl} />

          <label style={lbl}>Neues Passwort</label>
          <input type="password" value={next} onChange={(e) => setNext(e.target.value)} placeholder={`Mindestens ${MIN} Zeichen`} style={ctrl} />

          <label style={lbl}>Neues Passwort bestätigen</label>
          <input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder="Wiederholen" style={{ ...ctrl, marginBottom: error ? 12 : 20 }} />

          {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 ? "Speichern …" : "Passwort speichern & fortfahren"}
          </button>

          <button type="button" onClick={onLogout} style={{ width: "100%", marginTop: 12, background: "transparent", border: "none", color: "var(--dv-fg-muted)", fontFamily: "var(--dv-font-sans)", fontSize: 13, cursor: "pointer" }}>
            Abmelden
          </button>
        </form>
      </div>
    </div>
  );
}

window.ChangePassword = ChangePassword;