<script setup>
import { computed } from 'vue'
import Card from '@/components/ui/Card.vue'
import Badge from '@/components/ui/Badge.vue'
import EmptyState from '@/components/ui/EmptyState.vue'

const props = defineProps({
  orders: { type: Array, default: () => [] },
})

const pendingOrders = computed(() =>
  props.orders.filter(o => o.status === 'Pending' || o.status === 'InProgress'),
)

const resultedOrders = computed(() =>
  props.orders.filter(o => o.status === 'Resulted'),
)

function statusVariant(status) {
  if (status === 'Resulted') return 'success'
  if (status === 'InProgress') return 'info'
  return 'warning'
}
</script>

<template>
  <Card>
    <template #header>
      <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
        Orders
      </h2>
    </template>

    <EmptyState v-if="orders.length === 0" message="No orders" />

    <div v-else class="space-y-4">
      <section v-if="pendingOrders.length">
        <h3 class="mb-2 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Pending</h3>
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li
            v-for="order in pendingOrders"
            :key="order.id"
            class="flex items-center justify-between gap-4 py-2 first:pt-0"
          >
            <div class="min-w-0">
              <div class="text-sm text-gray-900 dark:text-white">{{ order.description }}</div>
              <div class="text-xs text-gray-500 dark:text-gray-400">{{ order.orderType }}</div>
            </div>
            <Badge :variant="statusVariant(order.status)" size="xs">{{ order.status }}</Badge>
          </li>
        </ul>
      </section>

      <section v-if="resultedOrders.length">
        <h3 class="mb-2 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Resulted</h3>
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li
            v-for="order in resultedOrders"
            :key="order.id"
            class="py-2 first:pt-0"
          >
            <div class="flex items-center justify-between gap-4">
              <div class="min-w-0">
                <div class="text-sm text-gray-900 dark:text-white">{{ order.description }}</div>
                <div v-if="order.resultSummary" class="text-xs text-gray-500 dark:text-gray-400">
                  {{ order.resultSummary }}
                </div>
              </div>
              <Badge variant="success" size="xs">Resulted</Badge>
            </div>
          </li>
        </ul>
      </section>
    </div>
  </Card>
</template>
