"use client";

import React, { useState, useEffect } from "react";
import Link from "next/link";
import { motion, AnimatePresence } from "framer-motion";
import style from "./EvangelizeBanner.module.css";
import { useSessionStore } from "@core/Store/Sesion.Store";

interface EvangelizeBannerProps {
    variant?: "banner" | "popup";
    delay?: number; // Delay in milliseconds for popup
}

export default function EvangelizeBanner({ variant = "banner", delay = 3000 }: EvangelizeBannerProps) {
    const SessionInfo = useSessionStore();
    const [isVisible, setIsVisible] = useState(variant === "banner");

    useEffect(() => {
        if (variant === "popup") {
            const timer = setTimeout(() => {
                setIsVisible(true);
            }, delay);
            return () => clearTimeout(timer);
        }
    }, [variant, delay]);

    // If the user has any organization subscriptions (even the free plan), do not show the banner
    const hasPlan = Object.keys(SessionInfo.organizationSubscriptions || {}).length > 0;
    if (hasPlan) return null;

    const handleClose = () => {
        setIsVisible(false);
    };

    const content = (
        <>
            <div className={style.contentWrapper}>
                <h3 className={style.title}>¿Eres profesional o tienes un negocio?</h3>
                <p className={style.description}>
                    Simplificá tu agenda y conseguí más clientes. Tú también puedes ofrecer tus propios turnos a través de TurnosXpress.
                </p>
            </div>
            <Link href="/landing/offer-appointments" className={style.ctaButton}>
                Ver cómo funciona
            </Link>
        </>
    );

    if (variant === "banner") {
        return (
            <div className={style.bannerContainer}>
                {content}
            </div>
        );
    }

    // Popup variant with framer-motion
    return (
        <AnimatePresence>
            {isVisible && (
                <motion.div
                    className={style.popupContainer}
                    initial={{ opacity: 0, y: 50, scale: 0.95 }}
                    animate={{ opacity: 1, y: 0, scale: 1 }}
                    exit={{ opacity: 0, y: 50, scale: 0.95 }}
                    transition={{ type: "spring", stiffness: 300, damping: 25 }}
                >
                    <button onClick={handleClose} className={style.closeButton} aria-label="Cerrar">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                    {content}
                </motion.div>
            )}
        </AnimatePresence>
    );
}
