<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>View home with Sweet Home 3D HTML5 Viewer</title>

<!-- Include required scripts -->
<script type="text/javascript" src="lib/big.min.js"></script>
<script type="text/javascript" src="lib/gl-matrix-min.js"></script>
<script type="text/javascript" src="lib/jszip.min.js"></script>
<script type="text/javascript" src="lib/core.min.js"></script>
<script type="text/javascript" src="lib/geom.min.js"></script>
<script type="text/javascript" src="lib/stroke.min.js"></script>
<script type="text/javascript" src="lib/batik-svgpathparser.min.js"></script>
<script type="text/javascript" src="lib/jsXmlSaxParser.min.js"></script>
<script type="text/javascript" src="lib/triangulator.min.js"></script>
<script type="text/javascript" src="lib/viewmodel.min.js"></script>
<script type="text/javascript" src="lib/viewhome.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"></script>

<style type="text/css">
#tooltipContainer {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping if tooltips exceed the container width */
    justify-content: flex-start; /* Align tooltips to the left */
    gap: 15px; /* Add space between tooltips */
    padding: 10px;
  }

  /* Tooltip styles */
  .tooltip {
    background-color: red;
    color: white;
    padding: 1px;
    border-radius: 10px;
    font-size: 15px;
    pointer-events: auto;
    text-align: center;
    width: 100px;
    word-wrap: break-word;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 3;
  }

  .tooltip a {
    color: lightblue;
    text-decoration: none;
    cursor: pointer;
  }

  #statusOK {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 150px;
    font-weight: bold;
    color: green;
    text-align: center;
    display: none;
    z-index: 3;
  }

  /* Alarm count styles */
  #alarmCount {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 50px;
    font-weight: bold;
    color: red;
    z-index: 3;
    display: none;
  }

  /* Viewer Component Styles */
  .viewerComponent {
  }

  /* Lightbox styles */
  #lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 4;
  }

  #lightboxContent {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%;
    max-height: 80%;
    overflow: auto;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }

  #lightboxClose {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: white;
    cursor: pointer;
  }

  /* Viewer canvas styles */
  #viewerCanvas {
    width: 100%;
    height: 100%;
  }

  #viewerNavigationDiv {
    position: absolute; 
    bottom: 1px;
    left: 1px;
  }
</style>

</head>

<body>

  <!-- Tooltip container -->
  <div id="tooltipContainer"></div>

  <!-- Status OK message -->
  <div id="statusOK" style="display: none;">STATUSOK</div>

  <!-- Alarm count message -->
  <div id="alarmCount">AlarmCount: 0</div>

<div>
  <!-- Canvas for 3D view -->
  <canvas id="viewerCanvas" class="viewerComponent" width="1000" height="900" style="background-color: #FFFFFF ; border: 0px solid gray; outline:none" tabIndex="1"></canvas>
  
  <!-- Progress bar and label -->
  <div id="viewerProgressDiv" style="width: 400px; position: relative; top: -350px; left: 200px; background-color: #FFFFFF ; padding: 10px; border-radius: 15px">
    <progress id="viewerProgress"  class="viewerComponent" value="0" max="200" style="width: 400px"></progress>
    <label id="viewerProgressLabel" class="viewerComponent" style="margin-top: 2px; display: block; margin-left: 10px"></label>
  </div>


  <!-- Lightbox for popups -->
  <div id="lightbox">
    <div id="lightboxClose">&times;</div>
    <div id="lightboxContent"></div>
  </div>

