'use client';

import { useState } from 'react';
import axios from 'axios';
import Link from 'next/link';
import IconMail from '@/components/icon/icon-mail';
import { ApiServerBaseUrl } from '@/utils/baseurl.utils';

export default function ForgotPasswordForm() {
    const [email, setEmail] = useState('');
    const [loading, setLoading] = useState(false);
    const [msg, setMsg] = useState('');
    const [err, setErr] = useState('');

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setErr('');
        setMsg('');

        if (!email) {
            setErr('Email is required');
            return;
        }

        setLoading(true);
        try {
            await axios.post(`${ApiServerBaseUrl}/auth/forgot-password`, { email });
            setMsg('Password reset link sent to your email');
        } catch (error: any) {
            setErr(error.response?.data?.error || 'Something went wrong');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="relative group w-full max-w-[420px]">

            {/* ✅ Hover Gradient Overlay */}
            <div
                className="
                    absolute inset-0 rounded-3xl
                    bg-gradient-to-br from-blue-700/20 via-transparent to-pink-600/20
                    opacity-0 group-hover:opacity-100
                    transition-opacity duration-500
                "
            />

            {/* ✅ Card */}
            <div className="relative z-10 bg-[#0f1022] rounded-3xl p-8 shadow-2xl border border-white/10">

                {/* ✅ Gradient Heading */}
                <h1
                    className="
                        text-3xl font-extrabold text-center mb-2
                        bg-gradient-to-r from-blue-500 to-pink-500
                        bg-clip-text text-transparent
                    "
                >
                    Forgot Password
                </h1>

                <p className="text-gray-400 text-sm text-center mb-6">
                    Enter your email to receive a reset link
                </p>

                {err && (
                    <p className="text-red-500 text-sm text-center mb-3">{err}</p>
                )}
                {msg && (
                    <p className="text-green-500 text-sm text-center mb-3">{msg}</p>
                )}

                <form onSubmit={handleSubmit} className="space-y-5">

                    {/* ✅ Email Input (Dark on all devices) */}
                    <div className="relative">
                        <input
                            type="email"
                            placeholder="Email address"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            className="
                                w-full bg-[#15162e] text-white
                                rounded-lg ps-10 py-3 outline-none
                                border border-white/10
                                focus:border-blue-500
                                placeholder-gray-400
                            "
                        />
                        <span className="absolute start-3 top-1/2 -translate-y-1/2 text-gray-300">
                            <IconMail fill />
                        </span>
                    </div>

                    {/* ✅ Button with SAME Dashboard Gradient Feel */}
                    <button
                        type="submit"
                        disabled={loading}
                        className="
                            relative w-full py-3 rounded-xl
                            font-semibold text-white
                            bg-gradient-to-r from-blue-600 to-pink-500
                            shadow-lg transition-all
                            hover:opacity-95 hover:scale-[1.02]
                            disabled:opacity-60
                        "
                    >
                        {loading ? 'Sending...' : 'Send Reset Link'}
                    </button>
                </form>

                {/* ✅ Footer */}
                <p className="text-center text-sm text-gray-400 mt-6">
                    Remembered your password?{' '}
                    <Link href="/login" className="text-blue-400 hover:underline">
                        Login
                    </Link>
                </p>
            </div>
        </div>
    );
}