'use client';

import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Grid } from '@/ui/primitives/Grid';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { AlertCircle, Bell, BellRing, LucideIcon } from 'lucide-react';
import type { DemoUrgency } from '../types';

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 (
    <Stack>
      <Stack direction="row" align="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>
      </Stack>

      <Grid cols={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 (
            <Button
              key={option.urgency}
              type="button"
              onClick={() => onSelectUrgency(option.urgency)}
              variant="ghost"
              p={2}
              rounded="lg"
              className={`flex flex-col items-center gap-1 transition-all ${isSelected ? `${getSelectedBg()} ${getSelectedBorder()}` : 'bg-iron-gray/30 border-charcoal-outline'} border`}
            >
              <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>
            </Button>
          );
        })}
      </Grid>
      <Text size="xs" color="text-gray-600" mt={1} block>
        {urgencyOptions.find(o => o.urgency === selectedUrgency)?.description}
      </Text>
    </Stack>
  );
}