import { motion, AnimatePresence } from 'framer-motion';
import { X, AlertCircle, CheckCircle, AlertTriangle, Info } from 'lucide-react';
import { useNotificationStore, NotificationType } from '../../../application/stores/notificationStore';

const icons: Record<NotificationType, React.ReactNode> = {
  info: <Info className="text-blue-400" size={20} />,
  success: <CheckCircle className="text-emerald-400" size={20} />,
  warning: <AlertTriangle className="text-amber-400" size={20} />,
  error: <AlertCircle className="text-rose-400" size={20} />,
};

const colors: Record<NotificationType, string> = {
  info: 'border-blue-500/30 bg-blue-500/10',
  success: 'border-emerald-500/30 bg-emerald-500/10',
  warning: 'border-amber-500/30 bg-amber-500/10',
  error: 'border-rose-500/30 bg-rose-500/10',
};

export default function NotificationProvider() {
  const { notifications, removeNotification } = useNotificationStore();

  return (
    <div className="fixed top-6 right-6 z-[9999] flex flex-col gap-3 pointer-events-none w-full max-w-sm">
      <AnimatePresence mode="popLayout">
        {notifications.map((n) => (
          <motion.div
            key={n.id}
            layout
            initial={{ opacity: 0, x: 50, scale: 0.9 }}
            animate={{ opacity: 1, x: 0, scale: 1 }}
            exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.2 } }}
            className={`pointer-events-auto relative group overflow-hidden rounded-2xl border backdrop-blur-xl p-4 shadow-2xl ${colors[n.type]}`}
          >
            <div className="flex gap-3">
              <div className="flex-shrink-0 mt-0.5">{icons[n.type]}</div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-white/90 leading-relaxed">
                  {n.message}
                </p>
              </div>
              <button
                onClick={() => removeNotification(n.id)}
                className="flex-shrink-0 -mr-1 -mt-1 p-1 rounded-full text-white/30 hover:text-white hover:bg-white/10 transition-colors"
              >
                <X size={16} />
              </button>
            </div>
            
            {/* Progress bar for auto-hide */}
            {n.duration && n.duration > 0 && (
              <motion.div
                initial={{ width: '100%' }}
                animate={{ width: 0 }}
                transition={{ duration: n.duration / 1000, ease: 'linear' }}
                className="absolute bottom-0 left-0 h-0.5 bg-white/20"
              />
            )}
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}
