"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("https://ebay.backend.data4autos.com/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 ps-10 placeholder:text-white-dark"
          placeholder="you@example.com"
        />
      </div>
     <button
            type="submit"
            disabled={loading}
            className="btn w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(25,212,251,0.44)] disabled:cursor-not-allowed disabled:opacity-70 !mt-6 bg-[linear-gradient(135deg,#0EA5E9_0%,#19D4FB_50%,#67E8F9_100%)] text-white hover:bg-[linear-gradient(135deg,#67E8F9_0%,#19D4FB_50%,#0EA5E9_100%)]"
            >
        {loading ? "Sending..." : "Send Reset Link"}
      </button>
      {message && <p className="mt-2 text-center text-sm font-semibold text-primary">{message}</p>}
    </form>
  );
}