<script setup lang="ts">
/**
 * Filter/navigation bar above the cross-dock board: date-window navigation,
 * window size, warehouse filter, manual refresh, legend.
 */
import { SelectBox } from 'tedir-select'

const board = inject('cdBoard') as ReturnType<typeof useCrossdockBoard>

// Warehouses are near-static reference data → cached lookup (project convention).
const { data: warehouses } = await useLookup('/api/models/m_warehouse')
const warehouseOptions = computed(() => {
  const records = (warehouses.value as any)?.records ?? []
  return [{ id: '', Name: 'Alle Lager' }, ...records]
})

const fmt = (d: Date) => `${String(d.getDate()).padStart(2, '0')}.${String(d.getMonth() + 1).padStart(2, '0')}.`
const rangeLabel = computed(() => `${fmt(board.rangeStart.value)} – ${fmt(board.rangeEnd.value)}`)

const dayPresets = [14, 21, 28]
</script>

<template>
  <div class="cdt">
    <div class="cdt__group">
      <button type="button" class="button is-small" title="Woche zurück" @click="board.shiftRange(-7)">
        <span class="ti ti-chevron-left"></span>
      </button>
      <button type="button" class="button is-small" title="Zeitraum zurücksetzen" @click="board.resetRange()">
        Heute
      </button>
      <button type="button" class="button is-small" title="Woche vor" @click="board.shiftRange(7)">
        <span class="ti ti-chevron-right"></span>
      </button>
      <span class="cdt__range">{{ rangeLabel }}</span>
    </div>

    <div class="cdt__group">
      <button
        v-for="n in dayPresets"
        :key="n"
        type="button"
        class="button is-small"
        :class="{ 'is-info': board.days.value === n }"
        @click="board.setDays(n)"
      >{{ n }} Tage</button>
    </div>

    <div class="cdt__group cdt__wh">
      <ClientOnly>
        <SelectBox
          :model-value="board.warehouseId.value"
          :options="warehouseOptions"
          prop="Name"
          dataprop="id"
          datatype="string"
          :size="5"
          @update:model-value="(val: any) => { board.warehouseId.value = val; board.load() }"
        />
      </ClientOnly>
    </div>

    <div class="cdt__spacer"></div>

    <div class="cdt__legend">
      <span class="cdt__key"><span class="cdt__swatch cdt__swatch--in"></span> Eingang</span>
      <span class="cdt__key"><span class="cdt__swatch cdt__swatch--out"></span> Ausgang</span>
      <span class="cdt__key"><span class="cdt__swatch cdt__swatch--green"></span> Ware eingetroffen</span>
      <span class="cdt__key"><span class="cdt__ribbonSample"></span> Verknüpfung (Deckung %)</span>
    </div>

    <button
      type="button"
      class="button is-small"
      :class="{ 'is-loading': board.pending.value }"
      title="Aktualisieren"
      @click="board.load()"
    >
      <span class="ti ti-refresh"></span>
    </button>
  </div>
</template>

<style scoped>
.cdt {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--theme-border, #e3e5ea);
  border-radius: 10px;
  background: var(--theme-bg-primary, #ffffff);
  margin-bottom: 12px;
}
.cdt__group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cdt__wh {
  min-width: 220px;
}
.cdt__range {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--theme-text-secondary, #7a8194);
  margin-left: 4px;
  white-space: nowrap;
}
.cdt__spacer {
  flex: 1;
}
.cdt__legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cdt__key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--theme-text-secondary, #7a8194);
  white-space: nowrap;
}
.cdt__swatch {
  width: 14px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.cdt__swatch--in { background: linear-gradient(#42628c, #2c4661); }
.cdt__swatch--out { background: linear-gradient(#6a5da8, #4a3f7d); }
.cdt__swatch--green { background: linear-gradient(#3d9e66, #2a7047); }
.cdt__ribbonSample {
  width: 22px;
  height: 0;
  border-top: 2.5px solid #8b93a7;
  border-radius: 2px;
  display: inline-block;
}
</style>
