<script setup>
import background from "@/assets/bg_tech.jpg";
import titleLogo from "@/assets/title.png";
import ForgeViewer from "@/components/ForgeViewer.vue";
import Info from "@/components/Info.vue";
import { ref, useTemplateRef, watch, toRaw } from "vue";
import btn01B from "@/assets/btn_01_b.png";
import btn01R from "@/assets/btn_01_r.png";
import btn02B from "@/assets/btn_02_b.png";
import btn02R from "@/assets/btn_02_r.png";
import btn03B from "@/assets/btn_03_b.png";
import btn03R from "@/assets/btn_03_r.png";
import btn04B from "@/assets/btn_04_b.png";
import btn04R from "@/assets/btn_04_r.png";
import btn05B from "@/assets/btn_05_b.png";
import btn05R from "@/assets/btn_05_r.png";
import btn06B from "@/assets/btn_06_b.png";
import btn06R from "@/assets/btn_06_r.png";
import btn07B from "@/assets/btn_07_b.png";
import btn07R from "@/assets/btn_07_r.png";
import btn08B from "@/assets/btn_08_b.png";
import btn08R from "@/assets/btn_08_r.png";
import line01 from "@/assets/line_01.png";
import line02 from "@/assets/line_02.png";
import line03 from "@/assets/line_03.png";
import line04 from "@/assets/line_04.png";
import line05 from "@/assets/line_05.png";
import line06 from "@/assets/line_06.png";
import line07 from "@/assets/line_07.png";
import line08 from "@/assets/line_08.png";
import changeCameraPosition from "@/utils/changeCameraPosition.js";
import changeCameraView from "@/utils/changeCameraView.js";
import ForgeLabel from "@/components/ForgeLabel.vue";

const left_data = ref([
  {
    title: "POWER DEMAND",
    normalImg: btn01B,
    hoverImg: btn01R,
    forgeID: 72,
    line: line01,
    tag: "TAG_Electricity_meter",
    arcSide: -1,
    cameraDistance: 5,
    value: 13.25,
    content: [
      "Power Demand: 12.8 MW",
      "Capacity Usage: 56%",
      "Contract Capacity: 22.8 MW",
      "Energy Consumption Today: 86,500 kWh",
      "Monthly Peak Demand: 18.6 MW",
      "30-Min Demand Forecast: 16.2 MW"
    ]
  },
  {
    title: "CARBON REDUCTION",
    normalImg: btn02B,
    hoverImg: btn02R,
    forgeID: 181,
    line: line02,
    tag: "",
    arcSide: -1,
    cameraDistance: 5,
    value: 1280
  },
  {
    title: "ENVIRONMENT INDEX",
    normalImg: btn03B,
    hoverImg: btn03R,
    forgeID: 30,
    line: line02,
    tag: "",
    arcSide: -1,
    cameraDistance: 5,
    value: 856
  },
  {
    title: "PUE",
    normalImg: btn04B,
    hoverImg: btn04R,
    forgeID: 41,
    line: line04,
    tag: "ROOM_Information_Data_Center",
    arcSide: 1,
    cameraDistance: 5,
    value: 1.22,
    content: [
      "Total Facility Energy: 122,000 kWh",
      "IT Equipment Energy: 100,000 kWh",
      "Cooling Energy: 30,000 kWh",
      "Power System Loss: 6,500 kWh",
      "Lighting & Others: 3,500 kWh"
    ],
    spaceColor: new THREE.Vector4(1, 0, 0, 1)
  },
]);

