<script setup>
import Modal from "@/components/customUI/Modal.vue";
import DashboardEffectScatterModalChart from "./DashboardEffectScatterModalChart.vue";
import { ref, watch, computed } from "vue";
import { useI18n } from "vue-i18n";
import { twMerge } from "tailwind-merge";

const { t } = useI18n();

const props = defineProps({
  data: {
    type: Object,
    default: null,
  },
});

const isRtsp = computed(() => props.data?.is_rtsp === true);

const monitorUrl = computed(() => props.data?.rtsp_url || "");

// ------ tab 狀態 / 控制（非 RTSP 時使用）------
const currentTab = ref("desktop");
const changeOpenKey = (key) => {
  currentTab.value = key;
};

const modal = ref(null);

// 當 data 有值時自動開啟 modal
watch(
  () => props.data,
  (newData) => {
    if (newData) {
      console.log("[props.data] =\n", JSON.stringify(props.data, null, 2));
      dashboard_effectScatter_modal.showModal();
      if (!isRtsp.value) currentTab.value = "desktop";
      console.debug(
        "[Modal Debug] is_rtsp:",
        newData.is_rtsp,
        "monitorUrl:",
        monitorUrl.value
      );
    }
  },
  { immediate: true }
);

// 關閉 modal
const handleCancel = () => {
  currentTab.value = "desktop";
  dashboard_effectScatter_modal.close();
};
</script>

