/**
 * ATLAS Lead Capture Widget
 * Embed this in any ATLAS-generated site to capture leads
 * Usage: <script src="https://atlas.surpreme.com/js/lead-capture.js" data-site-id="YOUR_SITE_ID"></script>
 */

(function() {
    // Get site ID from script tag
    const script = document.currentScript;
    const siteId = script.getAttribute('data-site-id');
    const formId = script.getAttribute('data-form-id') || 'atlas-contact-form';
    const buttonColor = script.getAttribute('data-color') || '#3b82f6';
    
    if (!siteId) {
        console.error('ATLAS Lead Capture: Missing data-site-id attribute');
        return;
    }
    

    // === PREVIEW BANNER: Show checkout CTA for unpaid sites ===
    (async function checkPreviewBanner() {
        try {
            const res = await fetch('https://atlas.surpreme.com/api/site-status.php?site_id=' + encodeURIComponent(siteId));
            const data = await res.json();
            if (data.paid || data.error) return;
            const cu = 'https://atlas.surpreme.com/checkout.html?session=' + encodeURIComponent(data.session_id) + '&package=' + encodeURIComponent(data.package || 'growth');
            const bn = (data.business_name || 'your website').replace(/</g,'&lt;');
            const b = document.createElement('div');
            b.id = 'atlas-preview-banner';
            b.innerHTML = '<span>\ud83c\udf89 Your <strong>' + bn + '</strong> preview is ready!</span><a href="' + cu + '">Launch Your Site \u2192</a><button onclick="this.parentElement.remove();document.body.style.paddingTop=\'0\'" title="Dismiss">\u2715</button>';
            const st = document.createElement('style');
            st.textContent = '#atlas-preview-banner{position:fixed;top:0;left:0;right:0;z-index:999999;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:center;gap:16px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;box-shadow:0 2px 12px rgba(0,0,0,0.3);flex-wrap:wrap;font-size:14px;}#atlas-preview-banner a{display:inline-block;background:#e74c3c;color:#fff;padding:10px 24px;border-radius:8px;text-decoration:none;font-weight:600;white-space:nowrap;transition:transform 0.2s;}#atlas-preview-banner a:hover{transform:scale(1.05);}#atlas-preview-banner button{background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:18px;padding:0 4px;}';
            document.head.appendChild(st);
            document.body.prepend(b);
            document.body.style.paddingTop = '56px';
        } catch(e) {}
    })();

    // Find the form
    const form = document.getElementById(formId) || document.querySelector('form[data-atlas-form]');
    
    if (!form) {
        console.log('ATLAS Lead Capture: No form found, creating floating button');
        createFloatingButton();
        return;
    }
    
    // Attach submit handler to existing form
    form.addEventListener('submit', handleFormSubmit);
    
    async function handleFormSubmit(e) {
        e.preventDefault();
        
        const formData = new FormData(form);
        const data = {
            site_id: siteId,
            name: formData.get('name') || formData.get('full_name') || formData.get('fullname') || '',
            email: formData.get('email') || '',
            phone: formData.get('phone') || formData.get('tel') || formData.get('telephone') || '',
            message: formData.get('message') || formData.get('comments') || formData.get('inquiry') || '',
            source: 'contact_form'
        };
        
        const submitBtn = form.querySelector('button[type="submit"], input[type="submit"]');
        const originalText = submitBtn ? submitBtn.innerHTML || submitBtn.value : '';
        
        if (submitBtn) {
            submitBtn.disabled = true;
            if (submitBtn.tagName === 'BUTTON') {
                submitBtn.innerHTML = '<span class="atlas-spinner"></span> Sending...';
            } else {
                submitBtn.value = 'Sending...';
            }
        }
        
        try {
            const response = await fetch('https://atlas.surpreme.com/api/atlas-crm.php?action=capture', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            
            const result = await response.json();
            
            if (result.success) {
                showSuccess(form);
                form.reset();
            } else {
                showError(form, result.error || 'Something went wrong');
            }
        } catch (err) {
            showError(form, 'Network error. Please try again.');
        }
        
        if (submitBtn) {
            submitBtn.disabled = false;
            if (submitBtn.tagName === 'BUTTON') {
                submitBtn.innerHTML = originalText;
            } else {
                submitBtn.value = originalText;
            }
        }
    }
    
    function showSuccess(form) {
        const existing = form.querySelector('.atlas-message');
        if (existing) existing.remove();
        
        const msg = document.createElement('div');
        msg.className = 'atlas-message atlas-success';
        msg.innerHTML = '✓ Thank you! We\'ll be in touch soon.';
        form.appendChild(msg);
        
        setTimeout(() => msg.remove(), 5000);
    }
    
    function showError(form, message) {
        const existing = form.querySelector('.atlas-message');
        if (existing) existing.remove();
        
        const msg = document.createElement('div');
        msg.className = 'atlas-message atlas-error';
        msg.innerHTML = '✗ ' + message;
        form.appendChild(msg);
        
        setTimeout(() => msg.remove(), 5000);
    }
    
    function createFloatingButton() {
        // Create floating contact button
        const btn = document.createElement('button');
        btn.id = 'atlas-contact-btn';
        btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>';
        btn.onclick = toggleContactModal;
        document.body.appendChild(btn);
        
        // Create modal
        const modal = document.createElement('div');
        modal.id = 'atlas-contact-modal';
        modal.style.display = 'none';
        modal.innerHTML = `
            <div class="atlas-modal-content">
                <button class="atlas-modal-close" onclick="document.getElementById('atlas-contact-modal').style.display='none'">×</button>
                <h3>Get in Touch</h3>
                <form id="atlas-floating-form">
                    <input type="text" name="name" placeholder="Your Name" required>
                    <input type="email" name="email" placeholder="Your Email" required>
                    <input type="tel" name="phone" placeholder="Phone (optional)">
                    <textarea name="message" placeholder="How can we help?" rows="3"></textarea>
                    <button type="submit">Send Message</button>
                </form>
            </div>
        `;
        document.body.appendChild(modal);
        
        // Attach handler to floating form
        document.getElementById('atlas-floating-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = {
                site_id: siteId,
                name: formData.get('name'),
                email: formData.get('email'),
                phone: formData.get('phone'),
                message: formData.get('message'),
                source: 'floating_widget'
            };
            
            const btn = this.querySelector('button[type="submit"]');
            btn.disabled = true;
            btn.textContent = 'Sending...';
            
            try {
                const res = await fetch('https://atlas.surpreme.com/api/atlas-crm.php?action=capture', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                });
                const result = await res.json();
                
                if (result.success) {
                    this.innerHTML = '<div class="atlas-success-msg">✓ Thanks! We\'ll be in touch.</div>';
                    setTimeout(() => {
                        modal.style.display = 'none';
                        this.innerHTML = `
                            <input type="text" name="name" placeholder="Your Name" required>
                            <input type="email" name="email" placeholder="Your Email" required>
                            <input type="tel" name="phone" placeholder="Phone (optional)">
                            <textarea name="message" placeholder="How can we help?" rows="3"></textarea>
                            <button type="submit">Send Message</button>
                        `;
                    }, 3000);
                } else {
                    btn.disabled = false;
                    btn.textContent = 'Send Message';
                    alert(result.error || 'Error sending message');
                }
            } catch (err) {
                btn.disabled = false;
                btn.textContent = 'Send Message';
                alert('Network error. Please try again.');
            }
        });
    }
    
    function toggleContactModal() {
        const modal = document.getElementById('atlas-contact-modal');
        modal.style.display = modal.style.display === 'flex' ? 'none' : 'flex';
    }
    
    // Add styles
    const style = document.createElement('style');
    style.textContent = `
        .atlas-message {
            padding: 12px 16px;
            border-radius: 8px;
            margin-top: 12px;
            font-size: 14px;
            animation: atlasSlideIn 0.3s ease;
        }
        .atlas-success {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #6ee7b7;
        }
        .atlas-error {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #fca5a5;
        }
        .atlas-spinner {
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 2px solid #fff;
            border-top-color: transparent;
            border-radius: 50%;
            animation: atlasSpin 0.8s linear infinite;
            vertical-align: middle;
            margin-right: 6px;
        }
        @keyframes atlasSpin {
            to { transform: rotate(360deg); }
        }
        @keyframes atlasSlideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        #atlas-contact-btn {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: ${buttonColor};
            color: white;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        #atlas-contact-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 24px rgba(0,0,0,0.4);
        }
        #atlas-contact-btn svg {
            width: 24px;
            height: 24px;
        }
        
        #atlas-contact-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            align-items: center;
            justify-content: center;
            z-index: 10000;
            padding: 20px;
        }
        .atlas-modal-content {
            background: white;
            border-radius: 16px;
            padding: 24px;
            max-width: 400px;
            width: 100%;
            position: relative;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .atlas-modal-close {
            position: absolute;
            top: 12px;
            right: 16px;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
        }
        .atlas-modal-content h3 {
            margin: 0 0 20px 0;
            font-size: 20px;
            color: #1a1a2e;
        }
        #atlas-floating-form input,
        #atlas-floating-form textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            margin-bottom: 12px;
            font-size: 14px;
            font-family: inherit;
        }
        #atlas-floating-form input:focus,
        #atlas-floating-form textarea:focus {
            outline: none;
            border-color: ${buttonColor};
        }
        #atlas-floating-form button {
            width: 100%;
            padding: 14px;
            background: ${buttonColor};
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        #atlas-floating-form button:hover {
            opacity: 0.9;
        }
        #atlas-floating-form button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .atlas-success-msg {
            text-align: center;
            padding: 40px 20px;
            color: #065f46;
            font-size: 18px;
        }
    `;
    document.head.appendChild(style);
})();