<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useDisplay } from 'vuetify'
import { fromApiBool } from '@/api/boolCodec.js'
import { COLOR_MAPPING, COLOR_KEYS } from '@/components/constants/colors'

// Presentation-only table for subjects. Builds a Map<colorKey, {title, color}>
// for O(1) display lookup of the calendar-color column. Emits edit / delete
// events; parent owns the open-dialog state.
defineProps({
  items: { type: Array, required: true },
})
const emit = defineEmits(['edit', 'delete'])

const { xs } = useDisplay()
const { t } = useI18n()

const colorMap = computed(() => {
  const map = new Map()
  for (const key of COLOR_KEYS) {
    map.set(key, {
      title: t(`subject.calendarColors.${key}`),
      color: COLOR_MAPPING[key] || '#e0e0e0',
    })
  }
  return map
})

function getColorTitle(code) {
  return colorMap.value.get(code)?.title ?? code ?? '--'
}
function getColorValue(code) {
  return colorMap.value.get(code)?.color ?? '#e0e0e0'
}

const headers = computed(() => [
  {
    title: t('subject.table.headers.subject_name'),
    value: 'subject_name',
    sortable: true,
    width: '20%',
  },
  {
    title: t('subject.table.headers.enabled_flag'),
    value: 'enabled_flag',
    sortable: true,
    width: '16%',
    sort: (a, b) => {
      // Y (启用) sorts before N (禁用)
      if (fromApiBool(a) && !fromApiBool(b)) return -1
      if (!fromApiBool(a) && fromApiBool(b)) return 1
      return 0
    },
  },
  {
    title: t('subject.table.headers.primary_flag'),
    value: 'primary_flag',
    sortable: true,
    width: '16%',
  },
  {
    title: t('subject.table.headers.calendar_color'),
    value: 'calendar_color',
    sortable: false,
    width: '20%',
  },
  {
    title: t('subject.table.headers.sort_sequence'),
    value: 'sort_sequence',
    sortable: true,
    width: '16%',
  },
  {
    title: t('subject.table.headers.actions'),
    value: 'actions',
    sortable: false,
    align: 'end',
    width: '12%',
  },
])
</script>

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    item-key="subject_id"
    :items-per-page="10"
    class="elevation-1 text-no-wrap"
    :sort-by="[{ key: 'sort_sequence', order: 'asc' }]"
    multi-sort
    :items-per-page-text="t('subject.table.pagination.itemsPerPage')"
    :no-data-text="t('subject.table.pagination.noDataText')"
    :loading-text="t('subject.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('subject.table.pagination.itemsPerPageAll') },
    ]"
    :hide-default-footer="false"
    :height="xs ? undefined : 'calc(100dvh - 360px)'"
    :fixed-header="!xs"
    :density="xs ? 'compact' : 'comfortable'"
  >
    <template v-slot:[`item.enabled_flag`]="{ item }">
      <v-chip
        :color="fromApiBool(item.enabled_flag) ? 'success' : 'error'"
        text-color="white"
        size="small"
      >
        {{
          fromApiBool(item.enabled_flag)
            ? t('subject.status.enabled')
            : t('subject.status.disabled')
        }}
      </v-chip>
    </template>

    <template v-slot:[`item.primary_flag`]="{ item }">
      <v-chip
        :color="fromApiBool(item.primary_flag) ? 'primary' : 'default'"
        text-color="white"
        size="small"
      >
        {{
          fromApiBool(item.primary_flag)
            ? t('subject.status.primary')
            : t('subject.status.notPrimary')
        }}
      </v-chip>
    </template>

    <template v-slot:[`item.calendar_color`]="{ item }">
      <div class="d-flex align-center">
        <v-avatar
          size="16"
          :color="getColorValue(item.calendar_color)"
          class="mr-2"
        ></v-avatar>
        <span class="text-caption text-truncate" style="max-width: 100px">
          {{ getColorTitle(item.calendar_color) }}
        </span>
      </div>
    </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>