"use client";

import { useState } from "react";
import Icon from "./Icon";
import { submitContactRequest } from "@/app/(public)/_actions/submit-contact";

type Status = "idle" | "submitting" | "success" | "error";

const subjects = ["Création", "Clôture", "Dépôt des comptes", "Autre"];

export default function ContactForm() {
  const [status, setStatus] = useState<Status>("idle");
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    // On capture le form AVANT l'await pour pouvoir le reset après
    // (sinon e.currentTarget est null après le tour async).
    const formEl = e.currentTarget;
    const data = new FormData(formEl);
    const payload = {
      fullName: String(data.get("fullName") ?? ""),
      company: String(data.get("company") ?? "") || undefined,
      email: String(data.get("email") ?? ""),
      phone: String(data.get("phone") ?? "") || undefined,
      subject: String(data.get("subject") ?? ""),
      message: String(data.get("message") ?? ""),
      consent: String(data.get("consent") ?? ""),
    };

    setStatus("submitting");
    setErrorMessage(null);

    try {
      const res = await submitContactRequest(payload);
      if (res.ok) {
        setStatus("success");
        formEl.reset();
      } else {
        setErrorMessage(res.error);
        setStatus("error");
      }
    } catch (err) {
      console.error(err);
      setErrorMessage(
        "Une erreur est survenue. Veuillez réessayer ou nous contacter par email."
      );
      setStatus("error");
    }
  }

  if (status === "success") {
    return (
      <div className="text-center py-16 space-y-6">
        <Icon name="task_alt" className="!text-5xl text-secondary" filled />
        <h2 className="headline-md text-primary">Message envoyé.</h2>
        <p className="body-md text-on-surface-variant max-w-md mx-auto">
          Merci pour votre confiance. Un expert Socialex vous recontacte sous
          24 heures ouvrées.
        </p>
        <button
          type="button"
          onClick={() => setStatus("idle")}
          className="btn btn-secondary"
        >
          Envoyer un autre message
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} className="space-y-12" noValidate>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-12">
        <Field
          name="fullName"
          label="Nom complet"
          placeholder="Jean-Pierre Duchamp"
          required
        />
        <Field
          name="company"
          label="Entreprise"
          placeholder="Duchamp & Associés"
        />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-12">
        <Field
          name="email"
          label="Email"
          type="email"
          placeholder="jp.duchamp@societe.com"
          required
        />
        <Field
          name="phone"
          label="Téléphone"
          type="tel"
          placeholder="Optionnel"
        />
      </div>

      <SelectField
        name="subject"
        label="Sujet d'intérêt"
        options={subjects}
        required
      />

      <div className="space-y-3 group">
        <label
          htmlFor="message"
          className="eyebrow !text-on-surface-variant block"
        >
          Détails de votre demande
        </label>
        <textarea
          id="message"
          name="message"
          rows={4}
          required
          minLength={20}
          placeholder="Comment pouvons-nous vous accompagner ?"
          className="w-full bg-transparent border-0 border-b border-outline-variant py-4 focus:ring-0 focus:border-secondary body-lg placeholder:text-outline-variant resize-none transition-colors outline-none"
        />
      </div>

      <label className="flex items-start gap-3 text-sm text-on-surface-variant cursor-pointer">
        <input
          type="checkbox"
          name="consent"
          required
          className="mt-1 w-4 h-4 accent-primary"
        />
        <span>
          J'accepte que mes informations soient utilisées pour traiter ma
          demande conformément à la{" "}
          <a href="/politique-confidentialite" className="underline">
            politique de confidentialité
          </a>
          .
        </span>
      </label>

      <div className="pt-4 flex justify-end">
        <button
          type="submit"
          disabled={status === "submitting"}
          className="group flex items-center gap-4 bg-primary text-on-primary px-12 py-5 font-serif text-base tracking-widest uppercase hover:bg-secondary transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {status === "submitting" ? "Envoi…" : "Envoyer la demande"}
          <Icon
            name="arrow_forward"
            className="transition-transform group-hover:translate-x-2"
          />
        </button>
      </div>

      {status === "error" && (
        <p className="text-error body-md text-right">
          {errorMessage ??
            "Une erreur est survenue. Veuillez réessayer ou nous contacter par email."}
        </p>
      )}
    </form>
  );
}

function Field({
  name,
  label,
  type = "text",
  required = false,
  placeholder,
}: {
  name: string;
  label: string;
  type?: string;
  required?: boolean;
  placeholder?: string;
}) {
  return (
    <div className="space-y-3 group">
      <label htmlFor={name} className="eyebrow !text-on-surface-variant block">
        {label}
        {required && " *"}
      </label>
      <input
        id={name}
        name={name}
        type={type}
        required={required}
        placeholder={placeholder}
        className="w-full bg-transparent border-0 border-b border-outline-variant py-4 focus:ring-0 focus:border-secondary body-lg placeholder:text-outline-variant transition-colors outline-none"
      />
    </div>
  );
}

function SelectField({
  name,
  label,
  options,
  required = false,
}: {
  name: string;
  label: string;
  options: string[];
  required?: boolean;
}) {
  return (
    <div className="space-y-3 group">
      <label htmlFor={name} className="eyebrow !text-on-surface-variant block">
        {label}
        {required && " *"}
      </label>
      <select
        id={name}
        name={name}
        required={required}
        defaultValue=""
        className="w-full bg-transparent border-0 border-b border-outline-variant py-4 focus:ring-0 focus:border-secondary body-lg appearance-none cursor-pointer transition-colors outline-none"
      >
        <option value="" disabled>
          Sélectionnez une catégorie
        </option>
        {options.map((o) => (
          <option key={o} value={o}>
            {o}
          </option>
        ))}
      </select>
    </div>
  );
}