"use client";

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

const RecPasswordCodePage = () => {
    const router = useRouter();
    const [code, setCode] = useState("");
    const [error, setError] = useState("");

    const [secondsLeft, setSecondsLeft] = useState(60);
    const [isResending, setIsResending] = useState(false);

    const isCodeValid = code.length === 6;
    const canResend = secondsLeft === 0 && !isResending;

    // таймер на минуту
    useEffect(() => {
        if (secondsLeft <= 0) return;

        const timer = setInterval(() => {
            setSecondsLeft((prev) => prev - 1);
        }, 1000);

        return () => clearInterval(timer);
    }, [secondsLeft]);

    const handleSubmit = (e) => {
        e.preventDefault();

        if (!isCodeValid) {
            setError("Код должен содержать 6 символов");
            return;
        }

        setError("");
        console.log("Подтверждение кода:", code);
        router.push("/home");
        // TODO: запрос на бэк и переход на страницу смены пароля
    };

    const handleChange = (e) => {
        const value = e.target.value.replace(/\D/g, "").slice(0, 6);
        setCode(value);
        if (error && value.length === 6) setError("");
    };

    const handleResend = async () => {
        if (!canResend) return;

        try {
            setIsResending(true);
            // фейковый запрос на повторную отправку кода
            await new Promise((resolve) => setTimeout(resolve, 1000));
            console.log("Повторная отправка кода на почту");
            setSecondsLeft(60);
        } finally {
            setIsResending(false);
        }
    };

    const formatTime = (sec) => {
        const m = Math.floor(sec / 60)
            .toString()
            .padStart(2, "0");
        const s = (sec % 60).toString().padStart(2, "0");
        return `${m}:${s}`;
    };

    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 justify-between mb-4">
                    <button
                        type="button"
                        onClick={() => router.back()}
                        className="text-white text-sm font-montserrat hover:underline"
                    >
                        Назад
                    </button>
                    <span className="flex-1 ml-9 text-center font-montserrat text-white font-extrabold text-xl sm:text-2xl">
                        Код подтверждения
                    </span>
                    <span className="w-[80px]" />
                </div>

                <form onSubmit={handleSubmit} className="mt-4 space-y-4">
                    <p className="font-montserrat text-white text-sm text-center">
                        Введите код из письма, отправленного на вашу почту
                    </p>

                    <div className="space-y-1">
                        <label className="block font-montserrat font-extrabold text-xs text-[#ffffff] text-center">
                            Код
                        </label>
                        <input
                            type="text"
                            inputMode="numeric"
                            value={code}
                            onChange={handleChange}
                            className="w-full rounded-full bg-white px-4 py-2 text-center tracking-[0.4em] text-sm font-montserrat text-black outline-none focus:ring-2 focus:ring-blue-200"
                            placeholder="••••••"
                        />
                        {error && (
                            <p className="text-[11px] text-red-200 font-montserrat text-center">
                                {error}
                            </p>
                        )}
                    </div>

                    <button
                        type="submit"
                        disabled={!isCodeValid}
                        className={`mt-4 w-full rounded-full py-2 text-center font-montserrat font-extrabold text-sm transition-colors
              ${isCodeValid
                                ? "bg-green-500 text-white hover:bg-green-600"
                                : "bg-white text-[#C4C4C4] cursor-not-allowed"
                            }`}
                    >
                        Подтвердить
                    </button>

                    {/* Кнопка повторной отправки кода с таймером */}
                    <div className="mt-2 flex flex-col items-center space-y-1">
                        <button
                            type="button"
                            onClick={handleResend}
                            disabled={!canResend}
                            className={`text-[12px] font-montserrat font-bold underline-offset-2 ${canResend
                                    ? "text-white hover:underline"
                                    : "text-white/50 cursor-not-allowed"
                                }`}
                        >
                            Отправить код ещё раз
                        </button>
                        <span className="text-[12px] font-montserrat text-white/80">
                            {secondsLeft > 0
                                ? `Повторная отправка через ${formatTime(secondsLeft)}`
                                : "Можно отправить код ещё раз"}
                        </span>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default RecPasswordCodePage;