"use client";

import Link from 'next/link';
import Image from 'next/image';
import ILogo from '../../assets/img/LOGOTIPO.webp';
import IFlecha from '../../assets/icon/IFLECHA.webp';
import ICorreo from '../../assets/icon/ICORREO.svg';
import React, { useState, useEffect } from 'react';
import DOMPurify from 'dompurify';
import { toast, Toaster } from 'sonner';

export default function Login_Page() {

  const [formData, setFormData] = useState({ email: '' });
  const [lastSubmissionTime, setLastSubmissionTime] = useState<number | null>(null);

  // Verificar el tiempo de la última solicitud desde localStorage cuando se monta el componente
  useEffect(() => {
    const storedTime = localStorage.getItem('lastSubmissionTime');
    if (storedTime) {
      setLastSubmissionTime(parseInt(storedTime, 10));
    }
  }, []);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    const sanitizedValue = DOMPurify.sanitize(value);
    setFormData({ ...formData, [name]: sanitizedValue });
  };

  // Función para manejar el submit del formulario
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const currentTime = new Date().getTime();

    // Verifica si han pasado 5 minutos (300,000 ms) desde la última solicitud
    if (lastSubmissionTime && currentTime - lastSubmissionTime < 300000) {
      toast.dismiss();
      toast.warning('Debes esperar 5 minutos antes de intentar nuevamente.');
      return;
    }

    try {
      // Simulación de llamada a API
      await new Promise((resolve) => setTimeout(resolve, 1000)); // Simula el tiempo de espera de la API
      const simulatedResponse = { status: 200 }; // Respuesta simulada

      if (simulatedResponse.status === 200) {
        toast.success('Correo de recuperación enviado exitosamente.');
        setLastSubmissionTime(currentTime);  // Actualiza el tiempo de la última petición exitosa
        localStorage.setItem('lastSubmissionTime', currentTime.toString()); // Guarda el tiempo en localStorage
      }
    } catch (error) {
      toast.dismiss();
      toast.error('Error al enviar la solicitud. Por favor, intenta nuevamente.');
      console.log(error)
      setLastSubmissionTime(currentTime);  // Actualiza el tiempo de la última petición fallida
      localStorage.setItem('lastSubmissionTime', currentTime.toString()); // Guarda el tiempo en localStorage
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-black to-slate-700 flex items-center justify-center relative">
      <header className="absolute top-4 left-4 hover:border-b hover:border-white">
        <Link href="/" className="text-gray-200 flex items-center text-small sm:text-sm md:text-medium" prefetch={false}>
          <Image src={IFlecha} alt="Icono flecha para consulta de documentos" width={16} height={16} className="mr-2 rotate-180 " />
          Login
        </Link>
      </header>
      <main className="bg-white gap-6 text-black w-11/12 sm:w-8/12 md:w-6/12 lg:w-5/12 xl:w-4/12 2xl:w-3/12 p-8 flex flex-col rounded-lg shadow-lg">
        <div className="flex justify-center mb-4">
          <Image src={ILogo} alt="Logo de la empresa" className="w-40 h-auto" priority />
        </div>
        <div>
            <h1 className=' text-gray-800  font-semibold'>Recuperación de Contraseña</h1>
            <hr />
        </div>
        <form className=" pb-1 flex flex-col gap-6" onSubmit={handleSubmit} method="POST">
          <div className="flex flex-row items-center border border-gray-300 rounded-md p-3 shadow-sm">
            <Image src={ICorreo} alt="Icono de usuario" width={30} height={30} className="mr-3" />
            <input type="email" id="email" name="email" pattern="[A-Za-z0-9\\-_@\\.]{3,}" placeholder="Correo Electrónico" className="w-full outline-none text-gray-800" value={formData.email} onChange={handleInputChange} autoComplete="email" required/>
          </div>
          <button type="submit" className="bg-blue-700 hover:bg-blue-900  p-1 py-2 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300">Enviar</button>
        </form>
      </main>
      <Toaster richColors/>
    </div>
  );
}