"use client";
import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ShieldCheck, X } from "lucide-react";

export default function PopupInfoSuivi({
  policyUrl = "/politique-confidentialite",
  storageKey = "odentas_info_suivi_ack_v1",
}: {
  policyUrl?: string;
  storageKey?: string;
}) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const alreadyAck = typeof window !== "undefined" && localStorage.getItem(storageKey);
    if (!alreadyAck) {
      const t = setTimeout(() => setOpen(true), 1200);
      return () => clearTimeout(t);
    }
  }, [storageKey]);

  const acknowledge = () => {
    try {
      localStorage.setItem(storageKey, "1");
    } catch {}
    setOpen(false);
  };

  return (
    <AnimatePresence>
      {open && (
        <motion.aside
          role="dialog"
          aria-live="polite"
          aria-label="Information sur la confidentialité et le suivi"
          initial={{ opacity: 0, y: 24, scale: 0.98 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: 24, scale: 0.98 }}
          transition={{ type: "spring", stiffness: 380, damping: 28 }}
          className="fixed left-4 bottom-4 z-[60] max-w-sm w-[92vw] sm:w-96"
        >
          <div className="relative overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-br from-white to-slate-50 backdrop-blur shadow-lg">
            <button
              type="button"
              aria-label="Fermer"
              onClick={acknowledge}
              className="absolute right-2 top-2 inline-flex items-center justify-center rounded-full p-1.5 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-sky-400 transition-colors"
            >
              <X className="h-4 w-4 text-slate-500" />
            </button>

            <div className="flex items-start gap-3 p-4 pr-10">
              <div className="mt-0.5 shrink-0 rounded-xl bg-gradient-to-br from-sky-100 to-blue-100 p-2">
                <ShieldCheck className="h-5 w-5 text-sky-700" />
              </div>
              <div className="text-sm leading-snug text-slate-700">
                <p className="font-semibold text-slate-900 mb-1.5">Transparence & confidentialité</p>
                
                <div className="bg-blue-50 border-l-4 border-blue-500 p-3 rounded-lg mb-4">
                  <p className="text-sm text-blue-900">
                    <strong>Odentas Media SAS</strong> s'engage pour une transparence totale.
                  </p>
                </div>

                <p>
                  L'Espace Paie utilise des cookies essentiels pour votre authentification et votre sécurité, 
                  ainsi qu'un outil d'analyse pour améliorer nos services (incluant l'enregistrement de sessions de navigation). 
                  Vos données et celles de vos salariés sont hébergées dans l'Union Européenne 🇪🇺 et ne sortent jamais de l'UE. 
                  Elles ne sont jamais revendues ni partagées avec des tiers (hors transmission obligatoire aux organismes sociaux et caisses de retraite dans le cadre de la gestion de paie). 
                  En utilisant l'Espace Paie, vous acceptez notre{" "}
                  <a
                    href={policyUrl}
                    className="underline underline-offset-2 decoration-sky-400 hover:decoration-sky-600 text-sky-700 font-medium transition-colors"
                    target="_blank"
                    rel="noreferrer noopener"
                  >
                    Politique de Confidentialité
                  </a>
                  .
                </p>                <div className="mt-3 flex items-center gap-2">
                  <button
                    onClick={acknowledge}
                    className="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium shadow-sm border border-sky-200 bg-sky-50 hover:bg-sky-100 text-sky-900 focus:outline-none focus:ring-2 focus:ring-sky-400 transition-colors"
                  >
                    J'ai compris
                  </button>
                  <a
                    href={policyUrl}
                    target="_blank"
                    rel="noreferrer noopener"
                    className="text-sm text-slate-600 hover:text-slate-900 underline underline-offset-2 transition-colors"
                  >
                    En savoir plus
                  </a>
                </div>
              </div>
            </div>
          </div>
        </motion.aside>
      )}
    </AnimatePresence>
  );
}
