import { FormEvent, useState } from "react";
import { Link, useNavigate, useSearchParams } from "react-router-dom";

import { resetPassword } from "../api/auth";

export default function ResetPassword() {
  const [searchParams] = useSearchParams();
  const token = searchParams.get("token") ?? "";
  const navigate = useNavigate();
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [done, setDone] = useState(false);

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setError(null);
    try {
      await resetPassword(token, password);
      setDone(true);
      setTimeout(() => navigate("/login"), 1500);
    } catch {
      setError("Zurücksetzen fehlgeschlagen. Der Link ist evtl. abgelaufen.");
    }
  }

  if (!token) {
    return (
      <div className="mx-auto mt-16 max-w-md px-4 text-slate-300">
        Kein gültiger Reset-Link.{" "}
        <Link to="/forgot-password" className="text-amber-400">
          Neu anfordern
        </Link>
      </div>
    );
  }

  return (
    <div className="mx-auto mt-16 max-w-md px-4">
      <h1 className="mb-6 text-2xl font-bold text-amber-400">Neues Passwort setzen</h1>
      {done ? (
        <p className="text-slate-300">Passwort geändert. Du wirst weitergeleitet…</p>
      ) : (
        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
          <input
            type="password"
            required
            minLength={8}
            placeholder="Neues Passwort"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="rounded bg-slate-800 px-3 py-2 outline-none focus:ring-2 focus:ring-amber-400"
          />
          {error && <p className="text-sm text-red-400">{error}</p>}
          <button
            type="submit"
            className="rounded bg-amber-500 px-3 py-2 font-semibold text-slate-950 hover:bg-amber-400"
          >
            Passwort setzen
          </button>
        </form>
      )}
    </div>
  );
}