"use client";

import React, { useState } from "react";
import { useRouter } from "next/navigation";

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const RecPasswordPage = () => {
    const router = useRouter();
    const [email, setEmail] = useState("");
    const [emailSent, setEmailSent] = useState(false);
    const [isLoading, setIsLoading] = useState(false);

    const isEmailValid = emailRegex.test(email);

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!isEmailValid) return;

        // имитация запроса на бэк
        try {
            setIsLoading(true);

            await new Promise((resolve) => setTimeout(resolve, 1000)); // фейковый запрос [web:254][web:264]

            setEmailSent(true);
            // навигация на ввод кода
            router.push("/recPasswordCode");
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="min-h-screen w-full bg-[#90D2F9] flex items-center justify-center px-4">
            <div className="w-full max-w-md bg-white/10 rounded-2xl p-6 sm:p-8 shadow-lg relative">
                <div className="flex items-center mb-4">
                    <button
                        type="button"
                        onClick={() => router.back()}
                        className="text-white text-sm font-montserrat hover:underline"
                    >
                        Назад
                    </button>
                    <span className="flex-1 text-center font-montserrat text-white font-extrabold text-xl sm:text-2xl">
                        Восстановление пароля
                    </span>
                    {/* Пустой блок для симметрии по ширине с кнопкой Назад */}
                    <span className="w-[60px]" />
                </div>

                {emailSent && (
                    <div
                        className="mb-4 w-full bg-green-500 text-white text-xs sm:text-sm font-montserrat px-3 py-2 rounded-xl flex items-center justify-center shadow-md"
                        role="status"
                    >
                        Если почта существует, ссылка для восстановления отправлена
                    </div>
                )}

                <form onSubmit={handleSubmit} className="mt-2 space-y-4">
                    {/* Почта */}
                    <div className="space-y-1">
                        <label className="block font-montserrat font-extrabold text-xs text-white">
                            Почта
                        </label>
                        <input
                            type="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            className="w-full rounded-full bg-white px-4 py-2 text-sm font-montserrat text-black outline-none focus:ring-2 focus:ring-blue-200"
                        />
                        {!isEmailValid && email.length > 0 && (
                            <p className="text-[11px] text-red-600 font-montserrat">
                                Введите корректный email
                            </p>
                        )}
                    </div>

                    {/* Кнопка Восстановить */}
                    <button
                        type="submit"
                        disabled={!isEmailValid || isLoading}
                        className={`mt-4 w-full rounded-full py-2 text-center font-montserrat font-extrabold text-sm transition-colors
    ${isEmailValid && !isLoading
                                ? "bg-green-500 text-white hover:bg-green-600"
                                : "bg-white text-[#C4C4C4] cursor-not-allowed"
                            }`}
                    >
                        {isLoading ? "Отправка..." : "Восстановить"}
                    </button>
                </form>
            </div>
        </div>
    );
};

export default RecPasswordPage;