<script setup lang="ts">
import { ref, watch, computed, onUnmounted } from "vue";
import { useQuasar } from "quasar";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import axios from "axios";
import http from "@/plugins/http";
import config from "@/app.config";

import { useCounterMixin } from "@/stores/mixin";

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const { messageError } = useCounterMixin();

const modal = defineModel<boolean>("modal", { required: true });
const title = defineModel<string>("title", { required: true });
const dataFile = defineModel<any | undefined>("dataFile", {
  required: false,
});

const pdfSrc = ref<any | undefined>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const isLoadPDF = ref<boolean>(false);
const isLoading = ref<boolean>(false);
const currentObjectUrl = ref<string | null>(null);

// Computed properties for navigation
const canGoPrevious = computed(() => page.value > 1);
const canGoNext = computed(() => page.value < numOfPages.value);
const pageInfo = computed(
  () => `หน้าที่ ${page.value} จาก ${numOfPages.value}`
);

/**
 * Navigate to previous page
 */
function goToPreviousPage() {
  if (canGoPrevious.value) {
    page.value--;
  }
}

/**
 * Navigate to next page
 */
function goToNextPage() {
  if (canGoNext.value) {
    page.value++;
  }
}

/**
 * Clean up object URL to prevent memory leaks
 */
function cleanupObjectUrl() {
  if (currentObjectUrl.value) {
    URL.revokeObjectURL(currentObjectUrl.value);
    currentObjectUrl.value = null;
  }
}

/**
 * Reset PDF state
 */
function resetPdfState() {
  cleanupObjectUrl();
  pdfSrc.value = undefined;
  page.value = 1;
  numOfPages.value = 0;
  isLoadPDF.value = false;
  isLoading.value = false;
}

/**
 * Load PDF file from URL
 * @param url - Link to load file
 * @param type - File type
 */
async function fetchPDF(dataFile: string): Promise<void> {
  try {
    isLoading.value = true;
    isLoadPDF.value = false;

    // Clean up previous object URL
    cleanupObjectUrl();

    console.log("fetchdata");

    const response = await axios.post(
      `${config.API.reportTemplate}/docx`,
      dataFile,
      {
        headers: {
          accept: "application/pdf",
          "content-Type": "application/json",
        },
        responseType: "arraybuffer",
      }
    );

    const blob = new Blob([response.data], { type: "application/pdf" });
    const objectUrl = URL.createObjectURL(blob);
    currentObjectUrl.value = objectUrl;

    const pdfData = usePDF(objectUrl);

    // Wait for PDF to be ready
    const checkPdfReady = () => {
      if (pdfData.pdf.value && pdfData.pages.value) {
        pdfSrc.value = pdfData.pdf.value;
        numOfPages.value = pdfData.pages.value;
        isLoadPDF.value = true;
        isLoading.value = false;
      } else {
        // Retry after a short delay
        setTimeout(checkPdfReady, 100);
      }
    };

    checkPdfReady();
  } catch (error) {
    isLoading.value = false;
    isLoadPDF.value = false;
    messageError($q, error);
  }
}

function onClose() {
  modal.value = false;
}

function onDownloadFile() {
  if (currentObjectUrl.value) {
    const link = document.createElement("a");
    link.href = currentObjectUrl.value;
    link.download = `${title.value}.pdf`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

watch(modal, (val) => {
  if (val && dataFile.value) {
    fetchPDF(dataFile.value);
  } else {
    resetPdfState();
  }
});

// Cleanup on component unmount
onUnmounted(() => {
  cleanupObjectUrl();
});
</script>

<template>
  <q-dialog
    v-model="modal"
    persistent
    :maximized="true"
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card>
      <DialogHeader :tittle="`${title}`" :close="onClose" />

      <q-separator />

      <!-- PDF Content -->
      <q-card-section
        v-if="isLoadPDF"
        bordered
        :class="
          $q.screen.gt.xs
            ? ['q-ma-xl', 'q-pa-xl', 'scroll']
            : ['q-ma-xs', 'q-pa-xs', 'scroll']
        "
      >
        <!-- Top Navigation -->
        <div class="pagination-controls">
          <q-btn
            class="nav-button"
            flat
            dense
            :disable="!canGoPrevious"
            @click="goToPreviousPage"
          >
            <q-icon name="mdi-chevron-left" />
          </q-btn>

          <span class="page-info">{{ pageInfo }}</span>

          <q-btn
            class="nav-button"
            flat
            dense
            :disable="!canGoNext"
            @click="goToNextPage"
          >
            <q-icon name="mdi-chevron-right" />
          </q-btn>
        </div>

        <!-- PDF Viewer -->
        <div class="pdf-container">
          <VuePDF
            ref="vuePDFRef"
            :pdf="pdfSrc"
            :page="page"
            fit-parent
            :scale="0.1"
          />
        </div>

        <!-- Bottom Navigation -->
        <div class="pagination-controls">
          <q-btn
            class="nav-button"
            flat
            dense
            :disable="!canGoPrevious"
            @click="goToPreviousPage"
          >
            <q-icon name="mdi-chevron-left" />
          </q-btn>

          <span class="page-info">{{ pageInfo }}</span>

          <q-btn
            class="nav-button"
            flat
            dense
            :disable="!canGoNext"
            @click="goToNextPage"
          >
            <q-icon name="mdi-chevron-right" />
          </q-btn>
        </div>
      </q-card-section>

      <!-- Loading State -->
      <q-card-section v-else>
        <div class="full-width row flex-center text-accent q-gutter-sm">
          <span
            ><div
              style="
                height: 60vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
              "
              class="text-grey-5"
            >
              <q-spinner color="primary" size="3em" :thickness="10" />
            </div>
          </span>
        </div>
      </q-card-section>
      <q-page-sticky position="bottom-right" :offset="[20, 20]">
        <q-btn
          fab
          size="xl"
          icon="mdi-download"
          color="primary"
          @click="onDownloadFile"
          :loading="!isLoadPDF"
        >
          <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
        </q-btn>
      </q-page-sticky>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.pagination-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.nav-button {
  color: #424242;
  background-color: #f5f5f5;
}

.nav-button:hover {
  background-color: #eeeeee;
}

.page-info {
  font-size: 14px;
  color: #424242;
  font-weight: 500;
}

.pdf-container {
  width: 100%;
  margin: 16px 0;
}

.loading-container {
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #9e9e9e;
}

.loading-text {
  color: #757575;
  font-size: 16px;
  margin: 0;
}
</style>
