"use client";

import { useState } from "react";
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 { IconEnvoi } from "@/components/icons";
import { envoyerContact } from "@/lib/api/contact";
import { urlWhatsapp } from "@/lib/utils/whatsapp";
import type { InfoUtile } from "@/types/info-utile";
import styles from "@/app/(site)/contact/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().optional(),
  sujet: z.string().min(1, "Le sujet est requis"),
  message: z.string().min(10, "Votre message doit contenir au moins 10 caractères"),
});

type FormValues = z.infer<typeof schema>;

export default function ContactForm({ infos }: { infos: InfoUtile }) {
  const [erreur, setErreur] = useState<string | null>(null);
  const [envoye, setEnvoye] = useState(false);
  const [envoiEnCours, setEnvoiEnCours] = useState(false);

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

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

    try {
      await envoyerContact(values);
      setEnvoye(true);
      reset();
    } catch (err) {
      if (isAxiosError(err)) {
        setErreur(err.response?.data?.detail ?? "Impossible d'envoyer votre message. Réessayez.");
      } else {
        setErreur("Impossible d'envoyer votre message. Réessayez.");
      }
    } finally {
      setEnvoiEnCours(false);
    }
  };

  return (
    <div className={styles.grille}>
      <form className={styles.formulaire} onSubmit={handleSubmit(onSubmit)} noValidate>
        {envoye && (
          <p className={styles.succes}>
            Votre message a bien été envoyé. Nous vous répondrons rapidement.
          </p>
        )}
        {erreur && <p className={styles.erreur}>{erreur}</p>}

        <div className={styles.ligne}>
          <label className={styles.champ}>
            <span className={styles.label}>Nom</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" className={styles.input} {...register("email")} />
            {errors.email && <span className={styles.messageErreur}>{errors.email.message}</span>}
          </label>
        </div>

        <div className={styles.ligne}>
          <label className={styles.champ}>
            <span className={styles.label}>Téléphone (optionnel)</span>
            <input type="tel" className={styles.input} {...register("telephone")} />
          </label>

          <label className={styles.champ}>
            <span className={styles.label}>Sujet</span>
            <input className={styles.input} {...register("sujet")} />
            {errors.sujet && <span className={styles.messageErreur}>{errors.sujet.message}</span>}
          </label>
        </div>

        <label className={styles.champ}>
          <span className={styles.label}>Message</span>
          <textarea rows={5} className={styles.textarea} {...register("message")} />
          {errors.message && (
            <span className={styles.messageErreur}>{errors.message.message}</span>
          )}
        </label>

        <Button
          type="submit"
          size="lg"
          className={styles.submit}
          disabled={envoiEnCours}
          icone={!envoiEnCours ? <IconEnvoi /> : undefined}
        >
          {envoiEnCours ? "Envoi..." : "Envoyer le message"}
        </Button>
      </form>

      <aside className={styles.aside}>
        {infos.numeroWhatsapp && (
          <a
            href={urlWhatsapp(infos.numeroWhatsapp)}
            target="_blank"
            rel="noopener noreferrer"
            className={styles.whatsapp}
          >
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.28-1.39a9.9 9.9 0 0 0 4.76 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.86 9.86 0 0 0 12.04 2Zm0 1.8c2.19 0 4.24.85 5.79 2.4a8.11 8.11 0 0 1 2.39 5.71c0 4.47-3.64 8.11-8.13 8.11h-.01a8.1 8.1 0 0 1-4.13-1.13l-.3-.17-3.13.82.84-3.05-.19-.31a8.06 8.06 0 0 1-1.24-4.32c0-4.47 3.64-8.06 8.11-8.06Zm-4.47 4.6c-.17 0-.44.06-.67.32-.23.26-.87.85-.87 2.07 0 1.22.89 2.4 1.01 2.57.13.17 1.74 2.77 4.29 3.78 2.12.84 2.55.67 3.01.63.46-.04 1.49-.6 1.7-1.19.21-.58.21-1.08.15-1.19-.06-.1-.23-.17-.48-.3-.25-.13-1.49-.74-1.72-.82-.23-.08-.4-.13-.57.13-.17.26-.65.82-.8 1-.15.17-.29.19-.55.06-.25-.13-1.07-.4-2.04-1.27-.75-.67-1.26-1.5-1.41-1.75-.15-.26-.02-.4.11-.53.11-.11.25-.29.38-.44.13-.15.17-.26.25-.43.08-.17.04-.32-.02-.45-.06-.13-.57-1.4-.79-1.91-.2-.5-.41-.43-.57-.44l-.48-.01Z" />
            </svg>
            <span>
              <strong>Discuter sur WhatsApp</strong>
              <span className={styles.whatsappNumero}>{infos.numeroWhatsapp}</span>
            </span>
          </a>
        )}

        <div className={styles.infoBloc}>
          <h2 className={styles.infoTitre}>Adresse</h2>
          <p>{infos.adresseSiege}</p>
        </div>

        <div className={styles.infoBloc}>
          <h2 className={styles.infoTitre}>Email</h2>
          <a href={`mailto:${infos.emailContact}`}>{infos.emailContact}</a>
        </div>

        {infos.horairesOuverture && (
          <div className={styles.infoBloc}>
            <h2 className={styles.infoTitre}>Horaires</h2>
            <p>{infos.horairesOuverture}</p>
          </div>
        )}
      </aside>
    </div>
  );
}