<script type="text/javascript">
  const csvFilePath = "data.csv";
  const tooltipContainer = document.getElementById("tooltipContainer");
  const statusOKMessage = document.getElementById("statusOK");
  const lightbox = document.getElementById("lightbox");
  const lightboxContent = document.getElementById("lightboxContent");
  const lightboxClose = document.getElementById("lightboxClose");
  const alarmCount = document.getElementById("alarmCount");

  // Placeholder for viewer setup
  const setupViewer = () => {
    const canvas = document.getElementById("viewerCanvas");
    viewHome(
      "viewerCanvas",
      "CORERoom.sh3d",
      (err) => console.error("Error loading 3D Viewer:", err),
      (part, info, percentage) => console.log("Progress:", part, info, percentage),
    );
  };

  // Load tooltips from CSV
  const loadTooltips = () => {
    Papa.parse(csvFilePath, {
      download: true,
      header: true,
      skipEmptyLines: true,
      complete: (results) => {
        const tooltipData = results.data;

        // Debugging: Log parsed CSV data
        console.log("Loaded CSV data:", tooltipData);

        // Clear tooltip container before re-adding
        tooltipContainer.innerHTML = "";

        // Filter rows with "alarm" status
        const alarmRows = tooltipData.filter(row => row.Status === "alarm");

        // Update alarm count
        alarmCount.innerText = `Alarm Count = ${alarmRows.length}`;
        alarmCount.style.display = alarmRows.length > 0 ? "block" : "none";

        if (alarmRows.length === 0) {
          // Show STATUSOK if no alarms
          statusOKMessage.style.display = "block";
        } else {
          // Hide STATUSOK and display tooltips
          statusOKMessage.style.display = "none";

          alarmRows.forEach((row) => {
            if (row.Name && row.TotalRack) {
              const tooltip = document.createElement("div");
              tooltip.className = "tooltip";
              tooltip.innerHTML = `
                <strong>${row.Name}</strong><br>
                <a class="infoLink" data-url="${row.URL}">More Info</a>
              `;

              // Attach click event for lightbox
              tooltip.querySelector(".infoLink").addEventListener("click", (event) => {
                event.preventDefault();
                const url = event.target.dataset.url;
                lightboxContent.innerHTML = `
                  <h2>${row.Name}</h2>
                  <p>Status: ${row.Status}</p>
                  <p>TotalRack: ${row.TotalRack} kw</p>
                  <p>RPDU1Value: ${row.RPDU1Value} kw</p>
                  <p>RPDU2Value: ${row.RPDU2Value} kw</p>		  
                  <p><a href="${url}" target="_blank">Open in New Tab</a></p>
                `;
                lightbox.style.display = "flex";
              });

              tooltipContainer.appendChild(tooltip);
            }
          });
        }
      },
      error: (err) => console.error("Error loading CSV:", err),
    });
  };

  // Lightbox close event
  lightboxClose.addEventListener("click", () => {
    lightbox.style.display = "none";
  });

  // Periodic update for tooltips
  const updateInterval = 5000; // Update every 10 seconds
  setInterval(loadTooltips, updateInterval);

  // Load the 3D home viewer
  var homeUrl = "CORERoom.sh3d";
  var onerror = function(err) {
    if (err == "No WebGL") {
      alert("Sorry, your browser doesn't support WebGL.");
    } else {
      console.log(err.stack);
      alert("Error: " + (err.message  ? err.constructor.name + " " +  err.message  : err)
            + (window.location.href.indexOf("file://") === 0 ? "\nCheck your browser is allowed to access local files." : ""));
    }
  };

  var onprogression = function(part, info, percentage) {
    var progress = document.getElementById("viewerProgress"); 
    if (part === HomeRecorder.READING_HOME) {
      progress.value = percentage * 100;
      info = info.substring(info.lastIndexOf('/') + 1);
    } else if (part === Node3D.READING_MODEL) {
      progress.value = 100 + percentage * 100;
      if (percentage === 1) {
        document.getElementById("viewerProgressDiv").style.visibility = "hidden";
      }
    }

    document.getElementById("viewerProgressLabel").innerHTML = 
      (percentage ? Math.floor(percentage * 100) + "% " : "") + part + " " + info;
  };

  // Display home in canvas 3D
  viewHome("viewerCanvas", homeUrl, onerror, onprogression, {roundsPerMinute: 1, activateCameraSwitchKey: true});
</script>

</body>
</html>
