<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 flex justify-between">
        <h1 class="text-2xl font-bold text-red-600">Delivery Dashboard</h1>
        <router-link to="/profile" class="text-gray-700 hover:text-red-600">Profile</router-link>
      </div>
    </nav>

    <div class="max-w-7xl mx-auto px-4 py-8">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow p-6">
          <div class="text-gray-600 mb-2">Today's Deliveries</div>
          <div class="text-3xl font-bold text-red-600">{{ stats.todayDeliveries }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
          <div class="text-gray-600 mb-2">Today's Earnings</div>
          <div class="text-3xl font-bold text-green-600">${{ stats.todayEarnings }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
          <div class="text-gray-600 mb-2">Status</div>
          <div class="flex items-center gap-2">
            <div :class="isOnline ? 'bg-green-500' : 'bg-gray-400'" class="w-3 h-3 rounded-full"></div>
            <span class="font-bold">{{ isOnline ? 'Online' : 'Offline' }}</span>
          </div>
          <button @click="toggleStatus" class="mt-2 w-full bg-red-600 text-white py-2 rounded hover:bg-red-700">
            {{ isOnline ? 'Go Offline' : 'Go Online' }}
          </button>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-xl font-bold mb-4">Available Deliveries</h2>
        <div v-if="availableDeliveries.length === 0" class="text-gray-500 text-center py-8">
          No deliveries available
        </div>
        <div v-else class="space-y-4">
          <div v-for="delivery in availableDeliveries" :key="delivery.id" class="border rounded-lg p-4">
            <div class="flex justify-between items-start mb-3">
              <div>
                <div class="font-bold text-lg">Order #{{ delivery.order?.order_number }}</div>
                <div class="text-sm text-gray-600">{{ delivery.order?.restaurant?.name }}</div>
              </div>
              <div class="text-right">
                <div class="text-green-600 font-bold">${{ delivery.delivery_fee }}</div>
                <div class="text-sm text-gray-600">{{ delivery.distance_km }} km</div>
              </div>
            </div>
            <div class="text-sm text-gray-600 mb-3">
              <div>📍 Pickup: {{ delivery.pickup_address }}</div>
              <div>📍 Delivery: {{ delivery.delivery_address }}</div>
            </div>
            <button @click="acceptDelivery(delivery.id)" class="w-full bg-red-600 text-white py-2 rounded hover:bg-red-700">
              Accept Delivery
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const stats = ref({
  todayDeliveries: 0,
  todayEarnings: 0,
});

const isOnline = ref(false);
const availableDeliveries = ref([]);

const fetchDashboard = async () => {
  try {
    const earningsRes = await api.get('/delivery-boy/earnings');
    stats.value.todayDeliveries = earningsRes.data.total_deliveries;
    stats.value.todayEarnings = earningsRes.data.today_earnings;

    const deliveriesRes = await api.get('/delivery-boy/available');
    availableDeliveries.value = deliveriesRes.data;
  } catch (error) {
    console.error('Error:', error);
  }
};

const toggleStatus = async () => {
  try {
    const newStatus = isOnline.value ? 'offline' : 'available';
    await api.post('/delivery-boy/status', { status: newStatus });
    isOnline.value = !isOnline.value;
  } catch (error) {
    alert('Failed to update status');
  }
};

const acceptDelivery = async (deliveryId) => {
  try {
    await api.post(`/deliveries/${deliveryId}/accept`);
    alert('Delivery accepted!');
    await fetchDashboard();
  } catch (error) {
    alert('Failed to accept delivery');
  }
};

onMounted(fetchDashboard);
</script>
