<template>
  <div class="embed-wrapper">
    <div class="card">
      <div class="card-header">
        <div class="icon-circle">🔐</div>
        <h1>Chatbot Modal Demo</h1>
        <p>Authenticated • With History • Iframe Modal</p>
      </div>
      <div class="card-body">
        <div class="section-title">Configuration</div>
        <div class="badges">
          <span class="badge badge-auth"><span class="badge-dot"></span>Auth Enabled</span>
          <span class="badge badge-history"><span class="badge-dot"></span>History On</span>
          <span class="badge badge-mode"><span class="badge-dot"></span>Modal Mode</span>
        </div>
        <div class="details">
          <div class="detail-row">
            <span class="detail-label">Mechanism</span>
            <span class="detail-value">Iframe in Modal</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">Authentication</span>
            <span class="detail-value">Required</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">Base URL</span>
            <span class="detail-value" style="font-size: 0.7rem">ai-studio.bliv.bangunindo.io</span>
          </div>
        </div>
        <button class="btn-primary" @click="isOpen = true">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
          Mulai Percakapan
        </button>
      </div>
    </div>

    <!-- Modal Implementation -->
    <div class="modal" :class="{ active: isOpen }" @click.self="isOpen = false">
      <div class="modal-content">
        <div class="modal-header">
          <h3>Bliv AI Chatbot</h3>
          <button class="close-btn" @click="isOpen = false">&times;</button>
        </div>
        <div class="modal-body">
          <iframe 
            v-if="isOpen"
            :src="iframeSrc" 
            allow="microphone" 
            title="Chatbot" 
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isOpen = ref(false);
const appCode = "4eFb0BunqZYEZlg7";
const baseUrl = "https://ai-studio.bliv.bangunindo.io";
const iframeSrc = `${baseUrl}/chatbot-auth/${appCode}/history`;
</script>

<style scoped>
.embed-wrapper {
  width: 100%;
  display: flex;
  align-items: center; justify-content: center;
  padding: 24px;
}
.card {
  background: white; border-radius: 24px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); width: 100%; max-width: 480px; overflow: hidden; border: 1px solid #f1f5f9;
}
.card-header { padding: 32px; text-align: center; border-bottom: 1px solid #f1f5f9; }
.icon-circle { width: 64px; height: 64px; background: #e0e7ff; color: #4f46e5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; }
.card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 4px; font-weight: 700; }
.card-header p { font-size: 0.875rem; color: #64748b; }
.card-body { padding: 24px 32px 32px; }
.section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin-bottom: 12px; }
.badges { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.badge { font-size: 0.7rem; padding: 6px 12px; background: #f1f5f9; border-radius: 99px; display: flex; align-items: center; gap: 6px; color: #475569; font-weight: 600; }
.badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
.badge-auth { background: #e0f2f1; color: #14b8a6; }
.badge-auth .badge-dot { background: #14b8a6; }
.badge-history { background: #dbeafe; color: #1e40af; }
.badge-history .badge-dot { background: #1e40af; }

.details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
.detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: #64748b; }
.detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }

.btn-primary {
  width: 100%; background: #4f46e5; color: white; border: none; padding: 14px 24px; font-size: 0.95rem; font-weight: 600; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* Modal Styles */
.modal {
  display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); z-index: 1000; align-items: center; justify-content: center; padding: 20px;
}
.modal.active { display: flex; }
.modal-content {
  background: white; border-radius: 24px; width: 100%; max-width: 800px; height: 80vh; max-height: 600px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.modal-header { padding: 16px 24px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 1rem; color: #0f172a; }
.close-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #64748b; }
.modal-body { flex: 1; min-height: 0; }
iframe { width: 100%; height: 100%; border: none; }
</style>
