import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  ActivityIndicator,
  Alert,
  RefreshControl
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { COLORS, SHADOWS } from '../../constants/theme';
import { Delivery } from '../../types';
import { api, optimizeRouteWithTSP, updateDeliverySequence } from '../../services/api';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { navigationRef } from '../../navigation';
import { useAuth } from '../../contexts/AuthContext';
import { useDeliveries } from '../../contexts/DeliveriesContext';
import { useOfflineMode } from '../../contexts/OfflineModeContext';
import { AUTH_TOKEN_KEY, USER_DATA_KEY } from '@env';

interface RoutingScreenProps {
  navigation: any;
  route: any;
}

const RoutingScreen: React.FC<RoutingScreenProps> = ({ navigation, route }) => {
  // console.log('=== 🗺️ DEBUG: ROUTINGSCREEN RENDERIZANDO ===');
  // console.log('Navigation:', navigation ? 'Disponível' : 'Não disponível');
  // console.log('Route:', route ? 'Disponível' : 'Não disponível');
  
  const { signOut } = useAuth();
  const { deliveries, loading: isLoading, error, refreshDeliveries } = useDeliveries();
  const { isOfflineMode } = useOfflineMode();
  const { isInitialDataLoaded } = useOfflineMode();
  const [isRouting, setIsRouting] = useState(false);
  const [routingProgress, setRoutingProgress] = useState(0);
  const [refreshing, setRefreshing] = useState(false);

  // Usar dados do contexto em vez de carregar diretamente
  useEffect(() => {
    // console.log('=== 🗺️ DEBUG: ROUTINGSCREEN USANDO DADOS DO CONTEXTO ===');
    // console.log('📦 Entregas do contexto:', deliveries.length);
    // console.log('📊 Fonte dos dados:', isInitialDataLoaded ? 'LOCAL (SQLite)' : 'API');
    // console.log('🔄 Loading:', isLoading);
    // console.log('❌ Error:', error);
    
    // Se já tem roteirização e não está carregando, redirecionar
    if (!isLoading && deliveries.length > 0) {
      const hasRouting = deliveries.some(delivery => delivery.routing === 1);
      // console.log('🔍 Já tem roteirização?', hasRouting);
      
      if (hasRouting) {
        // console.log('✅ Já tem roteirização - Redirecionando para Main');
        navigation.navigate('Main');
      }
    }
  }, [deliveries, isLoading, error, isInitialDataLoaded, navigation]);

  // Função para verificar se é erro de autenticação
  const isAuthenticationError = (message: string): boolean => {
    const authErrors = [
      'token',
      'autenticação',
      'authentication',
      'unauthorized',
      'não autorizado',
      'não autenticado',
      'sessão expirada',
      'session expired',
      '401',
      '403',
      'forbidden',
      'proibido',
      'credenciais inválidas',
      'invalid credentials',
      'jwt',
      'bearer'
    ];
    
    const lowerMessage = message.toLowerCase();
    return authErrors.some(error => lowerMessage.includes(error));
  };

  // Função para obter token da API (que já está autenticada)
  const getCurrentToken = async (): Promise<string | null> => {
    try {
      // Tentar usar a API que já tem o token carregado
      console.log('🔐 Tentando obter token da API...');
      
      // Fazer uma requisição simples para verificar se o token está funcionando
      const testResponse = await api.request('/v1/driver/deliveries');
      if (testResponse) {
        console.log('✅ Token da API está funcionando');
        // Se chegou aqui, o token está válido
        return 'VALID_TOKEN'; // Retorna um valor simbólico, pois a API já tem o token
      }
      return null;
    } catch (error) {
      console.log('❌ Token da API não está funcionando');
      return null;
    }
  };

  // Função para forçar logout
  const forceLogout = async (reason: string) => {
    try {
      console.log(`🔐 Forçando logout: ${reason}`);
      
      // Limpar dados locais
      await AsyncStorage.multiRemove([AUTH_TOKEN_KEY, USER_DATA_KEY]);
      
      // Fazer logout na API
      await api.logout();
      
      // Limpar estado do usuário
        await signOut();
      
      console.log('✅ Logout forçado concluído');
    } catch (error) {
      console.error('❌ Erro ao forçar logout:', error);
      // Mesmo com erro, limpar o estado do usuário
      await signOut();
    }
  };

  // Verificar status de autenticação periodicamente
  useEffect(() => {
    const checkAuthStatus = async () => {
      try {
        // Não verificar token se estiver offline - usar dados locais
        if (isOfflineMode) {
          console.log('📱 Modo offline ativo - pulando verificação de token');
          return;
        }
        
        const tokenValid = await getCurrentToken();
        if (!tokenValid) {
          console.log('🔐 Token inválido detectado, forçando logout');
          await forceLogout('Token inválido detectado');
        }
      } catch (error) {
        console.error('❌ Erro ao verificar status de autenticação:', error);
        // Se estiver offline, não forçar logout por erro de rede
        if (!isOfflineMode) {
          console.log('🔐 Erro de rede detectado, mas não está offline - verificando se deve fazer logout');
        }
      }
    };

    // Verificar a cada 10 segundos (menos frequente para não sobrecarregar)
    const interval = setInterval(checkAuthStatus, 10000);
    
    return () => clearInterval(interval);
  }, [isOfflineMode]); // Adicionar isOfflineMode como dependência

  // Função para executar roteirização
  const executeRouting = async () => {
    if (deliveries.length === 0) {
      Alert.alert('Erro', 'Nenhuma entrega disponível para roteirização');
        return;
      }

    setIsRouting(true);
    setRoutingProgress(0);

    try {
      console.log('=== 🚚 INICIANDO ROTEIRIZAÇÃO ===');
      console.log('📦 Total de entregas:', deliveries.length);

      // Filtrar entregas que precisam de roteirização
      const deliveriesNeedingRouting = deliveries.filter(delivery => 
        delivery.routing === 0 || !delivery.deliverySeq
      );

      if (deliveriesNeedingRouting.length === 0) {
        Alert.alert('Info', 'Todas as entregas já estão roteirizadas');
        setIsRouting(false);
        return;
      }

      console.log('📦 Entregas para roteirização:', deliveriesNeedingRouting.length);

      // Atualizar progresso
      setRoutingProgress(20);

      // Otimizar rota usando algoritmo TSP
      console.log('🎯 Otimizando rota com algoritmo TSP...');
      const optimizedDeliveries = await optimizeRouteWithTSP(deliveriesNeedingRouting);
      
      setRoutingProgress(50);

      if (optimizedDeliveries.length === 0) {
        throw new Error('Falha na otimização da rota');
      }

      console.log('✅ Rota otimizada com sucesso');

      // Preparar dados para envio
      const routingData = optimizedDeliveries.map((delivery: Delivery) => ({
        outId: delivery.outId,
        customerId: delivery.customerId,
        deliverySeq: delivery.deliverySeq,
        lat: delivery.lat || delivery.coordinates?.latitude || 0,
        lng: delivery.lng || delivery.coordinates?.longitude || 0
      }));

      setRoutingProgress(70);

      // Enviar dados de roteirização para API
      console.log('📤 Enviando dados de roteirização...');
      const result = await api.sendRoutingOrder(routingData);
      
      setRoutingProgress(90);

      console.log('✅ Roteirização enviada com sucesso:', result);

      // Atualizar entregas locais
      console.log('✅ Entregas roteirizadas com sucesso');
            
            setRoutingProgress(100);

      // Aguardar um pouco para mostrar progresso completo
      await new Promise(resolve => setTimeout(resolve, 500));
            
            Alert.alert(
        'Sucesso',
        'Roteirização concluída com sucesso!',
              [
                {
                  text: 'OK',
                  onPress: () => {
              // Recarregar entregas e navegar para Main
              refreshDeliveries();
              navigation.navigate('Main');
                  }
                }
              ]
            );

    } catch (error: any) {
      console.error('❌ Erro na roteirização:', error);
      
      let errorMessage = 'Erro desconhecido na roteirização';
      
      if (isAuthenticationError(error.message)) {
        errorMessage = 'Sessão expirada. Faça login novamente.';
        await forceLogout('Erro de autenticação na roteirização');
        return;
      } else if (error.message) {
        errorMessage = error.message;
      }
      
      Alert.alert('Erro na Roteirização', errorMessage);
    } finally {
      setIsRouting(false);
      setRoutingProgress(0);
    }
  };

  // Função para recarregar entregas
  const onRefresh = async () => {
      setRefreshing(true);
    try {
      await refreshDeliveries();
    } catch (error) {
      console.error('Erro ao recarregar entregas:', error);
    } finally {
      setRefreshing(false);
    }
  };

  // Renderizar loading
  if (isLoading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color={COLORS.primary} />
        <Text style={styles.loadingText}>Carregando entregas...</Text>
        </View>
    );
  }

  // Renderizar erro
  if (error) {
    return (
      <View style={styles.errorContainer}>
        <Ionicons name="alert-circle" size={64} color={COLORS.error} />
        <Text style={styles.errorTitle}>Erro ao Carregar Entregas</Text>
        <Text style={styles.errorMessage}>{error}</Text>
        <TouchableOpacity style={styles.retryButton} onPress={onRefresh}>
          <Text style={styles.retryButtonText}>Tentar Novamente</Text>
        </TouchableOpacity>
    </View>
  );
  }

  // Renderizar quando não há entregas
  if (deliveries.length === 0) {
    return (
      <View style={styles.emptyContainer}>
        <Ionicons name="cube-outline" size={64} color={COLORS.textLight} />
        <Text style={styles.emptyTitle}>Nenhuma Entrega Disponível</Text>
        <Text style={styles.emptyMessage}>
          Não há entregas para roteirização no momento.
        </Text>
        <TouchableOpacity style={styles.refreshButton} onPress={onRefresh}>
          <Text style={styles.refreshButtonText}>Atualizar</Text>
        </TouchableOpacity>
      </View>
    );
  }

  // Verificar se já tem roteirização
  const hasRouting = deliveries.some(delivery => delivery.routing === 1);
  const deliveriesNeedingRouting = deliveries.filter(delivery => 
    delivery.routing === 0 || !delivery.deliverySeq
  );

  return (
    <View style={styles.container}>
      <LinearGradient
        colors={[COLORS.primary, COLORS.primary]}
        style={styles.header}
      >
        <View style={styles.headerContent}>
        <TouchableOpacity
          style={styles.backButton}
            onPress={() => navigation.goBack()}
        >
          <Ionicons name="arrow-back" size={24} color="white" />
        </TouchableOpacity>
          <Text style={styles.headerTitle}>Roteirização</Text>
        <TouchableOpacity
            style={styles.logoutButton}
            onPress={() => forceLogout('Logout manual')}
        >
            <Ionicons name="log-out-outline" size={24} color="white" />
        </TouchableOpacity>
        </View>
      </LinearGradient>

      <ScrollView
        style={styles.content}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
      >
        {/* Status da Roteirização */}
        <View style={styles.statusCard}>
          <View style={styles.statusHeader}>
            <Ionicons 
              name={hasRouting ? "checkmark-circle" : "time"} 
              size={24} 
              color={hasRouting ? COLORS.success : COLORS.warning} 
            />
            <Text style={styles.statusTitle}>
              {hasRouting ? 'Roteirização Concluída' : 'Aguardando Roteirização'}
              </Text>
            </View>
          <Text style={styles.statusMessage}>
            {hasRouting 
              ? 'Todas as entregas foram roteirizadas e estão prontas para execução.'
              : `${deliveriesNeedingRouting.length} entregas aguardando roteirização.`
            }
              </Text>
          </View>
          
        {/* Informações das Entregas */}
        <View style={styles.deliveriesCard}>
          <Text style={styles.deliveriesTitle}>Entregas ({deliveries.length})</Text>
          
          {deliveries.slice(0, 5).map((delivery, index) => (
            <View key={delivery.id} style={styles.deliveryItem}>
              <View style={styles.deliveryInfo}>
                <Text style={styles.deliveryCustomer}>{delivery.customerName}</Text>
                <Text style={styles.deliveryAddress}>
                  {delivery.street}, {delivery.streetNumber}
              </Text>
                <Text style={styles.deliveryCity}>
                  {delivery.neighborhood} - {delivery.city}
              </Text>
              </View>
              <View style={styles.deliveryStatus}>
                <Ionicons 
                  name={delivery.routing === 1 ? "checkmark-circle" : "ellipse-outline"} 
                  size={20} 
                  color={delivery.routing === 1 ? COLORS.success : COLORS.textLight} 
                />
                <Text style={styles.deliverySeq}>
                  {delivery.deliverySeq || 'N/A'}
                </Text>
            </View>
            </View>
          ))}
          
          {deliveries.length > 5 && (
            <Text style={styles.moreDeliveries}>
              ... e mais {deliveries.length - 5} entregas
            </Text>
          )}
        </View>

        {/* Botão de Roteirização */}
        {!hasRouting && deliveriesNeedingRouting.length > 0 && (
          <TouchableOpacity
            style={[styles.routingButton, isRouting && styles.routingButtonDisabled]}
            onPress={executeRouting}
            disabled={isRouting}
          >
            <LinearGradient
              colors={isRouting ? [COLORS.textLight, COLORS.textLight] : [COLORS.primary, COLORS.primary]}
              style={styles.routingButtonGradient}
            >
              {isRouting ? (
                <View style={styles.routingProgress}>
                  <ActivityIndicator size="small" color="white" />
                  <Text style={styles.routingButtonText}>
                    Roteirizando... {routingProgress}%
                  </Text>
                </View>
              ) : (
                <>
                  <Ionicons name="navigate" size={24} color="white" />
                  <Text style={styles.routingButtonText}>
                    Executar Roteirização
                  </Text>
                </>
              )}
            </LinearGradient>
          </TouchableOpacity>
        )}

        {/* Botão para ir para Main se já tem roteirização */}
        {hasRouting && (
        <TouchableOpacity
            style={styles.mainButton}
            onPress={() => navigation.navigate('Main')}
        >
            <LinearGradient
              colors={[COLORS.success, COLORS.success]}
              style={styles.mainButtonGradient}
            >
              <Ionicons name="home" size={24} color="white" />
              <Text style={styles.mainButtonText}>
                Ir para Entregas
            </Text>
          </LinearGradient>
          </TouchableOpacity>
        )}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.background,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: COLORS.background,
  },
  loadingText: {
    marginTop: 16,
    fontSize: 16,
    color: COLORS.text,
  },
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: COLORS.background,
  },
  errorTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: COLORS.error,
    marginTop: 16,
    marginBottom: 8,
  },
  errorMessage: {
    fontSize: 16,
    color: COLORS.text,
    textAlign: 'center',
    marginBottom: 20,
  },
  retryButton: {
    backgroundColor: COLORS.primary,
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
  },
  retryButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: COLORS.background,
  },
  emptyTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: COLORS.text,
    marginTop: 16,
    marginBottom: 8,
  },
  emptyMessage: {
    fontSize: 16,
    color: COLORS.textLight,
    textAlign: 'center',
    marginBottom: 20,
  },
  refreshButton: {
    backgroundColor: COLORS.primary,
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
  },
  refreshButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  header: {
    paddingTop: 50,
    paddingBottom: 20,
    paddingHorizontal: 20,
  },
  headerContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  backButton: {
    padding: 8,
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
  logoutButton: {
    padding: 8,
  },
  content: {
    flex: 1,
    padding: 20,
  },
  statusCard: {
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 20,
    marginBottom: 20,
    ...SHADOWS.medium,
  },
  statusHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  statusTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: COLORS.text,
    marginLeft: 12,
  },
  statusMessage: {
    fontSize: 14,
    color: COLORS.textLight,
    lineHeight: 20,
  },
  deliveriesCard: {
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 20,
    marginBottom: 20,
    ...SHADOWS.medium,
  },
  deliveriesTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: COLORS.text,
    marginBottom: 16,
  },
  deliveryItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
  },
  deliveryInfo: {
    flex: 1,
  },
  deliveryCustomer: {
    fontSize: 16,
    fontWeight: 'bold',
    color: COLORS.text,
  },
  deliveryAddress: {
    fontSize: 14,
    color: COLORS.textLight,
    marginTop: 2,
  },
  deliveryCity: {
    fontSize: 12,
    color: COLORS.textLight,
    marginTop: 2,
  },
  deliveryStatus: {
    alignItems: 'center',
  },
  deliverySeq: {
    fontSize: 12,
    color: COLORS.textLight,
    marginTop: 4,
  },
  moreDeliveries: {
    fontSize: 14,
    color: COLORS.textLight,
    textAlign: 'center',
    marginTop: 8,
    fontStyle: 'italic',
  },
  routingButton: {
    marginBottom: 20,
    borderRadius: 12,
    overflow: 'hidden',
  },
  routingButtonDisabled: {
    opacity: 0.7,
  },
  routingButtonGradient: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 16,
    paddingHorizontal: 20,
  },
  routingProgress: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  routingButtonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
    marginLeft: 12,
  },
  mainButton: {
    marginBottom: 20,
    borderRadius: 12,
    overflow: 'hidden',
  },
  mainButtonGradient: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 16,
    paddingHorizontal: 20,
  },
  mainButtonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
    marginLeft: 12,
  },
});

export default RoutingScreen; 