<template>
  <div class="direct-script-wrapper">
    <div class="direct-script-title">Direct Script Embed</div>
    <div class="direct-script-card">
      <div class="icon-circle">⚡</div>
      <h1>Widget Aktif</h1>
      <p>
        Script chatbot Bliv AI telah dimuat secara langsung pada halaman ini.
      </p>
      <small>Periksa sudut kanan bawah layar Anda untuk memulai chat.</small>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";

const baseUrl = "https://ai-studio.bliv.bangunindo.io";

onMounted(() => {
  const config = {
    token: "4eFb0BunqZYEZlg7",
    baseUrl: baseUrl,
    isDev: true,
    login: false,
    history: false,
    draggable: true,
    dragAxis: "both",
    dynamicScript: true,
    systemVariables: {},
    userVariables: {},
  };
  (window as any).blivChatbotConfig = config;

  const script = document.createElement("script");
  script.id = "bliv-embed-script";
  script.src = `${baseUrl}/embed.min.js`;
  script.async = true;
  document.body.appendChild(script);
});

onUnmounted(() => {
  const script = document.getElementById("bliv-embed-script");
  if (script) script.remove();

  const selectors = [
    "#bliv-chatbot-widget",
    "#bliv-chatbot-bubble",
    "#bliv-chatbot-container",
    "#bliv-chatbot-iframe",
    ".bliv-chatbot-widget",
    ".bliv-chatbot-bubble",
    ".bliv-chatbot-container",
    'iframe[src*="ai-studio.bliv.bangunindo.io"]',
  ];

  selectors.forEach((sel) => {
    document.querySelectorAll(sel).forEach((el) => el.remove());
  });

  delete (window as any).blivChatbotConfig;
});
</script>

<style scoped>
.direct-script-wrapper {
  width: 100%;
  padding: 24px;
}
.direct-script-title {
  margin-bottom: 24px;
  font-weight: 600;
  color: #374151;
}
.direct-script-card {
  background: white;
  padding: 48px;
  border-radius: 24px;
  text-align: center;
  max-width: 480px;
  margin: 60px auto;
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.1);
  border: 1px solid #f1f5f9;
}
.icon-circle {
  width: 64px;
  height: 64px;
  background: #e0f2f1;
  color: #14b8a6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 24px;
}
h1 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #0f172a;
  font-weight: 700;
}
p {
  color: #475569;
  margin-bottom: 24px;
  line-height: 1.6;
}
small {
  color: #94a3b8;
  font-weight: 500;
}
</style>
