import { useState } from "react";
import { Mail } from "lucide-react";
import OmsorgCard from "../../components/OmsorgCard";
import OmsorgButton from "../../components/ui/OmsorgButton";

export default function ForgotPasswordUsernamePage({ onNext, onBackToLogin }) {
  const [username, setUsername] = useState("");
  const [error, setError] = useState(null);
  const [cannotReset, setCannotReset] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

  async function handleSubmit(event) {
    event.preventDefault();
    setError(null);
    setCannotReset(false);
    setIsSubmitting(true);
    const result = await window.omsorg.auth.requestPasswordReset(username);
    setIsSubmitting(false);

    if (!result.success) {
      setError("Server nicht erreichbar. Bitte Verbindung prüfen und erneut versuchen.");
      return;
    }

    if (result.status === "sent") {
      onNext(username);
    } else if (result.status === "email_unavailable") {
      setError("Der E-Mail-Versand ist gerade nicht verfügbar. Bitte später erneut versuchen oder einen Administrator kontaktieren.");
    } else {
      setCannotReset(true);
    }
  }

  return (
    <div className="login-screen">
      <OmsorgCard>
        <h2>
          Passwort
          <span className="accent"> vergessen</span>
        </h2>

        <form onSubmit={handleSubmit} className="login-form">
          <label>
            Benutzername
            <input
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              autoFocus
              required
            />
          </label>

          {error && <p className="login-error">{error}</p>}
          {cannotReset && (
            <p className="login-error">
              Für diesen Account ist kein Passwort-Reset per E-Mail möglich. Bitte wende dich an einen Administrator.
            </p>
          )}

          <OmsorgButton type="submit" icon={Mail} disabled={isSubmitting}>
            {isSubmitting ? "Wird gesendet..." : "Code anfordern"}
          </OmsorgButton>

          <div className="login-form-links">
            <button type="button" onClick={onBackToLogin}>
              Zurück zum Login
            </button>
          </div>
        </form>
      </OmsorgCard>
    </div>
  );
}