<!-- 文件职责：订单大厅顶部控制区（门店 + 履约筛选 + 声音开关 + 刷新）。 -->
<script setup lang="ts">
import type { BoardDeliveryFilter, StoreOptionItem } from '../types';

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

import { DELIVERY_FILTER_OPTIONS } from '../composables/order-hall-page/constants';

const {
  deliveryFilter = 'all',
  isConnected = false,
  isSoundEnabled = true,
  isStoreLoading = false,
  storeId = '',
  storeOptions = [],
} = defineProps<{
  deliveryFilter?: BoardDeliveryFilter;
  isConnected?: boolean;
  isSoundEnabled?: boolean;
  isStoreLoading?: boolean;
  storeId?: string;
  storeOptions?: StoreOptionItem[];
}>();

const emit = defineEmits<{
  refresh: [];
  'update:deliveryFilter': [value: BoardDeliveryFilter];
  'update:isSoundEnabled': [value: boolean];
  'update:storeId': [value: string];
}>();

function handleStoreChange(value: unknown) {
  if (typeof value === 'number' || typeof value === 'string') {
    emit('update:storeId', String(value));
    return;
  }

  emit('update:storeId', '');
}
</script>

<template>
  <div class="ob-toolbar-shell">
    <div class="ob-toolbar-actions">
      <a-select
        :value="storeId"
        class="ob-store-select"
        placeholder="请选择门店"
        :loading="isStoreLoading"
        :options="storeOptions"
        :disabled="isStoreLoading || storeOptions.length === 0"
        @update:value="handleStoreChange"
      />

      <div class="ob-channels">
        <button
          v-for="option in DELIVERY_FILTER_OPTIONS"
          :key="option.value"
          type="button"
          class="ob-channel"
          :class="{ active: deliveryFilter === option.value }"
          @click="emit('update:deliveryFilter', option.value)"
        >
          {{ option.label }}
        </button>
      </div>

      <div class="ob-toolbar-right">
        <span class="ob-connection" :class="{ offline: !isConnected }">
          <span class="ob-connection-dot"></span>
          {{ isConnected ? '已连接' : '连接中' }}
        </span>

        <button
          type="button"
          class="ob-icon-btn"
          :class="{ active: isSoundEnabled }"
          :title="isSoundEnabled ? '提示音开启' : '提示音关闭'"
          @click="emit('update:isSoundEnabled', !isSoundEnabled)"
        >
          <IconifyIcon
            :icon="isSoundEnabled ? 'lucide:volume-2' : 'lucide:volume-x'"
          />
        </button>

        <button
          type="button"
          class="ob-icon-btn"
          :class="{ 'ob-icon-btn--offline': !isConnected }"
          :title="isConnected ? '刷新' : '连接中，点击重试刷新'"
          @click="emit('refresh')"
        >
          <IconifyIcon icon="lucide:refresh-cw" />
        </button>
      </div>
    </div>
  </div>
</template>