const right_data = ref([
  {
    title: "AI PREDICTED YIELD",
    normalImg: btn05B,
    hoverImg: btn05R,
    forgeID: 51,
    line: line05,
    tag: "ROOM_OFFICE",
    arcSide: 1,
    cameraDistance: 2,
    value: 92,
    content: [
      "IAQ Score: 92 / 100",
      "CO₂ Level: 680 ppm",
      "PM2.5: 8 μg/m³",
      "Temperature: 24.5 °C",
      "Humidity: 52%",
      "TVOC: 0.28 mg/m³"
    ],
    spaceColor: new THREE.Vector4(1, 0, 0, 1)
  },
  {
    title: "REAL-TIME THROUGHPUT",
    normalImg: btn06B,
    hoverImg: btn06R,
    forgeID: 61,
    line: line06,
    tag: "TAG_Chiller-Water_Cooled",
    arcSide: -1,
    cameraDistance: 10,
    value: 96,
    content: [
      "Real-Time Throughput: 56%",
      "Operating Chillers: 4 / 8 units",
      "Active Cooling Capacity: 5,600 RT",
      "Available Cooling Capacity: 10,000 RT",
      "Standby Chillers: 3 units",
      "Maintenance Chillers: 1 unit"

    ]
  },
  {
    title: "REAL-TIME",
    normalImg: btn07B,
    hoverImg: btn07R,
    forgeID: 71,
    line: line06,
    tag: "TAG_solder_paste_screen_printer",
    arcSide: -1,
    cameraDistance: 5,
    value: 98,
    content: [
      "Predicted Yield (AI): 98.0%",
      "Target Yield: 98.5%",
      "Defect Risk: 1.2%",
      "Quality Deviation: 0.5%",
      "Key Impact Factor: Temperature Stability",
      "AI Confidence: 94%"
    ]
  },
  {
    title: "SAFETY & ALARMS",
    normalImg: btn08B,
    hoverImg: btn08R,
    forgeID: 81,
    line: line08,
    tag: "",
    arcSide: -1,
    cameraDistance: 5,
    value: 1.5
  },
]);

const forgeViewerRef = useTemplateRef("forgeViewerRef");

const forgeLabelRef = useTemplateRef("forgeLabelRef");

const imgSrcActive = ref(null);
const onClick = (item) => {
  const viewer = toRaw(forgeViewerRef.value.forgeViewer);

  if (item.tag === "") return
  imgSrcActive.value = item;

  //TODO: 切換視角
  console.log(forgeLabelRef.value);
  changeCameraPosition(
    viewer,
    forgeLabelRef.value.tagDom,
    item,
  );

  item.spaceColor &&
    viewer.model.getInstanceTree().enumNodeChildren(
      item.forgeID,
      (dbId) => {
        console.log("Found dbId:", dbId);
        viewer.setThemingColor(dbId, new THREE.Vector4(1, 0, 0, 1)) // RGBA (紅色));
        viewer.impl.invalidate(true);
      },
      true,
    );


  // console.log(forgeViewerRef.value.Viewpoints[7]);
  // changeCameraView(forgeViewerRef.value.forgeViewer, forgeViewerRef.value.Viewpoints[7].data);
};

watch(
  () => forgeViewerRef.value?.tagData,
  (tagList) => {
    if (!tagList || tagList.length === 0) return;

    left_data.value = left_data.value.map((item) => {
      const tagInfo = tagList.find((d) => d.tag === item.tag);
      return tagInfo ? { ...item, ...tagInfo } : item;
    });

    right_data.value = right_data.value.map((item) => {
      const tagInfo = tagList.find((d) => d.tag === item.tag);
      return tagInfo ? { ...item, ...tagInfo } : item;
    });
  },
  { immediate: true, deep: true },
);
</script>

<template>
  <div class="w-screen h-screen overflow-hidden relative flex items-center justify-center bg-cover"
    :style="{ backgroundImage: `url('${background}')` }">
    <img :src="titleLogo" alt="Title Logo" class="absolute top-0 left-0 m-4 w-full h-[114px]" />

    <Info position="left" :data="left_data" :imgSrcActive="imgSrcActive?.forgeID" :onClick="onClick" />
    <ForgeViewer ref="forgeViewerRef" :forge-ids="forgeIDs" />
    <Info position="right" :data="right_data" :imgSrcActive="imgSrcActive?.forgeID" :onClick="onClick" />

    <ForgeLabel ref="forgeLabelRef" v-show="imgSrcActive" :data="imgSrcActive" />
  </div>
</template>
