<script setup lang="ts">
import { GitBranch, List, Search } from 'lucide-vue-next'
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 { Agent } from '../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 './columns'
const props = defineProps<Omit<DataTableProps<Agent>, 'columns'> & {
  searchFilter?: string
  viewMode?: 'tree' | 'list'
  onToggleStatus: (row: Agent) => void
  onEdit: (row: Agent) => void
  onDelete: (row: Agent) => void
}>()

const emit = defineEmits<{
  'refresh': []
  'toggleView': []
  'update:searchFilter': [value: string]
  'batchUnban': []
  'batchBan': []
  'batchDelete': []
}>()

const { t } = useI18n()

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

const table = generateVueTable<Agent>({
  get data() { return props.data },
  get loading() { return props.loading },
  columns: columns.value,
  getSubRows: props.viewMode === 'tree' ? (row: Agent) => row.children || [] : undefined,
}, columns.value)

const columnLabels: Record<string, string> = {
  select: 'admin.agents.select',
  username: 'admin.agents.columns.username',
  status: 'admin.agents.columns.status',
  can_create_agent: 'admin.agents.columns.canCreateAgent',
  cards_count: 'admin.agents.columns.cardsCount',
  child_agents_count: 'admin.agents.columns.childAgentsCount',
  balance: 'admin.agents.columns.balance',
  created_at: 'admin.agents.columns.createdAt',
  last_login_at: 'admin.agents.columns.lastLoginAt',
}

defineExpose({
  table,
})
</script>

<template>
  <DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
    <template #toolbar>
      <div class="space-y-3">
        <div class="flex items-center justify-end">
          <slot name="actions" />
        </div>
        <BulkActions :table="table" entity-name="agents">
          <UiButton variant="outline" size="sm" @click="emit('batchUnban')">
            {{ t('admin.agents.batchUnbanBtn') }}
          </UiButton>
          <UiButton variant="outline" size="sm" @click="emit('batchBan')">
            {{ t('admin.agents.batchBanBtn') }}
          </UiButton>
          <UiButton variant="destructive" size="sm" @click="emit('batchDelete')">
            {{ t('admin.agents.batchDeleteBtn') }}
          </UiButton>
        </BulkActions>
        <div class="flex flex-wrap items-center justify-between gap-2">
          <div class="flex flex-wrap items-center gap-2">
            <div class="relative">
              <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <UiInput
                :model-value="searchFilter"
                type="search"
                :placeholder="t('admin.agents.searchPlaceholder')"
                class="h-9 w-[250px] pl-8"
                @update:model-value="emit('update:searchFilter', String($event))"
              />
            </div>
            <slot name="filters" />
          </div>
          <div class="flex items-center gap-2">
            <UiButton variant="outline" size="sm" @click="emit('toggleView')">
              <component :is="viewMode === 'tree' ? List : GitBranch" class="mr-2 h-4 w-4" />
              {{ viewMode === 'tree' ? t('admin.agents.listView') : t('admin.agents.treeView') }}
            </UiButton>
            <DataTableViewOptions :table="table" :column-labels="columnLabels" />
          </div>
        </div>
      </div>
    </template>
  </DataTable>
</template>
