import { useState, useEffect, useCallback } from "react";
import { X, Gift, ArrowRight, MessageCircle } from "lucide-react";

const WHATSAPP_EXIT_URL =
  "https://wa.me/5554981122381?text=Vi%20a%20oferta%20especial%20no%20site%20e%20quero%20garantir%20minha%20instala%C3%A7%C3%A3o%20gr%C3%A1tis%20da%20Ararabot";

const STORAGE_KEY = "ararabot_exit_intent_shown";

export function ExitIntentModal() {
  const [open, setOpen] = useState(false);

  const handleMouseLeave = useCallback((e: MouseEvent) => {
    if (e.clientY < 10) {
      const alreadyShown = sessionStorage.getItem(STORAGE_KEY);
      if (!alreadyShown) {
        sessionStorage.setItem(STORAGE_KEY, "1");
        setOpen(true);
      }
    }
  }, []);

  useEffect(() => {
    const timer = setTimeout(() => {
      document.addEventListener("mouseleave", handleMouseLeave);
    }, 7000);
    return () => {
      clearTimeout(timer);
      document.removeEventListener("mouseleave", handleMouseLeave);
    };
  }, [handleMouseLeave]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm animate-in fade-in">
      <div className="relative w-full max-w-md rounded-3xl border border-accent/40 bg-card/95 p-8 shadow-elevated backdrop-blur">
        <button
          type="button"
          onClick={() => setOpen(false)}
          aria-label="Fechar oferta"
          className="absolute right-4 top-4 flex h-9 w-9 items-center justify-center rounded-full bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground transition"
        >
          <X className="h-4 w-4" />
        </button>

        <div className="flex flex-col items-center text-center">
          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-neon shadow-neon">
            <Gift className="h-8 w-8 text-neon-foreground" />
          </div>

          <div className="mt-2 inline-flex items-center gap-1.5 rounded-full bg-destructive/15 px-3 py-1 text-xs font-semibold text-destructive animate-pulse">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-destructive opacity-75" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-destructive" />
            </span>
            VAGAS LIMITADAS — SÓ PARA QUEM ESTÁ SAINDO AGORA
          </div>

          <h2 className="mt-4 text-2xl font-bold leading-snug">
            <span className="text-gradient-neon">PARE!</span> Você está prestes a perder R$ 2.000
          </h2>

          <p className="mt-3 text-sm text-muted-foreground leading-relaxed">
            Enquanto outras empresas pagam <strong className="text-foreground">R$ 2.000</strong> pelo setup do Diego Bencke, você pode levar a <strong className="text-foreground">instalação completa DE GRAÇA</strong> — mas essa janela some quando você fecha esta página. Só restam poucas vagas para junho. Fechar agora = deixar seu concorrente levar sua vaga.
          </p>

          <div className="mt-2 rounded-xl bg-muted/60 p-3 text-xs text-muted-foreground">
            <strong className="text-foreground">⚡ Últimas 3 vagas restantes</strong> — Normalmente R$ 2.000, hoje <span className="text-gradient-neon font-bold">R$ 0</span>. Oferta some em breve.
          </div>

          <div className="mt-4 flex w-full flex-col gap-3">
            <a
              href={WHATSAPP_EXIT_URL}
              target="_blank"
              rel="noopener"
              className="group inline-flex items-center justify-center gap-2 rounded-full bg-gradient-neon px-6 py-3.5 text-sm font-bold text-neon-foreground shadow-neon animate-pulse-glow transition hover:scale-[1.03]"
            >
              <MessageCircle className="h-4 w-4" />
              SIM! Quero minha instalação gratuita agora
              <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
            </a>
            <button
              type="button"
              onClick={() => setOpen(false)}
              className="text-xs text-muted-foreground hover:text-foreground transition"
            >
              Não, prefiro pagar R$ 2.000 depois ou perder para a concorrência
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}