import { Feather } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { colors, radius, spacing, typography } from '../../../theme';
import { Deplacement, DeplacementStatus } from '../types/deplacements.types';
import DeplacementStatusBadge from './DeplacementStatusBadge';

type DeplacementCardProps = {
  item: Deplacement;
  expanded: boolean;
  onToggle: () => void;
  onUpdateStatus: (id: string, status: DeplacementStatus) => void;
};

const DeplacementCard = ({
  item,
  expanded,
  onToggle,
  onUpdateStatus,
}: DeplacementCardProps) => {
  return (
    <View style={styles.card}>
      <TouchableOpacity activeOpacity={0.85} onPress={onToggle}>
        <Text style={styles.route}>
          {item.from_city} → {item.to_city}
        </Text>

        <View style={styles.row}>
          <Text style={styles.date}>{item.date_depart}</Text>
          <Text style={styles.km}>{item.distance_km} km</Text>
        </View>
      </TouchableOpacity>

      <View style={styles.statusRow}>
        <DeplacementStatusBadge status={item.status} />

        {item.status === 'non_realise' && (
          <TouchableOpacity
            style={styles.actionButton}
            onPress={() => onUpdateStatus(item.id, 'en_cours')}
          >
            <Feather name="play" size={16} color={colors.white} />
            <Text style={styles.buttonText}>Commencer</Text>
          </TouchableOpacity>
        )}

        {item.status === 'en_cours' && (
          <View style={styles.actionGroup}>
            <TouchableOpacity
              style={[styles.actionButton, styles.success]}
              onPress={() => onUpdateStatus(item.id, 'realise')}
            >
              <Feather name="check" size={16} color={colors.white} />
              <Text style={styles.buttonText}>Terminer</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={[styles.actionButton, styles.cancel]}
              onPress={() => onUpdateStatus(item.id, 'non_realise')}
            >
              <Feather name="x" size={16} color={colors.white} />
              <Text style={styles.buttonText}>Annuler</Text>
            </TouchableOpacity>
          </View>
        )}
      </View>

      {expanded && (
        <View style={styles.detailBox}>
          <Text style={styles.detailText}>🚗 Départ : {item.from_city}</Text>
          <Text style={styles.detailText}>🏁 Arrivée : {item.to_city}</Text>
          <Text style={styles.detailText}>📅 Date : {item.date_depart}</Text>
          <Text style={styles.detailText}>📏 Distance : {item.distance_km} km</Text>
        </View>
      )}
    </View>
  );
};

export default DeplacementCard;

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.white,
    borderRadius: radius.lg,
    padding: spacing.md,
    borderWidth: 1,
    borderColor: colors.gray200,
  },
  route: {
    fontSize: typography.fontSize.md,
    fontWeight: typography.fontWeight.semibold,
    color: colors.textPrimary,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: spacing.xs,
  },
  date: {
    color: colors.textSecondary,
  },
  km: {
    color: colors.success || '#6FBF73',
    fontWeight: typography.fontWeight.semibold,
  },
  statusRow: {
    marginTop: spacing.sm,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  actionGroup: {
    flexDirection: 'row',
  },
  actionButton: {
    flexDirection: 'row',
    backgroundColor: colors.primary,
    paddingVertical: 6,
    paddingHorizontal: spacing.sm,
    borderRadius: radius.md,
    alignItems: 'center',
    marginLeft: spacing.xs,
  },
  buttonText: {
    color: colors.white,
    marginLeft: 4,
    fontSize: typography.fontSize.xs,
  },
  success: {
    backgroundColor: colors.success || '#6FBF73',
  },
  cancel: {
    backgroundColor: colors.danger || '#E53935',
  },
  detailBox: {
    marginTop: spacing.md,
    paddingTop: spacing.md,
    borderTopWidth: 1,
    borderColor: colors.gray100,
  },
  detailText: {
    color: colors.textSecondary,
    marginBottom: spacing.xs,
  },
});