<!-- src/pages/customer/profile/profile/DeliveriesTable.vue -->
<template>
  <div v-if="!deliveries || deliveries.length === 0" class="text-center p-10">
    <p>No will-call orders found.</p>
  </div>
  <div v-else>
    <!-- DESKTOP TABLE -->
    <div class="overflow-x-auto hidden lg:block bg-base-100 rounded-lg">
      <table class="table table-sm w-full">
        <thead>
          <tr>
            <th>ID</th>
            <th>Status</th>
            <th>Name</th>
            <th>Gallons</th>
            <th>Date</th>
            <th class="text-right">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
            <td>{{ oil.id }}</td>
            <td><span class="badge badge-sm" :class="statusClass(oil.delivery_status)">{{ deliveryStatus(oil.delivery_status) }}</span></td>
            <td>{{ oil.customer_name }}</td>
            <td>
              <span v-if="oil.delivery_status !== 10">
                {{ oil.customer_asked_for_fill ? 'FILL' : oil.gallons_ordered }}
              </span>
              <span v-else>{{ oil.gallons_delivered }}</span>
            </td>
            <td>{{ oil.expected_delivery_date }}</td>
            <td class="text-right">
              <div class="flex items-center justify-end gap-1">
                <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-xs btn-ghost">View</router-link>
                <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-xs btn-secondary">Edit</router-link>
                <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-xs btn-success">Print</router-link>
                <router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-xs btn-accent">Finalize</router-link>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- MOBILE CARDS -->
    <div class="lg:hidden space-y-4">
      <div v-for="oil in deliveries" :key="oil.id" class="card card-compact bg-base-200 shadow ">
        <div class="card-body">
          <div class="flex justify-between items-start">
            <div>
              <h2 class="card-title text-base">{{ oil.customer_name }}</h2>
              <p class="text-xs opacity-70">#{{ oil.id }} on {{ oil.expected_delivery_date }}</p>
            </div>
            <div class="badge badge-sm" :class="statusClass(oil.delivery_status)">{{ deliveryStatus(oil.delivery_status) }}</div>
          </div>
          <p class="text-sm">Gallons: <strong>{{ oil.customer_asked_for_fill ? 'FILL' : (oil.gallons_delivered || oil.gallons_ordered) }}</strong></p>
          <div class="card-actions justify-end mt-2">
            <router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-xs btn-ghost">View</router-link>
            <router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-xs btn-secondary">Edit</router-link>
            <router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-xs btn-success">Print</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 1. Define the shape of a single delivery object
interface Delivery {
  id: number;
  delivery_status: number;
  customer_name: string;
  customer_asked_for_fill: number | boolean;
  gallons_ordered: number | string;
  gallons_delivered: number | string | null;
  expected_delivery_date: string;
}

// 2. Define the props using the interface
interface Props {
  deliveries: Delivery[];
}

// 3. Use the generic version of defineProps to apply the types
defineProps<Props>();

const deliveryStatus = (s: number) => ({0:'Waiting',1:'Cancelled',2:'Out',3:'Tomorrow',5:'Issue',9:'Pending_Payment', 10:'Finalized'}[s] || 'N/A');
const statusClass = (s: number) => ({0:'badge-warning',1:'badge-error',2:'badge-info',3:'badge-ghost',5:'badge-error', 9:'badge-warning', 10:'badge-success'}[s] || '');
</script>