
import React from 'react';
import { X, Info, AlertTriangle, CheckCircle, AlertOctagon, ExternalLink } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';
import { useGlobalMessage } from '@/contexts/GlobalMessageContext';

const GlobalMessageBanner = () => {
  const { messageState, hideMessage } = useGlobalMessage();
  const { isVisible, text, type, dismissible, scrolling, actionLabel, onAction } = messageState;

  // Configuration map for banner styles
  const styles = {
    info: {
      bg: 'bg-blue-50 dark:bg-blue-950/50',
      border: 'border-blue-200 dark:border-blue-800',
      text: 'text-blue-800 dark:text-blue-200',
      icon: Info,
      iconColor: 'text-blue-600 dark:text-blue-400'
    },
    warning: {
      bg: 'bg-amber-50 dark:bg-amber-950/50',
      border: 'border-amber-200 dark:border-amber-800',
      text: 'text-amber-800 dark:text-amber-200',
      icon: AlertTriangle,
      iconColor: 'text-amber-600 dark:text-amber-400'
    },
    success: {
      bg: 'bg-emerald-50 dark:bg-emerald-950/50',
      border: 'border-emerald-200 dark:border-emerald-800',
      text: 'text-emerald-800 dark:text-emerald-200',
      icon: CheckCircle,
      iconColor: 'text-emerald-600 dark:text-emerald-400'
    },
    error: {
      bg: 'bg-red-50 dark:bg-red-950/50',
      border: 'border-red-200 dark:border-red-800',
      text: 'text-red-800 dark:text-red-200',
      icon: AlertOctagon,
      iconColor: 'text-red-600 dark:text-red-400'
    }
  };

  const style = styles[type] || styles.info;
  const Icon = style.icon;

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ height: 0, opacity: 0 }}
          animate={{ height: 'auto', opacity: 1 }}
          exit={{ height: 0, opacity: 0 }}
          className={cn(
            "relative w-full border-b px-4 py-3 flex items-center justify-center overflow-hidden",
            style.bg,
            style.border
          )}
        >
          <div className="max-w-7xl mx-auto flex items-center justify-center gap-3 w-full text-sm font-medium">
            <Icon className={cn("w-5 h-5 flex-shrink-0", style.iconColor)} />
            
            <div className={cn("flex-1", scrolling ? "overflow-hidden whitespace-nowrap" : "")}>
              <div className={cn(scrolling ? "animate-marquee inline-block" : "", style.text)}>
                {text}
              </div>
            </div>

            {actionLabel && onAction && (
              <button
                onClick={onAction}
                className={cn(
                  "flex-shrink-0 flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider transition-colors",
                  "bg-white/50 hover:bg-white/80 dark:bg-black/20 dark:hover:bg-black/40",
                  style.text
                )}
              >
                {actionLabel}
                <ExternalLink className="w-3 h-3" />
              </button>
            )}

            {dismissible && (
              <button
                onClick={hideMessage}
                className={cn(
                  "flex-shrink-0 p-1 rounded-lg hover:bg-black/5 dark:hover:bg-white/10 transition-colors ml-4",
                  style.text
                )}
                aria-label="Fermer"
              >
                <X className="w-4 h-4" />
              </button>
            )}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default GlobalMessageBanner;
