import { useState } from "react";
import { KeyRound } from "lucide-react";
import OmsorgCard from "../../components/OmsorgCard";
import OmsorgButton from "../../components/ui/OmsorgButton";
import { useAuth } from "../../app/AuthContext";

export default function ChangePasswordScreen() {
  const { changePassword, passwordMinLength } = useAuth();
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [error, setError] = useState(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  async function handleSubmit(event) {
    event.preventDefault();
    setError(null);

    if (newPassword.length < passwordMinLength) {
      setError(`Das neue Passwort muss mindestens ${passwordMinLength} Zeichen lang sein.`);
      return;
    }

    if (newPassword !== confirmPassword) {
      setError("Die Passwörter stimmen nicht überein.");
      return;
    }

    setIsSubmitting(true);
    const result = await changePassword(currentPassword, newPassword);
    setIsSubmitting(false);

    if (!result.success) {
      if (result.error === "invalid_current_password") {
        setError("Aktuelles Passwort ist falsch.");
      } else if (result.error === "password_too_short") {
        setError(result.message || `Das neue Passwort muss mindestens ${passwordMinLength} Zeichen lang sein.`);
      } else {
        setError("Passwort konnte nicht geändert werden.");
      }
    }
    // Bei Erfolg beendet changePassword() die Session lokal - der Login-Screen erscheint automatisch.
  }

  return (
    <div className="login-screen">
      <OmsorgCard>
        <h2>Passwort ändern erforderlich</h2>
        <p className="page-description">
          Für diesen Account wurde ein initiales Passwort vergeben. Bitte lege jetzt dein eigenes Passwort fest,
          bevor du weiterarbeiten kannst.
        </p>

        <form onSubmit={handleSubmit} className="login-form">
          <label>
            Aktuelles Passwort
            <input
              type="password"
              value={currentPassword}
              onChange={(e) => setCurrentPassword(e.target.value)}
              autoFocus
              required
            />
          </label>

          <label>
            Neues Passwort
            <input
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              required
            />
          </label>

          <label>
            Neues Passwort bestätigen
            <input
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              required
            />
          </label>

          {error && <p className="login-error">{error}</p>}

          <OmsorgButton type="submit" icon={KeyRound} disabled={isSubmitting}>
            {isSubmitting ? "Ändert..." : "Passwort ändern"}
          </OmsorgButton>
        </form>
      </OmsorgCard>
    </div>
  );
}
