<template>
  <div class="min-h-screen bg-gray-50">
    <nav class="bg-white shadow">
      <div class="max-w-7xl mx-auto px-4 py-4">
        <router-link to="/orders" class="text-red-600 hover:underline">← Back to Orders</router-link>
      </div>
    </nav>

    <div v-if="loading" class="text-center py-12">Loading...</div>

    <div v-else-if="delivery" class="max-w-4xl mx-auto px-4 py-8">
      <h1 class="text-3xl font-bold mb-8">Track Order #{{ delivery.order?.order_number }}</h1>

      <div class="bg-white rounded-lg shadow p-6 mb-6">
        <div class="flex items-center justify-between mb-8">
          <div v-for="(step, index) in steps" :key="index" class="flex-1">
            <div class="flex items-center">
              <div :class="isStepActive(step) ? 'bg-green-500' : 'bg-gray-300'" class="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold">
                {{ index + 1 }}
              </div>
              <div v-if="index < steps.length - 1" :class="isStepActive(step) ? 'bg-green-500' : 'bg-gray-300'" class="flex-1 h-1 mx-2"></div>
            </div>
            <div class="text-sm mt-2 text-center">{{ step.label }}</div>
          </div>
        </div>

        <div class="border-t pt-6">
          <h3 class="font-bold mb-4">Delivery Information</h3>
          <div class="space-y-2 text-sm">
            <p><strong>Status:</strong> <span class="text-green-600">{{ delivery.status }}</span></p>
            <p><strong>Distance:</strong> {{ delivery.distance_km }} km</p>
            <p><strong>Estimated Time:</strong> {{ delivery.estimated_time }} minutes</p>
            <p v-if="delivery.delivery_boy"><strong>Delivery Boy:</strong> {{ delivery.delivery_boy.user?.name }}</p>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-bold mb-4">Delivery Route</h3>
        <div class="space-y-3">
          <div class="flex items-start gap-3">
            <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white">📍</div>
            <div>
              <div class="font-medium">Pickup Location</div>
              <div class="text-sm text-gray-600">{{ delivery.pickup_address }}</div>
            </div>
          </div>
          <div class="ml-4 border-l-2 border-dashed h-8"></div>
          <div class="flex items-start gap-3">
            <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center text-white">🏠</div>
            <div>
              <div class="font-medium">Delivery Location</div>
              <div class="text-sm text-gray-600">{{ delivery.delivery_address }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import api from '../services/api';

const route = useRoute();
const delivery = ref(null);
const loading = ref(true);

const steps = [
  { label: 'Order Placed', status: 'pending' },
  { label: 'Accepted', status: 'accepted' },
  { label: 'Picked Up', status: 'picked_up' },
  { label: 'On the Way', status: 'on_the_way' },
  { label: 'Delivered', status: 'delivered' },
];

const fetchTracking = async () => {
  try {
    const response = await api.get(`/orders/${route.params.id}/track`);
    delivery.value = response.data;
  } catch (error) {
    console.error('Error:', error);
  } finally {
    loading.value = false;
  }
};

const isStepActive = (step) => {
  const currentIndex = steps.findIndex(s => s.status === delivery.value?.status);
  const stepIndex = steps.findIndex(s => s.status === step.status);
  return stepIndex <= currentIndex;
};

onMounted(fetchTracking);
</script>
