import React from 'react'
import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { LinearGradient } from 'expo-linear-gradient'
import { Ionicons } from '@expo/vector-icons'
import { COLORS } from '../../constants/theme'
import { useNavigation, useRoute } from '@react-navigation/native'
import { useDeliveries } from '../../contexts/DeliveriesContext'

const DeliverySuccess = () => {
  const navigation = useNavigation()
  const route = useRoute()
  const { refreshDeliveries } = useDeliveries()
  // @ts-ignore
  const { deliveryCount, deliveryData, status } = route.params || {}

  return (
    <SafeAreaView style={styles.container}>
      <LinearGradient colors={[COLORS.primary, '#3B82F6']} style={styles.header}>
        <Ionicons name="checkmark-circle" size={64} color="white" style={{ marginBottom: 16 }} />
        <Text style={styles.title}>Entrega Finalizada!</Text>
        <Text style={styles.subtitle}>
          {deliveryCount > 1
            ? `${deliveryCount} entregas finalizadas com sucesso!`
            : 'Entrega finalizada com sucesso!'}
        </Text>
      </LinearGradient>
      <ScrollView style={styles.content} contentContainerStyle={{ padding: 24 }}>
        {deliveryData && Array.isArray(deliveryData) && deliveryData.map((item, idx) => (
          <View key={idx} style={styles.deliveryInfoCard}>
            <Text style={styles.infoTitle}>Entrega #{idx + 1}</Text>
            <Text style={styles.infoText}>Cliente: {item.receiverName}</Text>
            <Text style={styles.infoText}>Documento: {item.receiverDoc}</Text>
            <Text style={styles.infoText}>Status: {status}</Text>
            <Text style={styles.infoText}>Data: {item.deliveryDate}</Text>
            <Text style={styles.infoText}>Latitude: {item.lat}</Text>
            <Text style={styles.infoText}>Longitude: {item.lng}</Text>
          </View>
        ))}
      </ScrollView>
      <TouchableOpacity style={styles.button} onPress={async () => {
        // Recarregar entregas antes de navegar
        await refreshDeliveries()
        
        // Navegar para a Home com parâmetro de refresh
        // @ts-ignore
        navigation.navigate('Home', { refreshDeliveries: true })
      }}>
        <LinearGradient colors={[COLORS.primary, '#3B82F6']} style={styles.buttonGradient}>
          <Ionicons name="list" size={20} color="white" />
          <Text style={styles.buttonText}>Ver Entregas</Text>
        </LinearGradient>
      </TouchableOpacity>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: COLORS.background },
  header: { alignItems: 'center', marginTop: -29, paddingVertical: 32, borderBottomLeftRadius: 32, borderBottomRightRadius: 32 },
  title: { fontSize: 24, fontWeight: 'bold', color: 'white', marginBottom: 8 },
  subtitle: { fontSize: 16, color: 'white', marginBottom: 8 },
  content: { flex: 1 },
  deliveryInfoCard: { backgroundColor: COLORS.card, borderRadius: 16, padding: 16, marginBottom: 16 },
  infoTitle: { fontWeight: 'bold', fontSize: 16, marginBottom: 4, color: COLORS.primary },
  infoText: { fontSize: 14, color: COLORS.text, marginBottom: 2 },
  button: { margin: 24 },
  buttonGradient: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', borderRadius: 12, paddingVertical: 14 },
  buttonText: { color: 'white', fontWeight: 'bold', fontSize: 16, marginLeft: 8 },
})

export default DeliverySuccess 