'use client';

import React, { useState, useEffect } from 'react';
import { X, ShieldCheck } from 'lucide-react';

export const CookieBanner = () => {
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        const consent = localStorage.getItem('cookie-consent');
        if (!consent) {
            setIsVisible(true);
        }
    }, []);

    const handleAccept = () => {
        localStorage.setItem('cookie-consent', 'accepted');
        setIsVisible(false);
        // Dispatch an event so Analytics component can react immediately without refresh
        window.dispatchEvent(new Event('cookie-consent-updated'));
    };

    const handleDecline = () => {
        localStorage.setItem('cookie-consent', 'declined');
        setIsVisible(false);
        window.dispatchEvent(new Event('cookie-consent-updated'));
    };

    if (!isVisible) return null;

    return (
        <div className="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6 bg-slate-900/95 backdrop-blur shadow-2xl border-t border-slate-700/50 transform transition-transform duration-500 ease-out translate-y-0">
            <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
                <div className="flex items-start gap-4">
                    <div className="p-3 bg-blue-500/20 text-blue-400 rounded-full shrink-0">
                        <ShieldCheck size={24} />
                    </div>
                    <div>
                        <h3 className="text-white font-bold text-lg mb-1">
                            Nous respectons votre vie privée
                        </h3>
                        <p className="text-slate-300 text-sm leading-relaxed max-w-3xl">
                            Nous utilisons des cookies (via Umami Analytics) exclusivement pour analyser le trafic de manière anonymisée et améliorer votre expérience sur l'application. Aucun parcours n'est lié à votre identité.
                        </p>
                    </div>
                </div>

                <div className="flex flex-col sm:flex-row w-full md:w-auto items-center gap-3 shrink-0">
                    <button
                        onClick={handleDecline}
                        className="w-full sm:w-auto px-6 py-2.5 rounded-xl border border-slate-600 text-slate-300 font-semibold hover:bg-slate-800 transition-colors text-sm"
                    >
                        Continuer sans accepter
                    </button>
                    <button
                        onClick={handleAccept}
                        className="w-full sm:w-auto px-6 py-2.5 rounded-xl bg-blue-600 text-white font-bold shadow-lg shadow-blue-600/20 hover:bg-blue-500 hover:-translate-y-0.5 transition-all text-sm"
                    >
                        Accepter
                    </button>
                    <button
                        onClick={() => setIsVisible(false)}
                        className="absolute top-4 right-4 md:hidden text-slate-400 p-2"
                        aria-label="Fermer"
                    >
                        <X size={20} />
                    </button>
                </div>
            </div>
        </div>
    );
};