import React from 'react';
import {
  ActivityIndicator,
  FlatList,
  Image,
  Modal,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { Feather } from '@expo/vector-icons';
import useListingHistory from '../../hooks/useListingHistory';
import AudioPlayerBar from '../shared/AudioPlayerBar';

type ListingHistoryProps = {
  visible: boolean;
  listingId: string;
  onClose: () => void;
};

const parseMeds = (meds?: string | null): string[] => {
  if (!meds) return [];

  try {
    return JSON.parse(meds);
  } catch {
    return [];
  }
};

const ListingHistory = ({
  visible,
  listingId,
  onClose,
}: ListingHistoryProps) => {
  const { visits, loading, error, refresh } = useListingHistory(listingId, visible);

  return (
    <Modal visible={visible} animationType="slide">
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Historique des visites</Text>

          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
            <Feather name="x" size={22} color="#202124" />
          </TouchableOpacity>
        </View>

        {loading && visits.length === 0 ? (
          <ActivityIndicator size="large" style={styles.loader} color="#1A73E8" />
        ) : error && visits.length === 0 ? (
          <View style={styles.empty}>
            <Text style={styles.emptyText}>Impossible de charger l'historique.</Text>
            <TouchableOpacity onPress={refresh} style={styles.retryButton}>
              <Text style={styles.retryText}>Réessayer</Text>
            </TouchableOpacity>
          </View>
        ) : visits.length === 0 ? (
          <View style={styles.empty}>
            <Text style={styles.emptyText}>
              Aucune visite enregistrée pour ce listing.
            </Text>
          </View>
        ) : (
          <FlatList
            data={visits}
            keyExtractor={(item) => String(item.id)}
            refreshing={loading}
            onRefresh={refresh}
            contentContainerStyle={styles.listContent}
            ItemSeparatorComponent={() => <View style={{ height: 12 }} />}
            renderItem={({ item }) => {
              const meds = parseMeds(item.proposed_meds);

              return (
                <View style={styles.card}>
                  <View style={styles.cardHeader}>
                    <Text style={styles.title}>{item.visite_type}</Text>
                    <Text style={styles.date}>{item.date_visit}</Text>
                  </View>

                  <Text style={styles.meta}>
                    Interlocuteur: {item.interlocuteur || '—'}
                  </Text>
                  <Text style={styles.meta}>
                    Utilisateur: {item.user?.name || '—'}
                  </Text>

                  {meds.length > 0 && (
                    <View style={styles.tags}>
                      {meds.map((med, index) => (
                        <View key={`${med}-${index}`} style={styles.tag}>
                          <Text style={styles.tagText}>{med}</Text>
                        </View>
                      ))}
                    </View>
                  )}

                  {item.notes ? (
                    <Text style={styles.notes}>{item.notes}</Text>
                  ) : null}

                  {item.image_url ? (
                    <Image source={{ uri: item.image_url }} style={styles.photo} />
                  ) : null}

                  {item.audio_url ? (
                    <AudioPlayerBar
                      uri={item.audio_url}
                      fallbackDuration={item.audio_duration ?? 0}
                    />
                  ) : null}
                </View>
              );
            }}
          />
        )}
      </SafeAreaView>
    </Modal>
  );
};

export default ListingHistory;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F8F9FA',
    paddingHorizontal: 16,
  },
  header: {
    paddingTop: 8,
    paddingBottom: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: '700',
    color: '#202124',
  },
  closeButton: {
    width: 38,
    height: 38,
    borderRadius: 19,
    backgroundColor: '#DADCE0',
    alignItems: 'center',
    justifyContent: 'center',
  },
  loader: {
    marginTop: 50,
  },
  listContent: {
    paddingBottom: 40,
  },
  card: {
    backgroundColor: '#FFF',
    borderRadius: 14,
    padding: 14,
    borderWidth: 1,
    borderColor: '#DADCE0',
  },
  cardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  title: {
    fontSize: 15,
    fontWeight: '700',
    color: '#1F2A44',
  },
  date: {
    fontSize: 12,
    color: '#7A869A',
  },
  meta: {
    marginTop: 4,
    fontSize: 13,
    color: '#444',
  },
  tags: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 8,
  },
  tag: {
    backgroundColor: '#E6ECFF',
    borderRadius: 20,
    paddingHorizontal: 12,
    paddingVertical: 5,
    marginRight: 6,
    marginBottom: 6,
  },
  tagText: {
    fontSize: 12,
    fontWeight: '600',
    color: '#2F3E77',
  },
  notes: {
    marginTop: 8,
    fontStyle: 'italic',
    color: '#555',
  },
  photo: {
    width: '100%',
    height: 160,
    borderRadius: 12,
    marginTop: 10,
    backgroundColor: '#F1F3F4',
  },
  retryButton: {
    marginTop: 14,
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 100,
    backgroundColor: '#E8F0FE',
  },
  retryText: { color: '#1A73E8', fontWeight: '500' },
  empty: {
    padding: 20,
    alignItems: 'center',
    marginTop: 40,
  },
  emptyText: {
    fontSize: 14,
    color: '#888',
    textAlign: 'center',
  },
});