"use client";

import React, { useState } from "react";
import axios from "axios";

export default function ForgotPasswordForm() {
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");

  const handleForgot = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setMessage("");
    try {
      const res = await axios.post("http://localhost:3010/api/auth/forgot-password", { email });
      setMessage("✅ We’ve emailed you a reset code / link. Enter it below.");
    } catch (err: any) {
      console.error(err);
      setMessage("Something went wrong. Try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleForgot} className="space-y-5">
      <div>
        <label className="block text-sm font-medium text-white-dark mb-1">
          Email
        </label>
        <input
          type="email"
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="form-input w-full rounded-md border-white-light bg-transparent text-black dark:text-white"
          placeholder="you@example.com"
        />
      </div>
      <button
        type="submit"
        disabled={loading}
        className="btn btn-primary w-full uppercase font-bold"
      >
        {loading ? "Sending..." : "Send Reset Link"}
      </button>
      {message && <p className="mt-2 text-center text-sm font-semibold text-primary">{message}</p>}
    </form>
  );
}