let isWhatsAppWidgetOpen = false;

document.addEventListener("DOMContentLoaded", function () {
  updateCurrentTime();
  setInterval(updateCurrentTime, 60000);
});

function toggleWhatsAppWidget() {
  const popup = document.getElementById("whatsappPopup");
  const button = document.querySelector(".whatsapp-button");

  if (!isWhatsAppWidgetOpen) {
    popup.classList.add("show");
    button.style.transform = "rotate(360deg)";
    isWhatsAppWidgetOpen = true;

    setTimeout(() => {
      const message = document.querySelector(".chat-message");
      if (message) {
        message.style.animation = "slideInUp 0.5s ease-out";
      }
    }, 200);
  } else {
    popup.classList.remove("show");
    button.style.transform = "rotate(0deg)";
    isWhatsAppWidgetOpen = false;
  }
}

function sendWhatsAppMessage(prefilledMessage, helpdesk = "sistem") {
  const helpdeskNumbers = {
    sistem: "6285212436339",
    blud: "6282211001180",
  };

  const phoneNumber = helpdeskNumbers[helpdesk];
  const message =
    prefilledMessage ||
    `Halo, saya membutuhkan bantuan mengenai ${
      helpdesk === "sistem" ? "Sistem Pesapakawan" : "BLUD UPST"
    }.`;
  const encodedMessage = encodeURIComponent(message);
  const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodedMessage}`;

  const button = document.querySelector(".whatsapp-chat-btn");
  if (button) {
    button.style.transform = "scale(0.95)";
    setTimeout(() => {
      button.style.transform = "scale(1)";
    }, 150);
  }

  window.open(whatsappUrl, "_blank");

  setTimeout(() => {
    toggleWhatsAppWidget();
  }, 300);
}

function showHelpdeskSelection(prefilledMessage) {
  const modal = document.createElement("div");
  modal.className = "helpdesk-modal";
  modal.innerHTML = `
    <div class="helpdesk-modal-content">
      <h3>Pilih Helpdesk</h3>
      <p>Silakan pilih helpdesk yang sesuai dengan kebutuhan Anda:</p>
      <div class="helpdesk-options">
        <button class="helpdesk-option" onclick="selectHelpdesk('sistem', '${prefilledMessage}')">
          <div class="option-icon">💻</div>
          <div class="option-details">
            <h4>Help Desk Sistem Pesapakawan</h4>
            <p>0852-1243-6339</p>
            <small>Bantuan teknis aplikasi dan sistem</small>
          </div>
        </button>
        <button class="helpdesk-option" onclick="selectHelpdesk('blud', '${prefilledMessage}')">
          <div class="option-icon">❔</div>
          <div class="option-details">
            <h4>Helpdesk BLUD UPST</h4>
            <p>0822-1100-1180</p>
            <small>Bantuan layanan BLUD UPST</small>
          </div>
        </button>
      </div>
      <button class="close-modal" onclick="closeHelpdeskModal()">Tutup</button>
    </div>
  `;

  document.body.appendChild(modal);

  setTimeout(() => {
    modal.classList.add("show");
  }, 10);
}

function selectHelpdesk(helpdesk, message) {
  closeHelpdeskModal();
  sendWhatsAppMessage(message, helpdesk);
}

function closeHelpdeskModal() {
  const modal = document.querySelector(".helpdesk-modal");
  if (modal) {
    modal.classList.remove("show");
    setTimeout(() => {
      modal.remove();
    }, 300);
  }
}

function updateCurrentTime() {
  const timeElement = document.getElementById("currentTime");
  if (timeElement) {
    const now = new Date();
    const timeString = now.toLocaleTimeString("id-ID", {
      hour: "2-digit",
      minute: "2-digit",
    });
    timeElement.textContent = timeString;
  }
}

document.addEventListener("click", function (event) {
  const widget = document.querySelector(".whatsapp-widget");
  const popup = document.getElementById("whatsappPopup");

  if (widget && !widget.contains(event.target) && isWhatsAppWidgetOpen) {
    popup.classList.remove("show");
    document.querySelector(".whatsapp-button").style.transform = "rotate(0deg)";
    isWhatsAppWidgetOpen = false;
  }
});

document.addEventListener("click", function (event) {
  if (event.target.closest(".whatsapp-popup")) {
    event.stopPropagation();
  }
});

document.addEventListener("DOMContentLoaded", function () {
  const optionButtons = document.querySelectorAll(".option-btn");

  optionButtons.forEach((button, index) => {
    button.style.animationDelay = `${index * 0.1}s`;
    button.classList.add("fade-in-up");
  });
});

const style = document.createElement("style");
style.textContent = `
    .fade-in-up {
        animation: fadeInUp 0.6s ease-out forwards;
        opacity: 0;
        transform: translateY(20px);
    }
    
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
`;
document.head.appendChild(style);

function showTypingIndicator() {
  const messageContainer = document.querySelector(".chat-message");
  const typingIndicator = document.createElement("div");
  typingIndicator.className = "typing-indicator";
  typingIndicator.innerHTML = `
        <div class="typing-dots">
            <span></span>
            <span></span>
            <span></span>
        </div>
    `;

  messageContainer.appendChild(typingIndicator);

  setTimeout(() => {
    typingIndicator.remove();
  }, 2000);
}

document.addEventListener("DOMContentLoaded", function () {
  const whatsappButton = document.querySelector(".whatsapp-button");

  whatsappButton.addEventListener("mouseenter", function () {
    this.style.animationPlayState = "paused";
  });

  whatsappButton.addEventListener("mouseleave", function () {
    this.style.animationPlayState = "running";
  });
});

function createRipple(event) {
  const button = event.currentTarget;
  const circle = document.createElement("span");
  const diameter = Math.max(button.clientWidth, button.clientHeight);
  const radius = diameter / 2;

  circle.style.width = circle.style.height = `${diameter}px`;
  circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
  circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
  circle.classList.add("ripple");

  const ripple = button.getElementsByClassName("ripple")[0];
  if (ripple) {
    ripple.remove();
  }

  button.appendChild(circle);
}

document.addEventListener("DOMContentLoaded", function () {
  const buttons = document.querySelectorAll(".option-btn, .whatsapp-chat-btn");
  buttons.forEach((button) => {
    button.addEventListener("click", createRipple);
  });
});

const rippleStyle = document.createElement("style");
rippleStyle.textContent = `
    .ripple {
        position: absolute;
        border-radius: 50%;
        transform: scale(0);
        animation: ripple 600ms linear;
        background-color: rgba(255, 255, 255, 0.6);
        pointer-events: none;
    }
    
    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
    
    .option-btn, .whatsapp-chat-btn {
        position: relative;
        overflow: hidden;
    }

    /* Helpdesk Modal Styles */
    .helpdesk-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .helpdesk-modal.show {
        opacity: 1;
    }

    .helpdesk-modal-content {
        background: white;
        border-radius: 15px;
        padding: 25px;
        max-width: 450px;
        width: 90%;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        transform: translateY(20px);
        transition: transform 0.3s ease;
    }

    .helpdesk-modal.show .helpdesk-modal-content {
        transform: translateY(0);
    }

    .helpdesk-modal h3 {
        margin: 0 0 10px 0;
        color: #333;
        font-size: 20px;
        font-weight: 600;
    }

    .helpdesk-modal p {
        margin: 0 0 20px 0;
        color: #666;
        font-size: 14px;
    }

    .helpdesk-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }

    .helpdesk-option {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px;
        border: 2px solid #e9ecef;
        border-radius: 10px;
        background: #f8f9fa;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: left;
    }

    .helpdesk-option:hover {
        border-color: #25D366;
        background: #f0fff4;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2);
    }

    .option-icon {
        font-size: 24px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #25D366;
        border-radius: 8px;
        color: white;
    }

    .option-details h4 {
        margin: 0 0 5px 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .option-details p {
        margin: 0 0 5px 0;
        font-size: 14px;
        color: #25D366;
        font-weight: 600;
    }

    .option-details small {
        font-size: 12px;
        color: #666;
    }

    .close-modal {
        width: 100%;
        padding: 12px;
        background: #6c757d;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: background 0.3s ease;
    }

    .close-modal:hover {
        background: #5a6268;
    }

    @media (max-width: 480px) {
        .helpdesk-modal-content {
            margin: 20px;
            width: calc(100% - 40px);
        }
        
        .helpdesk-option {
            flex-direction: column;
            text-align: center;
            gap: 10px;
        }
    }
`;
document.head.appendChild(rippleStyle);