<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'

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

import type { DataTableProps } from '@/components/data-table/types'
import type { Device } from '@/pages/admin/devices/data/schema'

import BulkActions from '@/components/data-table/bulk-actions.vue'
import DataTable from '@/components/data-table/data-table.vue'
import { SelectColumn } from '@/components/data-table/table-columns'
import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
import DataTableViewOptions from '@/components/data-table/view-options.vue'
import { getColumns } from '@/pages/admin/devices/components/columns'
import DataTableToolbar from '@/pages/admin/devices/components/data-table-toolbar.vue'

const props = defineProps<Omit<DataTableProps<Device>, 'columns'> & {
  onToggleStatus: (row: Device) => void
  onDelete: (row: Device) => void
  onForceOffline: (row: Device) => void
}>()

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

const { t } = useI18n()

const columns = computed(() => [
  SelectColumn as ColumnDef<Device>,
  ...getColumns({
    onToggleStatus: props.onToggleStatus,
    onDelete: props.onDelete,
    onForceOffline: props.onForceOffline,
  }),
])

const table = generateVueTable<Device>({
  get data() { return props.data },
  get loading() { return props.loading },
  columns: columns.value,
}, columns.value)

const columnLabels: Record<string, string> = {
  'select': 'admin.devices.select',
  'device_id': 'admin.devices.columns.deviceId',
  'device_name': 'admin.devices.columns.deviceName',
  'device_type': 'admin.devices.columns.deviceType',
  'user.username': 'admin.devices.columns.user',
  'application.name': 'admin.devices.columns.application',
  'online_status': 'admin.devices.columns.status',
  'online_sessions': 'admin.devices.columns.onlineSessions',
  'status': 'admin.devices.columns.deviceStatus',
  'created_at': 'admin.devices.columns.createdAt',
}

defineExpose({
  table,
})
</script>

<template>
  <DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
    <template #toolbar>
      <div class="space-y-3">
        <BulkActions :table="table" entity-name="devices">
          <UiButton variant="outline" size="sm" @click="emit('batchUnban')">
            {{ t('admin.devices.batchUnban') }}
          </UiButton>
          <UiButton variant="outline" size="sm" @click="emit('batchBan')">
            {{ t('admin.devices.batchBan') }}
          </UiButton>
          <UiButton variant="destructive" size="sm" @click="emit('batchUnbind')">
            {{ t('admin.devices.batchUnbind') }}
          </UiButton>
        </BulkActions>
        <div class="flex flex-wrap items-center justify-between gap-2">
          <div class="flex flex-wrap items-center gap-2">
            <DataTableToolbar
              :table
              @batch-unbind="emit('batchUnbind')"
              @batch-ban="emit('batchBan')"
              @batch-unban="emit('batchUnban')"
              @refresh="emit('refresh')"
            />
            <slot name="filters" />
          </div>
          <div class="flex items-center gap-2">
            <DataTableViewOptions :table="table" :column-labels="columnLabels" />
          </div>
        </div>
      </div>
    </template>
  </DataTable>
</template>
