<script setup lang="ts">
import { Ban, CheckCircle, RefreshCw, Trash2, X } from 'lucide-vue-next'
import type { Table } from '@tanstack/vue-table'

import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import type { Device } from '@/pages/admin/devices/data/schema'

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

const props = defineProps<{
  table: Table<Device>
}>()

const emit = defineEmits<{
  batchUnbind: []
  batchBan: []
  batchUnban: []
  refresh: []
}>()

const { t } = useI18n()

const isFiltered = computed(() => props.table.getState().columnFilters.length > 0)
const selectedCount = computed(() => props.table.getSelectedRowModel().rows.length)
</script>

<template>
  <div class="flex flex-1 items-center space-x-2">
    <Input
      :placeholder="t('admin.devices.searchPlaceholder')"
      :model-value="(table.getColumn('device_id')?.getFilterValue() as string) ?? ''"
      class="h-8 w-[150px] lg:w-[250px]"
      @update:model-value="table.getColumn('device_id')?.setFilterValue($event)"
    />
    <Button
      v-if="isFiltered"
      variant="ghost"
      class="h-8 px-2 lg:px-3"
      @click="table.resetColumnFilters()"
    >
      {{ t('admin.devices.reset') }}
      <X class="ml-2 h-4 w-4" />
    </Button>
  </div>

  <div class="flex items-center gap-2">
    <Button
      variant="outline"
      size="sm"
      class="h-8"
      @click="emit('refresh')"
    >
      <RefreshCw class="mr-2 h-4 w-4" />
      刷新
    </Button>

    <template v-if="selectedCount > 0">
      <span class="text-sm text-muted-foreground">
        {{ t('admin.devices.selected', { count: selectedCount }) }}
      </span>
      <Button
        variant="outline"
        size="sm"
        class="h-8"
        @click="emit('batchUnban')"
      >
        <CheckCircle class="mr-2 h-4 w-4" />
        {{ t('admin.devices.batchUnban') }}
      </Button>
      <Button
        variant="outline"
        size="sm"
        class="h-8"
        @click="emit('batchBan')"
      >
        <Ban class="mr-2 h-4 w-4" />
        {{ t('admin.devices.batchBan') }}
      </Button>
      <Button
        variant="destructive"
        size="sm"
        class="h-8"
        @click="emit('batchUnbind')"
      >
        <Trash2 class="mr-2 h-4 w-4" />
        {{ t('admin.devices.batchUnbind') }}
      </Button>
    </template>
  </div>
</template>
