"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.injectStyles = injectStyles;
exports.createFloatingButton = createFloatingButton;
exports.createToast = createToast;
exports.showPromptModal = showPromptModal;
exports.showToast = showToast;
let toastTimeout;
function injectStyles() {
    const style = document.createElement('style');
    style.textContent = `
        #repoburg-float-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #7c3aed;
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 999999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, background-color 0.2s ease;
        }
        #repoburg-float-btn:hover {
            transform: scale(1.1);
        }
        #repoburg-float-btn:disabled {
            background-color: #585858;
            cursor: not-allowed;
            transform: none;
        }
        #repoburg-float-btn.active {
             background-color: #c026d3;
        }
        .repoburg-highlight {
            outline: 2px dashed #c026d3 !important;
            box-shadow: 0 0 10px rgba(192, 38, 211, 0.5) !important;
            background-color: rgba(192, 38, 211, 0.1) !important;
        }
        #repoburg-modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #repoburg-modal {
            background-color: #2d3748;
            color: #e2e8f0;
            padding: 24px;
            border-radius: 8px;
            width: 90%;
            max-width: 600px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        #repoburg-modal-header { font-size: 1.25rem; font-weight: bold; margin-bottom: 16px; }
        #repoburg-modal-textarea { width: 100%; background-color: #1a202c; color: white; border-radius: 4px; padding: 8px; min-height: 150px; border: 1px solid #4a5568; margin-bottom: 16px; }
        #repoburg-modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
        .repoburg-modal-btn { padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer; }
        .repoburg-modal-btn-primary { background-color: #7c3aed; color: white; }
        .repoburg-modal-btn-secondary { background-color: #4a5568; color: white; }
        #repoburg-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #1a202c; color: white; padding: 12px 20px; border-radius: 6px; z-index: 1000001; opacity: 0; transition: opacity 0.3s ease; text-align: center; }
        #repoburg-toast.show { opacity: 1; }
        #repoburg-toast.error { background-color: #c53030; }
    `;
    document.head.appendChild(style);
}
function createFloatingButton(onClick) {
    const button = document.createElement('button');
    button.id = 'repoburg-float-btn';
    button.textContent = 'Repo';
    button.onclick = onClick;
    document.body.appendChild(button);
    return button;
}
function createToast() {
    const toast = document.createElement('div');
    toast.id = 'repoburg-toast';
    document.body.appendChild(toast);
}
function showPromptModal(hierarchy, url, submitCallback) {
    const overlay = document.createElement('div');
    overlay.id = 'repoburg-modal-overlay';
    const component = hierarchy[0];
    const parent = hierarchy.length > 1 ? hierarchy[1] : undefined;
    const parentName = parent ? parent.name : 'N/A';
    const breadcrumbs = hierarchy.map(c => c.name).reverse().join(' > ');
    overlay.innerHTML = `
        <div id="repoburg-modal">
            <div id="repoburg-modal-header">Edit Component</div>
            <p style="font-size: 0.9rem; margin-bottom: 8px;"><strong>Component:</strong> ${component.name}</p>
            <p style="font-size: 0.9rem; margin-bottom: 16px;"><strong>Parent Context:</strong> ${parentName}</p>
            <p style="font-size: 0.8rem; margin-bottom: 8px; word-break: break-all; opacity: 0.7;"><strong>Path:</strong> ${breadcrumbs}</p>
            <p style="font-size: 0.8rem; margin-bottom: 16px; word-break: break-all; opacity: 0.7;"><strong>URL:</strong> ${url}</p>
            <textarea id="repoburg-modal-textarea" placeholder="Enter your prompt... (e.g., 'add a confirmation icon to this button')"></textarea>
            <div id="repoburg-modal-footer">
                <button id="repoburg-modal-cancel" class="repoburg-modal-btn repoburg-modal-btn-secondary">Cancel</button>
                <button id="repoburg-modal-submit" class="repoburg-modal-btn repoburg-modal-btn-primary">Submit</button>
            </div>
        </div>
    `;
    document.body.appendChild(overlay);
    const promptInput = document.getElementById('repoburg-modal-textarea');
    const submitButton = document.getElementById('repoburg-modal-submit');
    promptInput.focus();
    const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
            closeModal();
        }
        if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
            event.preventDefault();
            submitButton.click();
        }
    };
    document.addEventListener('keydown', handleKeyDown);
    const closeModal = () => {
        document.removeEventListener('keydown', handleKeyDown);
        overlay.remove();
    };
    document.getElementById('repoburg-modal-cancel').onclick = closeModal;
    overlay.onclick = (e) => { if (e.target === overlay)
        closeModal(); };
    submitButton.onclick = async () => {
        const prompt = promptInput.value;
        if (!prompt.trim())
            return;
        await submitCallback(prompt, hierarchy, url);
        closeModal();
    };
}
function showToast(message, type = 'success', duration = 3000) {
    const toast = document.getElementById('repoburg-toast');
    if (!toast)
        return;
    toast.textContent = message;
    toast.className = type === 'error' ? 'error' : '';
    toast.classList.add('show');
    clearTimeout(toastTimeout);
    toastTimeout = window.setTimeout(() => {
        toast.classList.remove('show');
    }, duration);
}
//# sourceMappingURL=ui.js.map