<template>
  <div class="d-flex flex-column">
    <v-card variant="flat">
      <v-card-title class="d-flex flex-wrap align-center py-0 ga-2">
        <span class="text-h6">可編輯表格維護示範</span>
        <v-chip :color="hasAnyChange ? 'warning' : 'success'" variant="tonal">
          {{ hasAnyChange ? '有未儲存變更' : '已同步' }}
        </v-chip>
        <v-chip color="info" variant="tonal">筆數 {{ filteredStudents.length }}</v-chip>
        <v-spacer />
        <v-btn flat :prepend-icon="mdiMagnify" @click="isSearchVisible = !isSearchVisible"
          >條件搜尋</v-btn
        >
        <v-switch v-model="isBulkEditEnabled" color="primary" hide-details label="啟用編輯" />
      </v-card-title>

      <v-divider />

      <v-card-text class="pb-0 pt-2">
        <v-row v-if="isSearchVisible" class="mb-2" density="compact">
          <v-col cols="12" md="3">
            <div class="text-body-1 text-medium-emphasis pl-2">學號</div>
            <v-text-field
              v-model="search.studentId"
              clearable
              density="compact"
              hide-details
              placeholder="例如：S2024001"
              variant="outlined"
            />
          </v-col>
          <v-col cols="12" md="3">
            <div class="text-body-1 text-medium-emphasis pl-2">姓名</div>
            <v-text-field
              v-model="search.name"
              clearable
              density="compact"
              hide-details
              placeholder="例如：王小明"
              variant="outlined"
            />
          </v-col>
          <v-col cols="12" md="3">
            <div class="text-body-1 text-medium-emphasis pl-2">系所</div>
            <v-select
              v-model="search.department"
              :class="{ 'select-hide-arrow': !isBulkEditEnabled }"
              clearable
              density="compact"
              hide-details
              :items="departments"
              variant="outlined"
            />
          </v-col>
        </v-row>

        <v-row v-if="isBulkEditEnabled" align="center" class="mb-2 ga-1" density="compact">
          <v-btn
            :disabled="!hasSelectedRows"
            :prepend-icon="mdiDelete"
            variant="outlined"
            @click="deleteSelectedRows"
          >
            批次刪除
          </v-btn>
          <v-spacer />
          <v-btn
            color="primary"
            :disabled="!hasAnyChange"
            :prepend-icon="mdiContentSave"
            variant="outlined"
            @click="saveAllRows"
          >
            儲存變更
          </v-btn>
          <v-btn
            :disabled="!hasAnyChange"
            :prepend-icon="mdiRestore"
            variant="text"
            @click="resetAllRows"
          >
            取消變更
          </v-btn>
        </v-row>

        <div ref="tableContainerRef">
          <v-data-table
            density="comfortable"
            fixed-header
            :headers="tableHeaders"
            :height="tableHeight"
            item-value="id"
            :items="filteredStudents"
            :items-per-page="10"
            items-per-page-text="每頁筆數"
            page-text="第 {0}-{1} 筆 / 共 {2} 筆"
          >
            <template #[`header.select`]>
              <v-checkbox-btn
                :disabled="!isBulkEditEnabled"
                :indeterminate="isPartiallyVisibleSelected"
                :model-value="isAllVisibleSelected"
                @update:model-value="toggleSelectAll"
              />
            </template>
            <template #[`item.select`]="{ item }">
              <v-checkbox-btn
                :disabled="!isBulkEditEnabled"
                :model-value="selectedRowIds.includes(item.id)"
                @update:model-value="(checked) => toggleSingleRowSelection(item.id, checked)"
              />
            </template>
            <template #[`item.studentId`]="{ item }">
              <v-text-field
                :model-value="getDraftRow(item.id)?.studentId ?? ''"
                density="compact"
                flat
                hide-details
                :readonly="!isBulkEditEnabled"
                :variant="isBulkEditEnabled ? 'outlined' : 'solo'"
                @update:model-value="
                  (value) => {
                    const row = getDraftRow(item.id)
                    if (row) row.studentId = String(value)
                  }
                "
              />
            </template>
            <template #[`item.name`]="{ item }">
              <v-text-field
                :model-value="getDraftRow(item.id)?.name ?? ''"
                density="compact"
                flat
                hide-details
                :readonly="!isBulkEditEnabled"
                :variant="isBulkEditEnabled ? 'outlined' : 'solo'"
                @update:model-value="
                  (value) => {
                    const row = getDraftRow(item.id)
                    if (row) row.name = String(value)
                  }
                "
              />
            </template>
            <template #[`item.department`]="{ item }">
              <v-select
                :model-value="getDraftRow(item.id)?.department ?? ''"
                :class="{ 'select-hide-arrow': !isBulkEditEnabled }"
                density="compact"
                flat
                hide-details
                :items="departments"
                :readonly="!isBulkEditEnabled"
                :variant="isBulkEditEnabled ? 'outlined' : 'solo'"
                @update:model-value="
                  (value) => {
                    const row = getDraftRow(item.id)
                    if (row) row.department = String(value)
                  }
                "
              />
            </template>
            <template #[`item.grade`]="{ item }">
              <v-select
                :model-value="getDraftRow(item.id)?.grade ?? null"
                :class="{ 'select-hide-arrow': !isBulkEditEnabled }"
                density="compact"
                flat
                hide-details
                item-title="title"
                item-value="value"
                :items="gradeOptions"
                :readonly="!isBulkEditEnabled"
                :variant="isBulkEditEnabled ? 'outlined' : 'solo'"
                @update:model-value="
                  (value) => {
                    const row = getDraftRow(item.id)
                    if (row) row.grade = Number(value) || 0
                  }
                "
              />
            </template>
            <template #[`item.enrollYear`]="{ item }">
              <v-select
                :model-value="getDraftRow(item.id)?.enrollYear ?? null"
                :class="{ 'select-hide-arrow': !isBulkEditEnabled }"
                density="compact"
                flat
                hide-details
                :items="enrollYears"
                :readonly="!isBulkEditEnabled"
                :variant="isBulkEditEnabled ? 'outlined' : 'solo'"
                @update:model-value="
                  (value) => {
                    const row = getDraftRow(item.id)
                    if (row) row.enrollYear = Number(value) || 0
                  }
                "
              />
            </template>
            <template #[`item.credits`]="{ item }">
              <v-text-field
                :model-value="getDraftRow(item.id)?.credits ?? 0"
                density="compact"
                flat
                hide-details
                min="0"
                :readonly="!isBulkEditEnabled"
                type="number"
                :variant="isBulkEditEnabled ? 'outlined' : 'solo'"
                @update:model-value="
                  (value) => {
                    const row = getDraftRow(item.id)
                    if (row) row.credits = Number(value) || 0
                  }
                "
              />
            </template>
            <template #[`item.advisor`]="{ item }">
              <v-text-field
                :model-value="getDraftRow(item.id)?.advisor ?? ''"
                density="compact"
                flat
                hide-details
                :readonly="!isBulkEditEnabled"
                :variant="isBulkEditEnabled ? 'outlined' : 'solo'"
                @update:model-value="
                  (value) => {
                    const row = getDraftRow(item.id)
                    if (row) row.advisor = String(value)
                  }
                "
              />
            </template>
            <template #[`item.email`]="{ item }">
              <v-text-field
                :model-value="getDraftRow(item.id)?.email ?? ''"
                density="compact"
                flat
                hide-details
                :readonly="!isBulkEditEnabled"
                :variant="isBulkEditEnabled ? 'outlined' : 'solo'"
                @update:model-value="
                  (value) => {
                    const row = getDraftRow(item.id)
                    if (row) row.email = String(value)
                  }
                "
              />
            </template>
            <template #[`item.phone`]="{ item }">
              <v-text-field
                :model-value="getDraftRow(item.id)?.phone ?? ''"
                density="compact"
                flat
                hide-details
                :readonly="!isBulkEditEnabled"
                :variant="isBulkEditEnabled ? 'outlined' : 'solo'"
                @update:model-value="
                  (value) => {
                    const row = getDraftRow(item.id)
                    if (row) row.phone = String(value)
                  }
                "
              />
            </template>
            <template #[`item.status`]="{ item }">
              <v-select
                :model-value="getDraftRow(item.id)?.status ?? ''"
                :class="{ 'select-hide-arrow': !isBulkEditEnabled }"
                density="compact"
                flat
                hide-details
                :items="statuses"
                :readonly="!isBulkEditEnabled"
                :variant="isBulkEditEnabled ? 'outlined' : 'solo'"
                @update:model-value="
                  (value) => {
                    const row = getDraftRow(item.id)
                    if (row) row.status = String(value)
                  }
                "
              />
            </template>
            <template #[`item.actions`]="{ item }">
              <div class="d-flex ga-1 justify-end">
                <v-btn
                  color="error"
                  :disabled="!isBulkEditEnabled"
                  size="small"
                  variant="text"
                  @click="deleteSingleRow(item.id)"
                >
                  刪除
                </v-btn>
              </div>
            </template>
          </v-data-table>
        </div>
      </v-card-text>
    </v-card>
  </div>
</template>

<script setup lang="ts">
import { mdiContentSave, mdiDelete, mdiMagnify, mdiRestore } from '@mdi/js'
import { useEditableStudentGrid } from '@/composables/maintenance/useEditableStudentGrid'

const {
  departments,
  enrollYears,
  filteredStudents,
  getDraftRow,
  gradeOptions,
  hasAnyChange,
  hasSelectedRows,
  isAllVisibleSelected,
  isBulkEditEnabled,
  isPartiallyVisibleSelected,
  isSearchVisible,
  saveAllRows,
  search,
  selectedRowIds,
  statuses,
  tableContainerRef,
  tableHeaders,
  tableHeight,
  toggleSelectAll,
  toggleSingleRowSelection,
  deleteSelectedRows,
  deleteSingleRow,
  resetAllRows,
} = useEditableStudentGrid()
</script>

<style scoped>
:deep(.select-hide-arrow .v-field__append-inner) {
  display: none;
}

:deep(.v-table__wrapper .v-field__input) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 32px;
}

:deep(.v-data-table-footer) {
  padding: 4px 0 0;
}
</style>
