<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">
        <div class="flex justify-between items-center">
          <h1 class="text-2xl font-bold text-orange-600">Manager Dashboard</h1>
          <div class="flex items-center gap-4">
            <router-link to="/manager/products" class="text-gray-700 hover:text-orange-600 font-medium">Products</router-link>
            <router-link to="/manager/categories" class="text-gray-700 hover:text-orange-600 font-medium">Categories</router-link>
            <router-link to="/profile" class="text-gray-700 hover:text-orange-600 font-medium">Profile</router-link>
          </div>
        </div>
      </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 Orders</div>
          <div class="text-3xl font-bold text-red-600">{{ stats.todayOrders }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
          <div class="text-gray-600 mb-2">Today's Revenue</div>
          <div class="text-3xl font-bold text-green-600">${{ stats.todayRevenue }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
          <div class="text-gray-600 mb-2">Total Products</div>
          <div class="text-3xl font-bold text-blue-600">{{ stats.totalProducts }}</div>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow p-6">
          <h2 class="text-xl font-bold mb-4">Pending Orders</h2>
          <div v-if="pendingOrders.length === 0" class="text-gray-500 text-center py-4">
            No pending orders
          </div>
          <div v-else class="space-y-3">
            <div v-for="order in pendingOrders" :key="order.id" class="border rounded p-3">
              <div class="flex justify-between items-start mb-2">
                <div class="font-bold">{{ order.order_number }}</div>
                <div class="text-red-600 font-bold">${{ order.total }}</div>
              </div>
              <div class="text-sm text-gray-600">{{ order.items?.length }} items</div>
              <button @click="acceptOrder(order.id)" class="mt-2 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700">
                Accept Order
              </button>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
          <h2 class="text-xl font-bold mb-4">Active Orders</h2>
          <div v-if="activeOrders.length === 0" class="text-gray-500 text-center py-4">
            No active orders
          </div>
          <div v-else class="space-y-3">
            <div v-for="order in activeOrders" :key="order.id" class="border rounded p-3">
              <div class="flex justify-between items-start mb-2">
                <div class="font-bold">{{ order.order_number }}</div>
                <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">
                  {{ order.status }}
                </span>
              </div>
              <div class="text-sm text-gray-600">{{ order.items?.length }} items</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const stats = ref({
  todayOrders: 0,
  todayRevenue: 0,
  totalProducts: 0,
});

const pendingOrders = ref([]);
const activeOrders = ref([]);

const fetchDashboard = async () => {
  try {
    const ordersRes = await api.get('/orders');
    const orders = ordersRes.data.data || [];
    
    pendingOrders.value = orders.filter(o => o.status === 'pending');
    activeOrders.value = orders.filter(o => ['accepted', 'preparing', 'ready'].includes(o.status));
    
    stats.value.todayOrders = orders.length;
    stats.value.todayRevenue = orders.reduce((sum, o) => sum + parseFloat(o.total), 0);
  } catch (error) {
    console.error('Error:', error);
  }
};

const acceptOrder = async (orderId) => {
  try {
    await api.put(`/orders/${orderId}/status`, { status: 'accepted' });
    await fetchDashboard();
  } catch (error) {
    alert('Failed to accept order');
  }
};

onMounted(fetchDashboard);
</script>
