<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { fromApiBool } from '@/api/boolCodec.js'

// Presentation-only table for students. Lifts the avatar helper (data URL)
// and the fallback-letter helper. Emits edit / delete events; parent owns
// the open-dialog state.
defineProps({
  items: { type: Array, required: true },
})
const emit = defineEmits(['edit', 'delete'])

const { t } = useI18n()

function getAvatarDataUrl(avatar, mimeType) {
  if (!avatar || !mimeType) return null
  return `data:${mimeType};base64,${avatar}`
}
function getAvatarFallback(name) {
  if (!name || typeof name !== 'string') return '?'
  const trimmed = name.trim()
  return trimmed ? trimmed.charAt(0).toUpperCase() : '?'
}

const headers = computed(() => [
  { title: t('student.table.headers.avatar'), value: 'avatar', align: 'start', sortable: false },
  { title: t('student.table.headers.name'), value: 'student_name', sortable: true },
  {
    title: t('student.table.headers.enabled'),
    value: 'enabled',
    sortable: true,
    sort: (a, b) => {
      if (fromApiBool(a) && !fromApiBool(b)) return -1
      if (!fromApiBool(a) && fromApiBool(b)) return 1
      return 0
    },
  },
  { title: t('student.table.headers.age'), value: 'age', sortable: true },
  { title: t('student.table.headers.grade'), value: 'grade', sortable: true },
  { title: t('student.table.headers.actions'), value: 'actions', sortable: false, align: 'end' },
])
</script>

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    item-key="student_id"
    :items-per-page="10"
    class="elevation-1"
    :sort-by="[{ key: 'student_name', order: 'asc' }]"
    multi-sort
    :items-per-page-text="t('student.table.pagination.itemsPerPage')"
    :no-data-text="t('student.table.pagination.noDataText')"
    :loading-text="t('student.table.pagination.loadingText')"
    :items-per-page-options="[
      { value: 5, title: '5' },
      { value: 10, title: '10' },
      { value: 25, title: '25' },
      { value: 50, title: '50' },
      { value: -1, title: t('student.table.pagination.itemsPerPageAll') },
    ]"
  >
    <template v-slot:[`item.avatar`]="{ item }">
      <div class="d-flex align-center py-2">
        <v-avatar size="64">
          <template v-if="item.avatar && item.avatar_mime_type">
            <v-img
              :src="getAvatarDataUrl(item.avatar, item.avatar_mime_type)"
              :alt="item.avatar_file_name || t('student.avatar.fallback.alt')"
              cover
            />
          </template>
          <template v-else>
            <span class="text-body-2">{{ getAvatarFallback(item.student_name) }}</span>
          </template>
        </v-avatar>
      </div>
    </template>

    <template v-slot:[`item.enabled`]="{ item }">
      <v-chip
        :color="fromApiBool(item.enabled) ? 'success' : 'error'"
        text-color="white"
        size="small"
      >
        {{ fromApiBool(item.enabled) ? t('common.status.enabled') : t('common.status.disabled') }}
      </v-chip>
    </template>

    <template v-slot:[`item.actions`]="{ item }">
      <v-btn
        icon="mdi-pencil"
        size="small"
        color="primary"
        variant="text"
        @click="emit('edit', item)"
      >
      </v-btn>
      <v-btn
        icon="mdi-delete"
        size="small"
        color="error"
        variant="text"
        @click="emit('delete', item)"
      >
      </v-btn>
    </template>
  </v-data-table>
</template>

<style scoped>
.v-data-table {
  width: 100%;
}
</style>