"use client";

import Image from "next/image";
import ILogo from "../../../assets/img/LOGOTIPO.webp";
import IPassword from "../../../assets/icon/IPASSWORD.svg";
import IPasswordl from "../../../assets/icon/IPASSWORDRENOVAR.svg";
import React, { useState } from "react";
import DOMPurify from "dompurify";

export default function Login_Page() {
  const [formData, setFormData] = useState({ password: "", password2: "" });
  const [viewPassword, setViewPassword] = useState({
    password: false,
    password2: false,
  });
  const [error, setError] = useState<string | null>(null);
  const [viewWindows, setViewWindows] = useState(true);

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

  // Validación de las contraseñas
  const validatePasswords = (): boolean => {
    if (formData.password !== formData.password2) {
      setError("Las contraseñas no coinciden");
      return false;
    }
    setError(null);
    return true;
  };

  // Función para manejar el submit del formulario
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!validatePasswords()) return;

    // Simulación de proceso de envío
    setTimeout(() => {
      setViewWindows(false);
    }, 1000);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-black to-slate-700 flex items-center justify-center relative">
      <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>
        {viewWindows ? (
          <>
            <div>
              <h1 className="text-gray-800 font-semibold">Restablecimiento De Contraseña</h1>
              <hr />
            </div>
            <form className="pb-1 flex flex-col gap-4" onSubmit={handleSubmit} method="POST">
              <div>
                <p>Usuario: Leif</p>
              </div>
              <div className="flex flex-row items-center border border-gray-300 rounded-md p-3 shadow-sm">
                <Image onClick={() => setViewPassword({ ...viewPassword, password: !viewPassword.password })} src={IPassword} alt="Icono de contraseña" width={30} height={30} className="mr-3 cursor-pointer"/>
                <input type={viewPassword.password ? "text" : "password"} id="password" name="password" placeholder="Contraseña" className="w-full outline-none text-gray-800" autoComplete="current-password" onChange={handleInputChange} pattern="[A-Za-z0-9]{3,}" required/>
              </div>
              <div className="flex flex-row items-center border border-gray-300 rounded-md p-3 shadow-sm">
                <Image onClick={() => setViewPassword({ ...viewPassword, password2: !viewPassword.password2 })} src={IPasswordl} alt="Icono de contraseña" width={30} height={30} className="mr-3 cursor-pointer"/>
                <input type={viewPassword.password2 ? "text" : "password"} id="password2"name="password2" placeholder="Repetir contraseña" className="w-full outline-none text-gray-800" autoComplete="new-password" onChange={handleInputChange} pattern="[A-Za-z0-9]{3,}" required/>
              </div>
              {error && <p className="text-red-600">{error}</p>}
              <button type="submit"className={`${!formData.password || !formData.password2 || error? "bg-gray-400 cursor-not-allowed": "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`} disabled={!formData.password || !formData.password2 || !!error}>
                Enviar
              </button>
            </form>
          </>
        ) : (
          <div>
            <h2 className="text-center text-gray-800 font-semibold">Se ha realizado el cambio de contraseña con éxito.</h2>
          </div>
        )}
      </main>
    </div>
  );
}