"use client"

import { View, Text, StyleSheet, FlatList, TouchableOpacity, Platform } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { useNavigation } from "@react-navigation/native"
import { LinearGradient } from "expo-linear-gradient"
import { Ionicons } from "@expo/vector-icons"
import { COLORS, SHADOWS } from "../../constants/theme"
import { StatusBar } from "expo-status-bar"
import { useState, useEffect, useRef, useCallback, useMemo } from "react"
import { api } from "../../services/api"
import type { Delivery } from "../../types"
import { Modalize } from "react-native-modalize"
import { useDeliveries } from "../../contexts/DeliveriesContext"
import { useFocusEffect } from "@react-navigation/native"

interface FilterOptions {
  status: string[]
  sortBy: "deliverySeq" | "customerName" | "distance" | "outDate"
  sortOrder: "asc" | "desc"
}

const DeliveriesScreen = () => {
  const navigation = useNavigation()
  const { deliveries, loading, error, refreshDeliveries } = useDeliveries()
  const [filters, setFilters] = useState<FilterOptions>({
    status: [],
    sortBy: "deliverySeq",
    sortOrder: "asc",
  })

  const filterModalRef = useRef<Modalize>(null)

  // Recarregar entregas quando a tela ganhar foco
  useFocusEffect(
    useCallback(() => {
      console.log("🚨 DeliveriesScreen: Tela ganhou foco - recarregando entregas")
      refreshDeliveries()
    }, [refreshDeliveries])
  )

  // Otimizar aplicação de filtros com useMemo
  const filteredDeliveries = useMemo(() => {
    let filtered = [...deliveries]

    // Filtrar por status
    if (filters.status.length > 0) {
      filtered = filtered.filter((delivery) => filters.status.includes(delivery.status))
    }

    // Ordenar
    filtered.sort((a, b) => {
      let comparison = 0

      switch (filters.sortBy) {
        case "deliverySeq":
          comparison = a.deliverySeq - b.deliverySeq
          break
        case "customerName":
          comparison = a.customerName.localeCompare(b.customerName)
          break
        case "distance":
          comparison = (a.distance || 0) - (b.distance || 0)
          break
        case "outDate":
          const dateA = new Date(a.outDate || 0).getTime()
          const dateB = new Date(b.outDate || 0).getTime()
          comparison = dateA - dateB
          break
      }

      return filters.sortOrder === "desc" ? -comparison : comparison
    })

    return filtered
  }, [deliveries, filters])






  const handleDeliveryPress = (delivery: Delivery) => {
    console.log('=== DEBUG: NAVEGANDO PARA DETALHES DA ENTREGA ===');
    console.log('Entrega:', {
      id: delivery.id,
      outId: delivery.outId,
      customerName: delivery.customerName,
      status: delivery.status
    });
    
    navigation.navigate("DeliveryDetail" as any, {
      deliveryId: delivery.outId || delivery.id,
      deliveryData: delivery // Passar os dados completos da entrega
    })
  }

  const openFilterModal = () => {
    filterModalRef.current?.open()
  }

  const closeFilterModal = () => {
    filterModalRef.current?.close()
  }

  const toggleStatusFilter = useCallback((status: string) => {
    setFilters((prev) => ({
      ...prev,
      status: prev.status.includes(status) ? prev.status.filter((s) => s !== status) : [...prev.status, status],
    }))
  }, [])

  const setSortOption = useCallback((sortBy: FilterOptions["sortBy"], sortOrder: FilterOptions["sortOrder"]) => {
    setFilters((prev) => ({
      ...prev,
      sortBy,
      sortOrder,
    }))
  }, [])

  const clearFilters = useCallback(() => {
    setFilters({
      status: [],
      sortBy: "deliverySeq",
      sortOrder: "asc",
    })
  }, [])

  const getStatusInfo = (status: string) => {
    switch (status) {
      case "delivered":
        return {
          color: COLORS.success,
          text: "Entregue",
          icon: "checkmark-circle" as const,
        }
      case "in_progress":
        return {
          color: COLORS.info,
          text: "Em rota",
          icon: "car-sport" as const,
        }
      case "pending":
        return {
          color: COLORS.warning,
          text: "Aguardando",
          icon: "time" as const,
        }
      case "failed":
        return {
          color: COLORS.danger,
          text: "Falhou",
          icon: "close-circle" as const,
        }
      default:
        return {
          color: COLORS.warning,
          text: "Aguardando",
          icon: "time" as const,
        }
    }
  }

  const getStatusCount = useCallback((status: string) => {
    return deliveries.filter((delivery) => delivery.status === status).length
  }, [deliveries])

  const getFilteredStatusCount = useCallback((status: string) => {
    return filteredDeliveries.filter((delivery) => delivery.status === status).length
  }, [filteredDeliveries])

  const renderDeliveryItem = useCallback(({ item, index }: { item: Delivery; index: number }) => {
    const statusInfo = getStatusInfo(item.status)

    return (
      <TouchableOpacity
        style={[styles.deliveryCard, index === 0 && styles.firstCard]}
        onPress={() => handleDeliveryPress(item)}
        activeOpacity={0.7}
      >
        <View style={styles.deliverySequence}>
          <Text style={styles.sequenceNumber}>{item.deliverySeq}</Text>
        </View>

        <View style={styles.deliveryInfo}>
          <Text style={styles.deliveryClient} numberOfLines={1} ellipsizeMode="tail">
            {item.customerName}
          </Text>

          <Text style={styles.deliveryAddress}>
            {item.street}, {item.streetNumber} - {item.neighborhood}
          </Text>
          <View style={styles.deliveryMeta}>
            <Ionicons name="time" size={14} color={COLORS.textLight} />
            <Text style={styles.deliveryTime}>
              {item.outDate
                ? new Date(item.outDate).toLocaleTimeString("pt-BR", {
                    hour: "2-digit",
                    minute: "2-digit",
                  })
                : "Não definido"}
            </Text>
          </View>
          {item.distance && (
            <View style={styles.deliveryDistance}>
              <Ionicons name="location" size={14} color={COLORS.textLight} />
              <Text style={styles.distanceText}>{item.distance.toFixed(1)} km</Text>
            </View>
          )}
        </View>

        <View style={styles.rightSection}>
          <View style={styles.statusContainer}>
            <View style={[styles.statusBadge, { backgroundColor: `${statusInfo.color}20` }]}>
              <Ionicons name={statusInfo.icon} size={12} color={statusInfo.color} />
              <Text style={[styles.statusText, { color: statusInfo.color }]}>{statusInfo.text}</Text>
            </View>
          </View>

          <View style={styles.actionButton}>
            <Ionicons name="chevron-forward" size={20} color={COLORS.primary} />
          </View>
        </View>
      </TouchableOpacity>
    )
  }, [handleDeliveryPress, getStatusInfo])

  const renderFilterModal = () => (
    <View style={styles.filterModalContent}>
      {/* Header do Modal */}
      <View style={styles.filterModalHeader}>
        <Text style={styles.filterModalTitle}>Filtros</Text>
        <TouchableOpacity onPress={closeFilterModal}>
          <Ionicons name="close" size={24} color={COLORS.text} />
        </TouchableOpacity>
      </View>

      {/* Filtro por Status */}
      <View style={styles.filterSection}>
        <Text style={styles.filterSectionTitle}>Status das Entregas</Text>

        <TouchableOpacity
          style={[styles.filterOption, filters.status.includes("pending") && styles.filterOptionActive]}
          onPress={() => toggleStatusFilter("pending")}
        >
          <View style={styles.filterOptionLeft}>
            <View style={[styles.statDot, { backgroundColor: COLORS.warning }]} />
            <Text style={styles.filterOptionText}>Pendente</Text>
          </View>
          <Text style={styles.filterOptionCount}>({getStatusCount("pending")})</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.filterOption, filters.status.includes("in_progress") && styles.filterOptionActive]}
          onPress={() => toggleStatusFilter("in_progress")}
        >
          <View style={styles.filterOptionLeft}>
            <View style={[styles.statDot, { backgroundColor: COLORS.info }]} />
            <Text style={styles.filterOptionText}>Em rota</Text>
          </View>
          <Text style={styles.filterOptionCount}>({getStatusCount("in_progress")})</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.filterOption, filters.status.includes("delivered") && styles.filterOptionActive]}
          onPress={() => toggleStatusFilter("delivered")}
        >
          <View style={styles.filterOptionLeft}>
            <View style={[styles.statDot, { backgroundColor: COLORS.success }]} />
            <Text style={styles.filterOptionText}>Entregues</Text>
          </View>
          <Text style={styles.filterOptionCount}>({getStatusCount("delivered")})</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.filterOption, filters.status.includes("failed") && styles.filterOptionActive]}
          onPress={() => toggleStatusFilter("failed")}
        >
          <View style={styles.filterOptionLeft}>
            <View style={[styles.statDot, { backgroundColor: COLORS.danger }]} />
            <Text style={styles.filterOptionText}>Falhas</Text>
          </View>
          <Text style={styles.filterOptionCount}>({getStatusCount("failed")})</Text>
        </TouchableOpacity>
      </View>

      {/* Ordenação */}
      <View style={styles.filterSection}>
        <Text style={styles.filterSectionTitle}>Ordenar por</Text>

        <TouchableOpacity
          style={[styles.filterOption, filters.sortBy === "deliverySeq" && styles.filterOptionActive]}
          onPress={() => setSortOption("deliverySeq", filters.sortOrder)}
        >
          <View style={styles.filterOptionLeft}>
            <Ionicons name="list" size={16} color={COLORS.textLight} />
            <Text style={styles.filterOptionText}>Sequência</Text>
          </View>
          {filters.sortBy === "deliverySeq" && (
            <Ionicons name={filters.sortOrder === "asc" ? "arrow-up" : "arrow-down"} size={16} color={COLORS.primary} />
          )}
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.filterOption, filters.sortBy === "customerName" && styles.filterOptionActive]}
          onPress={() => setSortOption("customerName", filters.sortOrder)}
        >
          <View style={styles.filterOptionLeft}>
            <Ionicons name="person" size={16} color={COLORS.textLight} />
            <Text style={styles.filterOptionText}>Nome do Cliente</Text>
          </View>
          {filters.sortBy === "customerName" && (
            <Ionicons name={filters.sortOrder === "asc" ? "arrow-up" : "arrow-down"} size={16} color={COLORS.primary} />
          )}
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.filterOption, filters.sortBy === "distance" && styles.filterOptionActive]}
          onPress={() => setSortOption("distance", filters.sortOrder)}
        >
          <View style={styles.filterOptionLeft}>
            <Ionicons name="location" size={16} color={COLORS.textLight} />
            <Text style={styles.filterOptionText}>Distância</Text>
          </View>
          {filters.sortBy === "distance" && (
            <Ionicons name={filters.sortOrder === "asc" ? "arrow-up" : "arrow-down"} size={16} color={COLORS.primary} />
          )}
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.filterOption, filters.sortBy === "outDate" && styles.filterOptionActive]}
          onPress={() => setSortOption("outDate", filters.sortOrder)}
        >
          <View style={styles.filterOptionLeft}>
            <Ionicons name="time" size={16} color={COLORS.textLight} />
            <Text style={styles.filterOptionText}>Horário</Text>
          </View>
          {filters.sortBy === "outDate" && (
            <Ionicons name={filters.sortOrder === "asc" ? "arrow-up" : "arrow-down"} size={16} color={COLORS.primary} />
          )}
        </TouchableOpacity>
      </View>

      {/* Ordem */}
      <View style={styles.filterSection}>
        <Text style={styles.filterSectionTitle}>Ordem</Text>

        <TouchableOpacity
          style={[styles.filterOption, filters.sortOrder === "asc" && styles.filterOptionActive]}
          onPress={() => setSortOption(filters.sortBy, "asc")}
        >
          <View style={styles.filterOptionLeft}>
            <Ionicons name="arrow-up" size={16} color={COLORS.textLight} />
            <Text style={styles.filterOptionText}>Crescente</Text>
          </View>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.filterOption, filters.sortOrder === "desc" && styles.filterOptionActive]}
          onPress={() => setSortOption(filters.sortBy, "desc")}
        >
          <View style={styles.filterOptionLeft}>
            <Ionicons name="arrow-down" size={16} color={COLORS.textLight} />
            <Text style={styles.filterOptionText}>Decrescente</Text>
          </View>
        </TouchableOpacity>
      </View>

      {/* Botões de Ação */}
      <View style={styles.filterActions}>
        <TouchableOpacity style={styles.clearButton} onPress={clearFilters}>
          <Text style={styles.clearButtonText}>Limpar Filtros</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.applyButton} onPress={closeFilterModal}>
          <LinearGradient
            colors={[COLORS.primary, "#3B82F6"]}
            style={styles.applyButtonGradient}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
          >
            <Text style={styles.applyButtonText}>Aplicar ({filteredDeliveries.length})</Text>
          </LinearGradient>
        </TouchableOpacity>
      </View>
    </View>
  )

  if (loading) {
    return (
      <>
        <StatusBar style="light" backgroundColor={COLORS.primary} translucent={false} />
        <SafeAreaView style={styles.container}>
          <LinearGradient colors={[COLORS.primary, "#3B82F6"]} style={styles.loadingContainer}>
            <Ionicons name="car" size={48} color="white" />
            <Text style={styles.loadingText}>Carregando entregas...</Text>
            <Text style={styles.loadingSubtext}>Sincronizando dados...</Text>
          </LinearGradient>
        </SafeAreaView>
      </>
    )
  }

  if (error) {
    return (
      <>
        <StatusBar style="light" backgroundColor={COLORS.primary} translucent={false} />
        <SafeAreaView style={styles.container}>
          <View style={styles.errorContainer}>
            <Ionicons name="alert-circle" size={48} color={COLORS.danger} />
            <Text style={styles.errorText}>{error}</Text>
            <TouchableOpacity style={styles.retryButton} onPress={refreshDeliveries}>
              <LinearGradient
                colors={[COLORS.primary, "#3B82F6"]}
                style={styles.retryButtonGradient}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 1 }}
              >
                <Ionicons name="refresh" size={16} color="white" />
                <Text style={styles.retryButtonText}>Tentar Novamente</Text>
              </LinearGradient>
            </TouchableOpacity>
          </View>
        </SafeAreaView>
      </>
    )
  }

  return (
    <>
      <StatusBar style="light" backgroundColor={COLORS.primary} translucent={false} />

      <View style={styles.container}>
        <LinearGradient colors={[COLORS.primary, "#3B82F6"]} style={styles.headerGradient}>
          <SafeAreaView edges={["top"]} style={styles.safeAreaHeader}>
            <View style={styles.headerSpacing}>
              <View style={styles.header}>
                <TouchableOpacity style={styles.backButton} onPress={() => navigation.goBack()}>
                  <Ionicons name="arrow-back" size={24} color="white" />
                </TouchableOpacity>

                <View style={styles.headerCenter}>
                  <Text style={styles.headerTitle}>Entregas</Text>
                  <Text style={styles.headerSubtitle}>
                    {filteredDeliveries.length} de {deliveries.length} entregas
                  </Text>
                </View>

                <View style={styles.headerButtons}>
                  <TouchableOpacity style={styles.filterButton} onPress={openFilterModal}>
                    <Ionicons name="filter" size={24} color="white" />
                    {(filters.status.length > 0 || filters.sortBy !== "deliverySeq") && (
                      <View style={styles.filterBadge} />
                    )}
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </SafeAreaView>
        </LinearGradient>

        <View style={styles.statsContainer}>
          <View style={styles.statCard}>
            <View style={[styles.statDot, { backgroundColor: COLORS.warning }]} />
            <Text style={styles.statNumber}>{getFilteredStatusCount("pending")}</Text>
            <Text style={styles.statLabel}>Pendentes</Text>
          </View>

          <View style={styles.statDivider} />

          <View style={styles.statCard}>
            <View style={[styles.statDot, { backgroundColor: COLORS.info }]} />
            <Text style={styles.statNumber}>{getFilteredStatusCount("in_progress")}</Text>
            <Text style={styles.statLabel}>Em rota</Text>
          </View>

          <View style={styles.statDivider} />

          <View style={styles.statCard}>
            <View style={[styles.statDot, { backgroundColor: COLORS.success }]} />
            <Text style={styles.statNumber}>{getFilteredStatusCount("delivered")}</Text>
            <Text style={styles.statLabel}>Entregues</Text>
          </View>

          <View style={styles.statDivider} />

          <View style={styles.statCard}>
            <View style={[styles.statDot, { backgroundColor: COLORS.danger }]} />
            <Text style={styles.statNumber}>{getFilteredStatusCount("failed")}</Text>
            <Text style={styles.statLabel}>Falhas</Text>
          </View>
        </View>

        <FlatList
          data={filteredDeliveries}
          keyExtractor={(item, index) => `${item.outId}-${item.deliverySeq}-${index}`}
          renderItem={renderDeliveryItem}
          contentContainerStyle={styles.listContent}
          showsVerticalScrollIndicator={false}
          ListEmptyComponent={
            <View style={styles.emptyContainer}>
              <LinearGradient
                colors={["#F3F4F6", "#FFFFFF"]}
                style={styles.emptyCard}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
              >
                <Ionicons name="filter-outline" size={64} color={COLORS.textLight} />
                <Text style={styles.emptyTitle}>Nenhuma entrega encontrada</Text>
                <Text style={styles.emptyText}>Tente ajustar os filtros para ver mais resultados</Text>
              </LinearGradient>
            </View>
          }
        />

        {/* Modal de Filtros */}
        <Modalize
          ref={filterModalRef}
          adjustToContentHeight
          handlePosition="inside"
          handleStyle={styles.modalHandle}
          modalStyle={styles.modalStyle}
          overlayStyle={styles.overlayStyle}
          childrenStyle={styles.childrenStyle}
        >
          {renderFilterModal()}
        </Modalize>
      </View>
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.background,
  },
  headerGradient: {
    paddingBottom: 16,
  },
  safeAreaHeader: {
    backgroundColor: "transparent",
  },
  headerSpacing: {
    paddingTop: Platform.OS === "ios" ? 20 : 16,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 20,
    paddingVertical: 16,
  },
  backButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: "rgba(255, 255, 255, 0.2)",
    alignItems: "center",
    justifyContent: "center",
  },
  headerCenter: {
    flex: 1,
    alignItems: "center",
    marginHorizontal: 16,
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: "bold",
    color: "white",
    marginBottom: 4,
  },
  headerSubtitle: {
    fontSize: 14,
    color: "rgba(255, 255, 255, 0.8)",
  },
  headerButtons: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  debugButton: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: "rgba(255, 255, 255, 0.15)",
    alignItems: "center",
    justifyContent: "center",
  },
  filterButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: "rgba(255, 255, 255, 0.2)",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
  },
  filterBadge: {
    position: "absolute",
    top: 8,
    right: 8,
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: "#FF6B6B",
  },
  statsContainer: {
    flexDirection: "row",
    backgroundColor: COLORS.card,
    paddingVertical: 16,
    paddingHorizontal: 20,
    marginHorizontal: 16,
    marginTop: -8,
    borderRadius: 16,
    alignItems: "center",
    justifyContent: "space-around",
    ...SHADOWS.medium,
  },
  statCard: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  statDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    marginRight: 8,
  },
  statNumber: {
    fontSize: 18,
    fontWeight: "bold",
    color: COLORS.text,
    marginRight: 4,
  },
  statLabel: {
    fontSize: 12,
    color: COLORS.textLight,
  },
  statDivider: {
    width: 1,
    height: 20,
    backgroundColor: COLORS.border,
    marginHorizontal: 8,
  },
  listContent: {
    padding: 16,
    paddingTop: 24,
  },
  deliveryCard: {
    flexDirection: "row",
    alignItems: "flex-start",
    backgroundColor: COLORS.card,
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
    ...SHADOWS.medium,
    borderWidth: 1,
    borderColor: "transparent",
  },
  firstCard: {
    borderColor: COLORS.primary + "30",
    borderWidth: 2,
  },
  deliverySequence: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: COLORS.primary,
    alignItems: "center",
    justifyContent: "center",
    marginRight: 16,
  },
  sequenceNumber: {
    fontSize: 14,
    fontWeight: "bold",
    color: "white",
  },
  deliveryInfo: {
    flex: 1,
    marginRight: 12,
  },
  deliveryClient: {
    fontSize: 14,
    fontWeight: "bold",
    color: COLORS.text,
    marginBottom: 4,
    width: "100%",
  },
  deliveryAddress: {
    fontSize: 14,
    color: COLORS.text,
    marginBottom: 8,
    lineHeight: 20,
  },
  deliveryMeta: {
    flexDirection: "row",
    alignItems: "center",
  },
  deliveryTime: {
    fontSize: 12,
    color: COLORS.textLight,
    marginLeft: 6,
  },
  rightSection: {
    alignItems: "flex-end",
    justifyContent: "space-between",
    minHeight: 60,
  },
  statusContainer: {
    marginBottom: 8,
  },
  statusBadge: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  statusText: {
    fontSize: 10,
    fontWeight: "600",
    marginLeft: 4,
  },
  actionButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: `${COLORS.primary}20`,
    alignItems: "center",
    justifyContent: "center",
  },
  deliveryDistance: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 4,
  },
  distanceText: {
    fontSize: 12,
    color: COLORS.textLight,
    marginLeft: 6,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  loadingText: {
    fontSize: 18,
    color: "white",
    marginTop: 16,
    fontWeight: "600",
  },
  loadingSubtext: {
    fontSize: 14,
    color: "rgba(255, 255, 255, 0.8)",
    marginTop: 8,
  },
  emptyContainer: {
    padding: 40,
    alignItems: "center",
  },
  emptyCard: {
    padding: 40,
    borderRadius: 20,
    alignItems: "center",
    borderWidth: 1,
    borderColor: COLORS.border,
    width: "100%",
  },
  emptyTitle: {
    fontSize: 20,
    fontWeight: "bold",
    color: COLORS.text,
    marginTop: 16,
    marginBottom: 8,
  },
  emptyText: {
    fontSize: 14,
    color: COLORS.textLight,
    textAlign: "center",
    lineHeight: 20,
  },
  errorContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 20,
  },
  errorText: {
    fontSize: 16,
    color: COLORS.danger,
    textAlign: "center",
    marginVertical: 16,
  },
  retryButton: {
    borderRadius: 12,
    overflow: "hidden",
    ...SHADOWS.medium,
  },
  retryButtonGradient: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 20,
    paddingVertical: 12,
    gap: 8,
  },
  retryButtonText: {
    color: "white",
    fontSize: 14,
    fontWeight: "600",
  },

  // Estilos do Modal de Filtros
  modalStyle: {
    backgroundColor: "transparent",
  },
  overlayStyle: {
    backgroundColor: "rgba(0, 0, 0, 0.6)",
  },
  childrenStyle: {
    backgroundColor: "transparent",
  },
  modalHandle: {
    backgroundColor: "rgba(0, 0, 0, 0.3)",
    width: 40,
    height: 4,
  },
  filterModalContent: {
    backgroundColor: COLORS.card,
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    paddingBottom: 20,
  },
  filterModalHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 24,
    paddingVertical: 20,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
  },
  filterModalTitle: {
    fontSize: 20,
    fontWeight: "bold",
    color: COLORS.text,
  },
  filterSection: {
    paddingHorizontal: 24,
    paddingVertical: 16,
  },
  filterSectionTitle: {
    fontSize: 16,
    fontWeight: "600",
    color: COLORS.text,
    marginBottom: 12,
  },
  filterOption: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 12,
    marginBottom: 8,
    backgroundColor: COLORS.background,
  },
  filterOptionActive: {
    backgroundColor: `${COLORS.primary}10`,
    borderWidth: 1,
    borderColor: `${COLORS.primary}30`,
  },
  filterOptionLeft: {
    flexDirection: "row",
    alignItems: "center",
  },
  filterOptionText: {
    fontSize: 14,
    color: COLORS.text,
    marginLeft: 12,
  },
  filterOptionCount: {
    fontSize: 12,
    color: COLORS.textLight,
  },
  filterActions: {
    flexDirection: "row",
    paddingHorizontal: 24,
    paddingTop: 16,
    gap: 12,
  },
  clearButton: {
    flex: 1,
    backgroundColor: COLORS.background,
    borderRadius: 12,
    paddingVertical: 16,
    alignItems: "center",
    borderWidth: 1,
    borderColor: COLORS.border,
  },
  clearButtonText: {
    fontSize: 14,
    color: COLORS.textLight,
    fontWeight: "600",
  },
  applyButton: {
    flex: 2,
    borderRadius: 12,
    overflow: "hidden",
    ...SHADOWS.medium,
  },
  applyButtonGradient: {
    paddingVertical: 16,
    alignItems: "center",
  },
  applyButtonText: {
    fontSize: 14,
    color: "white",
    fontWeight: "600",
  },
})

export default DeliveriesScreen
