import { X, ExternalLink } from 'lucide-react';
import {
  NotificationMessageType,
  NotificationStatus,
  type Notification,
} from '@domain/entities';
import { useTranslation } from '@/i18n/TranslationProvider';

interface NotificationPanelProps {
  isOpen: boolean;
  onClose: () => void;
  notifications: Notification[];
  onMarkAsRead: (notificationId: string) => void;
  onMarkAllRead?: () => void;
}

function getMessageTypeColors(messageType: NotificationMessageType): {
  bg: string;
  border: string;
  text: string;
} {
  switch (messageType) {
    case NotificationMessageType.URGENT_QUESTION:
      return { bg: 'bg-red-50', border: 'border-red-200', text: 'text-red-700' };
    case NotificationMessageType.QUESTION:
      return { bg: 'bg-purple-50', border: 'border-purple-200', text: 'text-purple-700' };
    case NotificationMessageType.WAITING_ACTION:
      return { bg: 'bg-orange-50', border: 'border-orange-200', text: 'text-orange-700' };
    case NotificationMessageType.INFO:
      return { bg: 'bg-cyan-50', border: 'border-cyan-200', text: 'text-cyan-700' };
    default:
      return { bg: 'bg-gray-50', border: 'border-gray-200', text: 'text-gray-700' };
  }
}

function getMessageTypeLabel(messageType: NotificationMessageType, t: (key: string) => string): string {
  switch (messageType) {
    case NotificationMessageType.QUESTION:
      return t('notifications.question');
    case NotificationMessageType.WAITING_ACTION:
      return t('notifications.waitingAction');
    case NotificationMessageType.URGENT_QUESTION:
      return t('notifications.urgentQuestion');
    case NotificationMessageType.INFO:
      return t('notifications.info');
    default:
      return t('notifications.notification');
  }
}

export function NotificationPanel({
  isOpen,
  onClose,
  notifications,
  onMarkAsRead,
  onMarkAllRead,
}: NotificationPanelProps) {
  const { t } = useTranslation();

  if (!isOpen) return null;

  const unreadNotifications = notifications.filter(
    (n) => n.status !== NotificationStatus.READ && n.status !== NotificationStatus.ARCHIVED,
  );

  return (
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 bg-black/50 z-40 transition-opacity animate-fade-in"
        onClick={onClose}
        aria-hidden="true"
      />

      {/* Panel */}
      <div className="fixed top-0 right-0 h-full w-96 bg-white shadow-2xl z-50 flex flex-col animate-slide-in-right">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <div>
            <h2 className="text-xl font-semibold text-gray-900">{t('notifications.title')}</h2>
            <p className="text-sm text-gray-500 mt-1">
              {t('notifications.unread', { count: unreadNotifications.length })}
            </p>
          </div>
          <div className="flex items-center gap-2">
            {onMarkAllRead && unreadNotifications.length > 0 && (
              <button
                onClick={onMarkAllRead}
                className="text-xs text-primary hover:text-primary-dark font-medium transition-colors"
              >
                {t('notifications.markAllRead')}
              </button>
            )}
            <button
              onClick={onClose}
              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
              aria-label="Close panel"
            >
              <X className="w-5 h-5 text-gray-500" />
            </button>
          </div>
        </div>

        {/* Notification List */}
        <div className="flex-1 overflow-y-auto">
          {unreadNotifications.length === 0 ? (
            <div className="flex items-center justify-center h-full text-gray-500">
              <p>{t('notifications.noUnread')}</p>
            </div>
          ) : (
            <div className="divide-y divide-gray-200">
              {unreadNotifications.map((notification) => {
                const colors = getMessageTypeColors(notification.messageType);
                const label = getMessageTypeLabel(notification.messageType, t);

                return (
                  <div
                    key={notification.id}
                    className={`p-4 hover:bg-gray-50 transition-colors ${
                      notification.status === NotificationStatus.UNREAD ? 'bg-blue-50/30' : ''
                    }`}
                  >
                    {/* Message Type Badge */}
                    <div className="flex items-center justify-between mb-2">
                      <span
                        className={`text-xs font-medium px-2 py-1 rounded border ${colors.border} ${colors.bg} ${colors.text}`}
                      >
                        {label}
                      </span>
                      <span className="text-xs text-gray-500">
                        {new Date(notification.createdAt).toLocaleDateString()}
                      </span>
                    </div>

                    {/* Title */}
                    <h3 className="font-medium text-gray-900 mb-1">
                      {notification.title}
                    </h3>

                    {/* Message */}
                    <p className="text-sm text-gray-600 mb-3">
                      {notification.message}
                    </p>

                    {/* Actions */}
                    <div className="flex items-center gap-3">
                      <button
                        onClick={() => onMarkAsRead(notification.id)}
                        className="text-xs text-primary hover:text-primary-dark font-medium transition-colors"
                      >
                        {t('notifications.markAsRead')}
                      </button>
                      {notification.actionUrl && (
                        <a
                          href={notification.actionUrl}
                          onClick={onClose}
                          className="inline-flex items-center gap-1 text-xs text-primary hover:text-primary-dark font-medium transition-colors"
                        >
                          {t('notifications.view')}
                          <ExternalLink className="w-3 h-3" />
                        </a>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="p-4 border-t border-gray-200">
          <button
            onClick={onClose}
            className="w-full py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
          >
            {t('common.close')}
          </button>
        </div>
      </div>
    </>
  );
}