"use client"

import { useState, useEffect } from "react"
import { ExternalLink, Maximize2, X, ArrowLeft, ArrowRight } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { motion, AnimatePresence } from "framer-motion"
import { useInView } from "react-intersection-observer"
import SectionLabel from "@/components/section-label"
import { useTranslations, useLocale } from "next-intl"
import { useCookieConsent } from "./cookie-consent"
import CookieIframePlaceholder from "./cookie-iframe-placeholder"

export default function LocationsSection() {
  const t = useTranslations('contact')
  const { consent } = useCookieConsent()
  const locale = useLocale()
  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.1 })
  const [modalIndex, setModalIndex] = useState<number | null>(null)

  const mapLang = locale === 'en' ? 'en' : 'fr'

  // `satellite` ajoute &t=k à l'URL Google Maps. Les deux sites sont désormais
  // en vue plan ; le mécanisme est conservé pour pouvoir y revenir site par site.
  const locations = [
    {
      labelKey: 'headquarters',
      addressKey: 'headquartersAddress',
      addressNote: locale === 'en' ? 'Near the Presidential Palace' : 'Près du palais de la République',
      coords: { lat: 14.665754, lng: -17.435310 },
      // La vignette du siege reprend le cadrage de celle de la raffinerie : meme
      // zoom, meme centre de vue. Seul le marqueur change, pose par `q` sur le
      // siege. Le centre est decale vers le nord-est pour que la presqu'ile
      // occupe le cadre sans ocean inutile.
      zoom: 11,
      centre: { lat: 14.832000, lng: -17.215000 },
      satellite: false,
    },
    {
      labelKey: 'refinery',
      addressKey: 'factoryAddress',
      addressNote: locale === 'en' ? 'Near Sicap Mbao roundabout' : 'Près du rond point Sicap Mbao',
      coords: { lat: 14.742100, lng: -17.347433 },
      // Le site de Mbao est dans les terres : centre sur lui, le cadrage large
      // situe deja la raffinerie entre Dakar et Rufisque.
      zoom: 11,
      centre: undefined as { lat: number; lng: number } | undefined,
      satellite: false,
    },
  ]

  const current = modalIndex !== null ? locations[modalIndex] : null

  const prev = () => setModalIndex(i => i !== null ? (i - 1 + locations.length) % locations.length : null)
  const next = () => setModalIndex(i => i !== null ? (i + 1) % locations.length : null)

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setModalIndex(null)
      if (e.key === "ArrowLeft" && modalIndex !== null) prev()
      if (e.key === "ArrowRight" && modalIndex !== null) next()
    }
    document.addEventListener("keydown", onKey)
    return () => document.removeEventListener("keydown", onKey)
  }, [modalIndex])

  useEffect(() => {
    const open = modalIndex !== null
    document.body.style.overflow = open ? "hidden" : ""
    document.body.classList.toggle("modal-open", open)
    return () => {
      document.body.style.overflow = ""
      document.body.classList.remove("modal-open")
    }
  }, [modalIndex])

  return (
    <section className="pt-10 sm:pt-12 pb-24 bg-slate-100 relative overflow-hidden" ref={ref}>
      <div className="max-w-[98%] mx-auto px-2 sm:px-4 lg:px-6">
        <div className="max-w-[98%] mx-auto">
          <SectionLabel title={t('locations')} size="small" variant="overline" />
        </div>
      </div>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16">
        <div className="grid sm:grid-cols-2 gap-6 sm:gap-8">
          {locations.map((loc, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, x: index === 0 ? -30 : 30 }}
              animate={inView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.2 + index * 0.1 }}
              /* Empilees sur telephone, les deux implantations se suivaient sans
                 rien qui les separe. Un filet marque la fin de la premiere.
                 Inutile a partir de sm, ou elles sont cote a cote. */
              className={index > 0 ? "border-t border-neutral-200 pt-8 sm:border-t-0 sm:pt-0" : ""}
            >
              {/* Intitulé du site, au-dessus de la carte. Passé en h3 : c'est
                  un vrai titre dans la hiérarchie du document, sous le h2 de la
                  section, et non plus un surtitre discret. */}
              <div className="mb-4 text-center">
                <h3 className="text-lg sm:text-xl font-bold text-gray-900">{t(loc.labelKey)}</h3>
                <div className="h-0.5 w-10 bg-primary mx-auto mt-3" aria-hidden />
              </div>

              {/* La carte ne contient que le plan : aucun rembourrage, la zone
                  cartographique occupe exactement le cadre. */}
              {/* Pas de `hover:scale` ici : le navigateur rasterise la carte une fois
                puis etire l'image obtenue, ce qui rend les tuiles et les libelles
                flous au survol. Le decollement et l'ombre suffisent a marquer le
                survol, sans toucher au rendu. */}
              {/* `!py-0 !gap-0` : le composant Card impose un rembourrage vertical
                  de 24 px et une gouttiere entre ses enfants. Sans le `!`, les
                  deux classes ont la meme specificite et c'est l'ordre d'emission
                  dans la feuille qui tranche, au profit de `py-6`. */}
              <Card className="!rounded-none border-4 border-white transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-1 overflow-hidden group !py-0 !gap-0 cursor-pointer">
                <CardContent className="!p-0">
                  <div className="relative">
                    {/* Rapport de la zone cartographique, c'est lui qui commande
                        la hauteur de la carte, sa largeur étant fixée par la grille. */}
                    {/* Rapport de la zone cartographique, c'est lui qui commande
                        la hauteur de la carte, sa largeur étant fixée par la grille. */}
                    <div className="aspect-[16/9] relative overflow-hidden bg-gray-100">
                      {consent === "accepted" ? (
                        <>
                          {/* La vignette est une image de reperage, pas une carte
                              a manipuler. L'iframe deborde de 88 px de chaque
                              cote et de 52 px en bas : la commande de
                              deplacement, la bascule satellite et le bandeau du
                              bas tombent hors du cadre, que `overflow-hidden`
                              rogne. Un voile transparent neutralise en plus le
                              zoom a la molette et le glisser.

                              ATTENTION : ce recadrage masque aussi l'attribution
                              Google, que ses conditions d'utilisation demandent
                              de laisser visible. Choix assume par le client. La
                              carte du modal, elle, la conserve et reste
                              pleinement manipulable. */}
                          <iframe
                            src={`https://www.google.com/maps?q=${loc.coords.lat},${loc.coords.lng}${loc.centre ? `&ll=${loc.centre.lat},${loc.centre.lng}` : ''}&hl=${mapLang}&z=${loc.zoom}&output=embed${loc.satellite ? '&t=k' : ''}`}
                            height="100%"
                            style={{ border: 0, width: "calc(100% + 176px)", height: "calc(100% + 52px)", left: "-88px", top: 0 }}
                            loading="lazy"
                            referrerPolicy="no-referrer-when-downgrade"
                            tabIndex={-1}
                            aria-hidden
                            className="absolute"
                          />
                          {/* Ce voile neutralisait deja le zoom et le glisser
                              sur la vignette. Il porte desormais l'ouverture du
                              plan : toute la carte est cliquable, et non le
                              seul bouton, que rien n'obligeait a viser. */}
                          <button
                            type="button"
                            onClick={() => setModalIndex(index)}
                            aria-label={
                              locale === "en"
                                ? `Open the map of ${t(loc.labelKey)}`
                                : `Ouvrir le plan de ${t(loc.labelKey)}`
                            }
                            className="absolute inset-0 z-[5] cursor-pointer"
                          />
                        </>
                      ) : (
                        <CookieIframePlaceholder
                          type="maps"
                          className="absolute inset-0 w-full h-full"
                        />
                      )}
                    </div>
                    {/* Bouton Maps, z-10 pour passer au-dessus de l'iframe */}
                    <button
                      type="button"
                      onClick={() => setModalIndex(index)}
                      className="absolute top-3 right-3 z-10 bg-primary hover:bg-primary/90 text-white px-3 py-1.5 flex items-center gap-1.5 text-xs font-semibold transition-colors duration-200 shadow-sm"
                    >
                      <Maximize2 size={13} />
                      Maps
                    </button>
                  </div>
                </CardContent>
              </Card>

              {/* Adresse, sous la carte, centrée sur sa largeur. Ni intitulé ni
                  filet ici : les deux sont remontés au-dessus de la carte, et le
                  liseré vertical qui accompagnait le texte a été retiré, un filet
                  à gauche d'un bloc centré contredisant le centrage. */}
              <div className="mt-5 space-y-0.5 text-center">
                <p className="text-sm font-semibold text-neutral-700">{t(loc.addressKey)}</p>
                <p className="text-sm text-neutral-500">{loc.addressNote}</p>
                <p className="text-sm text-neutral-500">{t('dakarSenegal')}</p>
              </div>

            </motion.div>
          ))}
        </div>
      </div>

      {/* ── Modal navigation ── */}
      <AnimatePresence>
        {modalIndex !== null && current && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.25 }}
            className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-end lg:items-center justify-center lg:p-8"
            onClick={() => setModalIndex(null)}
          >
            <motion.div
              initial={{ opacity: 0, y: 40 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 40 }}
              transition={{ duration: 0.28, ease: "easeOut" }}
              className="relative w-full lg:max-w-5xl flex flex-col lg:flex-row overflow-hidden shadow-2xl h-[100dvh] lg:h-[min(90vh,680px)]"
              onClick={e => e.stopPropagation()}
            >

              {/* ── MOBILE : barre de tête ── */}
              <div className="lg:hidden flex items-center gap-3 bg-white border-b border-neutral-100 px-4 py-3 flex-shrink-0">
                <button
                  type="button"
                  onClick={() => setModalIndex(null)}
                  className="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-neutral-100 hover:bg-neutral-200 transition-colors rounded-full"
                >
                  <X className="w-4 h-4 text-gray-700" />
                </button>
                <div className="flex-1 min-w-0">
                  <p className="text-[9px] font-semibold uppercase tracking-widest text-primary/60 leading-none mb-0.5">
                    {locale === 'en' ? 'Location' : 'Localisation'}
                  </p>
                  <p className="text-xs font-bold text-gray-900 truncate">{t(current.labelKey)}</p>
                </div>
                <a
                  href={`https://www.google.com/maps/search/?api=1&query=${current.coords.lat},${current.coords.lng}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-2 bg-primary text-white text-[10px] font-semibold uppercase tracking-widest hover:bg-primary/90 transition-colors"
                >
                  <ExternalLink className="w-3 h-3" />
                  Maps
                </a>
              </div>

              {/* ── DESKTOP : bouton fermer absolu ── */}
              <button
                type="button"
                onClick={() => setModalIndex(null)}
                className="hidden lg:flex absolute top-3 right-3 z-20 w-8 h-8 items-center justify-center bg-black/60 hover:bg-black/90 text-white transition-colors rounded-full"
              >
                <X className="w-4 h-4" />
              </button>

              {/* ── DESKTOP : panneau gauche ── */}
              <div className="hidden lg:flex lg:w-72 flex-shrink-0 bg-white flex-col p-6 justify-between">
                <div>
                  <p className="text-[9px] font-semibold uppercase tracking-widest text-primary mb-1">
                    {locale === 'en' ? 'Location' : 'Localisation'}
                  </p>
                  <div className="h-0.5 w-8 bg-primary/70 mb-4" />
                  <h3 className="text-xl font-bold text-gray-900 mb-4 leading-tight">
                    {t(current.labelKey)}
                  </h3>
                  <div className="border-l-2 border-primary/40 pl-4 space-y-0.5 mb-6">
                    <p className="text-sm font-semibold text-neutral-700">{t(current.addressKey)}</p>
                    <p className="text-sm text-neutral-500">{current.addressNote}</p>
                    <p className="text-sm text-neutral-500">{t('dakarSenegal')}</p>
                  </div>
                  <p className="text-[10px] font-mono text-gray-400">
                    {current.coords.lat.toFixed(6)}, {current.coords.lng.toFixed(6)}
                  </p>
                </div>
                <div>
                  <a
                    href={`https://www.google.com/maps/search/?api=1&query=${current.coords.lat},${current.coords.lng}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="mt-5 inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-white text-[10px] font-semibold uppercase tracking-widest hover:bg-primary/90 transition-colors w-full justify-center"
                  >
                    <ExternalLink className="w-3 h-3" />
                    {t('openInMaps')}
                  </a>
                  <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
                    <button
                      type="button"
                      onClick={prev}
                      className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-widest text-primary hover:text-primary/70 transition-colors"
                    >
                      <ArrowLeft className="w-3.5 h-3.5" />
                      {locale === 'en' ? 'Prev.' : 'Préc.'}
                    </button>
                    <span className="text-[10px] font-mono text-primary font-bold">
                      {modalIndex + 1} / {locations.length}
                    </span>
                    <button
                      type="button"
                      onClick={next}
                      className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-widest text-primary hover:text-primary/70 transition-colors"
                    >
                      {locale === 'en' ? 'Next' : 'Suiv.'}
                      <ArrowRight className="w-3.5 h-3.5" />
                    </button>
                  </div>
                </div>
              </div>

              {/* ── Carte (mobile : flex-1, desktop : panneau droit) ── */}
              <div className="flex-1 min-h-0 bg-gray-100">
                {consent === "accepted" ? (
                  <iframe
                    key={modalIndex}
                    src={`https://www.google.com/maps?q=${current.coords.lat},${current.coords.lng}&hl=${mapLang}&z=11&output=embed${current.satellite ? '&t=k' : ''}`}
                    width="100%"
                    height="100%"
                    style={{ border: 0, display: "block", minHeight: "400px" }}
                    allowFullScreen
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                  />
                ) : (
                  <CookieIframePlaceholder
                    type="maps"
                    className="w-full h-full"
                    style={{ minHeight: "400px" }}
                  />
                )}
              </div>

              {/* ── MOBILE : barre de navigation prev/next ── */}
              <div className="lg:hidden flex items-center justify-between bg-white border-t border-neutral-200 px-5 py-3 flex-shrink-0">
                <button
                  type="button"
                  onClick={prev}
                  className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-widest text-primary hover:text-primary/70 transition-colors"
                >
                  <ArrowLeft className="w-4 h-4" />
                  {locale === 'en' ? 'Previous' : 'Précédent'}
                </button>
                <span className="text-[11px] font-mono text-gray-400 font-bold">
                  {modalIndex + 1} / {locations.length}
                </span>
                <button
                  type="button"
                  onClick={next}
                  className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-widest text-primary hover:text-primary/70 transition-colors"
                >
                  {locale === 'en' ? 'Next' : 'Suivant'}
                  <ArrowRight className="w-4 h-4" />
                </button>
              </div>

            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  )
}