"use client";
import { useState } from "react";
import Link from "next/link";
import { Loader2, ArrowRight, CheckCircle2 } from "lucide-react";

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

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError("");
    setLoading(true);
    try {
      const res = await fetch("/api/auth/forgot-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      const data = await res.json();
      if (!res.ok) { setError(data.error || "فشل"); return; }
      setSent(true);
      if (data.resetLink) setDevLink(data.resetLink);
    } finally { setLoading(false); }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-brand-50 p-4">
      <div className="w-full max-w-md">
        <div className="text-center mb-7">
          <Link href="/" className="inline-flex items-center gap-2">
            <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 flex items-center justify-center text-white font-bold text-xl">ر</div>
          </Link>
          <h1 className="mt-4 text-2xl font-bold">نسيت كلمة المرور؟</h1>
          <p className="mt-1 text-sm text-slate-600">أدخل بريدك وسنرسل لك رابط إعادة التعيين</p>
        </div>

        <div className="card p-7">
          {sent ? (
            <div className="text-center">
              <CheckCircle2 className="w-16 h-16 text-emerald-500 mx-auto mb-3" />
              <h2 className="font-bold text-lg mb-2">تم إرسال الرابط</h2>
              <p className="text-sm text-slate-600 mb-4">إذا كان البريد مسجلاً، ستصلك رسالة خلال دقائق</p>
              {devLink && (
                <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg text-xs text-amber-800 mb-4">
                  <strong>وضع التطوير:</strong>{" "}
                  <a href={devLink} className="text-brand-600 underline">اضغط هنا لإعادة التعيين</a>
                </div>
              )}
              <Link href="/login" className="btn-primary w-full">العودة لتسجيل الدخول</Link>
            </div>
          ) : (
            <form onSubmit={submit} className="space-y-4">
              {error && <div className="p-3 rounded-lg bg-red-50 text-red-700 text-sm">{error}</div>}
              <div>
                <label className="label">البريد الإلكتروني</label>
                <input type="email" className="input" value={email} onChange={(e) => setEmail(e.target.value)} required />
              </div>
              <button type="submit" disabled={loading} className="btn-primary w-full">
                {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : "إرسال الرابط"}
              </button>
              <Link href="/login" className="block text-center text-sm text-slate-500 hover:text-slate-700">
                <ArrowRight className="w-4 h-4 inline" /> العودة لتسجيل الدخول
              </Link>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}