import { TouchableOpacity, Text, ActivityIndicator, StyleSheet } from 'react-native'

interface AnmeldeButtonProps {
  terminId: string
  isAngemeldet: boolean
  onToggle: () => void
  isLoading: boolean
  maxTeilnehmer?: number | null
  teilnehmerAnzahl?: number
}

export function AnmeldeButton({ isAngemeldet, onToggle, isLoading, maxTeilnehmer, teilnehmerAnzahl = 0 }: AnmeldeButtonProps) {
  const isFull = !isAngemeldet && !!maxTeilnehmer && teilnehmerAnzahl >= maxTeilnehmer

  return (
    <TouchableOpacity
      onPress={onToggle}
      disabled={isLoading || isFull}
      style={[
        styles.btn,
        isAngemeldet ? styles.btnRegistered : isFull ? styles.btnFull : styles.btnRegister,
        (isLoading || isFull) && styles.disabled,
      ]}
      activeOpacity={0.82}
    >
      {isLoading ? (
        <ActivityIndicator color={isAngemeldet ? '#52525B' : '#FFFFFF'} />
      ) : (
        <Text style={[styles.label, (isAngemeldet || isFull) && styles.labelRegistered]}>
          {isAngemeldet ? '✓ Angemeldet – Abmelden' : isFull ? 'Ausgebucht' : 'Jetzt anmelden'}
        </Text>
      )}
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  btn: {
    borderRadius: 14,
    paddingVertical: 15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  btnRegister: {
    backgroundColor: '#003B7E',
    shadowColor: '#003B7E',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.24,
    shadowRadius: 10,
    elevation: 5,
  },
  btnRegistered: {
    backgroundColor: '#F4F4F5',
    borderWidth: 1,
    borderColor: '#E2E8F0',
  },
  btnFull: {
    backgroundColor: '#F4F4F5',
    borderWidth: 1,
    borderColor: '#E2E8F0',
  },
  disabled: {
    opacity: 0.5,
  },
  label: {
    fontSize: 15,
    fontWeight: '600',
    color: '#FFFFFF',
    letterSpacing: 0.2,
  },
  labelRegistered: {
    color: '#52525B',
  },
})