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

'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import type { Notification, NotificationAction } from '@gridpilot/notifications/application';
import {
  Bell,
  AlertTriangle,
  Shield,
  Vote,
  Trophy,
  Users,
  Flag,
  AlertCircle,
  Clock,
} from 'lucide-react';
import Button from '@/components/ui/Button';

interface ModalNotificationProps {
  notification: Notification;
  onAction: (notification: Notification, actionId?: string) => void;
}

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; glow: string }> = {
  protest_filed: { 
    bg: 'bg-red-500/10', 
    border: 'border-red-500/50', 
    text: 'text-red-400',
    glow: 'shadow-[0_0_60px_rgba(239,68,68,0.3)]',
  },
  protest_defense_requested: { 
    bg: 'bg-warning-amber/10', 
    border: 'border-warning-amber/50', 
    text: 'text-warning-amber',
    glow: 'shadow-[0_0_60px_rgba(245,158,11,0.3)]',
  },
  protest_vote_required: { 
    bg: 'bg-primary-blue/10', 
    border: 'border-primary-blue/50', 
    text: 'text-primary-blue',
    glow: 'shadow-[0_0_60px_rgba(25,140,255,0.3)]',
  },
  penalty_issued: { 
    bg: 'bg-red-500/10', 
    border: 'border-red-500/50', 
    text: 'text-red-400',
    glow: 'shadow-[0_0_60px_rgba(239,68,68,0.3)]',
  },
};

export default function ModalNotification({
  notification,
  onAction,
}: ModalNotificationProps) {
  const [isVisible, setIsVisible] = useState(false);
  const router = useRouter();

  useEffect(() => {
    // Animate in
    const timeout = setTimeout(() => setIsVisible(true), 10);
    return () => clearTimeout(timeout);
  }, []);

  const handleAction = (action: NotificationAction) => {
    onAction(notification, action.actionId);
    if (action.href) {
      router.push(action.href);
    }
  };

  const handlePrimaryAction = () => {
    onAction(notification, 'primary');
    if (notification.actionUrl) {
      router.push(notification.actionUrl);
    }
  };

  const Icon = notificationIcons[notification.type] || AlertCircle;
  const colors = notificationColors[notification.type] || {
    bg: 'bg-warning-amber/10',
    border: 'border-warning-amber/50',
    text: 'text-warning-amber',
    glow: 'shadow-[0_0_60px_rgba(245,158,11,0.3)]',
  };

  // Check if there's a deadline
  const deadline = notification.data?.deadline;
  const hasDeadline = deadline instanceof Date;

  return (
    <div
      className={`
        fixed inset-0 z-[100] flex items-center justify-center p-4
        transition-all duration-300
        ${isVisible ? 'bg-black/70 backdrop-blur-sm' : 'bg-transparent'}
      `}
    >
      <div
        className={`
          w-full max-w-lg transform transition-all duration-300
          ${isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}
        `}
      >
        <div
          className={`
            rounded-2xl border-2 ${colors.border} ${colors.bg}
            backdrop-blur-md ${colors.glow}
            overflow-hidden
          `}
        >
          {/* Header with pulse animation */}
          <div className={`relative px-6 py-4 ${colors.bg} border-b ${colors.border}`}>
            {/* Animated pulse ring */}
            <div className="absolute top-4 left-6 w-12 h-12">
              <div className={`absolute inset-0 rounded-full ${colors.bg} animate-ping opacity-20`} />
            </div>
            
            <div className="flex items-center gap-4">
              <div className={`relative p-3 rounded-xl ${colors.bg} border ${colors.border}`}>
                <Icon className={`w-6 h-6 ${colors.text}`} />
              </div>
              <div>
                <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
                  Action Required
                </p>
                <h2 className="text-xl font-bold text-white">
                  {notification.title}
                </h2>
              </div>
            </div>
          </div>

          {/* Body */}
          <div className="px-6 py-5">
            <p className="text-gray-300 leading-relaxed">
              {notification.body}
            </p>

            {/* Deadline warning */}
            {hasDeadline && (
              <div className="mt-4 flex items-center gap-2 px-4 py-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
                <Clock className="w-5 h-5 text-warning-amber" />
                <div>
                  <p className="text-sm font-medium text-warning-amber">Response Required</p>
                  <p className="text-xs text-gray-400">
                    Please respond by {deadline.toLocaleDateString()} at {deadline.toLocaleTimeString()}
                  </p>
                </div>
              </div>
            )}

            {/* Additional context from data */}
            {notification.data?.protestId && (
              <div className="mt-4 p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
                <p className="text-xs text-gray-500 mb-1">Related Protest</p>
                <p className="text-sm text-gray-300 font-mono">
                  {notification.data.protestId}
                </p>
              </div>
            )}
          </div>

          {/* Actions */}
          <div className="px-6 py-4 bg-iron-gray/30 border-t border-charcoal-outline">
            {notification.actions && notification.actions.length > 0 ? (
              <div className="flex flex-wrap gap-3 justify-end">
                {notification.actions.map((action, index) => (
                  <Button
                    key={index}
                    variant={action.type === 'primary' ? 'primary' : 'secondary'}
                    onClick={() => handleAction(action)}
                    className={action.type === 'danger' ? 'bg-red-500 hover:bg-red-600 text-white' : ''}
                  >
                    {action.label}
                  </Button>
                ))}
              </div>
            ) : (
              <div className="flex justify-end">
                <Button variant="primary" onClick={handlePrimaryAction}>
                  {notification.actionUrl ? 'View Details' : 'Acknowledge'}
                </Button>
              </div>
            )}
          </div>

          {/* Cannot dismiss warning */}
          {notification.requiresResponse && (
            <div className="px-6 py-2 bg-red-500/10 border-t border-red-500/20">
              <p className="text-xs text-red-400 text-center">
                ⚠️ This notification requires your action and cannot be dismissed
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}