'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>
  );
}