import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Schedule } from '../types';
import { formatRaceTime, formatCountdown, formatRaceDate } from '../utils/formatters';

interface ScheduleCardProps {
  schedule: Schedule;
  onCancel?: () => void;
}

export const ScheduleCard: React.FC<ScheduleCardProps> = ({ schedule, onCancel }) => {
  const getChannelIcon = (channel: string) => {
    switch (channel) {
      case 'push': return 'notifications-outline';
      case 'sms': return 'chatbubble-outline';
      case 'email': return 'mail-outline';
      default: return 'notifications-outline';
    }
  };
  
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'active': return '#22c55e';
      case 'sent': return '#3b82f6';
      case 'failed': return '#ef4444';
      case 'cancelled': return '#9ca3af';
      default: return '#6b7280';
    }
  };
  
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <View style={styles.raceInfo}>
          <Text style={styles.trackName}>
            {schedule.race_info?.track || 'Unknown Track'}
          </Text>
          <Text style={styles.raceDetails}>
            Race {schedule.race_info?.race_number} • {schedule.race_info?.distance}m
          </Text>
        </View>
        <View style={[
          styles.statusBadge, 
          { backgroundColor: getStatusColor(schedule.status) + '20' }
        ]}>
          <Text style={[
            styles.statusText, 
            { color: getStatusColor(schedule.status) }
          ]}>
            {schedule.status.toUpperCase()}
          </Text>
        </View>
      </View>
      
      <View style={styles.body}>
        <View style={styles.infoRow}>
          <Ionicons name="time-outline" size={16} color="#6b7280" />
          <Text style={styles.infoText}>
            Tip sent {schedule.minutes_before} min before race
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Ionicons name="calendar-outline" size={16} color="#6b7280" />
          <Text style={styles.infoText}>
            {schedule.race_info?.start_time 
              ? `${formatRaceDate(schedule.race_info.start_time)} at ${formatRaceTime(schedule.race_info.start_time)}`
              : 'Time TBD'
            }
          </Text>
        </View>
        
        <View style={styles.channels}>
          {schedule.channels.map((channel, index) => (
            <View key={index} style={styles.channelBadge}>
              <Ionicons name={getChannelIcon(channel) as any} size={14} color="#6b7280" />
              <Text style={styles.channelText}>{channel}</Text>
            </View>
          ))}
        </View>
      </View>
      
      {schedule.status === 'active' && onCancel && (
        <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
          <Ionicons name="close-circle-outline" size={18} color="#ef4444" />
          <Text style={styles.cancelText}>Cancel</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 8,
    elevation: 2,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 12,
  },
  raceInfo: {
    flex: 1,
  },
  trackName: {
    fontSize: 17,
    fontWeight: '700',
    color: '#111827',
  },
  raceDetails: {
    fontSize: 13,
    color: '#6b7280',
    marginTop: 2,
  },
  statusBadge: {
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 12,
  },
  statusText: {
    fontSize: 11,
    fontWeight: '700',
  },
  body: {
    gap: 8,
  },
  infoRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  infoText: {
    fontSize: 14,
    color: '#374151',
  },
  channels: {
    flexDirection: 'row',
    gap: 8,
    marginTop: 4,
  },
  channelBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    backgroundColor: '#f3f4f6',
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 16,
  },
  channelText: {
    fontSize: 12,
    color: '#6b7280',
    textTransform: 'capitalize',
  },
  cancelButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 6,
    marginTop: 12,
    paddingTop: 12,
    borderTopWidth: 1,
    borderColor: '#f3f4f6',
  },
  cancelText: {
    fontSize: 14,
    color: '#ef4444',
    fontWeight: '600',
  },
});