import React, { memo } from 'react';
import { Animated, StyleSheet, Text, View } from 'react-native';
import { Feather } from '@expo/vector-icons';
import { G, R, cardShadow } from '../../constants/visits.theme';
import { formatDistance } from '../../utils/visits.distance';
import { VisitListing } from '../../types/visits.types';

type VisitInfoCardProps = {
  fadeAnim: Animated.Value;
  listing: VisitListing;
  visitType: string;
  distance: number | null;
};

const VisitInfoCard = ({ fadeAnim, listing, visitType, distance }: VisitInfoCardProps) => {
  const far = distance !== null && distance > 100;
  const unknown = distance === null;

  const chipBg = unknown ? G.background : far ? G.warningContainer : G.successContainer;
  const chipFg = unknown ? G.textSecondary : far ? G.warningDark : G.success;

  return (
    <Animated.View style={[styles.card, { opacity: fadeAnim }]}>
      <View style={styles.row}>
        <View style={styles.icon}>
          <Feather name="map-pin" size={20} color={G.primary} />
        </View>
        <View style={{ flex: 1 }}>
          <Text style={styles.title}>{listing.title}</Text>
          <Text style={styles.subtitle}>{listing.address}</Text>
        </View>
      </View>

      <View style={styles.chips}>
        <View style={[styles.chip, { backgroundColor: chipBg }]}>
          <Feather name="navigation" size={13} color={chipFg} />
          <Text style={[styles.chipText, { color: chipFg }]}>
            {unknown ? 'Position en cours…' : formatDistance(distance)}
          </Text>
        </View>

        <View style={[styles.chip, { backgroundColor: G.primaryContainer }]}>
          <Feather name="users" size={13} color={G.primaryDark} />
          <Text style={[styles.chipText, { color: G.primaryDark }]}>{visitType}</Text>
        </View>
      </View>

      {visitType !== 'Face à face' && (
        <Text style={styles.warning}>Accompagnant obligatoire</Text>
      )}
    </Animated.View>
  );
};

export default memo(VisitInfoCard);

const styles = StyleSheet.create({
  card: { backgroundColor: G.surface, borderRadius: R.lg, padding: 16, ...cardShadow },
  row: { flexDirection: 'row', alignItems: 'center' },
  icon: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: G.primaryContainer,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  title: { fontSize: 16, fontWeight: '500', color: G.text },
  subtitle: { fontSize: 13, color: G.textSecondary, marginTop: 2 },
  chips: { flexDirection: 'row', flexWrap: 'wrap', marginTop: 14 },
  chip: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: R.pill,
    paddingHorizontal: 10,
    paddingVertical: 5,
    marginRight: 8,
    marginBottom: 4,
  },
  chipText: { fontSize: 12, fontWeight: '500', marginLeft: 5 },
  warning: { color: G.error, fontSize: 12, fontWeight: '500', marginTop: 8 },
});