// SOLCOM Website-Abnahme · Login (Auth über POST /api/login, kein Passwort im Client)
(function () {
  const DS = window.AdessoPlaybooksDesignSystem_29634e;
  const { Button } = DS;

  function Field({ label, icon, type, value, onChange, placeholder, autoFocus, invalid, onEnter }) {
    const [focus, setFocus] = React.useState(false);
    return (
      <label style={{ display: "block" }}>
        <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--ink-500)", marginBottom: 8 }}>{label}</span>
        <span style={{
          display: "flex", alignItems: "center", gap: 10,
          padding: "12px 14px", borderRadius: "var(--radius-lg)",
          background: invalid ? "color-mix(in oklch, var(--danger) 5%, #fff)" : "var(--ink-50)",
          border: "1.5px solid " + (invalid ? "var(--danger)" : focus ? "var(--blue-500)" : "var(--ink-200)"),
          transition: "border-color .12s ease",
        }}>
          <i className={icon} style={{ fontSize: 17, color: focus ? "var(--blue-500)" : "var(--ink-400)" }}></i>
          <input
            type={type}
            value={value}
            autoFocus={autoFocus}
            placeholder={placeholder}
            onChange={(e) => onChange(e.target.value)}
            onFocus={() => setFocus(true)}
            onBlur={() => setFocus(false)}
            onKeyDown={(e) => { if (e.key === "Enter" && onEnter) onEnter(); }}
            style={{ flex: 1, border: "none", outline: "none", background: "transparent", font: "inherit", fontSize: 15, color: "var(--ink-900)" }}
          />
        </span>
      </label>
    );
  }

  function LoginScreen({ onLogin, logo }) {
    const [user, setUser] = React.useState("");
    const [pw, setPw] = React.useState("");
    // error: false | "user" (Benutzername fehlt) | "auth" (401) | "network"
    const [error, setError] = React.useState(false);
    const [loading, setLoading] = React.useState(false);

    const submit = async () => {
      if (loading) return;
      if (!user.trim()) { setError("user"); return; }
      setError(false);
      setLoading(true);
      try {
        const res = await fetch("api/login", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ username: user.trim(), password: pw }),
        });
        if (res.ok) {
          const data = await res.json();
          onLogin(data.user || user.trim());
          return;
        }
        if (res.status === 401) { setError("auth"); }
        else { setError("network"); }
      } catch (e) {
        setError("network");
      } finally {
        setLoading(false);
      }
    };

    return (
      <div style={{ minHeight: "100vh", background: "var(--ink-50)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
        <div style={{ width: "100%", maxWidth: 400 }}>
          {/* brand */}
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 26 }}>
            <img src={logo} alt="adesso" style={{ width: 52, height: 52, borderRadius: "var(--radius-md)" }} />
          </div>

          <div style={{ background: "#fff", border: "1px solid var(--ink-200)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-1)", padding: "34px 32px" }}>
            <h1 style={{ fontFamily: "var(--font-cond)", fontSize: 32, fontWeight: 500, letterSpacing: "-.01em", lineHeight: 1.05, margin: 0, color: "var(--ink-1000)" }}>Anmelden</h1>
            <p style={{ margin: "8px 0 26px", fontSize: 14.5, color: "var(--ink-600)" }}>SOLCOM Website-Abnahme</p>

            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <Field label="Benutzername" icon="ph ph-user" type="text" value={user} autoFocus
                placeholder="vorname.nachname" invalid={error === "user" || error === "auth"}
                onChange={(v) => { setUser(v); if (error) setError(false); }} onEnter={submit} />
              <Field label="Passwort" icon="ph ph-lock-simple" type="password" value={pw}
                placeholder="••••••••" invalid={error === "auth"}
                onChange={(v) => { setPw(v); if (error) setError(false); }} onEnter={submit} />
            </div>

            {error === "auth" ? (
              <div style={{ display: "flex", alignItems: "center", gap: 7, marginTop: 14, fontSize: 13, color: "var(--danger)" }}>
                <i className="ph-bold ph-warning-circle" style={{ fontSize: 15 }}></i> Benutzername oder Passwort ist nicht korrekt.
              </div>
            ) : null}
            {error === "user" ? (
              <div style={{ display: "flex", alignItems: "center", gap: 7, marginTop: 14, fontSize: 13, color: "var(--danger)" }}>
                <i className="ph-bold ph-warning-circle" style={{ fontSize: 15 }}></i> Bitte Benutzername eingeben.
              </div>
            ) : null}
            {error === "network" ? (
              <div style={{ display: "flex", alignItems: "center", gap: 7, marginTop: 14, fontSize: 13, color: "var(--danger)" }}>
                <i className="ph-bold ph-warning-circle" style={{ fontSize: 15 }}></i> Anmeldung fehlgeschlagen. Bitte erneut versuchen.
              </div>
            ) : null}

            <div style={{ marginTop: 24 }}>
              <Button variant="primary" iconRight="ph-bold ph-arrow-right" onClick={submit} disabled={loading} style={{ width: "100%" }}>
                {loading ? "Anmelden…" : "Anmelden"}
              </Button>
            </div>
          </div>

          <p style={{ textAlign: "center", fontSize: 12.5, color: "var(--ink-500)", marginTop: 22 }}>
            Zugang für Kunden-Tester · vertraulich
          </p>
        </div>
      </div>
    );
  }

  window.SC_LoginScreen = LoginScreen;
})();