(function () {
const scriptTag = document.currentScript;
const position = scriptTag.getAttribute('data-position') || 'floating';
const color = scriptTag.getAttribute('data-color') || '#007bff';
const iframeUrl = "{{ $url }}"; // Laravel lo debe reemplazar con la URL final

if (position === 'inline') {
const container = document.createElement('div');
wrapper.innerHTML = `
<button id="ai-chat-button" class="ai-chat-button" style="
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: ${color};
    background-image: url('/images/png/message.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    animation: bounce 1.6s infinite;
  ">
</button>

<div id="ai-chat-frame" class="ai-chat-frame">
    <button id="ai-chat-close" class="ai-chat-close">✕</button>
    <iframe src="${iframeUrl}" style="width: 100%; height: 100%; border: none; border-radius: 10px;"
            title="AI Chat Assistant"></iframe>
</div>
`;
scriptTag.parentNode.insertBefore(container, scriptTag);
} else {
const style = document.createElement('style');
style.textContent = `
.ai-chat-floating { position: fixed; bottom: 20px; right: 20px; z-index: 999999; }
.ai-chat-button {
width: 60px; height: 60px; border-radius: 50%;
background: ${color}; color: white; border: none;
cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
display: flex; align-items: center; justify-content: center;
}
.ai-chat-frame {
display: none; position: fixed; bottom: 90px; right: 20px;
width: 400px; height: 600px; opacity: 0; transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.ai-chat-frame.visible { display: block; opacity: 1; transform: translateY(0); }
.ai-chat-close {
position: absolute; top: -30px; right: 0;
background: none; border: none; color: #666;
cursor: pointer; font-size: 20px; z-index: 2;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.ai-chat-button svg {
animation: bounce 1.6s infinite;
}
`;
document.head.appendChild(style);

const wrapper = document.createElement('div');
wrapper.className = 'ai-chat-floating';
wrapper.innerHTML = `
<button id="ai-chat-button" class="ai-chat-button" style="
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: ${color};
    background-image: url('/images/png/message.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    animation: bounce 1.6s infinite;
  ">
</button>

<div id="ai-chat-frame" class="ai-chat-frame">
    <button id="ai-chat-close" class="ai-chat-close">✕</button>
    <iframe src="${iframeUrl}" style="width: 100%; height: 100%; border: none; border-radius: 10px;"
            title="AI Chat Assistant"></iframe>
</div>
`;


document.body.appendChild(wrapper);

const button = document.getElementById('ai-chat-button');
const frame = document.getElementById('ai-chat-frame');
const closeButton = document.getElementById('ai-chat-close');

button.addEventListener('click', () => frame.classList.toggle('visible'));
closeButton.addEventListener('click', () => frame.classList.remove('visible'));
}
})();