<template>
  <Modal
    id="dashboard_effectScatter_modal"
    ref="modal"
    :title="props.data?.full_name"
    :onCancel="handleCancel"
    :width="600"
    :draggable="true"
    modalClass="max-h-[80vh]"
  >
    <!-- 標題列：RTSP 不顯示分頁鈕；非 RTSP 顯示分頁鈕 -->
    <template #modalTitle>
      <div class="flex items-center justify-between">
        <span>{{ props.data?.full_name }}</span>

        <div class="flex items-center space-x-2">
          <template v-if="!isRtsp">
            <button
              type="button"
              class="text-base btn-link btn-text-without-border px-2"
              @click="() => changeOpenKey('desktop')"
            >
              <font-awesome-icon
                :icon="['fas', 'desktop']"
                size="lg"
                :class="
                  twMerge(
                    currentTab === 'desktop' ? 'text-success' : 'text-[#a5abb1]'
                  )
                "
              />
            </button>
            <button
              type="button"
              class="text-base btn-link btn-text-without-border px-2"
              @click="() => changeOpenKey('image')"
            >
              <font-awesome-icon
                :icon="['fas', 'image']"
                size="lg"
                :class="
                  twMerge(
                    currentTab === 'image' ? 'text-success' : 'text-[#a5abb1]'
                  )
                "
              />
            </button>
            <button
              type="button"
              class="text-base btn-link btn-text-without-border px-2"
              @click="() => changeOpenKey('cog')"
            >
              <font-awesome-icon
                :icon="['fas', 'cog']"
                size="lg"
                :class="
                  twMerge(
                    currentTab === 'cog' ? 'text-success' : 'text-[#a5abb1]'
                  )
                "
              />
            </button>
            <button
              type="button"
              class="text-base btn-link btn-text-without-border px-2"
              @click="() => changeOpenKey('chart')"
            >
              <font-awesome-icon
                :icon="['fas', 'chart-line']"
                size="lg"
                :class="
                  twMerge(
                    currentTab === 'chart' ? 'text-success' : 'text-[#a5abb1]'
                  )
                "
              />
            </button>
          </template>

          <button
            type="button"
            class="btn-link btn-text-without-border px-2"
            @click="handleCancel"
          >
            <font-awesome-icon
              :icon="['fas', 'times']"
              class="text-[#a5abb1]"
            />
          </button>
        </div>
      </div>
    </template>

    <template #modalContent>
      <!-- RTSP，顯示 iframe -->
      <div v-if="isRtsp" class="h-[60vh] py-4">
        <div class="relative bg-black rounded h-full overflow-hidden">
          <iframe
            :src="monitorUrl"
            class="absolute inset-0 w-full h-full"
            allow="autoplay; fullscreen; picture-in-picture"
            referrerpolicy="no-referrer"
          ></iframe>
        </div>
      </div>

      <!-- 非 RTSP，顯示四分頁 -->
      <div v-else class="space-y-4 py-4">
        <!-- Desktop Tab - 基本資訊 -->
        <div v-if="currentTab === 'desktop'" class="grid grid-cols-1 gap-4">
          <table
            v-if="props.data?.points && props.data.points.length"
            class="min-w-full bg-gray-700 border text-gray-100"
          >
            <thead>
              <tr class="bg-gray-600">
                <th class="p-2 border text-left">名稱</th>
                <th class="p-2 border text-left">點位</th>
                <th class="p-2 border text-left">數值</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(point, idx) in props.data.points"
                :key="idx"
                class="hover:bg-gray-600"
              >
                <td class="p-2 border">{{ point.full_name }}</td>
                <td class="p-2 py-1 border">{{ point.points }}</td>
                <td class="p-2 py-1 border">{{ point.value }}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- Image Tab - 可視化資訊 -->
        <div v-if="currentTab === 'image'" class="grid grid-cols-1 gap-4">
          <table class="min-w-full bg-gray-700 border text-gray-100">
            <thead>
              <tr class="bg-gray-600">
                <th class="p-2 border text-left">項目</th>
                <th class="p-2 border text-left">內容</th>
              </tr>
            </thead>
            <tbody>
              <tr v-if="props.data?.icon" class="hover:bg-gray-600">
                <td class="p-2 border">設備圖示</td>
                <td class="p-2 border">
                  <img
                    :src="props.data.icon"
                    alt="設備圖示"
                    class="w-12 h-12"
                  />
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- chart Tab - 圖表資訊 -->
        <div v-if="currentTab === 'chart'" class="grid grid-cols-1 gap-4">
          <DashboardEffectScatterModalChart :data="props.data" />
        </div>

        <!-- Cog Tab - 完整資料 -->
        <div v-if="currentTab === 'cog'" class="grid grid-cols-1 gap-4">
          <table class="min-w-full bg-gray-700 border text-gray-100">
            <thead>
              <tr class="bg-gray-600">
                <th class="p-2 border text-left">項目</th>
                <th class="p-2 border text-left">內容</th>
              </tr>
            </thead>
            <tbody>
              <tr class="hover:bg-gray-600">
                <td class="p-2 border">
                  {{ $t("assetManagement.device_number") }}
                </td>
                <td class="p-2 border">{{ props.data.device_number }}</td>
              </tr>
              <tr class="hover:bg-gray-600">
                <td class="p-2 border">
                  {{ $t("assetManagement.device_name") }}
                </td>
                <td class="p-2 border">{{ props.data.full_name }}</td>
              </tr>
              <tr class="hover:bg-gray-600">
                <td class="p-2 border">{{ $t("assetManagement.floor") }}</td>
                <td class="p-2 border">{{ props.data.floor }}</td>
              </tr>
              <tr class="hover:bg-gray-600">
                <td class="p-2 border">
                  {{ $t("assetManagement.device_coordinate") }}
                </td>
                <td class="p-2 border">{{ props.data.device_coordinate }}</td>
              </tr>
              <tr>
                <td class="p-2 border">
                  {{ $t("assetManagement.brand_and_modal") }}
                </td>
                <td class="p-2 border">
                  {{ props.data.brand }} / {{ props.data.device_model }}
                </td>
              </tr>
              <tr>
                <td class="p-2 border">
                  {{ $t("assetManagement.company_and_contact") }}
                </td>
                <td class="p-2 border">
                  {{ props.data.operation_name }} /
                  {{ props.data.operation_contact_person }}
                </td>
              </tr>
              <tr>
                <td class="p-2 border">
                  {{ $t("assetManagement.buying_date") }}
                </td>
                <td class="p-2 border">{{ props.data.buying_date }}</td>
              </tr>
              <tr>
                <td class="p-2 border">
                  {{ $t("assetManagement.created_at") }}
                </td>
                <td class="p-2 border">{{ props.data.created_at }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </template>
  </Modal>
</template>

<style lang="scss" scoped>
/* 讓 Modal 內容能撐滿高度 */
:deep(.min-h-\[200px\]) {
  min-height: 0 !important;
  height: 100%;
}
</style>
