"use client";

import { useCallback, useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { NewsletterForm } from "./newsletter-form";

/**
 * Modale newsletter — conçue pour être aussi peu intrusive qu'une modale peut
 * l'être.
 *
 * FERMETURE — Radix Dialog fournit nativement tout ce qu'on attend, et c'est
 * précisément pourquoi on ne réécrit pas de modale à la main :
 *   - touche Échap
 *   - clic en dehors du panneau
 *   - bouton de fermeture au clavier comme à la souris
 *   - piège de focus pendant l'ouverture, restitution du focus à la fermeture
 *   - `aria-modal` et masquage du reste de la page aux lecteurs d'écran
 * Toute fermeture, quelle qu'elle soit, est définitive (voir MÉMOIRE).
 *
 * DÉCLENCHEMENT — jamais sur une minuterie. Deux signaux d'intention seulement :
 *   - la souris quitte la fenêtre par le haut (desktop : intention de départ)
 *   - 60 % de la page ont été parcourus (mobile : la lecture est engagée)
 *
 * EXCLUSIONS — jamais sur /contact/ ni dans les outils : interrompre une
 * conversion en cours pour proposer une newsletter serait un mauvais échange,
 * le rendez-vous valant bien plus qu'un abonnement.
 *
 * MÉMOIRE — fermée ou soumise, elle ne revient jamais. Stocké dans
 * localStorage ; si celui-ci est indisponible (mode privé strict, quota), on
 * considère que la modale a déjà été vue plutôt que de risquer de la répéter.
 */

const STORAGE_KEY = "acieb:newsletter-popup-seen";
const SCROLL_THRESHOLD = 0.6;
const EXCLUDED_PREFIXES = ["/contact", "/outils"];

function hasBeenSeen(): boolean {
  try {
    return window.localStorage.getItem(STORAGE_KEY) === "1";
  } catch {
    // Pas d'accès au stockage : on s'abstient plutôt que d'insister.
    return true;
  }
}

function markSeen(): void {
  try {
    window.localStorage.setItem(STORAGE_KEY, "1");
  } catch {
    // Sans mémoire, on ne peut rien garantir — mais on n'échoue pas non plus.
  }
}

export function NewsletterPopup() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  const dismiss = useCallback((next: boolean) => {
    setOpen(next);
    if (!next) markSeen();
  }, []);

  useEffect(() => {
    const excluded = EXCLUDED_PREFIXES.some((p) => pathname?.startsWith(p));
    if (excluded || hasBeenSeen()) return;

    // Un utilisateur qui a demandé moins d'animations n'a pas demandé moins
    // d'interruptions, mais l'esprit du réglage est le même : on s'abstient.
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

    let done = false;
    const trigger = () => {
      if (done) return;
      done = true;
      cleanup();
      setOpen(true);
    };

    // Desktop : la souris sort par le haut de la fenêtre.
    const onMouseOut = (e: MouseEvent) => {
      if (e.clientY <= 0 && !e.relatedTarget) trigger();
    };

    // Mobile : 60 % de la page parcourus.
    const onScroll = () => {
      const scrollable = document.body.scrollHeight - window.innerHeight;
      if (scrollable <= 0) return;
      if (window.scrollY / scrollable >= SCROLL_THRESHOLD) trigger();
    };

    const cleanup = () => {
      document.removeEventListener("mouseout", onMouseOut);
      window.removeEventListener("scroll", onScroll);
    };

    document.addEventListener("mouseout", onMouseOut);
    window.addEventListener("scroll", onScroll, { passive: true });
    return cleanup;
  }, [pathname]);

  return (
    <Dialog open={open} onOpenChange={dismiss}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold tracking-tight text-slate-900">
            Le marché de l&apos;énergie, décrypté
          </DialogTitle>
          <DialogDescription className="text-sm text-slate-600">
            Analyses de prix, évolutions réglementaires et leviers
            d&apos;économies pour les professionnels. Rien d&apos;autre.
          </DialogDescription>
        </DialogHeader>

        <NewsletterForm
          idPrefix="newsletter-popup"
          className="mt-2"
          // Soumettre vaut engagement : on ne la remontre jamais, même si
          // l'utilisateur ne referme pas tout de suite.
          onSuccess={markSeen}
        />
      </DialogContent>
    </Dialog>
  );
}