<template>
  <div class="fixed inset-0 z-[60] overflow-y-auto" @click.self="$emit('close')">
    <div class="flex items-center justify-center min-h-screen px-4">
      <div class="fixed inset-0 bg-black opacity-50"></div>
      
      <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full">
        <!-- Header -->
        <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-4 flex justify-between items-center rounded-t-lg">
          <h3 class="text-xl font-bold text-white">Assign Delivery Boy</h3>
          <button @click="$emit('close')" class="text-white hover:text-gray-200">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </button>
        </div>

        <div class="p-6">
          <p class="text-sm text-gray-600 mb-4">Order #{{ order.order_number }}</p>

          <div v-if="loading" class="flex justify-center py-8">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500"></div>
          </div>

          <div v-else>
            <label class="block text-sm font-medium text-gray-700 mb-2">Select Delivery Boy</label>
            <select v-model="selectedDeliveryBoy" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500">
              <option value="">-- Select --</option>
              <option v-for="boy in deliveryBoys" :key="boy.id" :value="boy.id">
                {{ boy.full_name || boy.user?.name || 'Unknown' }} ({{ boy.status }})
              </option>
            </select>

            <div v-if="deliveryBoys.length === 0" class="text-center py-4 text-gray-500">
              No available delivery boys
            </div>
          </div>
        </div>

        <!-- Footer -->
        <div class="px-6 py-4 bg-gray-50 border-t rounded-b-lg flex justify-end gap-3">
          <button @click="$emit('close')" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400">
            Cancel
          </button>
          <button @click="assignDeliveryBoy" :disabled="!selectedDeliveryBoy || assigning" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50">
            {{ assigning ? 'Assigning...' : 'Assign' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const props = defineProps({
  order: Object
});

const emit = defineEmits(['close', 'assigned']);

const deliveryBoys = ref([]);
const selectedDeliveryBoy = ref('');
const loading = ref(false);
const assigning = ref(false);

onMounted(() => {
  loadDeliveryBoys();
});

const loadDeliveryBoys = async () => {
  loading.value = true;
  try {
    const response = await axios.get('/api/admin/orders/delivery-boys');
    if (response.data.success) {
      deliveryBoys.value = response.data.data;
      console.log('Loaded delivery boys:', deliveryBoys.value);
    }
  } catch (error) {
    console.error('Failed to load delivery boys:', error);
  } finally {
    loading.value = false;
  }
};

const assignDeliveryBoy = async () => {
  if (!selectedDeliveryBoy.value) return;
  
  assigning.value = true;
  try {
    const response = await axios.post(`/api/admin/orders/${props.order.id}/assign-delivery-boy`, {
      delivery_boy_id: selectedDeliveryBoy.value
    });
    
    if (response.data.success) {
      alert('Delivery boy assigned successfully');
      emit('assigned');
    }
  } catch (error) {
    console.error('Error assigning delivery boy:', error);
    alert('Failed to assign delivery boy: ' + (error.response?.data?.message || error.message));
  } finally {
    assigning.value = false;
  }
};
</script>
