/**
 * NotificationIndicator Component
 *
 * Full-width sidebar notification indicator with urgency-based color coding and pulsing animation.
 * Displays notification icon, message type label, and unread count.
 *
 * @layer Presentation
 */

import { Bell } from 'lucide-react';
import { NotificationUrgency, NotificationMessageType } from '@domain/entities';

interface NotificationIndicatorProps {
  unreadCount: number;
  highestUrgency: NotificationUrgency;
  messageType: NotificationMessageType;
  onClick: () => void;
}

/**
 * Get color classes based on message type
 */
function getMessageTypeColors(messageType: NotificationMessageType): {
  bg: string;
  border: string;
  text: string;
  badge: string;
} {
  switch (messageType) {
    case NotificationMessageType.URGENT_QUESTION:
      return {
        bg: 'bg-red-500/20',
        border: 'border-red-500',
        text: 'text-red-400',
        badge: 'bg-red-500'
      };
    case NotificationMessageType.QUESTION:
      return {
        bg: 'bg-purple-500/20',
        border: 'border-purple-500',
        text: 'text-purple-400',
        badge: 'bg-purple-500'
      };
    case NotificationMessageType.WAITING_ACTION:
      return {
        bg: 'bg-orange-500/20',
        border: 'border-orange-500',
        text: 'text-orange-400',
        badge: 'bg-orange-500'
      };
    case NotificationMessageType.INFO:
      return {
        bg: 'bg-cyan-500/20',
        border: 'border-cyan-500',
        text: 'text-cyan-400',
        badge: 'bg-cyan-500'
      };
    default:
      return {
        bg: 'bg-gray-500/20',
        border: 'border-gray-500',
        text: 'text-gray-400',
        badge: 'bg-gray-500'
      };
  }
}

/**
 * Get message type display label
 */
function getMessageTypeLabel(messageType: NotificationMessageType): string {
  switch (messageType) {
    case NotificationMessageType.QUESTION:
      return 'Question';
    case NotificationMessageType.WAITING_ACTION:
      return 'Waiting Action';
    case NotificationMessageType.URGENT_QUESTION:
      return 'Urgent Question';
    case NotificationMessageType.INFO:
      return 'Info';
    default:
      return 'Notification';
  }
}

/**
 * NotificationIndicator - Presentational Component
 *
 * Full-width button displaying notification icon, message type, and unread count.
 * Features urgency-based color coding and pulsing animation for urgent notifications.
 */
export function NotificationIndicator({
  unreadCount,
  messageType,
  onClick,
}: NotificationIndicatorProps) {
  const colors = getMessageTypeColors(messageType);
  const label = getMessageTypeLabel(messageType);

  return (
    <button
      onClick={onClick}
      className={`relative w-full px-4 py-3 flex items-center gap-3 border-l-4 ${colors.border} ${colors.bg} hover:bg-white/10 transition-all duration-200 group`}
      aria-label={`${label}: ${unreadCount} unread`}
    >
      {/* Bell Icon */}
      <div className="relative flex-shrink-0">
        <Bell className={`w-5 h-5 ${colors.text}`} />
      </div>

      {/* Message Type Label */}
      <div className="flex-1 text-left">
        <span className={`text-sm font-medium ${colors.text}`}>
          {label}
        </span>
      </div>

      {/* Unread Count Badge */}
      {unreadCount > 0 && (
        <span
          className={`flex items-center justify-center min-w-[24px] h-6 px-2 rounded-full ${colors.badge} text-white text-xs font-semibold`}
        >
          {unreadCount > 99 ? '99+' : unreadCount}
        </span>
      )}
    </button>
  );
}