gridpilot.gg/apps/website/components/notifications/ToastNotification.tsx

'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import type { Notification } from '@gridpilot/notifications/application';
import {
  Bell,
  AlertTriangle,
  Shield,
  Vote,
  Trophy,
  Users,
  Flag,
  X,
  ExternalLink,
} from 'lucide-react';

interface ToastNotificationProps {
  notification: Notification;
  onDismiss: (notification: Notification) => void;
  onRead: (notification: Notification) => void;
  autoHideDuration?: number;
}

const notificationIcons: Record<string, typeof Bell> = {
  protest_filed: AlertTriangle,
  protest_defense_requested: Shield,
  protest_vote_required: Vote,
  penalty_issued: AlertTriangle,
  race_results_posted: Trophy,
  league_invite: Users,
  race_reminder: Flag,
};

const notificationColors: Record<string, { bg: string; border: string; text: string }> = {
  protest_filed: { bg: 'bg-red-500/10', border: 'border-red-500/30', text: 'text-red-400' },
  protest_defense_requested: { bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', text: 'text-warning-amber' },
  protest_vote_required: { bg: 'bg-primary-blue/10', border: 'border-primary-blue/30', text: 'text-primary-blue' },
  penalty_issued: { bg: 'bg-red-500/10', border: 'border-red-500/30', text: 'text-red-400' },
  race_results_posted: { bg: 'bg-performance-green/10', border: 'border-performance-green/30', text: 'text-performance-green' },
  league_invite: { bg: 'bg-primary-blue/10', border: 'border-primary-blue/30', text: 'text-primary-blue' },
  race_reminder: { bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', text: 'text-warning-amber' },
};

export default function ToastNotification({
  notification,
  onDismiss,
  onRead,
  autoHideDuration = 5000,
}: ToastNotificationProps) {
  const [isVisible, setIsVisible] = useState(false);
  const [isExiting, setIsExiting] = useState(false);
  const router = useRouter();

  useEffect(() => {
    // Animate in
    const showTimeout = setTimeout(() => setIsVisible(true), 10);

    // Auto-hide
    const hideTimeout = setTimeout(() => {
      handleDismiss();
    }, autoHideDuration);

    return () => {
      clearTimeout(showTimeout);
      clearTimeout(hideTimeout);
    };
  }, [autoHideDuration]);

  const handleDismiss = () => {
    setIsExiting(true);
    setTimeout(() => {
      onDismiss(notification);
    }, 300);
  };

  const handleClick = () => {
    onRead(notification);
    if (notification.actionUrl) {
      router.push(notification.actionUrl);
    }
    handleDismiss();
  };

  const Icon = notificationIcons[notification.type] || Bell;
  const colors = notificationColors[notification.type] || {
    bg: 'bg-gray-500/10',
    border: 'border-gray-500/30',
    text: 'text-gray-400',
  };

  return (
    <div
      className={`
        transform transition-all duration-300 ease-out
        ${isVisible && !isExiting ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'}
      `}
    >
      <div
        className={`
          w-96 rounded-xl border ${colors.border} ${colors.bg}
          backdrop-blur-md shadow-2xl overflow-hidden
        `}
      >
        {/* Progress bar */}
        <div className="h-1 bg-iron-gray/50 overflow-hidden">
          <div
            className={`h-full ${colors.text.replace('text-', 'bg-')} animate-toast-progress`}
            style={{ animationDuration: `${autoHideDuration}ms` }}
          />
        </div>

        <div className="p-4">
          <div className="flex gap-3">
            {/* Icon */}
            <div className={`p-2 rounded-lg ${colors.bg} flex-shrink-0`}>
              <Icon className={`w-5 h-5 ${colors.text}`} />
            </div>

            {/* Content */}
            <div className="flex-1 min-w-0">
              <div className="flex items-start justify-between gap-2">
                <p className="text-sm font-semibold text-white truncate">
                  {notification.title}
                </p>
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    handleDismiss();
                  }}
                  className="p-1 rounded hover:bg-charcoal-outline transition-colors flex-shrink-0"
                >
                  <X className="w-4 h-4 text-gray-400" />
                </button>
              </div>
              <p className="text-xs text-gray-400 line-clamp-2 mt-1">
                {notification.body}
              </p>
              {notification.actionUrl && (
                <button
                  onClick={handleClick}
                  className={`mt-2 flex items-center gap-1 text-xs font-medium ${colors.text} hover:underline`}
                >
                  View details
                  <ExternalLink className="w-3 h-3" />
                </button>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}