<template>
  <div class="ticket-list-container">
    <div
      v-if="tickets.length === 0"
      class="chill-no-data-statement d-flex justify-content-center align-items-center"
    >
      <h3 class="text-muted fst-italic display-4">
        {{ trans(CHILL_TICKET_LIST_NO_TICKETS) }}
      </h3>
    </div>
    <div
      v-else
      ref="ticketList"
      style="overflow-y: scroll; flex: 1; min-height: 0; max-height: 100%"
    >
      <TicketListItemComponent
        v-for="ticket in tickets"
        :key="ticket.id"
        :ticket="ticket"
        @view-ticket="handleViewTicket"
        @edit-ticket="handleEditTicket"
      />
      <!-- Bouton pour charger plus de tickets -->
      <div
        v-if="hasMoreTickets"
        class="text-center py-3"
        style="margin: 12px 0"
      >
        <button class="btn btn-outline-primary" @click="loadMoreTickets">
          {{ trans(CHILL_TICKET_LIST_LOAD_MORE) }}
        </button>
      </div>
    </div>

    <Modal
      v-if="selectedTicketId !== null && ticketDetails"
      :show="showTicketHistoryModal"
      modal-dialog-class="modal-xl"
      @close="closeHistoryModal"
    >
      <template #header>
        <h3 class="modal-title">
          {{ getTicketTitle(ticketDetails) }}
        </h3>
      </template>

      <template #body>
        <ticket-history-list-component
          v-if="ticketDetails.history.length > 0"
          :history="ticketDetails.history"
        />
        <div v-else class="text-center p-4">
          <div class="spinner-border" role="status">
            <span class="visually-hidden">{{
              trans(CHILL_TICKET_LIST_LOADING_TICKET_DETAILS)
            }}</span>
          </div>
        </div>
      </template>
      <template #footer>
        <button
          class="btn btn-edit"
          @click="handleEditTicket(selectedTicketId)"
        >
          {{ trans(EDIT) }}
        </button>
      </template>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onUnmounted } from "vue";

// Types
import { TicketSimple, Ticket } from "../../../types";

// Components
import TicketListItemComponent from "./TicketListItemComponent.vue";
import TicketHistoryListComponent from "./TicketHistoryListComponent.vue";
import Modal from "../../../../../../../ChillMainBundle/Resources/public/vuejs/_components/Modal.vue";

// Utils
import { getTicketTitle } from "../../TicketApp/utils/utils";
import { localizedUrl } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

// Translations
import {
  trans,
  EDIT,
  CHILL_TICKET_LIST_NO_TICKETS,
  CHILL_TICKET_LIST_LOAD_MORE,
  CHILL_TICKET_LIST_LOADING_TICKET_DETAILS,
} from "translator";
import { useStore } from "vuex";

defineProps<{
  tickets: TicketSimple[];
  hasMoreTickets: boolean;
}>();

const emit = defineEmits<{
  fetchNextPage: [];
}>();

const store = useStore();
const selectedTicketId = ref<number | null>(null);
const showTicketHistoryModal = ref(false);
const ticketDetails = computed(() => store.getters.getTicket as Ticket | null);

function closeHistoryModal() {
  showTicketHistoryModal.value = false;
  selectedTicketId.value = null;
}

async function handleViewTicket(ticketId: number) {
  await store.dispatch("fetchTicket", ticketId);

  selectedTicketId.value = ticketId;
  showTicketHistoryModal.value = true;
}

function handleEditTicket(ticketId: number) {
  const returnPath = localizedUrl(`/ticket/ticket/list`);
  window.location.href = localizedUrl(
    `/ticket/ticket/${ticketId}/edit?returnPath=${returnPath}`,
  );
}

function loadMoreTickets() {
  emit("fetchNextPage");
}

onUnmounted(() => {
  // Nettoyage si nécessaire
});
</script>
