'use client';

import { useState } from "react";
import { useRouter } from "next/navigation";
import { AuthFormField } from "../../../app/components/auth/AuthFormField";
import { TOOL_NAME } from "../../../app/config/constants";
import { login } from "../../../api/auth";
import Image from "next/image";
import company_logo from '../../../../public/assets/axents_logo.jpg';
import { useAuth } from "../../../context/AuthContext";
import { useToast } from "../../../context/ToastContext";
import { measure } from "../../../app/utils/performance";

export default function Login() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    nom: "",
    prenom: "",
    mot_de_passe: ""
  });

  const { loginUser } = useAuth();
  const { showToast } = useToast();
  const [loading, setLoading] = useState(false);

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

  const handleSubmit = async (e: React.SubmitEvent) => {
    e.preventDefault();
    if (loading) return;

    try {
      setLoading(true);
      const response = await measure("Chargement connexion", () => login(formData));
      if (response.passwordExpired || response.mustChangePassword) {
        showToast('warning', 'Votre mot de passe doit être modifié.');
        router.push("/renew-password");
        return;
      }
      loginUser(response);
      showToast('success', 'Connexion réussie.');
      router.push("/");
    }
    catch (error: any) {
      showToast('error', error.message);
      console.log(`Erreur: ${error}`);
    }
    finally {
      setLoading(false);
    }
  }

  return (
    <div className="flex flex-1 items-center justify-center p-6">
      <div className="bg-white p-12 rounded-2xl shadow-2xl w-full max-w-md text-center">

        <div className="mb-6">
          <Image
            src={company_logo}
            width={150}
            alt="Logo entreprise"
            className="mx-auto"
          />
        </div>

        <h1 className="text-3xl font-semibold text-[#1f5f4a] mb-2">Connexion</h1>
        <p className="text-[#6b7f77] mb-8">
          Accédez à votre espace {TOOL_NAME} sécurisé
        </p>

        <form className="flex flex-col gap-6" onSubmit={handleSubmit}>
          <AuthFormField label="Nom" name="nom" onChange={handleChange}
            placeholder="Nom"
            required
          />
          <AuthFormField label="Prénom" name="prenom" onChange={handleChange}
            placeholder="Prénom"
            required
          />

          <AuthFormField label="Mot de passe" type="password"
            name="mot_de_passe" onChange={handleChange}
            placeholder="••••••••" required />

          <div className="border-t border-[#edf2ef] pt-4">
            <p className="text-center text-sm text-[#6b7f77]">
              En cas d'oubli de votre mot de passe,
              <span className="font-medium text-[#2f5d4b]">
                {" "}contactez votre administrateur
              </span>
              {" "}pour obtenir une réinitialisation de votre accès.
            </p>
          </div>

          <button
            type="submit"
            disabled={loading}
            className="
    w-full
    py-3.5
    rounded-2xl
    bg-gradient-to-r
    from-[#2f7d5f]
    via-[#37906d]
    to-[#3f9b74]

    text-white
    font-semibold

    shadow-md
    shadow-[#2f7d5f]/20

    transition-all
    duration-300

    hover:-translate-y-0.5
    hover:shadow-xl

    disabled:opacity-60
    disabled:cursor-not-allowed
    disabled:hover:translate-y-0
  "
          >
            {loading ? (
              <span className="flex items-center justify-center gap-2">
                Connexion en cours...
              </span>
            ) : (
              "Se connecter"
            )}
          </button>
        </form>
      </div>
    </div>
  );
}