"use client";
import { useState } from "react";
import { sendPasswordResetEmail } from "firebase/auth";
import { auth } from "@/lib/firebase";
import Navbar from "@/components/Navbar";
import Link from "next/link";

export default function ForgotPasswordPage() {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  const handleReset = async (e: React.FormEvent) => {
    e.preventDefault();
    setMessage("");
    setError("");

    try {
      await sendPasswordResetEmail(auth, email);
      setMessage("Password reset link sent to your email!");
    } catch (err: any) {
      setError(err.message);
    }
  };

  return (
    <>
      <Navbar />
      <div className="flex min-h-screen items-center justify-center">
        <form
          className="p-6 bg-white rounded shadow-md w-full max-w-md"
          onSubmit={handleReset}
        >
          <h2 className="text-2xl font-bold mb-4 text-center">
            Forgot Password
          </h2>
          <input
            type="email"
            placeholder="Enter your email"
            className="border p-2 w-full mb-2 rounded"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <button
            className="w-full bg-blue-600 text-white p-2 rounded mt-2"
            type="submit"
          >
            Send Reset Link
          </button>
          <Link
            className="py-1 mt-3 bg-amber-400 text-white flex justify-center items-center"
            href={"/login"}
          >
            back to login
          </Link>
          {message && <p className="text-green-600 mt-2">{message}</p>}
          {error && <p className="text-red-600 mt-2">{error}</p>}
        </form>
      </div>
    </>
  );
}