import type React from "react"
import { View, Text, StyleSheet, TouchableOpacity } from "react-native"
import { Ionicons } from "@expo/vector-icons"

const COLORS = {
  primary: "#2563EB",
  secondary: "#10B981",
  warning: "#F59E0B",
  danger: "#EF4444",
  background: "#F8FAFC",
  card: "#FFFFFF",
  text: "#1E293B",
  textLight: "#64748B",
  border: "#E2E8F0",
  success: "#10B981",
  info: "#06B6D4",
}

interface DeliveryStatusTrackerProps {
  currentStep: number
  totalSteps: number
  onStepPress?: (step: number) => void
}

const DeliveryStatusTracker: React.FC<DeliveryStatusTrackerProps> = ({ currentStep, totalSteps, onStepPress }) => {
  const steps = [
    {
      id: 1,
      title: "Saída do CD",
      subtitle: "Centro de Distribuição",
      icon: "business",
      completed: currentStep >= 1,
    },
    {
      id: 2,
      title: "Em Trânsito",
      subtitle: "A caminho do destino",
      icon: "car",
      completed: currentStep >= 2,
    },
    {
      id: 3,
      title: "Chegada",
      subtitle: "No local de entrega",
      icon: "location",
      completed: currentStep >= 3,
    },
    {
      id: 4,
      title: "Entregue",
      subtitle: "Entrega concluída",
      icon: "checkmark-circle",
      completed: currentStep >= 4,
    },
  ]

  const renderStep = (step: any, index: number) => {
    const isActive = currentStep === step.id
    const isCompleted = step.completed
    const isLast = index === steps.length - 1

    return (
      <View key={step.id} style={styles.stepContainer}>
        <View style={styles.stepContent}>
          <TouchableOpacity
            style={[styles.stepCircle, isCompleted && styles.stepCircleCompleted, isActive && styles.stepCircleActive]}
            onPress={() => onStepPress?.(step.id)}
          >
            <Ionicons name={step.icon as any} size={20} color={isCompleted || isActive ? "white" : COLORS.textLight} />
          </TouchableOpacity>

          <View style={styles.stepInfo}>
            <Text style={[styles.stepTitle, (isCompleted || isActive) && styles.stepTitleActive]}>{step.title}</Text>
            <Text style={styles.stepSubtitle}>{step.subtitle}</Text>
          </View>
        </View>

        {!isLast && <View style={[styles.stepConnector, isCompleted && styles.stepConnectorCompleted]} />}
      </View>
    )
  }

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Status da Entrega</Text>
        <Text style={styles.subtitle}>
          Etapa {currentStep} de {totalSteps}
        </Text>
      </View>

      <View style={styles.stepsContainer}>{steps.map((step, index) => renderStep(step, index))}</View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: COLORS.card,
    borderRadius: 16,
    padding: 20,
    margin: 20,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 6,
  },
  header: {
    marginBottom: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
    color: COLORS.text,
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: COLORS.textLight,
  },
  stepsContainer: {
    paddingLeft: 10,
  },
  stepContainer: {
    position: "relative",
  },
  stepContent: {
    flexDirection: "row",
    alignItems: "center",
    paddingBottom: 20,
  },
  stepCircle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: COLORS.border,
    alignItems: "center",
    justifyContent: "center",
    marginRight: 16,
  },
  stepCircleCompleted: {
    backgroundColor: COLORS.success,
  },
  stepCircleActive: {
    backgroundColor: COLORS.primary,
  },
  stepInfo: {
    flex: 1,
  },
  stepTitle: {
    fontSize: 16,
    fontWeight: "600",
    color: COLORS.textLight,
    marginBottom: 2,
  },
  stepTitleActive: {
    color: COLORS.text,
  },
  stepSubtitle: {
    fontSize: 12,
    color: COLORS.textLight,
  },
  stepConnector: {
    position: "absolute",
    left: 19,
    top: 40,
    width: 2,
    height: 20,
    backgroundColor: COLORS.border,
  },
  stepConnectorCompleted: {
    backgroundColor: COLORS.success,
  },
})

export default DeliveryStatusTracker
