"use client";

import React, { useState, useEffect, useRef, useCallback } from "react";
import { X, ExternalLink } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { usePathname } from "next/navigation";

interface BannerData {
    id: string;
    message: string;
    bg_gradient: string;
    text_color: string;
    is_dismissible: boolean;
    button_text?: string;
    button_link?: string;
}

export function AnnouncementBanner() {
    const [banner, setBanner] = useState<BannerData | null>(null);
    const [isVisible, setIsVisible] = useState(false);
    const pathname = usePathname();
    const bannerRef = useRef<HTMLDivElement>(null);

    // Update the CSS custom property so fixed headers can offset themselves
    const updateBannerHeight = useCallback(() => {
        requestAnimationFrame(() => {
            const h = bannerRef.current?.offsetHeight || 0;
            document.documentElement.style.setProperty("--banner-height", `${h}px`);
        });
    }, []);

    useEffect(() => {
        fetchBanner();
    }, [pathname]);

    useEffect(() => {
        updateBannerHeight();
        window.addEventListener("resize", updateBannerHeight);
        return () => window.removeEventListener("resize", updateBannerHeight);
    }, [isVisible, banner, updateBannerHeight]);

    // Reset CSS var when banner is not visible
    useEffect(() => {
        if (!isVisible || !banner) {
            document.documentElement.style.setProperty("--banner-height", "0px");
        }
    }, [isVisible, banner]);

    const fetchBanner = async () => {
        try {
            const res = await fetch("/api/banners");
            if (!res.ok) return;
            const data = await res.json();
            
            if (data) {
                const dismissedBanners = JSON.parse(localStorage.getItem("dismissed_banners") || "[]");
                if (!dismissedBanners.includes(data.id)) {
                    setBanner(data);
                    setIsVisible(true);
                }
            } else {
                setBanner(null);
                setIsVisible(false);
            }
        } catch (error) {
            console.error("Failed to fetch banner:", error);
        }
    };

    const handleDismiss = () => {
        if (!banner) return;
        
        setIsVisible(false);
        document.documentElement.style.setProperty("--banner-height", "0px");
        const dismissedBanners = JSON.parse(localStorage.getItem("dismissed_banners") || "[]");
        if (!dismissedBanners.includes(banner.id)) {
            dismissedBanners.push(banner.id);
            localStorage.setItem("dismissed_banners", JSON.stringify(dismissedBanners));
        }
    };

    if (!banner || !isVisible) return null;

    return (
        <AnimatePresence>
            {isVisible && (
                <motion.div
                    ref={bannerRef}
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: "auto", opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.4, ease: "easeInOut" }}
                    onAnimationComplete={updateBannerHeight}
                    className="relative w-full overflow-hidden z-[100] flex-shrink-0"
                >
                    <div 
                        className="w-full flex items-center justify-between px-4 py-2.5 sm:px-6 sm:py-3 shadow-md"
                        style={{ 
                            background: banner.bg_gradient,
                            color: banner.text_color
                        }}
                    >
                        <div className="flex-1 flex items-center justify-center min-w-0">
                            <div 
                                className="text-sm sm:text-base font-medium text-center truncate px-2"
                                dangerouslySetInnerHTML={{ __html: banner.message }}
                            />
                            
                            {banner.button_text && banner.button_link && (
                                <a 
                                    href={banner.button_link}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="ml-4 px-3 py-1 rounded bg-white/20 hover:bg-white/30 transition-colors text-xs sm:text-sm font-semibold border border-white/20 whitespace-nowrap flex items-center gap-1.5"
                                >
                                    {banner.button_text}
                                    <ExternalLink size={14} />
                                </a>
                            )}
                        </div>

                        {banner.is_dismissible && (
                            <button 
                                onClick={handleDismiss}
                                className="ml-4 p-1 rounded-full hover:bg-black/10 transition-colors flex-shrink-0"
                                aria-label="Dismiss announcement"
                            >
                                <X size={18} />
                            </button>
                        )}
                    </div>
                </motion.div>
            )}
        </AnimatePresence>
    );
}