<script setup lang="ts">
import { computed, reactive, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { storeToRefs } from "pinia";

import { useCounterMixin } from "@/stores/mixin";
import { useIssueStore } from "@/modules/07_issues/store";

import http from "@/plugins/http";
import config from "@/app.config";

import type {
  IssueData,
  IssueAttachment,
  IssueAttachmentWithDownloadUrl,
} from "@/modules/07_issues/interface/Main";

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

const $q = useQuasar();
const store = useIssueStore();
const { statusOptions } = storeToRefs(store);
const { convertStatus, convertSystem } = store;

const {
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  date2Thai,
} = useCounterMixin();

const modal = defineModel<boolean>("modal", {
  default: false,
});
const type = defineModel<string>("type", {
  default: "edit",
});
const data = defineModel<IssueData | null>("data", {
  default: null,
});

const props = defineProps<{
  fetchData: () => Promise<void>;
}>();

const isEdit = computed(() => type.value === "edit");
const title = computed(() => (isEdit.value ? "แก้ไขสถานะ" : "รายละเอียดปัญหา"));
const optionsStatus = computed(() =>
  statusOptions.value.filter((item) => item.value !== ""),
);
const splitterModel = computed({
  get: () => {
    if (!isEdit.value) return 100;
    // สำหรับหน้าจอเล็ก ใช้ horizontal splitter และแบ่งเป็น 60:40
    if ($q.screen.lt.md) return 60;
    return 70;
  },
  set: (val: number) => {},
});

const form = reactive({
  status: "",
  remark: "",
});
const fileList = ref<IssueAttachment[]>([]);
const images = ref<IssueAttachmentWithDownloadUrl[]>([]);

const imageModal = ref(false);
const selectedImg = ref("");

// ฟังก์ชันสำหรับเปิดดูรูป
const openPreview = (url: string) => {
  selectedImg.value = url;
  imageModal.value = true;
};

/** ฟังก์ชันบันทึกข้อมูล */
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    try {
      await http.put(config.API.orgIssues + "/" + data?.value?.id, {
        status: form.status,
        remark: form.remark,
      });
      await props.fetchData();
      success($q, "บันทึกข้อมูลเรียบร้อย");
      onClose();
    } catch (error) {
      messageError($q, error);
    } finally {
      hideLoader();
    }
  });
}

/** ฟังก์ชันปิด dialog และรีเซ็ตข้อมูล */
function onClose() {
  modal.value = false;
  form.status = "";
  form.remark = "";
  fileList.value = [];
  images.value = [];
}

async function fetchDocument(codeIssue: string, system: string) {
  try {
    const res = await http.get(
      config.API.file("issueAttachments", system, codeIssue),
    );
    const allFiles = res.data;

    // 1. แยกไฟล์ที่ไม่ใช่รูปเก็บเข้า list
    fileList.value = allFiles.filter(
      (f: IssueAttachment) => !/\.(jpg|jpeg|png|gif|webp)$/i.test(f.fileName),
    );

    // 2. แยกเฉพาะรูปภาพแล้วโหลดข้อมูล
    const images = allFiles.filter((f: IssueAttachment) =>
      /\.(jpg|jpeg|png|gif|webp)$/i.test(f.fileName),
    );
    for (const img of images) {
      await getImg(img.path, img.fileName);
    }
  } catch (error) {
    messageError($q, error);
  }
}

/**
 * ฟังก์ชันเรียกข้อมูลรายการรูป
 * @param dataList ข้อมูล
 */
