import React, { memo } from 'react';
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { Feather as Icon } from '@expo/vector-icons';
import { G, R } from '../../constants/visits.theme';

type VisitActionButtonsProps = {
  listing: {
    title: string;
    latitude: number | null;
    longitude: number | null;
  };
  isFar: boolean;
  positionReady: boolean;
  confirmedOnSite: boolean;
  boutonColor: string;
  handleStartVisit: () => void;
  handleAddCoordinates: () => void;
};

const VisitActionButtons = ({
  listing,
  isFar,
  positionReady,
  confirmedOnSite,
  boutonColor,
  handleStartVisit,
  handleAddCoordinates,
}: VisitActionButtonsProps) => {
  // La localisation en cours ne bloque plus le démarrage : simple information
  const gpsBanner = !positionReady ? (
    <View style={styles.loadingBtn}>
      <ActivityIndicator size="small" color={G.primary} />
      <Text style={styles.loadingText}>Localisation en cours… vous pouvez déjà démarrer</Text>
    </View>
  ) : null;

  const showConfirmLocation = !listing.latitude || !listing.longitude;

  return (
    <>
      {gpsBanner}
      {showConfirmLocation ? (
        <View style={styles.centered}>
          {!confirmedOnSite ? (
            <>
              <Text style={styles.warningText}>
                Êtes-vous dans le lieu actuel de {listing.title} ?
              </Text>

              <TouchableOpacity
                style={[styles.ctaBtn, { backgroundColor: boutonColor, marginTop: 14 }]}
                onPress={handleAddCoordinates}
              >
                <Icon name="map-pin" size={22} color="#FFF" />
                <Text style={styles.ctaText}>Oui, je suis sur le lieu</Text>
              </TouchableOpacity>
            </>
          ) : (
            <TouchableOpacity
              style={[styles.ctaBtn, { backgroundColor: boutonColor }]}
              onPress={handleStartVisit}
            >
              <Icon name="play-circle" size={22} color="#FFF" />
              <Text style={styles.ctaText}>Commencer sur place</Text>
            </TouchableOpacity>
          )}
        </View>
      ) : (
        <TouchableOpacity
          style={[styles.ctaBtn, { backgroundColor: boutonColor }]}
          onPress={handleStartVisit}
        >
          <Icon
            name={isFar ? 'alert-triangle' : 'play-circle'}
            size={22}
            color="#FFF"
          />
          <Text style={styles.ctaText}>
            {isFar ? 'Commencer avec justification' : 'Commencer la visite'}
          </Text>
        </TouchableOpacity>
      )}
    </>
  );
};

export default memo(VisitActionButtons);

const styles = StyleSheet.create({
  loadingBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: G.primaryContainer,
    borderRadius: R.md,
    paddingVertical: 12,
    paddingHorizontal: 12,
    marginTop: 20,
  },
  loadingText: { color: G.primaryDark, fontWeight: '500', fontSize: 13, marginLeft: 8 },
  centered: { alignItems: 'center', marginTop: 10 },
  warningText: { color: G.text, fontWeight: '500', textAlign: 'center', marginTop: 16 },
  ctaBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: R.pill,
    paddingVertical: 14,
    marginTop: 20,
    paddingHorizontal: 24,
    alignSelf: 'stretch',
  },
  ctaText: { color: '#FFFFFF', fontWeight: '500', fontSize: 15, marginLeft: 8 },
});