"use client"

import type React from "react"
import { useState } from "react"
import { useHistory } from "react-router-dom"

import { toast } from 'sonner';
import { connect } from '../confconnect';
import { getRouteLogin } from "../shared/consts/router";
// import axios from 'axios';


//НАДО НА БЕКЕНДЕ НАСТРОИТЬ ЗАДЕРЖКУ + перебрасывает на auth/login, а надо на /login + ОТПРАВКИ ФОРМЫ И СТИЛИ ТАМ ДРУГИЕ 

const ForgotPassword: React.FC = () => {
  const history = useHistory()
  const [email, setEmail] = useState("")
  const [isSubmitted, setIsSubmitted] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  setIsSubmitted(true);

  try {
    await connect.post('/reset-password/api/add-request', { email });
        toast.success('Письмо для сброса пароля отправлено.', {
				richColors: true,
			});


      // Задержка перед переходом
      history.push(getRouteLogin());

      // Обработка ошибок, например, если пользователь не найден
      setIsSubmitted(false);

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  } catch (error: any) {
    setIsSubmitted(false);
    toast.error('Ошибка авторизации!', {
				richColors: true,
			});

    console.error(error);
  }

  // Можно убрать или оставить в зависимости от логики
  // setIsSubmitted(true); // Уже установлено в начале
}


  return (
    <div className="min-h-screen bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] flex items-center justify-center p-4">
      <div className="w-full max-w-md relative">
        {/* Back Button */}
        <button
          onClick={() => history.goBack()}
          className="absolute top-0 left-0 w-12 h-12 bg-white/10 backdrop-blur-lg rounded-xl flex items-center justify-center border border-white/20 text-white hover:bg-white/20 transition-all"
          aria-label="Go back"
        >
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
        </button>

        {/* Header */}
        <div className="text-center mb-8 mt-16">
          {" "}
          {/* Added mt-16 to push content down from back button */}
          <div className="w-20 h-20 bg-white/10 backdrop-blur-2xl rounded-2xl flex items-center justify-center mx-auto mb-4 border border-white/20 shadow-2xl">
            <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
              />
            </svg>
          </div>
          <h1 className="text-3xl font-black text-white mb-2">Забыли пароль?</h1>
          <p className="text-white/80 font-medium">
            {isSubmitted ? "Проверьте вашу почту" : "Введите email для восстановления пароля"}
          </p>
        </div>

        {/* Form */}
        <div className="glass-morphism rounded-3xl p-8 border border-white/20 shadow-2xl">
          {!isSubmitted ? (
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Email Input */}
              <div>
                <label htmlFor="email" className="block text-gray-700 text-sm font-semibold mb-2 sr-only">
                  Электронная почта
                </label>
                <div className="relative">
                  <input
                    id="email"
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="w-full bg-white rounded-xl px-4 py-3 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#2BACBE] focus:border-transparent transition-all shadow-sm"
                    placeholder="Электронная почта"
                    required
                  />
                  <svg
                    className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
                    />
                  </svg>
                </div>
              </div>
              {/* Submit Button */}
              <button
                type="submit"
                className="w-full bg-[#2BACBE] hover:bg-[#2099A8] text-white font-bold py-3 px-6 rounded-xl border border-[#2BACBE] transition-all duration-300 transform hover:scale-105 shadow-lg"
              >
                Отправить ссылку
              </button>
            </form>
          ) : (
            <div className="text-center space-y-6">
              {/* Success Icon */}
              <div className="w-16 h-16 bg-green-500/20 backdrop-blur-lg rounded-full flex items-center justify-center mx-auto border border-green-400/30">
                <svg className="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <div>
                <h3 className="text-xl font-bold text-gray-800 mb-2">Письмо отправлено!</h3>
                <p className="text-gray-700/80 text-sm leading-relaxed">
                  Мы отправили инструкции по восстановлению пароля на адрес{" "}
                  <span className="font-semibold">{email}</span>
                </p>
              </div>
              <div className="text-center">
                <p className="text-gray-700/60 text-xs mb-4">Автоматический переход через 3 секунды...</p>
                <button onClick={() => history.push(getRouteLogin())} className="text-gray-700 font-semibold hover:underline">
                  Вернуться к входу
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default ForgotPassword