"use client";

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

const RecPasswordNewPage = () => {
  const router = useRouter();
  const [password, setPassword] = useState("");
  const [repeatPassword, setRepeatPassword] = useState("");
  const [error, setError] = useState("");

  const isFormValid =
    password.length >= 6 && repeatPassword.length >= 6 && password === repeatPassword;

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

    if (!isFormValid) {
      if (password !== repeatPassword) {
        setError("Пароли не совпадают");
      } else {
        setError("Пароль должен быть не короче 6 символов");
      }
      return;
    }

    setError("");
    console.log("Новый пароль установлен:", password);
    // TODO: запрос на бэк и редирект на страницу логина
    router.push("/"); // например, на авторизацию
  };

  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 ml-5 text-center font-montserrat text-white font-extrabold text-xl sm:text-2xl">
            Восстановление пароля
          </span>
          <span className="w-[60px]" />
        </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-[#DFDFDF]">
              Новый пароль
            </label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(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"
            />
          </div>

          {/* Повторите пароль */}
          <div className="space-y-1">
            <label className="block.font-montserrat font-extrabold text-xs text-[#DFDFDF]">
              Повторите пароль
            </label>
            <input
              type="password"
              value={repeatPassword}
              onChange={(e) => setRepeatPassword(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"
            />
          </div>

          {error && (
            <p className="text-[11px] text-red-200 font-montserrat text-center">
              {error}
            </p>
          )}

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

export default RecPasswordNewPage;