import styles from '@/styles/screens/reserva/detail.styles';
import { FontAwesome } from '@expo/vector-icons';
import { ComponentProps } from 'react';
import { Text, View } from 'react-native';

type StatusType = 'verde' | 'vermelho' | 'roxo' | 'amarelo' | 'neutral';
type IconName = ComponentProps<typeof FontAwesome>['name'];

type Props = {
  statusCode: string;
};

const getStatusType = (statusCode: string): StatusType => {
  if (statusCode === '1' || statusCode === '5') return 'verde';
  if (statusCode === '-5') return 'vermelho';
  if (statusCode === '10' || statusCode === '99') return 'roxo';
  if (statusCode === '-2' || statusCode === '-1' || statusCode === '-3') return 'amarelo';
  return 'neutral';
};

const getStatusColor = (type: StatusType) => {
  switch (type) {
    case 'verde':
      return '#13AE45';
    case 'vermelho':
      return '#E6463B';
    case 'roxo':
      return '#B138E6';
    case 'amarelo':
      return '#C99700';
    default:
      return '#4A6592';
  }
};

const getStatusConfig = (statusCode: string): { label: string; icon: IconName } => {
  switch (statusCode) {
    case '1':
      return { label: 'Confirmada', icon: 'check-circle' };
    case '5':
      return { label: 'Confirmada - Aguarda pagamento total', icon: 'check-circle' };
    case '-5':
      return { label: 'Cancelada', icon: 'times-circle' };
    case '10':
      return { label: 'Em Viagem', icon: 'ship' };
    case '99':
      return { label: 'Viagem Realizada', icon: 'ship' };
    case '-2':
      return { label: 'Pendente de confirmação com Agente', icon: 'clock-o' };
    case '-3':
      return { label: 'Pendente de Confirmação', icon: 'clock-o' };
    case '-1':
      return { label: 'Aguarda pagamento inicial', icon: 'clock-o' };
    default:
      return { label: 'Não definido', icon: 'question-circle' };
  }
};

export function StatusBadge({ statusCode }: Props) {
  const type = getStatusType(statusCode);
  const config = getStatusConfig(statusCode);
  const color = getStatusColor(type);

  return (
    <View
      style={[
        styles.statusBadge,
        type === 'verde' && styles.statusSuccess,
        type === 'vermelho' && styles.statusDanger,
        type === 'roxo' && styles.statusInfo,
        type === 'amarelo' && styles.statusPendente,
      ]}>
      <View style={styles.statusBadgeContent}>
        <FontAwesome name={config.icon} size={12} color={color} />
        <Text
          style={[
            styles.statusBadgeText,
            type === 'verde' && styles.statusTextSuccess,
            type === 'vermelho' && styles.statusTextDanger,
            type === 'roxo' && styles.statusTextInfo,
            type === 'amarelo' && styles.statusTextPendente,
          ]}>
          {config.label}
        </Text>
      </View>
    </View>
  );
}