"use client"

import { useEffect } from "react"
import { AnimatePresence, motion } from "framer-motion"
import { X } from "lucide-react"

/**
 * La modale du site.
 *
 * Le dessin était jusqu'ici recopié d'un composant à l'autre : voile noir
 * flouté, panneau blanc à filet rouge, barre de tête avec sa pastille de
 * fermeture à gauche. Il est réuni ici pour de bon, afin qu'une retouche
 * profite à tout le site plutôt qu'à un seul écran.
 *
 * Sur téléphone, la modale monte du bas et occupe toute la hauteur ; à partir
 * de la tablette, elle se centre et se borne. C'est le comportement qu'ont
 * déjà les modales de certifications, de localisations et d'actualités.
 */
export default function Modale({
  ouverte,
  titre,
  onFermer,
  taille = "moyenne",
  pied,
  children,
}: {
  ouverte: boolean
  /** Affiché dans la barre de tête, en petites capitales. */
  titre: string
  onFermer: () => void
  /** Largeur du panneau au-delà du téléphone. */
  taille?: "moyenne" | "large"
  /** Barre d'actions collée en bas, hors de la zone qui défile. */
  pied?: React.ReactNode
  children: React.ReactNode
}) {
  // Échap ferme, et la page derrière cesse de défiler tant que la modale est
  // ouverte : sans cela, le doigt fait glisser le contenu du dessous.
  useEffect(() => {
    if (!ouverte) return
    const surTouche = (e: KeyboardEvent) => { if (e.key === "Escape") onFermer() }
    document.addEventListener("keydown", surTouche)
    document.body.style.overflow = "hidden"
    document.body.classList.add("modal-open")
    return () => {
      document.removeEventListener("keydown", surTouche)
      document.body.style.overflow = ""
      document.body.classList.remove("modal-open")
    }
  }, [ouverte, onFermer])

  const largeur = taille === "large" ? "sm:max-w-4xl" : "sm:max-w-2xl"

  return (
    <AnimatePresence>
      {ouverte && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.25 }}
          className="fixed inset-0 z-50 flex items-end justify-center bg-black/70 backdrop-blur-sm sm:items-center sm:p-6 lg:p-12"
          onClick={onFermer}
          role="dialog"
          aria-modal="true"
          aria-label={titre}
        >
          <motion.div
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 40 }}
            transition={{ duration: 0.28, ease: "easeOut" }}
            /* Hauteur *maximale* et non fixe : le panneau se regle sur son
               contenu. Avec une hauteur imposee, une fenetre d'un seul champ
               ouvrait un rectangle de 680 px aux trois quarts vide. Le corps
               reste en `flex-1 overflow-y-auto` : au-dela du plafond, c'est
               lui qui defile, la tete et le pied restant en place. */
            className={`relative flex max-h-[92dvh] w-full flex-col overflow-hidden bg-white shadow-2xl sm:max-h-[min(90vh,680px)] ${largeur}`}
            onClick={(e) => e.stopPropagation()}
          >
            {/* Barre de tête : la fermeture d'abord, à portée du pouce. */}
            <div className="flex flex-shrink-0 items-center gap-3 border-b border-neutral-100 bg-white px-4 py-3">
              <button
                type="button"
                onClick={onFermer}
                aria-label="Fermer"
                className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-neutral-100 transition-colors hover:bg-neutral-200"
              >
                <X className="h-4 w-4 text-gray-700" />
              </button>
              <p className="flex-1 truncate text-[10px] font-semibold uppercase tracking-widest text-gray-600">
                {titre}
              </p>
            </div>

            {/* Corps : seul le contenu défile, la tête et le pied restent en place. */}
            <div
              className="min-h-0 flex-1 overflow-y-auto bg-white [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-primary [&::-webkit-scrollbar-thumb]:rounded-full"
              style={{ scrollbarColor: "#E52621 #f3f4f6", scrollbarWidth: "thin" }}
            >
              {children}
            </div>

            {pied && (
              <div className="flex flex-shrink-0 items-center justify-end gap-2 border-t border-neutral-200 bg-white px-4 py-3">
                {pied}
              </div>
            )}
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}