'use client';

import React from 'react';
import { Bell, BellRing, AlertCircle, LucideIcon } from 'lucide-react';
import type { DemoUrgency } from '../types';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';

interface UrgencyOption {
  urgency: DemoUrgency;
  label: string;
  description: string;
  icon: LucideIcon;
}

interface UrgencySectionProps {
  selectedUrgency: DemoUrgency;
  onSelectUrgency: (urgency: DemoUrgency) => void;
}

export const urgencyOptions: UrgencyOption[] = [
  {
    urgency: 'silent',
    label: 'Silent',
    description: 'Only shows in notification center',
    icon: Bell,
  },
  {
    urgency: 'toast',
    label: 'Toast',
    description: 'Shows a temporary popup',
    icon: BellRing,
  },
  {
    urgency: 'modal',
    label: 'Modal',
    description: 'Shows blocking modal (may require response)',
    icon: AlertCircle,
  },
];

export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySectionProps) {
  return (
    <Box>
      <Box display="flex" alignItems="center" gap={2} mb={2}>
        <Icon icon={BellRing} size={4} color="rgb(156, 163, 175)" />
        <Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
          Urgency Level
        </Text>
      </Box>

      <Box display="grid" gridCols={3} gap={1}>
        {urgencyOptions.map((option) => {
          const isSelected = selectedUrgency === option.urgency;

          const getSelectedBg = () => {
            if (option.urgency === 'modal') return 'bg-red-500/20';
            if (option.urgency === 'toast') return 'bg-warning-amber/20';
            return 'bg-gray-500/20';
          };

          const getSelectedBorder = () => {
            if (option.urgency === 'modal') return 'border-red-500/50';
            if (option.urgency === 'toast') return 'border-warning-amber/50';
            return 'border-gray-500/50';
          };

          const getSelectedColor = () => {
            if (option.urgency === 'modal') return 'rgb(239, 68, 68)';
            if (option.urgency === 'toast') return 'rgb(245, 158, 11)';
            return 'rgb(156, 163, 175)';
          };

          return (
            <Box
              key={option.urgency}
              as="button"
              type="button"
              onClick={() => onSelectUrgency(option.urgency)}
              display="flex"
              flexDirection="col"
              alignItems="center"
              gap={1}
              p={2}
              rounded="lg"
              border
              transition
              bg={isSelected ? getSelectedBg() : 'bg-iron-gray/30'}
              borderColor={isSelected ? getSelectedBorder() : 'border-charcoal-outline'}
            >
              <Icon 
                icon={option.icon} 
                size={4} 
                color={isSelected ? getSelectedColor() : 'rgb(107, 114, 128)'} 
              />
              <Text 
                size="xs" 
                weight="medium" 
                color={isSelected ? (option.urgency === 'modal' ? 'text-red-400' : option.urgency === 'toast' ? 'text-warning-amber' : 'text-gray-400') : 'text-gray-500'}
              >
                {option.label}
              </Text>
            </Box>
          );
        })}
      </Box>
      <Text size="xs" color="text-gray-600" mt={1} block>
        {urgencyOptions.find(o => o.urgency === selectedUrgency)?.description}
      </Text>
    </Box>
  );
}