async function getImg(path: string, fileName: string) {
  await http
    .get(config.API.fileByPath(`${path}/${fileName}`))
    .then((res) => {
      const data = res.data;
      const newData: IssueAttachmentWithDownloadUrl = {
        ...data,
      };

      images.value.push(newData);
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/**
 * ดาวน์โหลดลิงก์ไฟล์
 * @param fileName file name
 */
function downloadFile(fileName: string) {
  showLoader();
  http
    .get(
      config.API.fileByFile(
        "issueAttachments",
        data?.value?.system || "",
        data?.value?.codeIssue || "",
        fileName,
      ),
    )
    .then((res) => {
      const data = res.data.downloadUrl;
      window.open(data, "_blank");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

const downloadImage = async (url: string, fileName: string = "image.png") => {
  try {
    const response = await fetch(url);
    const blob = await response.blob(); // แปลงข้อมูลเป็น Blob
    const blobUrl = window.URL.createObjectURL(blob);

    const link = document.createElement("a");
    link.href = blobUrl;
    link.download = fileName; // กำหนดชื่อไฟล์ที่ต้องการให้บันทึก
    document.body.appendChild(link);
    link.click();

    // ล้างหน่วยความจำ
    document.body.removeChild(link);
    window.URL.revokeObjectURL(blobUrl);
  } catch (error) {
    messageError($q, error);
  }
};

watch(
  () => modal.value,
  (val: boolean) => {
    if (val && data.value) {
      form.status = data.value.status || "";
      form.remark = data.value.remark || "";
      fetchDocument(data.value.codeIssue, data.value.system);
    }
  },
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card
      class="overflow-hidden"
      style="width: 100%; max-width: min(900px, 95vw); min-width: 320px"
    >
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader :tittle="title" :close="onClose" />
        <q-separator />

        <q-card-section style="max-height: 70vh; padding: 0">
          <q-splitter
            v-model="splitterModel"
            :limits="
              isEdit && !$q.screen.lt.md
                ? [70, 70]
                : isEdit && $q.screen.lt.md
                ? [50, 80]
                : [100, 100]
            "
            :style="`height: ${
              $q.screen.height > 700 ? '500px' : 'calc(60vh - 100px)'
            }`"
            :separator-class="!isEdit ? 'hidden' : ''"
            :horizontal="$q.screen.lt.md && isEdit"
          >
            <template v-slot:before>
              <div :class="$q.screen.xs ? 'q-pa-md' : 'q-pa-lg'">
                <div class="q-gutter-y-md text-body2">
                  <div class="row">
                    <div
                      class="col-xs-12 col-sm-3 text-grey-7"
                      :class="{ 'q-mb-xs': $q.screen.xs }"
                    >
                      รหัส:
                    </div>
                    <div class="col-xs-12 col-sm-9 text-weight-bold">
                      {{ data?.codeIssue || "-" }}
                    </div>
                  </div>
                  <div class="row q-col-gutter-sm">
                    <div
                      class="col-xs-12 col-sm-3 text-grey-7"
                      :class="{ 'q-mb-xs': $q.screen.xs }"
                    >
                      หัวข้อ:
                    </div>
                    <div class="col-xs-12 col-sm-9">
                      {{ data?.title || "-" }}
                    </div>
                  </div>
                  <div class="row q-col-gutter-sm">
                    <div
                      class="col-xs-12 col-sm-3 text-grey-7"
                      :class="{ 'q-mb-xs': $q.screen.xs }"
                    >
                      รายละเอียด:
                    </div>
                    <div class="col-xs-12 col-sm-9">
                      {{ data?.description || "-" }}
                    </div>
                  </div>
                  <div class="row q-col-gutter-sm">
                    <div
                      class="col-xs-12 col-sm-3 text-grey-7"
                      :class="{ 'q-mb-xs': $q.screen.xs }"
                    >
                      ระบบ/เมนู:
                    </div>
                    <div class="col-xs-12 col-sm-9">
                      {{ convertSystem(data?.system || "") }} / {{ data?.menu }}
                    </div>
                  </div>

                  <div class="row q-col-gutter-sm">
                    <div
                      class="col-xs-12 col-sm-3 text-grey-7"
                      :class="{ 'q-mb-xs': $q.screen.xs }"
                    >
                      สังกัด:
                    </div>
                    <div class="col-xs-12 col-sm-9">
                      {{ data?.org || "-" }}
                    </div>
                  </div>

                  <div class="row q-col-gutter-sm">
                    <div
                      class="col-xs-12 col-sm-3 text-grey-7"
                      :class="{ 'q-mb-xs': $q.screen.xs }"
                    >
                      อีเมลติดต่อกลับ:
                    </div>
                    <div class="col-xs-12 col-sm-9">
                      {{ data?.email || "-" }}
                    </div>
                  </div>

                  <div class="row q-col-gutter-sm">
                    <div
                      class="col-xs-12 col-sm-3 text-grey-7"
                      :class="{ 'q-mb-xs': $q.screen.xs }"
                    >
                      เบอร์ติดต่อกลับ:
                    </div>
                    <div class="col-xs-12 col-sm-9">
                      {{ data?.phone || "-" }}
                    </div>
                  </div>
                  <div class="row q-col-gutter-sm">
                    <div
                      class="col-xs-12 col-sm-3 text-grey-7"
                      :class="{ 'q-mb-xs': $q.screen.xs }"
                    >
                      ผู้แจ้ง:
                    </div>
                    <div class="col-xs-12 col-sm-9">
                      {{ data?.createdFullName || "-" }}
                    </div>
                  </div>
                  <div class="row q-col-gutter-sm">
                    <div
                      class="col-xs-12 col-sm-3 text-grey-7"
                      :class="{ 'q-mb-xs': $q.screen.xs }"
                    >
                      วันที่แจ้ง:
                    </div>
                    <div class="col-xs-12 col-sm-9">
                      {{
                        data?.createdAt
                          ? date2Thai(data?.createdAt, false, true)
                          : ""
                      }}
                    </div>
                  </div>
                  <div class="row q-col-gutter-sm">
                    <div
                      class="col-xs-12 col-sm-3 text-grey-7"
                      :class="{ 'q-mb-xs': $q.screen.xs }"
                    >
                      สถานะ:
                    </div>
                    <div class="col-xs-12 col-sm-9">
                      {{ convertStatus(data?.status || "") }}
                    </div>
                  </div>
                  <div
                    v-if="data?.remark"
                    class="row q-mt-sm bg-grey-2 q-pa-sm rounded-borders"
                  >
                    <div class="col-12 text-grey-7 text-caption">หมายเหตุ:</div>
                    <div class="col-12">{{ data?.remark }}</div>
                  </div>
                </div>

                <div v-if="images.length > 0" class="q-mt-xl">
                  <div class="text-subtitle2 q-mb-sm">
                    <q-icon name="image" /> รูปภาพประกอบ
                  </div>
                  <div class="row q-col-gutter-sm">
                    <div
                      v-for="(img, index) in images"
                      :key="index"
                      class="col-xs-6 col-sm-4 col-md-3"
                    >
                      <q-img
                        :src="img.downloadUrl"
                        :ratio="1"
                        fit="cover"
                        class="rounded-borders shadow-1 cursor-pointer image-hover"
                        @click="openPreview(img.downloadUrl)"
                      >
                        <div
                          class="absolute-full flex flex-center view-overlay"
                        >
                          <q-icon name="visibility" size="sm" />
                        </div>
                        <div class="absolute-top-right btn-overlay q-pa-xs">
                          <q-btn
                            flat
                            round
                            dense
                            icon="download"
                            color="white"
                            size="sm"
                            class="bg-black-op"
                            @click.stop="
                              downloadImage(img.downloadUrl, img.fileName)
                            "
                          />
                        </div>
                      </q-img>
                    </div>
                  </div>
                </div>

                <div v-if="fileList.length > 0" class="q-mt-lg">
                  <div class="text-subtitle2 q-mb-sm">
                    <q-icon name="attachment" /> ไฟล์เอกสารแนบ
                  </div>
                  <q-list bordered separator class="rounded-borders">
                    <q-item v-for="file in fileList" :key="file.fileName" dense>
                      <q-item-section avatar
                        ><q-icon name="description" color="blue"
                      /></q-item-section>
                      <q-item-section class="text-caption ellipsis">{{
                        file.fileName
                      }}</q-item-section>
                      <q-item-section side>
                        <q-btn
                          flat
                          round
                          dense
                          icon="download"
                          color="blue"
                          size="sm"
                          @click="downloadFile(file.fileName)"
                        />
                      </q-item-section>
                    </q-item>
                  </q-list>
                </div>
              </div>
            </template>

            <template v-slot:after v-if="isEdit">
              <div
                :class="[
                  $q.screen.xs ? 'q-pa-md' : 'q-pa-lg',
                  'full-height bg-grey-1',
                ]"
              >
                <div class="col-12 q-pa-none q-col-gutter-sm">
                  <div class="col-12">
                    <q-select
                      dense
                      outlined
                      v-model="form.status"
                      :options="optionsStatus"
                      option-value="value"
                      option-label="label"
                      map-options
                      label="สถานะ"
                      emit-value
                      :rules="[ (val: string) => !!val || 'กรุณาเลือกสถานะ' ]"
                      hide-bottom-space
                      class="inputgreen bg-white"
                      :readonly="isEdit ? false : true"
                    >
                      <template v-slot:no-option>
                        <q-item>
                          <q-item-section class="text-grey">
                            ไม่มีข้อมูล
                          </q-item-section>
                        </q-item>
                      </template>
                    </q-select>
                  </div>
                  <div class="col-12">
                    <q-input
                      :readonly="isEdit ? false : true"
                      dense
                      outlined
                      label="หมายเหตุ"
                      v-model="form.remark"
                      class="inputgreen bg-white"
                      hide-bottom-space
                      type="textarea"
                    />
                  </div>
                </div>
              </div>
            </template>
          </q-splitter>
        </q-card-section>

        <q-separator v-if="isEdit" />
        <q-card-actions
          :align="$q.screen.xs ? 'center' : 'right'"
          :class="$q.screen.xs ? 'q-pa-md' : 'q-pa-md'"
          v-if="isEdit"
        >
          <q-btn
            type="submit"
            :class="$q.screen.xs ? 'full-width q-px-md' : 'q-px-md'"
            class="items-center"
            color="public"
            label="บันทึก"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="imageModal">
    <q-btn
      icon="close"
      flat
      round
      dense
      v-close-popup
      class="absolute-top-right z-top text-white"
      style="margin: 16px"
    />
    <q-card
      style="
        width: auto;
        max-width: none;
        background: transparent;
        box-shadow: none;
      "
    >
      <img
        :src="selectedImg"
        style="
          display: block;
          max-width: 90vw;
          max-height: 90vh;
          object-fit: contain;
        "
      />
    </q-card>
  </q-dialog>
</template>

<style scoped>
.bg-black-op {
  background: rgba(0, 0, 0, 0.4);
}
.view-overlay {
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.btn-overlay {
  opacity: 0;
  transition: opacity 0.3s;
}
.image-hover:hover .view-overlay,
.image-hover:hover .btn-overlay {
  opacity: 1;
}
/* ซ่อน Splitter Line เมื่อไม่ได้แก้ไข */
.hidden {
  display: none !important;
}

/* Responsive styles */
@media (max-width: 599px) {
  .q-card {
    margin: 8px !important;
  }

  .q-splitter--horizontal .q-splitter__panel:first-child {
    max-height: calc(50vh - 50px) !important;
    overflow-y: auto;
  }

  .text-body2 {
    font-size: 0.875rem;
  }

  .q-img {
    min-height: 120px;
  }
}

@media (max-width: 1023px) and (min-width: 600px) {
  .q-splitter--horizontal .q-splitter__panel:first-child {
    max-height: calc(55vh - 50px) !important;
    overflow-y: auto;
  }
}
</style>
