import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
import { ActivityIndicator, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Feather as Icon } from '@expo/vector-icons';

import { G, R, cardShadow } from '../../constants/visits.theme';
import { VisitListing } from '../../types/visits.types';
import { getCachedFix, getReadyPosition } from '../../utils/visits.location';
import { runOrQueue } from '../../utils/visits.pending';
import VisitHistoryButton from '../history/VisitHistoryButton';

type ActiveVisitViewProps = {
  listing: VisitListing;
  elapsed: number;
  adminPending?: boolean;
  clearActiveVisit?: () => Promise<void> | void;
  setVisitActive: (value: boolean) => void;
  setVisitStarted: (value: boolean) => void;
};

const ActiveVisitView = ({
  listing,
  elapsed,
  setVisitActive,
  setVisitStarted,
}: ActiveVisitViewProps) => {
  const [finishing, setFinishing] = useState(false);
  const [fix, setFix] = useState(getCachedFix());
  const startedRef = useRef(false);

  const timer = useMemo(() => {
    const h = Math.floor(elapsed / 3600);
    const m = Math.floor((elapsed % 3600) / 60).toString().padStart(2, '0');
    const s = (elapsed % 60).toString().padStart(2, '0');
    return h > 0 ? `${h}:${m}:${s}` : `${m}:${s}`;
  }, [elapsed]);

  // Début de visite : la position est lue sans bloquer ; en cas d'échec, l'envoi est mis en file d'attente
  useEffect(() => {
    if (!listing?.id || startedRef.current) return;
    startedRef.current = true;

    (async () => {
      const start = await getReadyPosition();

      await runOrQueue({
        type: 'start',
        payload: {
          listing_id: listing.id,
          ...(start ? { start_lat: start.latitude, start_lng: start.longitude } : {}),
        },
      });
    })().catch((error) => console.warn('Start visit error:', error));
  }, [listing?.id]);

  // Indicateur GPS en direct (information seulement, ne bloque rien)
  useEffect(() => {
    const id = setInterval(() => setFix(getCachedFix()), 3000);
    return () => clearInterval(id);
  }, []);

  const finishVisit = async () => {
    if (finishing || !listing?.id) return;
    setFinishing(true);

    // Position déjà prête en cache : passage immédiat au rapport, sans attendre le réseau
    const end = await getReadyPosition();

    runOrQueue({
      type: 'finish',
      payload: {
        listing_id: listing.id,
        ...(end ? { end_lat: end.latitude, end_lng: end.longitude } : {}),
      },
    }).catch((error) => console.warn('Finish visit error:', error));

    setVisitActive(false);
    setVisitStarted(true);
  };

  const gpsOk = !!fix && Date.now() - fix.timestamp < 2 * 60 * 1000;

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor={G.background} />

      <View style={styles.appBar}>
        <Text style={styles.appBarTitle}>Visite en cours</Text>
        <VisitHistoryButton listingId={listing.id} />
        <View style={[styles.chip, gpsOk ? styles.chipOk : styles.chipWait]}>
          <Icon name="map-pin" size={13} color={gpsOk ? G.success : G.warningDark} />
          <Text style={[styles.chipText, { color: gpsOk ? G.success : G.warningDark }]}>
            {gpsOk
              ? `GPS enregistré${fix?.accuracy ? ` · ±${Math.round(fix.accuracy)} m` : ''}`
              : 'GPS en attente'}
          </Text>
        </View>
      </View>

      <View style={styles.body}>
        <View style={styles.placeCard}>
          <View style={styles.placeIcon}>
            <Icon name="map-pin" size={20} color={G.primary} />
          </View>
          <View style={{ flex: 1 }}>
            <Text style={styles.place} numberOfLines={2}>{listing.title}</Text>
            {!!listing.address && (
              <Text style={styles.address} numberOfLines={2}>{listing.address}</Text>
            )}
          </View>
        </View>

        <View style={styles.timerRing}>
          <Text style={styles.timerText}>{timer}</Text>
          <Text style={styles.timerLabel}>durée de la visite</Text>
        </View>

        <Text style={styles.hint}>
          Votre position est enregistrée en continu. Terminer la visite ne dépend ni du GPS ni du réseau.
        </Text>
      </View>

      <View style={styles.bottomBar}>
        <TouchableOpacity
          style={[styles.endButton, finishing && styles.disabled]}
          onPress={finishVisit}
          disabled={finishing}
          activeOpacity={0.85}
        >
          {finishing ? (
            <ActivityIndicator color="#FFF" />
          ) : (
            <Icon name="check-circle" size={20} color="#FFF" />
          )}
          <Text style={styles.endText}>Terminer et remplir le rapport</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

export default memo(ActiveVisitView);

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: G.background },
  appBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 14,
    backgroundColor: G.surface,
    borderBottomWidth: 1,
    borderBottomColor: G.outline,
  },
  appBarTitle: { fontSize: 20, fontWeight: '500', color: G.text, flex: 1 },
  chip: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: R.pill,
    paddingHorizontal: 10,
    paddingVertical: 5,
  },
  chipOk: { backgroundColor: G.successContainer },
  chipWait: { backgroundColor: G.warningContainer },
  chipText: { fontSize: 12, fontWeight: '500', marginLeft: 5 },
  body: { flex: 1, padding: 16, alignItems: 'center' },
  placeCard: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: G.surface,
    borderRadius: R.lg,
    padding: 16,
    ...cardShadow,
  },
  placeIcon: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: G.primaryContainer,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  place: { fontSize: 16, fontWeight: '500', color: G.text },
  address: { fontSize: 13, color: G.textSecondary, marginTop: 2 },
  timerRing: {
    width: 220,
    height: 220,
    borderRadius: 110,
    borderWidth: 8,
    borderColor: G.primaryContainer,
    backgroundColor: G.surface,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 36,
    ...cardShadow,
  },
  timerText: { fontSize: 44, fontWeight: '400', color: G.primary, letterSpacing: 1 },
  timerLabel: { fontSize: 12, color: G.textSecondary, marginTop: 4 },
  hint: {
    marginTop: 28,
    fontSize: 13,
    lineHeight: 18,
    color: G.textSecondary,
    textAlign: 'center',
    paddingHorizontal: 12,
  },
  bottomBar: {
    padding: 16,
    backgroundColor: G.surface,
    borderTopWidth: 1,
    borderTopColor: G.outline,
  },
  endButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: G.primary,
    borderRadius: R.pill,
    paddingVertical: 14,
  },
  disabled: { opacity: 0.6 },
  endText: { color: '#FFF', fontWeight: '500', fontSize: 15, marginLeft: 8 },
});