"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import AuthLayout from "../ui/AuthLayout";
import { getApiBase } from "../lib/auth";

export default function ForgotPasswordPage() {
  const router = useRouter();
  const [identifier, setIdentifier] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [status, setStatus] = useState<string | null>(null);

  const submit = async (event: React.FormEvent) => {
    event.preventDefault();
    if (!identifier.trim()) {
      setError("Enter your username or email.");
      return;
    }
    setLoading(true);
    setError(null);
    setStatus(null);
    try {
      const baseUrl = getApiBase();
      const response = await fetch(`${baseUrl}/auth/password/forgot`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ identifier: identifier.trim() }),
      });
      const data = await response.json().catch(() => null);
      if (!response.ok) {
        throw new Error(typeof data?.detail === "string" ? data.detail : "Unable to send reset link.");
      }
      setStatus(
        typeof data?.message === "string"
          ? data.message
          : "If an account exists for that username or email, a password reset link has been sent.",
      );
    } catch (err) {
      console.error(err);
      setError(err instanceof Error ? err.message : "Unable to send reset link.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <AuthLayout title="Forgot password?" description="Enter your username or email to request a reset link.">
      <form className="account-form login-form auth-flow-form" onSubmit={submit}>
        <label>
          Username or email
          <input
            value={identifier}
            onChange={(event) => setIdentifier(event.target.value)}
            autoComplete="username"
            placeholder="you@example.com"
          />
        </label>
        {error && (
          <div className="account-notice is-error" role="alert">
            {error}
          </div>
        )}
        {status && (
          <div className="account-notice is-status" role="status">
            {status}
          </div>
        )}
        <div className="auth-actions">
          <button type="submit" className="account-primary" disabled={loading}>
            {loading ? "Sending reset link…" : "Send reset link"}
          </button>
        </div>
        <button type="button" className="ghost-button" onClick={() => router.push("/login")} disabled={loading}>
          Back to sign in
        </button>
      </form>
    </AuthLayout>
  );
}