'use client';

import IconMail from '@/components/icon/icon-mail';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import axios from 'axios';
import { ApiServerBaseUrl } from '@/utils/baseurl.utils';

interface ResetPasswordFormValues {
  email: string;
}

const ComponentsAuthResetPasswordForm: React.FC = () => {
  const router = useRouter();
  const [formData, setFormData] = useState<ResetPasswordFormValues>({ email: '' });
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [msg, setMsg] = useState<string | null>(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({ email: e.target.value });
  };

  const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setErr(null);
    setMsg(null);

    if (!formData.email) {
      setErr('Please enter your email.');
      return;
    }

    setLoading(true);
    try {
      const res = await axios.post(`${ApiServerBaseUrl}/auth/forgot-password`, {
        email: formData.email,
      });

      setMsg(res.data.message || 'Password reset link sent to your email.');
      setFormData({ email: '' });

      // Redirect after 2 seconds
      setTimeout(() => {
        router.push('/login');
      }, 2000);

    } catch (error: any) {
      setErr(error.response?.data?.error || 'Something went wrong.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form className="space-y-5" onSubmit={submitForm}>
      {err && (
        <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
          {err}
        </div>
      )}

      {msg && (
        <div className="rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
          {msg} <br /> Redirecting to login...
        </div>
      )}

      <div>
        <label htmlFor="Email" className="dark:text-white">
          Email
        </label>
        <div className="relative text-white-dark">
          <input
            id="Email"
            type="email"
            placeholder="Enter Email"
            className="form-input ps-10 placeholder:text-white-dark"
            value={formData.email}
            onChange={handleChange}
            required
          />
          <span className="absolute start-4 top-1/2 -translate-y-1/2">
            <IconMail fill />
          </span>
        </div>
      </div>

      {/* UPDATED BUTTON WITH LOGIN-PAGE STYLE */}
      <button
        type="submit"
        disabled={loading}
        className="w-full
          bg-[radial-gradient(circle,#1d8be0_0%,#6cb655_100%)]
          hover:opacity-95 transition-all duration-300
          hover:shadow-[0_0_30px_rgba(255,255,255,0.20)]
          hover:scale-[1.015]
          text-white text-lg font-medium py-3 rounded-lg mt-6"
      >
        {loading ? 'Sending...' : 'RECOVER'}
      </button>
    </form>
  );
};

export default ComponentsAuthResetPasswordForm;