'use client';

import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { AlertTriangle, Award, LucideIcon, MessageSquare, Shield, TrendingUp, Vote } from 'lucide-react';
import type { DemoNotificationType } from '../types';

interface NotificationOption {
  type: DemoNotificationType;
  label: string;
  description: string;
  icon: LucideIcon;
  color: string;
}

interface NotificationTypeSectionProps {
  selectedType: DemoNotificationType;
  onSelectType: (type: DemoNotificationType) => void;
}

export const notificationOptions: NotificationOption[] = [
  {
    type: 'protest_filed',
    label: 'Protest Against You',
    description: 'A protest was filed against you',
    icon: AlertTriangle,
    color: 'rgb(239, 68, 68)',
  },
  {
    type: 'defense_requested',
    label: 'Defense Requested',
    description: 'A steward requests your defense',
    icon: Shield,
    color: 'rgb(245, 158, 11)',
  },
  {
    type: 'vote_required',
    label: 'Vote Required',
    description: 'You need to vote on a protest',
    icon: Vote,
    color: 'rgb(59, 130, 246)',
  },
  {
    type: 'race_performance_summary',
    label: 'Race Performance Summary',
    description: 'Immediate results after main race',
    icon: TrendingUp,
    color: 'rgb(59, 130, 246)',
  },
  {
    type: 'race_final_results',
    label: 'Race Final Results',
    description: 'Final results after stewarding closes',
    icon: Award,
    color: 'rgb(245, 158, 11)',
  },
];

export function NotificationTypeSection({ selectedType, onSelectType }: NotificationTypeSectionProps) {
  return (
    <Stack>
      <Stack direction="row" align="center" gap={2} mb={2}>
        <Icon icon={MessageSquare} size={4} color="rgb(156, 163, 175)" />
        <Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
          Notification Type
        </Text>
      </Stack>

      <Grid cols={2} gap={1}>
        {notificationOptions.map((option) => {
          const isSelected = selectedType === option.type;

          return (
            <Button
              key={option.type}
              type="button"
              onClick={() => onSelectType(option.type)}
              variant="ghost"
              p={2}
              rounded="lg"
              className={`flex flex-col items-center gap-1 transition-all ${isSelected ? 'bg-primary-blue/20 border-primary-blue/50' : 'bg-iron-gray/30 border-charcoal-outline'} border`}
            >
              <Icon 
                icon={option.icon} 
                size={4} 
                color={isSelected ? 'rgb(59, 130, 246)' : option.color} 
              />
              <Text 
                size="xs" 
                weight="medium" 
                color={isSelected ? 'text-primary-blue' : 'text-gray-400'}
              >
                {option.label.split(' ')[0]}
              </Text>
            </Button>
          );
        })}
      </Grid>
    </Stack>
  );
}
