"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { isAxiosError } from "axios";
import Button from "@/components/Button";
import PasswordField from "@/components/PasswordField";
import { IconCadenas } from "@/components/icons";
import { login } from "@/lib/api/auth";
import { useAuthStore } from "@/store/auth";
import styles from "./page.module.css";

const schema = z.object({
  email: z.string().min(1, "L'email est requis").email("Adresse e-mail invalide"),
  password: z.string().min(1, "Le mot de passe est requis"),
});

type FormValues = z.infer<typeof schema>;

export default function ConnexionPage() {
  const router = useRouter();
  const connecte = useAuthStore((state) => state.connecte);
  const [erreur, setErreur] = useState<string | null>(null);
  const [envoiEnCours, setEnvoiEnCours] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({ resolver: zodResolver(schema) });

  const onSubmit = async (values: FormValues) => {
    setErreur(null);
    setEnvoiEnCours(true);

    try {
      const session = await login(values.email, values.password);
      connecte(session);
      router.push(session.user.roles.includes("ROLE_ADMIN") ? "/admin/dashboard" : "/dashboard");
    } catch (err) {
      if (isAxiosError(err)) {
        setErreur(err.response?.data?.detail ?? "Impossible de se connecter. Réessayez.");
      } else {
        setErreur("Impossible de se connecter. Réessayez.");
      }
    } finally {
      setEnvoiEnCours(false);
    }
  };

  return (
    <div className={styles.conteneur}>
      <form className={styles.carte} onSubmit={handleSubmit(onSubmit)} noValidate>
        <h1 className={styles.titre}>Connexion</h1>
        <p className={styles.sousTitre}>Accédez à votre espace annonceur ou point de vente.</p>

        {erreur && <p className={styles.erreur}>{erreur}</p>}

        <label className={styles.champ}>
          <span className={styles.label}>Email</span>
          <input
            type="email"
            autoComplete="email"
            className={styles.input}
            {...register("email")}
          />
          {errors.email && <span className={styles.messageErreur}>{errors.email.message}</span>}
        </label>

        <label className={styles.champ}>
          <span className={styles.label}>Mot de passe</span>
          <PasswordField
            autoComplete="current-password"
            inputClassName={styles.input}
            {...register("password")}
          />
          {errors.password && (
            <span className={styles.messageErreur}>{errors.password.message}</span>
          )}
          <Link href="/auth/mot-de-passe-oublie" className={styles.oublie}>
            Mot de passe oublié ?
          </Link>
        </label>

        <Button
          type="submit"
          size="lg"
          className={styles.submit}
          disabled={envoiEnCours}
          icone={!envoiEnCours ? <IconCadenas /> : undefined}
        >
          {envoiEnCours ? "Connexion..." : "Se connecter"}
        </Button>

        <p className={styles.pied}>
          Pas encore de compte ? <Link href="/auth/inscription">Créer un compte</Link>
        </p>
      </form>
    </div>
  );
}