"use client";

import { useEffect, useState } from "react";
import { Sparkle, X } from "@phosphor-icons/react";

const MODAL_KEY = "icr_devis_shown";
const DELAY_MS = 22000;

/* Popup devis : déclenchée après 22 s OU à l'intention de sortie
   (souris vers le haut de la fenêtre). Une seule fois par session. */
export default function DevisModal() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    try {
      if (sessionStorage.getItem(MODAL_KEY)) return;
    } catch {
      return; /* sessionStorage indisponible : pas de popup */
    }

    const show = () => {
      try {
        if (sessionStorage.getItem(MODAL_KEY)) return;
        sessionStorage.setItem(MODAL_KEY, "1");
      } catch {}
      setOpen(true);
      cleanup();
    };

    const exitIntent = (e: MouseEvent) => {
      if (e.clientY <= 0) show();
    };
    const timer = setTimeout(show, DELAY_MS);

    function cleanup() {
      clearTimeout(timer);
      document.removeEventListener("mouseleave", exitIntent);
    }

    document.addEventListener("mouseleave", exitIntent);
    return cleanup;
  }, []);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

  if (!open) return null;

  const close = () => setOpen(false);

  return (
    <div className="modal">
      <button className="modal-overlay" aria-label="Fermer la fenêtre" onClick={close} />
      <div className="modal-card" role="dialog" aria-modal="true" aria-labelledby="devis-modal-title">
        <button className="modal-close" aria-label="Fermer la fenêtre" onClick={close}>
          <X aria-hidden="true" />
        </button>
        <span className="modal-icon">
          <Sparkle size={26} aria-hidden="true" />
        </span>
        <h3 id="devis-modal-title">Un projet web à La Réunion ?</h3>
        <p>
          Profitez d&apos;un <strong>audit gratuit</strong> de votre site internet ou de votre
          fiche Google Business. Sans engagement.
        </p>
        <a className="btn btn-primary" href="#devis" onClick={close}>
          Demander un audit gratuit
        </a>
        <button className="modal-dismiss" onClick={close}>
          Non merci, je continue ma visite
        </button>
      </div>
    </div>
  );
}