"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 { IconCompte } from "@/components/icons";
import { inscrire } from "@/lib/api/auth";
import styles from "./page.module.css";

const schema = z.object({
  nom: z.string().min(1, "Le nom est requis"),
  email: z.string().min(1, "L'email est requis").email("Adresse e-mail invalide"),
  telephone: z.string().min(8, "Numéro de téléphone invalide"),
  password: z.string().min(6, "Le mot de passe doit contenir au moins 6 caractères"),
  type: z.enum(["ANNONCEUR", "POINT_DE_VENTE"]),
  pdv_adresse: z.string().optional(),
  pdv_zone: z.string().optional(),
});

type FormValues = z.infer<typeof schema>;

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

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

  const type = watch("type");

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

    try {
      await inscrire(values);
      router.push("/auth/connexion?inscription=ok");
    } catch (err) {
      if (isAxiosError(err)) {
        setErreur(err.response?.data?.detail ?? err.response?.data?.message ?? "Impossible de créer le compte.");
      } else {
        setErreur("Impossible de créer le compte.");
      }
    } finally {
      setEnvoiEnCours(false);
    }
  };

  return (
    <div className={styles.conteneur}>
      <form className={styles.carte} onSubmit={handleSubmit(onSubmit)} noValidate>
        <h1 className={styles.titre}>Créer un compte</h1>
        <p className={styles.sousTitre}>Annonceur ou point de vente, rejoignez Pubago.</p>

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

        <div className={styles.typeChoix}>
          <label className={styles.typeOption}>
            <input type="radio" value="ANNONCEUR" {...register("type")} />
            Annonceur
          </label>
          <label className={styles.typeOption}>
            <input type="radio" value="POINT_DE_VENTE" {...register("type")} />
            Point de vente
          </label>
        </div>

        <label className={styles.champ}>
          <span className={styles.label}>Nom {type === "POINT_DE_VENTE" ? "du commerce" : "complet"}</span>
          <input className={styles.input} {...register("nom")} />
          {errors.nom && <span className={styles.messageErreur}>{errors.nom.message}</span>}
        </label>

        <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}>Téléphone</span>
          <input
            type="tel"
            autoComplete="tel"
            placeholder="+229 XX XX XX XX"
            className={styles.input}
            {...register("telephone")}
          />
          {errors.telephone && (
            <span className={styles.messageErreur}>{errors.telephone.message}</span>
          )}
        </label>

        {type === "POINT_DE_VENTE" && (
          <>
            <label className={styles.champ}>
              <span className={styles.label}>Adresse du commerce</span>
              <input className={styles.input} {...register("pdv_adresse")} />
            </label>

            <label className={styles.champ}>
              <span className={styles.label}>Zone (ex : Cotonou - Cadjehoun)</span>
              <input className={styles.input} {...register("pdv_zone")} />
            </label>
          </>
        )}

        <label className={styles.champ}>
          <span className={styles.label}>Mot de passe</span>
          <PasswordField
            autoComplete="new-password"
            inputClassName={styles.input}
            {...register("password")}
          />
          {errors.password && (
            <span className={styles.messageErreur}>{errors.password.message}</span>
          )}
        </label>

        <Button
          type="submit"
          size="lg"
          className={styles.submit}
          disabled={envoiEnCours}
          icone={!envoiEnCours ? <IconCompte /> : undefined}
        >
          {envoiEnCours ? "Création..." : "Créer mon compte"}
        </Button>

        <p className={styles.pied}>
          Déjà un compte ? <Link href="/auth/connexion">Se connecter</Link>
        </p>
      </form>
    </div>
  );
}