358 lines
12 KiB
TypeScript
358 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { IconButton } from '@/ui/IconButton';
|
|
import { Box } from '@/ui/primitives/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import {
|
|
AlertCircle,
|
|
AlertTriangle,
|
|
Bell,
|
|
Clock,
|
|
Flag,
|
|
Medal,
|
|
Shield,
|
|
Star,
|
|
Trophy,
|
|
Users,
|
|
Vote,
|
|
X,
|
|
} from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
import type { Notification, NotificationAction } from './notificationTypes';
|
|
|
|
interface ModalNotificationProps {
|
|
notification: Notification;
|
|
onAction: (notification: Notification, actionId?: string) => void;
|
|
onDismiss?: (notification: Notification) => void;
|
|
onNavigate?: (href: 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,
|
|
race_performance_summary: Medal,
|
|
race_final_results: Star,
|
|
league_invite: Users,
|
|
race_reminder: Flag,
|
|
};
|
|
|
|
const notificationColors: Record<string, { bg: string; border: string; text: string; glow: string }> = {
|
|
protest_filed: {
|
|
bg: 'bg-critical-red/10',
|
|
border: 'border-critical-red/50',
|
|
text: 'text-critical-red',
|
|
glow: 'shadow-[0_0_60px_rgba(227,92,92,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(255,197,86,0.3)]',
|
|
},
|
|
protest_vote_required: {
|
|
bg: 'bg-primary-accent/10',
|
|
border: 'border-primary-accent/50',
|
|
text: 'text-primary-accent',
|
|
glow: 'shadow-[0_0_60px_rgba(25,140,255,0.3)]',
|
|
},
|
|
penalty_issued: {
|
|
bg: 'bg-critical-red/10',
|
|
border: 'border-critical-red/50',
|
|
text: 'text-critical-red',
|
|
glow: 'shadow-[0_0_60px_rgba(227,92,92,0.3)]',
|
|
},
|
|
race_performance_summary: {
|
|
bg: 'bg-panel-gray',
|
|
border: 'border-warning-amber/60',
|
|
text: 'text-warning-amber',
|
|
glow: 'shadow-[0_0_80px_rgba(255,197,86,0.2)]',
|
|
},
|
|
race_final_results: {
|
|
bg: 'bg-panel-gray',
|
|
border: 'border-primary-accent/60',
|
|
text: 'text-primary-accent',
|
|
glow: 'shadow-[0_0_80px_rgba(25,140,255,0.2)]',
|
|
},
|
|
};
|
|
|
|
export function ModalNotification({
|
|
notification,
|
|
onAction,
|
|
onDismiss,
|
|
onNavigate,
|
|
}: ModalNotificationProps) {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Animate in
|
|
const timeout = setTimeout(() => setIsVisible(true), 10);
|
|
return () => clearTimeout(timeout);
|
|
}, []);
|
|
|
|
// Handle ESC key to dismiss
|
|
useEffect(() => {
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape' && onDismiss && !notification.requiresResponse) {
|
|
onDismiss(notification);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [notification, onDismiss]);
|
|
|
|
const handleAction = (action: NotificationAction) => {
|
|
onAction(notification, action.id);
|
|
if (action.href && onNavigate) {
|
|
onNavigate(action.href);
|
|
}
|
|
};
|
|
|
|
const handlePrimaryAction = () => {
|
|
onAction(notification, 'primary');
|
|
if (notification.actionUrl && onNavigate) {
|
|
onNavigate(notification.actionUrl);
|
|
}
|
|
};
|
|
|
|
const NotificationIcon = notificationIcons[notification.type] || AlertCircle;
|
|
const colors = notificationColors[notification.type] || {
|
|
bg: 'bg-panel-gray',
|
|
border: 'border-border-gray',
|
|
text: 'text-gray-400',
|
|
glow: 'shadow-card',
|
|
};
|
|
|
|
const data: Record<string, unknown> = notification.data ?? {};
|
|
|
|
const getNumber = (value: unknown): number | null => {
|
|
if (typeof value === 'number' && Number.isFinite(value)) return value;
|
|
if (typeof value === 'string') {
|
|
const parsed = Number(value);
|
|
if (Number.isFinite(parsed)) return parsed;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const getString = (value: unknown): string | null => {
|
|
if (typeof value === 'string') return value;
|
|
if (typeof value === 'number' && Number.isFinite(value)) return String(value);
|
|
return null;
|
|
};
|
|
|
|
const isValidDate = (value: unknown): value is Date => value instanceof Date && !Number.isNaN(value.getTime());
|
|
|
|
// Check if there's a deadline
|
|
const deadlineValue = data.deadline;
|
|
const deadline: Date | null =
|
|
isValidDate(deadlineValue)
|
|
? deadlineValue
|
|
: typeof deadlineValue === 'string' || typeof deadlineValue === 'number'
|
|
? new Date(deadlineValue)
|
|
: null;
|
|
const hasDeadline = !!deadline && !Number.isNaN(deadline.getTime());
|
|
|
|
// Special celebratory styling for race notifications
|
|
const isRaceNotification = notification.type.startsWith('race_');
|
|
|
|
const provisionalRatingChange = getNumber(data.provisionalRatingChange) ?? 0;
|
|
const finalRatingChange = getNumber(data.finalRatingChange) ?? 0;
|
|
const ratingChange = provisionalRatingChange || finalRatingChange;
|
|
const protestId = getString(data.protestId);
|
|
|
|
return (
|
|
<Box
|
|
position="fixed"
|
|
inset="0"
|
|
zIndex={100}
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
p={4}
|
|
transition
|
|
bg={isVisible ? 'bg-black/80' : 'bg-transparent'}
|
|
className={isVisible ? 'backdrop-blur-sm' : ''}
|
|
>
|
|
<Box
|
|
w="full"
|
|
maxWidth="lg"
|
|
transform
|
|
transition
|
|
opacity={isVisible ? 1 : 0}
|
|
className={isVisible ? 'scale-100' : 'scale-95'}
|
|
>
|
|
<Box
|
|
rounded="sm"
|
|
border
|
|
borderColor={colors.border}
|
|
bg="panel-gray"
|
|
shadow={colors.glow}
|
|
overflow="hidden"
|
|
>
|
|
{/* Header */}
|
|
<Box
|
|
px={6}
|
|
py={4}
|
|
bg="graphite-black"
|
|
borderBottom
|
|
borderColor={colors.border}
|
|
>
|
|
<Box display="flex" alignItems="center" justifyContent="between">
|
|
<Box display="flex" alignItems="center" gap={4}>
|
|
<Box
|
|
p={2}
|
|
rounded="sm"
|
|
bg="panel-gray"
|
|
border
|
|
borderColor={colors.border}
|
|
>
|
|
<Icon icon={NotificationIcon} size={5} color={colors.text} />
|
|
</Box>
|
|
<Box>
|
|
<Text
|
|
size="xs"
|
|
weight="bold"
|
|
className="uppercase tracking-widest"
|
|
color="text-gray-500"
|
|
>
|
|
{isRaceNotification ? 'Race Update' : 'Action Required'}
|
|
</Text>
|
|
<Heading level={3} weight="bold" color="text-white">
|
|
{notification.title}
|
|
</Heading>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* X button for dismissible notifications */}
|
|
{onDismiss && !notification.requiresResponse && (
|
|
<IconButton
|
|
icon={X}
|
|
onClick={() => onDismiss(notification)}
|
|
variant="ghost"
|
|
size="md"
|
|
color="text-gray-500"
|
|
title="Dismiss notification"
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Body */}
|
|
<Box px={6} py={6}>
|
|
<Text
|
|
leading="relaxed"
|
|
size="base"
|
|
color="text-gray-300"
|
|
block
|
|
>
|
|
{notification.message}
|
|
</Text>
|
|
|
|
{/* Race performance stats */}
|
|
{isRaceNotification && (
|
|
<Box display="grid" gridCols={2} gap={4} mt={6}>
|
|
<Box bg="graphite-black" rounded="sm" p={4} border borderColor="border-border-gray">
|
|
<Text size="xs" color="text-gray-500" weight="bold" block mb={1} className="uppercase tracking-widest">POSITION</Text>
|
|
<Text size="2xl" weight="bold" color="text-white" block>
|
|
{notification.data?.position === 'DNF' ? 'DNF' : `P${notification.data?.position || '?'}`}
|
|
</Text>
|
|
</Box>
|
|
<Box bg="graphite-black" rounded="sm" p={4} border borderColor="border-border-gray">
|
|
<Text size="xs" color="text-gray-500" weight="bold" block mb={1} className="uppercase tracking-widest">RATING</Text>
|
|
<Text size="2xl" weight="bold" color={ratingChange >= 0 ? 'text-success-green' : 'text-critical-red'} block>
|
|
{ratingChange >= 0 ? '+' : ''}
|
|
{ratingChange}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Deadline warning */}
|
|
{hasDeadline && !isRaceNotification && (
|
|
<Box mt={6} display="flex" alignItems="center" gap={3} px={4} py={3} rounded="sm" bg="warning-amber/5" border borderColor="border-warning-amber/20">
|
|
<Icon icon={Clock} size={5} color="text-warning-amber" />
|
|
<Box>
|
|
<Text size="sm" weight="bold" color="text-warning-amber" block className="uppercase tracking-wider">Response Required</Text>
|
|
<Text size="xs" color="text-gray-500" block mt={0.5}>
|
|
By {deadline ? deadline.toLocaleDateString() : ''} {deadline ? deadline.toLocaleTimeString() : ''}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Additional context from data */}
|
|
{protestId && (
|
|
<Box mt={6} p={3} rounded="sm" bg="graphite-black" border borderColor="border-border-gray">
|
|
<Text size="xs" color="text-gray-500" weight="bold" block mb={1} className="uppercase tracking-widest text-[10px]">PROTEST ID</Text>
|
|
<Text size="xs" color="text-gray-400" font="mono" block>
|
|
{protestId}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Actions */}
|
|
<Box
|
|
px={6}
|
|
py={4}
|
|
borderTop
|
|
borderColor="border-border-gray"
|
|
bg="graphite-black"
|
|
>
|
|
<Box display="flex" flexWrap="wrap" gap={3} justifyContent="end">
|
|
{notification.actions && notification.actions.length > 0 ? (
|
|
notification.actions.map((action, index) => (
|
|
<Button
|
|
key={index}
|
|
variant={action.type === 'primary' ? 'primary' : 'secondary'}
|
|
onClick={() => handleAction(action)}
|
|
className={action.type === 'danger' ? 'bg-critical-red hover:bg-critical-red/90' : ''}
|
|
>
|
|
{action.label}
|
|
</Button>
|
|
))
|
|
) : (
|
|
isRaceNotification ? (
|
|
<>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => (onDismiss ? onDismiss(notification) : onAction(notification, 'dismiss'))}
|
|
>
|
|
Dismiss
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
onClick={handlePrimaryAction}
|
|
>
|
|
{notification.type === 'race_performance_summary' ? 'View Results' : 'View Standings'}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button variant="primary" onClick={handlePrimaryAction}>
|
|
{notification.actionUrl ? 'View Details' : 'Acknowledge'}
|
|
</Button>
|
|
)
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Cannot dismiss warning */}
|
|
{notification.requiresResponse && !isRaceNotification && (
|
|
<Box px={6} py={2} bg="critical-red/5" borderTop borderColor="border-critical-red/10">
|
|
<Text size="xs" color="text-critical-red" textAlign="center" block weight="medium">
|
|
This action is required to continue
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|