<template>
  <div class="th-page task-list-view">
    <header class="page-heading">
      <div>
        <h1>{{ t('taskList.title') }}</h1>
        <p>{{ t('taskList.subtitle') }}</p>
      </div>
    </header>

    <section class="th-section filter-section">
      <div class="th-section-header">
        <h2 class="th-section-title">
          {{ t('workbench.filters') }}
        </h2>
        <button
          type="button"
          class="text-button"
          @click="resetFilters"
        >
          {{ t('workbench.reset') }}
        </button>
      </div>

      <div class="filter-grid">
        <label>
          <span>{{ t('taskList.keyword') }}</span>
          <input
            v-model="filters.keyword"
            type="search"
            :placeholder="t('taskList.keywordPlaceholder')"
            @input="resetToFirstPage"
          >
        </label>
        <label>
          <span>{{ t('taskList.taskType') }}</span>
          <select
            v-model="filters.task_type"
            @change="resetToFirstPage"
          >
            <option value="">{{ t('common.all') }}</option>
            <option value="NEW_BOOKING">{{ t('cardType.NEW_BOOKING') }}</option>
            <option value="UPDATE_BOOKING">{{ t('cardType.UPDATE_BOOKING') }}</option>
            <option value="CANCEL_BOOKING">{{ t('cardType.CANCEL_BOOKING') }}</option>
            <option value="MANUAL_REVIEW">{{ t('cardType.MANUAL_REVIEW') }}</option>
            <option value="INFORMATIONAL_MESSAGE">{{ t('cardType.MESSAGE_NOTIFICATION') }}</option>
          </select>
        </label>
        <label>
          <span>{{ t('workbench.taskStatus') }}</span>
          <select
            v-model="filters.task_status"
            @change="resetToFirstPage"
          >
            <option value="">{{ t('common.all') }}</option>
            <option value="PENDING_CONFIRM">{{ t('status.PENDING_CONFIRM') }}</option>
            <option value="READY">{{ t('status.READY') }}</option>
            <option value="BLOCKED">{{ t('status.BLOCKED') }}</option>
            <option value="COMPLETED">{{ t('status.COMPLETED') }}</option>
          </select>
        </label>
        <label>
          <span>{{ t('workbench.orderStatus') }}</span>
          <select
            v-model="filters.order_status"
            @change="resetToFirstPage"
          >
            <option value="">{{ t('common.all') }}</option>
            <option value="TEMPORARY">{{ t('status.TEMPORARY') }}</option>
            <option value="ACTIVE">{{ t('status.ACTIVE') }}</option>
            <option value="ENDED">{{ t('status.ENDED') }}</option>
            <option value="LOGIC_DELETED">{{ t('status.LOGIC_DELETED') }}</option>
          </select>
        </label>
        <label>
          <span>{{ t('taskList.queueParticipation') }}</span>
          <select
            v-model="filters.queue_participation"
            @change="resetToFirstPage"
          >
            <option :value="undefined">{{ t('taskList.queueAll') }}</option>
            <option :value="true">{{ t('taskList.queueIncluded') }}</option>
            <option :value="false">{{ t('taskList.queueExcluded') }}</option>
          </select>
        </label>
      </div>
    </section>

    <section class="th-section table-section">
      <div class="th-section-header">
        <div>
          <h2 class="th-section-title">
            {{ t('taskList.tableTitle') }}
          </h2>
          <p class="th-muted">
            {{ t('workbench.totalPrefix') }} {{ total }} {{ t('taskList.totalSuffix') }}
          </p>
        </div>
      </div>

      <div
        v-if="loading"
        class="empty-state"
      >
        {{ t('common.loading') }}
      </div>
      <div
        v-else-if="errorMessage"
        class="empty-state empty-state--error"
      >
        {{ errorMessage }}
      </div>
      <div
        v-else-if="!tasks.length"
        class="empty-state"
      >
        {{ t('common.noData') }}
      </div>

      <div
        v-else
        class="table-wrap"
      >
        <table>
          <thead>
            <tr>
              <th>{{ t('taskList.columns.task') }}</th>
              <th>{{ t('taskList.columns.order') }}</th>
              <th>{{ t('taskList.columns.card') }}</th>
              <th>{{ t('taskList.columns.status') }}</th>
              <th>{{ t('taskList.columns.source') }}</th>
              <th>{{ t('taskList.columns.queue') }}</th>
              <th>{{ t('workbench.columns.operation') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="task in tasks"
              :key="task.task_id"
            >
              <td>
                <strong class="th-code">#{{ task.task_id }}</strong>
                <small>{{ formatReservationTaskTypeSummary(t, task.task_type, task.task_subtype) }}</small>
              </td>
              <td>
                <strong>{{ task.display_order_key ?? task.temporary_order_no ?? task.order_id }}</strong>
                <small class="th-code">{{ task.order_id }}</small>
              </td>
              <td>{{ formatReservationTaskCard(t, task.task_type, task.card_name) }}</td>
              <td><ReservationStatusBadge :status="task.task_status" /></td>
              <td>
                <span>{{ task.source_subject ?? t('taskList.noSourceSubject') }}</span>
                <small>{{ task.source_sender_summary ?? task.source_message_id ?? '-' }}</small>
              </td>
              <td>
                <span>{{ task.queue_sequence ?? '-' }}</span>
                <small>{{ task.can_process ? t('taskList.canProcess') : formatReservationReadonlyReason(t, task.readonly_reason_code) }}</small>
              </td>
              <td>
                <div class="row-actions">
                  <RouterLink
                    class="row-action"
                    :to="`/reservation/tasks/${task.task_id}`"
                  >
                    {{ t('taskList.viewTask') }}
                  </RouterLink>
                  <RouterLink
                    class="row-action"
                    :to="`/reservation/orders/${task.order_id}`"
                  >
                    {{ t('taskList.viewOrder') }}
                  </RouterLink>
                  <span
                    v-if="!task.source_message_id"
                    class="pending-link"
                  >
                    {{ t('common.endpointMissing') }}
                  </span>
                  <RouterLink
                    v-else
                    class="row-action"
                    :to="`/reservation/source-messages/${task.source_message_id}/conversation`"
                  >
                    {{ t('taskList.viewConversation') }}
                  </RouterLink>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <footer class="pagination-bar">
        <label class="page-size-control">
          <span>{{ t('common.pageSize') }}</span>
          <select
            v-model.number="filters.page_size"
            @change="resetToFirstPage"
          >
            <option :value="10">10</option>
            <option :value="20">20</option>
            <option :value="50">50</option>
          </select>
        </label>
        <div class="pagination-actions">
          <button
            type="button"
            class="secondary-button"
            :disabled="currentPage <= 1 || loading"
            @click="goToPage(currentPage - 1)"
          >
            {{ t('common.previousPage') }}
          </button>
          <span>{{ t('common.pageStatus', { current: currentPage, total: totalPages }) }}</span>
          <button
            type="button"
            class="secondary-button"
            :disabled="currentPage >= totalPages || loading"
            @click="goToPage(currentPage + 1)"
          >
            {{ t('common.nextPage') }}
          </button>
        </div>
      </footer>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { RouterLink } from 'vue-router'
import { useI18n } from 'vue-i18n'

import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
import { fetchReservationTaskList } from '@/services/reservationService'
import type { ReservationPageResult, ReservationTaskListFilters, ReservationTaskListItem } from '@/types/reservation'
import {
  formatReservationReadonlyReason,
  formatReservationTaskCard,
  formatReservationTaskTypeSummary,
} from '@/utils/reservationDisplay'

const { t } = useI18n()
const loading = ref(false)
const errorMessage = ref('')
const tasks = ref<ReservationTaskListItem[]>([])
const page = ref(createPage(1, 20, 0))
const total = computed(() => page.value.total)
const currentPage = computed(() => page.value.page_num)
const totalPages = computed(() => Math.max(1, Math.ceil(page.value.total / Math.max(page.value.page_size, 1))))
let taskListRequestSequence = 0
const filters = reactive<ReservationTaskListFilters>({
  keyword: '',
  task_type: '',
  task_status: '',
  order_status: '',
  queue_participation: undefined,
  page_num: 1,
  page_size: 20,
})

onMounted(() => {
  void loadTasks()
})

watch(filters, () => {
  void loadTasks()
})

async function loadTasks(): Promise<void> {
  const requestSequence = ++taskListRequestSequence
  loading.value = true
  errorMessage.value = ''
  try {
    const result = await fetchReservationTaskList({ ...filters })
    if (requestSequence !== taskListRequestSequence) {
      return
    }
    tasks.value = result.items
    page.value = result.page
  } catch (error) {
    if (requestSequence !== taskListRequestSequence) {
      return
    }
    tasks.value = []
    page.value = createPage(filters.page_num ?? 1, filters.page_size ?? 20, 0)
    errorMessage.value = error instanceof Error ? error.message : String(error)
  } finally {
    if (requestSequence === taskListRequestSequence) {
      loading.value = false
    }
  }
}

function resetFilters(): void {
  filters.keyword = ''
  filters.task_type = ''
  filters.task_status = ''
  filters.order_status = ''
  filters.queue_participation = undefined
  filters.page_num = 1
  filters.page_size = 20
}

function resetToFirstPage(): void {
  filters.page_num = 1
}

function goToPage(page: number): void {
  filters.page_num = Math.min(Math.max(page, 1), totalPages.value)
}

function createPage(pageNum: number, pageSize: number, total: number): ReservationPageResult {
  return {
    page_num: pageNum,
    page_size: pageSize,
    total,
  }
}
</script>

<style scoped>
.task-list-view {
  max-width: 1320px;
}

.page-heading h1,
.page-heading p {
  margin: 0;
}

.page-heading h1 {
  color: var(--th-color-slate-900);
  font-size: 28px;
}

.page-heading p {
  margin-top: 8px;
  color: var(--th-color-slate-500);
  font-size: 14px;
}

.filter-section {
  padding-bottom: 20px;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 20px 0;
}

.filter-grid label {
  display: grid;
  gap: 7px;
}

.filter-grid span {
  color: var(--th-color-slate-500);
  font-size: 12px;
  font-weight: 700;
}

.filter-grid input,
.filter-grid select {
  min-height: 38px;
  min-width: 0;
  border: 1px solid var(--th-color-slate-200);
  border-radius: var(--th-radius-sm);
  background: var(--th-color-white);
  color: var(--th-color-slate-900);
  padding: 8px 10px;
}

.filter-grid select:disabled {
  color: var(--th-color-slate-500);
  cursor: not-allowed;
  opacity: 0.72;
}

.filter-hint {
  color: var(--th-color-warning);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.text-button,
.row-action {
  border: 0;
  background: transparent;
  color: var(--th-color-blue-600);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.empty-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--th-color-slate-500);
  font-size: 13px;
  padding: 24px;
}

.empty-state--error {
  color: var(--th-color-danger);
}

.table-section {
  overflow: hidden;
}

.table-wrap {
  overflow-x: auto;
  padding: 14px 20px 20px;
}

table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--th-color-slate-200);
  padding: 14px 10px;
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--th-color-slate-500);
  font-size: 12px;
  font-weight: 800;
}

td {
  color: var(--th-color-slate-900);
  font-size: 13px;
}

td strong,
td small {
  display: block;
}

td small {
  margin-top: 4px;
  color: var(--th-color-slate-500);
  font-size: 12px;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pending-link {
  color: var(--th-color-slate-500);
  font-size: 12px;
  font-weight: 800;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--th-color-slate-200);
  padding: 14px 20px 18px;
}

.page-size-control,
.pagination-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-size-control span,
.pagination-actions span {
  color: var(--th-color-slate-500);
  font-size: 12px;
  font-weight: 800;
}

.page-size-control select {
  min-height: 34px;
  border: 1px solid var(--th-color-slate-200);
  border-radius: var(--th-radius-sm);
  background: var(--th-color-white);
  color: var(--th-color-slate-900);
  padding: 6px 8px;
}

.secondary-button {
  min-height: 34px;
  border: 1px solid var(--th-color-slate-200);
  border-radius: var(--th-radius-sm);
  background: var(--th-color-white);
  color: var(--th-color-slate-700);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
}

.secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (max-width: 900px) {
  .filter-grid {
    grid-template-columns: 1fr;
  }

  .pagination-bar {
    align-items: flex-start;
    flex-direction: column;
  }
}
</style>
