// @File: src/pages/admin/AdminForgotPassword.tsx
// @Desc: Step 1 of the admin forgot-password flow. Posts the email to
//        POST /api/v1/auth/local/forgot-password and always shows a
//        generic "if this email exists, a link has been sent" confirmation
//        to avoid user-enumeration.
import { FormEvent, useState } from "react";
import { Link } from "react-router-dom";
import { CheckCircle2, Loader2, Mail, ShieldCheck } from "lucide-react";
import { requestPasswordReset } from "@/lib/adminApi";

export default function AdminForgotPassword() {
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setError(null);
    if (!email.trim()) {
      setError("Please enter your email address.");
      return;
    }
    setLoading(true);
    try {
      await requestPasswordReset(email.trim().toLowerCase());
      setSent(true);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Could not send reset email.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-[#0f1f17] via-[#0f5132] to-[#0b3d24] flex items-center justify-center px-4 py-12">
      <div className="w-full max-w-md">
        <div className="bg-white rounded-2xl shadow-2xl p-8 sm:p-10">
          <div className="flex flex-col items-center text-center mb-8">
            <div className="w-14 h-14 rounded-2xl bg-[#0f5132] text-white flex items-center justify-center mb-4">
              <ShieldCheck className="w-7 h-7" />
            </div>
            <h1 className="text-2xl font-bold text-[#0f1f17]">Forgot your password?</h1>
            <p className="text-sm text-gray-500 mt-1">
              Enter the email tied to your admin account and we’ll send you a reset link.
            </p>
          </div>

          {sent ? (
            <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-4 text-sm text-green-800">
              <div className="flex items-start gap-2">
                <CheckCircle2 className="w-5 h-5 mt-0.5 shrink-0" />
                <div>
                  <p className="font-semibold">Check your inbox.</p>
                  <p className="mt-1 text-green-700">
                    If an account exists for <strong>{email}</strong>, we’ve sent a password-reset
                    link. It expires in 60 minutes.
                  </p>
                </div>
              </div>
            </div>
          ) : (
            <>
              {error && (
                <div
                  role="alert"
                  className="mb-5 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
                >
                  {error}
                </div>
              )}
              <form onSubmit={handleSubmit} className="space-y-5">
                <div>
                  <label
                    htmlFor="forgot-email"
                    className="block text-sm font-medium text-[#0f1f17] mb-1.5"
                  >
                    Email
                  </label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                    <input
                      id="forgot-email"
                      type="email"
                      autoComplete="email"
                      required
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="w-full rounded-lg border border-gray-300 bg-white pl-10 pr-3 py-2.5 text-sm text-[#0f1f17] focus:border-[#0f5132] focus:ring-2 focus:ring-[#0f5132]/20 outline-none transition"
                      placeholder="you@example.com"
                    />
                  </div>
                </div>

                <button
                  type="submit"
                  disabled={loading}
                  className="w-full flex items-center justify-center gap-2 rounded-lg bg-[#0f5132] hover:bg-[#0b3d24] disabled:opacity-60 disabled:cursor-not-allowed text-white font-semibold py-2.5 text-sm transition"
                >
                  {loading ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      Sending…
                    </>
                  ) : (
                    "Send reset link"
                  )}
                </button>
              </form>
            </>
          )}

          <div className="mt-6 text-center text-xs text-gray-500">
            <Link to="/admin/login" className="font-medium text-[#0f5132] hover:text-[#0b3d24]">
              Back to admin sign in
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}