<!-- 文件职责：订单看板卡片（视觉对齐新版原型）。 -->
<script setup lang="ts">
import type { BoardColumnKey } from '../types';

import type { OrderBoardCard } from '#/api/order-hall';

import { IconifyIcon } from '@vben/icons';

import dayjs from 'dayjs';

import { formatAmount } from '../composables/order-hall-page/helpers';

const { card, columnKey } = defineProps<{
  card: OrderBoardCard;
  columnKey: BoardColumnKey;
}>();

const emit = defineEmits<{
  accept: [orderId: string];
  completePreparation: [orderId: string];
  confirmDelivery: [orderId: string];
  reject: [orderId: string];
}>();

function resolveDeliveryLabel(deliveryType: number): string {
  switch (deliveryType) {
    case 0: {
      return '堂食';
    }
    case 1: {
      return '自提';
    }
    case 2: {
      return '外卖';
    }
    default: {
      return '未知';
    }
  }
}

function resolveDeliveryClass(deliveryType: number): string {
  switch (deliveryType) {
    case 0: {
      return 'is-dine-in';
    }
    case 1: {
      return 'is-pickup';
    }
    case 2: {
      return 'is-delivery';
    }
    default: {
      return 'is-default';
    }
  }
}

function resolveShortOrderNo(orderNo: string): string {
  const digits = orderNo.match(/\d+/g)?.join('') ?? '';
  if (!digits) {
    return orderNo;
  }

  const value = Number.parseInt(digits, 10);
  if (Number.isNaN(value)) {
    return orderNo;
  }

  return `#${value}`;
}

function resolveElapsedClock(value?: null | string): string {
  if (!value) return '--:--';

  const minutes = Math.max(dayjs().diff(dayjs(value), 'minute'), 0);
  if (minutes > 99) {
    return dayjs(value).format('HH:mm');
  }

  const seconds = Math.max(dayjs().diff(dayjs(value), 'second'), 0);
  const minutesPart = Math.floor(seconds / 60);
  const secondPart = String(seconds % 60).padStart(2, '0');
  return `${minutesPart}:${secondPart}`;
}

function resolveMakingProgress(order: OrderBoardCard): number {
  const since = order.acceptedAt ?? order.createdAt;
  if (!since) return 0;

  const minutes = Math.max(dayjs().diff(dayjs(since), 'minute'), 0);

  if (minutes > 120) {
    const fallbackSource = Number.parseInt(
      (order.orderNo.match(/\d+/g)?.join('') ?? '').slice(-2),
      10,
    );
    const fallback = Number.isNaN(fallbackSource) ? 35 : fallbackSource;
    return 25 + (fallback % 55);
  }

  return Math.min(95, Math.max(8, minutes * 6));
}

function resolveDeliverInfoText(order: OrderBoardCard): string {
  if (order.deliveryType === 1) {
    return '等待取餐';
  }
  return order.customerName || '配送中';
}

function resolveDeliverInfoIcon(order: OrderBoardCard): string {
  if (order.deliveryType === 1) {
    return 'lucide:user-round';
  }
  return 'lucide:bike';
}
</script>

<template>
  <div class="ob-order" :class="[columnKey, { 'is-urged': card.isUrged }]">
    <div class="ob-order-top">
      <div class="ob-order-top-left">
        <span
          class="ob-type-tag"
          :class="[resolveDeliveryClass(card.deliveryType)]"
        >
          {{ resolveDeliveryLabel(card.deliveryType) }}
        </span>
        <span class="ob-short-no">{{ resolveShortOrderNo(card.orderNo) }}</span>
        <span v-if="card.tableNo" class="ob-table-chip">
          桌台: {{ card.tableNo }}
        </span>
      </div>
      <div class="ob-time-chip">
        <IconifyIcon icon="lucide:clock-3" />
        <span>{{ resolveElapsedClock(card.createdAt) }}</span>
      </div>
    </div>

    <div class="ob-main-line">
      <IconifyIcon icon="lucide:utensils-crossed" />
      <span>{{ card.itemsSummary || '--' }}</span>
    </div>

    <div class="ob-order-mid">
      <span class="ob-full-no">{{ card.orderNo }}</span>
      <span class="ob-amount">{{ formatAmount(card.paidAmount) }}</span>
    </div>

    <div v-if="columnKey === 'pending'" class="ob-actions ob-actions-pending">
      <a-button class="ob-btn ob-btn-ghost" @click="emit('reject', card.id)">
        拒单
      </a-button>
      <a-button class="ob-btn ob-btn-orange" @click="emit('accept', card.id)">
        接单
      </a-button>
    </div>

    <div
      v-else-if="columnKey === 'making'"
      class="ob-actions ob-actions-making"
    >
      <a-progress
        :percent="resolveMakingProgress(card)"
        :show-info="false"
        size="small"
        stroke-color="#3f7fe8"
        trail-color="#eceff3"
      />
      <a-button
        class="ob-btn ob-btn-blue"
        @click="emit('completePreparation', card.id)"
      >
        出餐完成
      </a-button>
    </div>

    <div
      v-else-if="columnKey === 'delivering'"
      class="ob-actions ob-actions-delivering"
    >
      <div class="ob-deliver-info">
        <IconifyIcon :icon="resolveDeliverInfoIcon(card)" />
        <span>{{ resolveDeliverInfoText(card) }}</span>
      </div>
      <a-button
        class="ob-btn ob-btn-green"
        @click="emit('confirmDelivery', card.id)"
      >
        确认
      </a-button>
    </div>
  </div>
</template>
