{% extends 'superuser/base_superuser.html' %}

{% block title %}
    {% if object %}Edit Chatbot Profile | {{ object.name }}{% else %}New Chatbot Profile{% endif %} | ChatLab
{% endblock %}

{% block workspace %}
<style>
.status-box {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid;
    margin-bottom: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}
.test-section {
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}
.test-section h5 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--text-primary);
}
.form-label {
    display: block;
    margin-bottom: 0.75rem;
}
</style>

<div class="page-header">
    <div>
        <h2 class="page-title">{% if object %}Edit Chatbot Profile{% else %}New Chatbot Profile{% endif %}</h2>
        <p class="page-subtitle">Configure model parameters, API credentials, and prompt guides.</p>
    </div>
    <a href="{% url 'superuser_dashboard' %}" class="btn btn-secondary">
        &larr; Back to Dashboard
    </a>
</div>

<div class="glass-card" style="max-width: 1200px; width: 100%; padding: 2.5rem; margin-top: 1rem;">
    <div style="position: sticky; top: 56px; z-index: 90; background: var(--bg-card); padding: 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 2rem; display: flex; gap: 1rem; overflow-x: auto; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
        <a href="#identity-section" class="btn btn-secondary">Identity & Branding</a>
        <a href="#ai-section" class="btn btn-secondary">AI Configuration</a>
        <a href="#ecom-section" class="btn btn-secondary">E-commerce API</a>
        <a href="#social-section" class="btn btn-secondary">Social Media</a>
        <a href="#admin-section" class="btn btn-secondary">Admin Credentials</a>
    </div>

    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 2rem;">
            <!-- Left Column: Branding & Identity -->
            <div id="identity-section" class="glass-card" style="padding: 2rem; border-radius: 0;">
                <div class="form-group">
                    <label class="form-label">Company Icon (shown beside chatbot name)</label>
                    <div style="display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem; background: rgba(255,255,255,0.02); border: 1px solid var(--border-color);">
                        <div id="company-icon-preview" style="width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: #fff;">
                            {% if object and object.icon %}
                                <img src="{{ object.icon.url }}" alt="Company icon" style="width: 100%; height: 100%; object-fit: cover;">
                            {% else %}
                                <span id="company-icon-preview-letter">{% if object %}{{ object.chatbot_name|slice:":1"|upper }}{% else %}A{% endif %}</span>
                            {% endif %}
                        </div>
                        <div style="flex: 1;">
                            <input type="file" name="icon" id="id_icon" accept="image/png,image/jpeg,image/jpg,image/webp,image/gif" class="form-input" style="padding: 0.5rem;">
                            </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Chatbot Button Icon (floating button)</label>
                    <div style="display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem; background: rgba(255,255,255,0.02); border: 1px solid var(--border-color);">
                        <div id="chatbot-icon-preview" style="width: 48px; height: 48px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: #fff;">
                            {% if object and object.chatbot_icon %}
                                <img src="{{ object.chatbot_icon.url }}" alt="Chatbot button icon" style="width: 100%; height: 100%; object-fit: cover;">
                            {% else %}
                                <span id="chatbot-icon-preview-letter">{% if object %}{{ object.chatbot_name|slice:":1"|upper }}{% else %}A{% endif %}</span>
                            {% endif %}
                        </div>
                        <div style="flex: 1;">
                            <input type="file" name="chatbot_icon" id="id_chatbot_icon" accept="image/png,image/jpeg,image/jpg,image/webp,image/gif" class="form-input" style="padding: 0.5rem;">
                            </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="id_name" class="form-label">Company Name</label>
                    <input type="text" name="name" id="id_name" class="form-input" placeholder="e.g. Acme Corp" required value="{% if object %}{{ object.name }}{% endif %}">
                </div>
                
                <div class="form-group">
                    <label for="id_chatbot_name" class="form-label">Chatbot Identity Name</label>
                    <input type="text" name="chatbot_name" id="id_chatbot_name" class="form-input" placeholder="e.g. Acme Support Assistant" required value="{% if object %}{{ object.chatbot_name }}{% else %}Assistant{% endif %}">
                </div>
                
                <div class="form-group">
                    <label for="id_welcome_message" class="form-label">Welcome Message</label>
                    <textarea name="welcome_message" id="id_welcome_message" class="form-input" placeholder="Enter welcome message..." style="min-height: 100px; resize: vertical;">{% if object %}{{ object.welcome_message }}{% else %}Hi! Welcome to our site. I am your virtual assistant. Feel free to ask me anything!{% endif %}</textarea>
                    </div>

                <div class="form-group">
                    <label for="id_sitemap_url" class="form-label">Sitemap URL (For Product Scraping)</label>
                    <div style="display: flex; gap: 0.5rem;">
                        <input type="url" name="sitemap_url" id="id_sitemap_url" class="form-input" placeholder="https://example.com/sitemap.xml" value="{% if object %}{{ object.sitemap_url|default:'' }}{% endif %}" style="border-radius: 0;">
                        <button type="button" id="btn-test-sitemap" class="btn btn-secondary" style="font-size: 0.85rem; padding: 0.5rem 1rem; flex-shrink: 0;">Test Sitemap</button>
                    </div>
                    <div id="sitemap-test-result" style="margin-top: 1rem; display: none; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); padding: 1rem; border-radius: 4px; font-size: 0.85rem; max-height: 250px; overflow-y: auto;">
                    </div>
                </div>

                <div class="form-group">
                    <label for="id_allowed_domain" class="form-label">Authorized Domain (Widget Security)</label>
                    <input type="text" name="allowed_domain" id="id_allowed_domain" class="form-input" placeholder="e.g. mystore.com" value="{% if object %}{{ object.allowed_domain }}{% endif %}">
                    </div>

                <div class="form-group" style="flex-direction: row; align-items: center; gap: 0.75rem;">
                    <input type="checkbox" name="auto_escalate_every_message" id="id_auto_escalate_every_message" style="width:18px; height:18px; margin:0;" {% if object and object.auto_escalate_every_message %}checked{% endif %}>
                    <label for="id_auto_escalate_every_message" class="form-label" style="margin-bottom: 0; cursor: pointer;">Auto-Escalate Every Message</label>
                </div>

                <div class="form-group" style="flex-direction: row; align-items: center; gap: 0.75rem;">
                    <input type="checkbox" name="show_watermark" id="id_show_watermark" style="width:18px; height:18px; margin:0;" {% if not object or object.show_watermark %}checked{% endif %}>
                    <label for="id_show_watermark" class="form-label" style="margin-bottom: 0; cursor: pointer;">Show Watermark Footer</label>
                </div>
                
                <div class="form-group">
                    <label for="id_image_limit" class="form-label">Total Image Upload Limit</label>
                    <input type="number" name="image_limit" id="id_image_limit" class="form-input" min="0" value="{% if object %}{{ object.image_limit }}{% else %}50{% endif %}">
                    </div>

                <div class="form-group">
                    <label for="id_package" class="form-label">Subscription Package</label>
                    <select name="package" id="id_package" class="form-select">
                        <option value="">-- No Package --</option>
                        {% for pkg in packages %}
                            <option value="{{ pkg.id }}" data-unlimited="{{ pkg.is_unlimited|yesno:'true,false' }}" data-limit="{{ pkg.message_limit }}" data-days="{{ pkg.days_valid }}" {% if object.package_id == pkg.id %}selected{% endif %}>
                                {{ pkg.name }} (৳{{ pkg.price }} | {% if pkg.is_unlimited %}Unlimited{% else %}{{ pkg.message_limit }} msgs{% endif %} | {{ pkg.days_valid }} Days)
                            </option>
                        {% endfor %}
                    </select>
                    </div>

                <div class="form-group">
                    <label for="id_subscription_valid_until" class="form-label">Subscription Valid Until</label>
                    <input type="date" name="subscription_valid_until" id="id_subscription_valid_until" class="form-input" value="{% if object and object.subscription_valid_until %}{{ object.subscription_valid_until|date:'Y-m-d' }}{% endif %}">
                    </div>

                <div class="form-group">
                    <label for="id_message_limit" class="form-label">Message Limit</label>
                    <input type="number" name="message_limit" id="id_message_limit" class="form-input" min="0" value="{% if object %}{{ object.message_limit }}{% else %}0{% endif %}">
                    </div>
            </div>

            <!-- Right Column: AI Config & Instructions -->
            <div id="ai-section" class="glass-card" style="padding: 2rem; border-radius: 0;">
                <div class="form-group">
                    <label for="id_ai_model" class="form-label">AI Model</label>
                    <select name="ai_model" id="id_ai_model" class="form-select" required>
                        <option value="">-- Select an AI Model --</option>
                        {% regroup ai_models by provider as models_by_provider %}
                        {% for provider_group in models_by_provider %}
                            <optgroup label="{{ provider_group.grouper|upper }}">
                                {% for m in provider_group.list %}
                                    <option value="{{ m.id }}" {% if object.ai_model_id == m.id %}selected{% endif %}>
                                        {{ m.display_name }}
                                    </option>
                                {% endfor %}
                            </optgroup>
                        {% endfor %}
                    </select>
                    </div>
                
                <div class="form-group">
                    <label for="id_api_key" class="form-label">Provider API Key</label>
                    <input type="password" name="api_key" id="id_api_key" class="form-input" placeholder="Enter API secret key" value="{% if object %}{{ object.api_key }}{% endif %}">
                    </div>

                <div class="form-group">
                    <label class="form-label">Enforced Conversation Topics</label>
                    <div style="display: flex; flex-direction: column; gap: 0.5rem; max-height: 150px; overflow-y: auto; background: rgba(255,255,255,0.02); border: 1px solid var(--border-color); padding: 0.75rem; border-radius: 0;">
                        {% for t in global_topics %}
                            <label style="display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; color: var(--text-secondary);">
                                <input type="checkbox" name="topics" value="{{ t.id }}" 
                                    {% if object and t in object.topics.all %}checked{% endif %}
                                    style="cursor: pointer; accent-color: var(--primary);">
                                {{ t.name }}
                            </label>
                        {% empty %}
                            <span style="font-size: 0.85rem; color: var(--text-muted); font-style: italic;">No global topics defined. Create one below or in the Topic Scope Manager.</span>
                        {% endfor %}
                    </div>
                </div>

                <div class="form-group">
                    <label for="id_new_topic" class="form-label">Quick Add Topic</label>
                    <input type="text" name="new_topic" id="id_new_topic" class="form-input" placeholder="e.g. Refunds (creates and links topic immediately)" style="border-radius: 0;">
                </div>
                
                <div class="form-group">
                    <label for="id_system_prompt" class="form-label">System Instructions / Prompt Guide</label>
                    <textarea name="system_prompt" id="id_system_prompt" class="form-textarea" placeholder="Describe the role, tone, knowledge, and restrictions of the chatbot... (e.g. 'You are a technical support agent for Acme. Speak politely in English.')" style="min-height: 250px;">{% if object %}{{ object.system_prompt }}{% endif %}</textarea>
                </div>
                <div class="form-group">
                    <label for="id_google_sheet_url" class="form-label">Google Sheet URL (Live Data)</label>
                    <div style="display: flex; gap: 0.5rem; align-items: stretch;">
                        <input type="url" name="google_sheet_url" id="id_google_sheet_url" class="form-input" placeholder="e.g. https://docs.google.com/spreadsheets/d/..." value="{% if object %}{{ object.google_sheet_url|default:'' }}{% endif %}" style="flex: 1;">
                        {% if object %}
                        <button type="button" id="btn-fetch-sheet" class="btn btn-secondary" style="white-space: nowrap;">Fetch Data</button>
                        {% endif %}
                    </div>
                    <div id="sheet-fetch-result" style="margin-top: 1rem; padding: 1rem; background: var(--hover-bg); border-radius: 8px; font-size: 0.85rem; font-family: monospace; white-space: pre-wrap; display: none; max-height: 300px; overflow-y: auto;"></div>
                </div>
            </div>
        </div>

        <!-- E-commerce API Integration -->
        <div id="ecom-section" style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-color);">
            <h3 style="margin-bottom: 0.5rem; font-family: var(--font-heading); font-size: 1.15rem;">E-commerce API Integration</h3>
            <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem;">
                Connect this chatbot to an external e-commerce system.
            </p>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 2rem;">
                <div class="form-group">
                    <label for="id_ecom_api_url" class="form-label">E-commerce API Base URL</label>
                    <input type="url" name="ecom_api_url" id="id_ecom_api_url" class="form-input" placeholder="e.g. https://myshop.com" value="{% if object %}{{ object.ecom_api_url|default:'' }}{% endif %}">
                    </div>
                
                <div class="form-group">
                    <label for="id_ecom_api_key" class="form-label">E-commerce API Key</label>
                    <div style="display: flex; gap: 0.5rem;">
                        <input type="text" name="ecom_api_key" id="id_ecom_api_key" class="form-input" placeholder="Generate key" value="{% if object %}{{ object.ecom_api_key|default:'' }}{% endif %}" readonly>
                        <button type="button" id="btn-generate-api" class="btn btn-secondary" style="white-space: nowrap; font-size: 0.85rem; padding: 0 1rem;">Generate</button>
                    </div>
                    </div>
            </div>
            
            {% if object %}
            <div style="margin-bottom: 2rem;">
                <button type="button" id="btn-test-ecom" class="btn btn-secondary">Test E-commerce Connection</button>
                <div id="ecom-test-result" style="margin-top: 1rem; display: none; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); padding: 1rem; border-radius: 4px; font-size: 0.9rem; max-height: 250px; overflow-y: auto; white-space: pre-wrap;"></div>
            </div>
            {% endif %}
        </div>

        <!-- Social Media Integrations (Facebook & WhatsApp) -->
        <div id="social-section" style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-color);">
            <h3 style="margin-bottom: 0.5rem; font-family: var(--font-heading); font-size: 1.15rem;">Social Media Integrations</h3>
            <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem;">
                Connect this chatbot directly to Facebook Messenger and WhatsApp Cloud API platforms.
            </p>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 2rem;">
                <!-- Facebook Messenger Integration -->
                <div class="glass-card" style="padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 0; display: flex; flex-direction: column; justify-content: space-between;">
                    <div>
                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
                            <h4 style="margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; color: #3b5998; font-family: var(--font-heading);">
                                <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24" style="display:inline-block; vertical-align:middle;"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"/></svg>
                                Facebook Messenger
                            </h4>
                            <div style="display: flex; align-items: center; gap: 0.5rem;">
                                <input type="checkbox" name="fb_messenger_enabled" id="id_fb_messenger_enabled" style="width: 18px; height: 18px; cursor: pointer;" {% if object and object.fb_messenger_enabled %}checked{% endif %}>
                                <label for="id_fb_messenger_enabled" style="font-size: 0.9rem; cursor: pointer; color: var(--text-muted);">Enabled</label>
                            </div>
                        </div>

                        <div class="fb-config-fields" style="display: flex; flex-direction: column; gap: 1rem;">
                            <div class="form-group">
                                <label for="id_fb_page_id" class="form-label">Facebook Page ID</label>
                                <input type="text" name="fb_page_id" id="id_fb_page_id" class="form-input" placeholder="e.g. 104847294829" value="{% if object %}{{ object.fb_page_id|default:'' }}{% endif %}">
                            </div>
                            <div class="form-group">
                                <label for="id_fb_page_access_token" class="form-label">Facebook Page Access Token</label>
                                <textarea name="fb_page_access_token" id="id_fb_page_access_token" class="form-input" placeholder="Paste Page Access Token here..." style="min-height: 80px; resize: vertical;">{% if object %}{{ object.fb_page_access_token|default:'' }}{% endif %}</textarea>
                            </div>

                            <!-- Messenger Behavior Settings -->
                            <div style="padding: 1rem; background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.2); border-radius: 0;">
                                <div style="font-size: 0.85rem; font-weight: 700; color: var(--primary); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem;">
                                    Messenger Behavior Settings
                                </div>
                                <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                                    <label style="display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer;">
                                        <input type="checkbox" name="fb_mark_seen_enabled" id="id_fb_mark_seen_enabled"
                                            style="width: 17px; height: 17px; margin-top: 2px; cursor: pointer; accent-color: var(--primary); flex-shrink: 0;"
                                            {% if object and object.fb_mark_seen_enabled %}checked{% elif not object %}checked{% endif %}>
                                        <div>
                                            <span style="font-size: 0.9rem; color: var(--text-primary); font-weight: 500;">Mark as Seen</span>
                                            </div>
                                    </label>
                                    <label style="display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer;">
                                        <input type="checkbox" name="fb_typing_indicator_enabled" id="id_fb_typing_indicator_enabled"
                                            style="width: 17px; height: 17px; margin-top: 2px; cursor: pointer; accent-color: var(--primary); flex-shrink: 0;"
                                            {% if object and object.fb_typing_indicator_enabled %}checked{% elif not object %}checked{% endif %}>
                                        <div>
                                            <span style="font-size: 0.9rem; color: var(--text-primary); font-weight: 500;">Typing Indicator (... dot animation)</span>
                                            </div>
                                    </label>
                                    <label style="display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer;">
                                        <input type="checkbox" name="agent_fb_comments_access" id="id_agent_fb_comments_access"
                                            style="width: 17px; height: 17px; margin-top: 2px; cursor: pointer; accent-color: var(--primary); flex-shrink: 0;"
                                            {% if object and object.agent_fb_comments_access %}checked{% elif not object %}checked{% endif %}>
                                        <div>
                                            <span style="font-size: 0.9rem; color: var(--text-primary); font-weight: 500;">Agent Comments Page Access</span>
                                            </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {% if object %}
                    <div class="test-section" style="margin-top: 1.5rem;">
                        <h5>Diagnostics & Connection Test</h5>
                        <div style="display: flex; gap: 0.75rem; margin-bottom: 1rem;">
                            <button type="button" id="btn-test-fb" class="btn" style="background: rgba(59, 89, 152, 0.1); border: 1px solid #3b5998; color: #3b5998; font-weight: 600; padding: 0.6rem 1.25rem; font-size: 0.85rem; border-radius: 6px; transition: all 0.2s; cursor: pointer;">Test Facebook Connection</button>
                        </div>
                        <div id="fb-test-status" class="status-box" style="display: none;"></div>
                        
                        <div class="form-group" style="margin-bottom: 0;">
                            <label class="form-label" style="font-size: 0.85rem;">Send Test Message to Latest Active Chat</label>
                            <div style="display: flex; gap: 0.5rem;">
                                <input type="text" id="fb-test-message-input" class="form-input" placeholder="Type a test message here..." style="font-size: 0.85rem; padding: 0.5rem; border-radius: 0;">
                                <button type="button" id="btn-send-fb-test-msg" class="btn btn-primary" style="font-size: 0.85rem; padding: 0.5rem 1rem;">Send Test Message</button>
                            </div>
                            <div id="fb-send-status" style="margin-top: 0.5rem; display: none; padding: 0.5rem; font-size: 0.8rem; font-weight: 500;"></div>
                        </div>
                    </div>
                    {% endif %}
                </div>

                <!-- WhatsApp Integration -->
                <div class="glass-card" style="padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 0; display: flex; flex-direction: column; justify-content: space-between;">
                    <div>
                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
                            <h4 style="margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; color: #25d366; font-family: var(--font-heading);">
                                <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24" style="display:inline-block; vertical-align:middle;"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.457L0 24zm6.59-4.846c1.6.95 2.56 1.487 4.67 1.488 5.485 0 9.948-4.468 9.95-9.953.003-2.657-1.03-5.155-2.91-7.037C16.48 1.77 13.985.735 11.986.735c-5.49 0-9.953 4.463-9.955 9.948-.002 2.152.56 3.12 1.514 4.72l-1.012 3.693 3.824-.992zm11.758-6.195c-.3-.15-1.77-.874-2.04-.972-.27-.1-.47-.15-.67.15-.2.3-.77.973-.94 1.173-.17.2-.34.224-.64.074-.3-.15-1.27-.47-2.42-1.493-.895-.8-1.5-1.785-1.68-2.083-.18-.3-.02-.46.13-.61.137-.137.3-.35.45-.525.15-.175.2-.3.3-.5.1-.2.05-.375-.025-.525-.075-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01-.2 0-.52.075-.8.375-.27.3-1.04 1.018-1.04 2.483 0 1.465 1.06 2.88 1.21 3.08.15.2 2.09 3.2 5.07 4.487.7.3 1.25.49 1.68.63.71.22 1.36.19 1.87.115.57-.084 1.77-.724 2.02-1.388.25-.664.25-1.233.17-1.388-.07-.15-.27-.25-.57-.4z"/></svg>
                                WhatsApp Business
                            </h4>
                            <div style="display: flex; align-items: center; gap: 0.5rem;">
                                <input type="checkbox" name="whatsapp_enabled" id="id_whatsapp_enabled" style="width: 18px; height: 18px; cursor: pointer;" {% if object and object.whatsapp_enabled %}checked{% endif %}>
                                <label for="id_whatsapp_enabled" style="font-size: 0.9rem; cursor: pointer; color: var(--text-muted);">Enabled</label>
                            </div>
                        </div>

                        <div class="wa-config-fields" style="display: flex; flex-direction: column; gap: 1rem;">
                            <div class="form-group">
                                <label for="id_wa_phone_number_id" class="form-label">WhatsApp Phone Number ID</label>
                                <input type="text" name="wa_phone_number_id" id="id_wa_phone_number_id" class="form-input" placeholder="e.g. 10938472948293" value="{% if object %}{{ object.wa_phone_number_id|default:'' }}{% endif %}">
                            </div>
                            <div class="form-group">
                                <label for="id_wa_business_account_id" class="form-label">WhatsApp Business Account ID</label>
                                <input type="text" name="wa_business_account_id" id="id_wa_business_account_id" class="form-input" placeholder="e.g. 1039487293847" value="{% if object %}{{ object.wa_business_account_id|default:'' }}{% endif %}">
                            </div>
                            <div class="form-group">
                                <label for="id_wa_access_token" class="form-label">WhatsApp Permanent Access Token</label>
                                <textarea name="wa_access_token" id="id_wa_access_token" class="form-input" placeholder="Paste Permanent System User Access Token here..." style="min-height: 80px; resize: vertical;">{% if object %}{{ object.wa_access_token|default:'' }}{% endif %}</textarea>
                            </div>
                        </div>
                    </div>

                    {% if object %}
                    <div class="test-section" style="margin-top: 1.5rem;">
                        <h5>Diagnostics & Connection Test</h5>
                        <div style="display: flex; gap: 0.75rem; margin-bottom: 1rem;">
                            <button type="button" id="btn-test-wa" class="btn" style="background: rgba(37, 211, 102, 0.1); border: 1px solid #25d366; color: #25d366; font-weight: 600; padding: 0.6rem 1.25rem; font-size: 0.85rem; border-radius: 6px; transition: all 0.2s; cursor: pointer;">Test WhatsApp Connection</button>
                        </div>
                        <div id="wa-test-status" class="status-box" style="display: none;"></div>
                        
                        <div class="form-group" style="margin-bottom: 0;">
                            <label class="form-label" style="font-size: 0.85rem;">Send Test Message to Latest Active Chat</label>
                            <div style="display: flex; gap: 0.5rem;">
                                <input type="text" id="wa-test-message-input" class="form-input" placeholder="Type a test message here..." style="font-size: 0.85rem; padding: 0.5rem; border-radius: 0;">
                                <button type="button" id="btn-send-wa-test-msg" class="btn btn-primary" style="font-size: 0.85rem; padding: 0.5rem 1rem;">Send Test Message</button>
                            </div>
                            <div id="wa-send-status" style="margin-top: 0.5rem; display: none; padding: 0.5rem; font-size: 0.8rem; font-weight: 500;"></div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: {% if show_admin_fields %}1fr 1fr{% else %}1fr{% endif %}; gap: 2.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-color); margin-bottom: 2rem;">
            <!-- Webhook Connection Details & Developer Guide -->
            <div class="glass-card" style="padding: 1.5rem; background: rgba(255, 255, 255, 0.01); border: 1px dashed var(--border-color); border-radius: 0; margin-bottom: 0; display: flex; flex-direction: column; justify-content: space-between;">
                <div>
                    <h4 style="margin-top: 0; margin-bottom: 0.75rem; font-size: 1.05rem; color: var(--primary); font-family: var(--font-heading);">Webhook Setup Guide</h4>
                    
                    {% if site_settings and site_settings.fb_app_verify_token %}
                    <div style="margin-bottom: 1.25rem;">
                        <div style="font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem;">Verify Token:</div>
                        <code style="font-family: monospace; font-size: 0.9rem; padding: 0.5rem; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); display: block;">{{ site_settings.fb_app_verify_token }}</code>
                        </div>

                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
                        <div>
                            <div style="font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem;">Facebook Webhook Callback URL:</div>
                            <code style="font-size: 0.82rem; padding: 0.5rem; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); display: block; word-break: break-all;" id="fb-webhook-url"></code>
                        </div>
                        <div>
                            <div style="font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem;">WhatsApp Webhook Callback URL:</div>
                            <code style="font-size: 0.82rem; padding: 0.5rem; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); display: block; word-break: break-all;" id="wa-webhook-url"></code>
                        </div>
                    </div>

                    <div style="border-top: 1px solid var(--border-color); padding-top: 1rem;">
                        <h5 style="margin-top: 0; margin-bottom: 0.5rem; font-size: 0.95rem; font-weight: 600;">SaaS Webhook Integration Steps:</h5>
                        <ol style="font-size: 0.85rem; padding-left: 1.25rem; color: var(--text-secondary); line-height: 1.6; margin: 0;">
                            <li>Log in to your Meta Developer Portal and access your application.</li>
                            <li>Configure the <strong>Messenger Webhooks</strong> and <strong>WhatsApp Webhooks</strong> with the Callback URL and Verify Token shown above, then click verify.</li>
                            <li>Subscribe to the <strong><code>messages</code></strong> webhook event fields.</li>
                            <li>To connect a page or WhatsApp account, fill in the Facebook Page ID and Page Access Token above. For WhatsApp, fill in the Phone Number ID and Permanent Access Token, then check the <strong>Enabled</strong> box.</li>
                        </ol>
                    </div>
                    {% else %}
                    <div style="color: var(--warning); font-size: 0.9rem; padding: 0.5rem 0;">
                        Webhook settings are not fully configured yet. Please configure the <strong>Global Verify Token</strong> in the <a href="{% url 'superuser_privacy_policy' %}" style="color: var(--primary); text-decoration: underline;">Global Site Settings</a> dashboard first.
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Company Admin Login Credentials -->
        <div id="admin-section" style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-color);">
            {% if show_admin_fields %}
            <div style="margin-top: 0; padding-top: 0; border-top: none;">
                <h3 style="margin-bottom: 0.5rem; font-family: var(--font-heading); font-size: 1.15rem;">Company Admin Login Credentials</h3>
                <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem;">
                    Create login credentials so the company can access their dashboard at <code>/login/</code> and manage agents, FAQs, and widget settings.
                </p>

                {% if company_admins %}
                <div class="form-group">
                    <label class="form-label">Existing Admin Accounts</label>
                    <div style="background: rgba(255,255,255,0.02); border: 1px solid var(--border-color); padding: 0.75rem;">
                        {% for admin in company_admins %}
                        <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; {% if not forloop.last %}border-bottom: 1px solid var(--border-color);{% endif %}">
                            <span style="font-family: monospace; font-size: 0.9rem;">{{ admin.username }}{% if admin.email %} ({{ admin.email }}){% endif %}</span>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="form-group">
                    <label for="id_reset_admin_id" class="form-label">Reset Admin Password</label>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                        <select name="reset_admin_id" id="id_reset_admin_id" class="form-select">
                            <option value="">— Select admin —</option>
                            {% for admin in company_admins %}
                            <option value="{{ admin.pk }}">{{ admin.username }}</option>
                            {% endfor %}
                        </select>
                        <input type="password" name="new_password" id="id_new_password" class="form-input" placeholder="New password">
                    </div>
                </div>
                {% endif %}

                <div class="form-group">
                    <label for="id_admin_username" class="form-label">{% if is_create %}Admin Username{% else %}Add New Admin Username{% endif %}</label>
                    <input type="text" name="admin_username" id="id_admin_username" class="form-input" placeholder="e.g. acme_admin" {% if is_create %}required{% endif %}>
                </div>

                <div class="form-group">
                    <label for="id_admin_password" class="form-label">{% if is_create %}Admin Password{% else %}Admin Password (for new admin){% endif %}</label>
                    <input type="password" name="admin_password" id="id_admin_password" class="form-input" placeholder="Set a secure password" {% if is_create %}required{% endif %}>
                </div>

                <div class="form-group">
                    <label for="id_admin_email" class="form-label">Admin Email (optional)</label>
                    <input type="email" name="admin_email" id="id_admin_email" class="form-input" placeholder="admin@company.com">
                </div>
            </div>
            {% endif %}
        </div>

        <script>
            // Generate webhook URLs based on current domain dynamically
            const protocol = window.location.protocol;
            const host = window.location.host;
            const fbUrlEl = document.getElementById('fb-webhook-url');
            const waUrlEl = document.getElementById('wa-webhook-url');
            if (fbUrlEl) fbUrlEl.textContent = `${protocol}//${host}/webhooks/facebook/`;
            if (waUrlEl) waUrlEl.textContent = `${protocol}//${host}/webhooks/whatsapp/`;
        </script>
        
        </div>`n        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                Save Chatbot Profile
            </button>
            <a href="{% url 'superuser_dashboard' %}" class="btn btn-secondary">
                Cancel
            </a>
        </div>
    </form>
</div>

<script>
    // Package selection auto-population
    const packageSelect = document.getElementById('id_package');
    const msgLimitInput = document.getElementById('id_message_limit');
    const validUntilInput = document.getElementById('id_subscription_valid_until');

    if (packageSelect) {
        packageSelect.addEventListener('change', function() {
            const selectedOpt = packageSelect.options[packageSelect.selectedIndex];
            if (!selectedOpt || !selectedOpt.value) return;

            const isUnlimited = selectedOpt.getAttribute('data-unlimited') === 'true';
            const limit = selectedOpt.getAttribute('data-limit');
            const days = parseInt(selectedOpt.getAttribute('data-days')) || 30;

            // Update message limit
            if (msgLimitInput) {
                msgLimitInput.value = isUnlimited ? '0' : limit;
            }

            // Calculate subscription expiration date
            if (validUntilInput) {
                const targetDate = new Date();
                targetDate.setDate(targetDate.getDate() + days);
                const yyyy = targetDate.getFullYear();
                const mm = String(targetDate.getMonth() + 1).padStart(2, '0');
                const dd = String(targetDate.getDate()).padStart(2, '0');
                validUntilInput.value = `${yyyy}-${mm}-${dd}`;
            }
        });
    }

    const apiKeyHelp = document.getElementById('api-key-help');
    const aiModelSelect = document.getElementById('id_ai_model');

    // Update API Key help message based on the selected AI model's provider
    function updateApiKeyHelp() {
        if (!aiModelSelect || !apiKeyHelp) return;
        const selectedOption = aiModelSelect.options[aiModelSelect.selectedIndex];
        if (!selectedOption || !selectedOption.value) {
            apiKeyHelp.innerHTML = 'Stored securely. Key is required to call endpoints.';
            return;
        }

        const optgroup = selectedOption.closest('optgroup');
        const provider = optgroup ? optgroup.label.toLowerCase() : '';

        if (provider === 'gemini') {
            apiKeyHelp.innerHTML = 'Stored securely. Generate an API Key in <a href="https://aistudio.google.com/" target="_blank" style="color: var(--primary); text-decoration: underline;">Google AI Studio</a>.';
        } else if (provider === 'openai') {
            apiKeyHelp.innerHTML = 'Stored securely. Generate an API Key in the <a href="https://platform.openai.com/api-keys" target="_blank" style="color: var(--primary); text-decoration: underline;">OpenAI Platform</a>.';
        } else {
            apiKeyHelp.innerHTML = 'Stored securely. Key is required to call endpoints.';
        }
    }

    if (aiModelSelect) {
        aiModelSelect.addEventListener('change', updateApiKeyHelp);
        updateApiKeyHelp();
    }

    {% if object %}
    const companyId = "{{ object.id }}";
    const csrftoken = "{{ csrf_token }}";

    // Facebook connection test
    const btnTestFb = document.getElementById('btn-test-fb');
    const fbTestStatus = document.getElementById('fb-test-status');
    if (btnTestFb) {
        btnTestFb.addEventListener('click', function() {
            const pageId = document.getElementById('id_fb_page_id').value.trim();
            const token = document.getElementById('id_fb_page_access_token').value.trim();
            
            fbTestStatus.style.display = 'block';
            fbTestStatus.className = 'status-box';
            fbTestStatus.style.background = 'rgba(255,255,255,0.05)';
            fbTestStatus.style.borderColor = 'var(--border-color)';
            fbTestStatus.style.color = 'var(--text-primary)';
            fbTestStatus.textContent = 'Testing connection...';
            btnTestFb.disabled = true;

            const formData = new FormData();
            formData.append('fb_page_id', pageId);
            formData.append('fb_page_access_token', token);

            fetch(`/superuser/company/${companyId}/test-facebook-connection/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrftoken
                },
                body: formData
            })
            .then(response => response.json().then(data => ({ status: response.status, body: data })))
            .then(({ status, body }) => {
                btnTestFb.disabled = false;
                if (status === 200 && body.status === 'success') {
                    fbTestStatus.style.background = 'rgba(16, 185, 129, 0.1)';
                    fbTestStatus.style.borderColor = '#10b981';
                    fbTestStatus.style.color = '#10b981';
                    fbTestStatus.innerHTML = `🟢 <strong>Success:</strong> ${body.message}`;
                } else if (body.status === 'warning') {
                    fbTestStatus.style.background = 'rgba(245, 158, 11, 0.1)';
                    fbTestStatus.style.borderColor = '#f59e0b';
                    fbTestStatus.style.color = '#f59e0b';
                    fbTestStatus.innerHTML = `⚠️ <strong>Warning:</strong> ${body.message}`;
                } else {
                    fbTestStatus.style.background = 'rgba(239, 68, 68, 0.1)';
                    fbTestStatus.style.borderColor = '#ef4444';
                    fbTestStatus.style.color = '#ef4444';
                    fbTestStatus.innerHTML = `🔴 <strong>Error:</strong> ${body.error || 'Connection failed.'}`;
                }
            })
            .catch(err => {
                btnTestFb.disabled = false;
                fbTestStatus.style.background = 'rgba(239, 68, 68, 0.1)';
                fbTestStatus.style.borderColor = '#ef4444';
                fbTestStatus.style.color = '#ef4444';
                fbTestStatus.innerHTML = `🔴 <strong>Error:</strong> ${err.message || 'An unexpected error occurred.'}`;
            });
        });
    }

    // Facebook send message test
    const btnSendFbTestMsg = document.getElementById('btn-send-fb-test-msg');
    const fbSendStatus = document.getElementById('fb-send-status');
    const fbMessageInput = document.getElementById('fb-test-message-input');
    if (btnSendFbTestMsg) {
        btnSendFbTestMsg.addEventListener('click', function() {
            const token = document.getElementById('id_fb_page_access_token').value.trim();
            const message = fbMessageInput.value.trim();
            
            if (!message) {
                alert('Please type a test message first.');
                return;
            }

            fbSendStatus.style.display = 'block';
            fbSendStatus.style.color = 'var(--text-muted)';
            fbSendStatus.textContent = 'Sending...';
            btnSendFbTestMsg.disabled = true;

            const formData = new FormData();
            formData.append('fb_page_access_token', token);
            formData.append('message', message);

            fetch(`/superuser/company/${companyId}/send-test-facebook-message/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrftoken
                },
                body: formData
            })
            .then(response => response.json().then(data => ({ status: response.status, body: data })))
            .then(({ status, body }) => {
                btnSendFbTestMsg.disabled = false;
                if (status === 200 && body.status === 'success') {
                    fbSendStatus.style.color = '#10b981';
                    fbSendStatus.innerHTML = `🟢 <strong>Success:</strong> ${body.message}`;
                    fbMessageInput.value = '';
                } else {
                    fbSendStatus.style.color = '#ef4444';
                    fbSendStatus.innerHTML = `🔴 <strong>Error:</strong> ${body.error || 'Failed to send message.'}`;
                }
            })
            .catch(err => {
                btnSendFbTestMsg.disabled = false;
                fbSendStatus.style.color = '#ef4444';
                fbSendStatus.innerHTML = `🔴 <strong>Error:</strong> ${err.message || 'An unexpected error occurred.'}`;
            });
        });
    }

    // WhatsApp connection test
    const btnTestWa = document.getElementById('btn-test-wa');
    const waTestStatus = document.getElementById('wa-test-status');
    if (btnTestWa) {
        btnTestWa.addEventListener('click', function() {
            const phoneId = document.getElementById('id_wa_phone_number_id').value.trim();
            const token = document.getElementById('id_wa_access_token').value.trim();
            
            waTestStatus.style.display = 'block';
            waTestStatus.className = 'status-box';
            waTestStatus.style.background = 'rgba(255,255,255,0.05)';
            waTestStatus.style.borderColor = 'var(--border-color)';
            waTestStatus.style.color = 'var(--text-primary)';
            waTestStatus.textContent = 'Testing connection...';
            btnTestWa.disabled = true;

            const formData = new FormData();
            formData.append('wa_phone_number_id', phoneId);
            formData.append('wa_access_token', token);

            fetch(`/superuser/company/${companyId}/test-whatsapp-connection/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrftoken
                },
                body: formData
            })
            .then(response => response.json().then(data => ({ status: response.status, body: data })))
            .then(({ status, body }) => {
                btnTestWa.disabled = false;
                if (status === 200 && body.status === 'success') {
                    waTestStatus.style.background = 'rgba(16, 185, 129, 0.1)';
                    waTestStatus.style.borderColor = '#10b981';
                    waTestStatus.style.color = '#10b981';
                    waTestStatus.innerHTML = `🟢 <strong>Success:</strong> ${body.message}`;
                } else {
                    waTestStatus.style.background = 'rgba(239, 68, 68, 0.1)';
                    waTestStatus.style.borderColor = '#ef4444';
                    waTestStatus.style.color = '#ef4444';
                    waTestStatus.innerHTML = `🔴 <strong>Error:</strong> ${body.error || 'Connection failed.'}`;
                }
            })
            .catch(err => {
                btnTestWa.disabled = false;
                waTestStatus.style.background = 'rgba(239, 68, 68, 0.1)';
                waTestStatus.style.borderColor = '#ef4444';
                waTestStatus.style.color = '#ef4444';
                waTestStatus.innerHTML = `🔴 <strong>Error:</strong> ${err.message || 'An unexpected error occurred.'}`;
            });
        });
    }

    // WhatsApp send message test
    const btnSendWaTestMsg = document.getElementById('btn-send-wa-test-msg');
    const waSendStatus = document.getElementById('wa-send-status');
    const waMessageInput = document.getElementById('wa-test-message-input');
    if (btnSendWaTestMsg) {
        btnSendWaTestMsg.addEventListener('click', function() {
            const phoneId = document.getElementById('id_wa_phone_number_id').value.trim();
            const token = document.getElementById('id_wa_access_token').value.trim();
            const message = waMessageInput.value.trim();
            
            if (!message) {
                alert('Please type a test message first.');
                return;
            }

            waSendStatus.style.display = 'block';
            waSendStatus.style.color = 'var(--text-muted)';
            waSendStatus.textContent = 'Sending...';
            btnSendWaTestMsg.disabled = true;

            const formData = new FormData();
            formData.append('wa_phone_number_id', phoneId);
            formData.append('wa_access_token', token);
            formData.append('message', message);

            fetch(`/superuser/company/${companyId}/send-test-whatsapp-message/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrftoken
                },
                body: formData
            })
            .then(response => response.json().then(data => ({ status: response.status, body: data })))
            .then(({ status, body }) => {
                btnSendWaTestMsg.disabled = false;
                if (status === 200 && body.status === 'success') {
                    waSendStatus.style.color = '#10b981';
                    waSendStatus.innerHTML = `🟢 <strong>Success:</strong> ${body.message}`;
                    waMessageInput.value = '';
                } else {
                    waSendStatus.style.color = '#ef4444';
                    waSendStatus.innerHTML = `🔴 <strong>Error:</strong> ${body.error || 'Failed to send message.'}`;
                }
            })
            .catch(err => {
                btnSendWaTestMsg.disabled = false;
                waSendStatus.style.color = '#ef4444';
                waSendStatus.innerHTML = `🔴 <strong>Error:</strong> ${err.message || 'An unexpected error occurred.'}`;
            });
        });
    }

    // Sitemap Test
    const btnTestSitemap = document.getElementById('btn-test-sitemap');
    const sitemapTestResult = document.getElementById('sitemap-test-result');
    if (btnTestSitemap) {
        btnTestSitemap.addEventListener('click', function() {
            const sitemapUrl = document.getElementById('id_sitemap_url').value.trim();
            if (!sitemapUrl) {
                alert('Please enter a Sitemap URL first.');
                return;
            }
            
            sitemapTestResult.style.display = 'block';
            sitemapTestResult.style.color = 'var(--text-muted)';
            sitemapTestResult.innerHTML = '<span style="display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.3); border-radius:50%; border-top-color:#fff; animation:spin 1s ease-in-out infinite;"></span> Live loading... parsing sitemap...';
            btnTestSitemap.disabled = true;

            const formData = new FormData();
            formData.append('sitemap_url', sitemapUrl);

            fetch("{% url 'superuser_test_sitemap' %}", {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrftoken
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                btnTestSitemap.disabled = false;
                if (data.status === 'success') {
                    sitemapTestResult.style.color = '#10b981';
                    let html = `<strong>${data.message}</strong><div style="margin-top: 0.5rem; display:flex; flex-direction:column; gap:0.5rem;">`;
                    data.data.forEach(item => {
                        html += `<div style="background: rgba(255,255,255,0.05); padding: 0.5rem; border: 1px solid var(--border-color);">
                            <div style="font-weight: 600; color: #fff; margin-bottom: 0.25rem;">${item.title || 'No Title'}</div>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">
                                Price: ${item.price || 'N/A'} | Brand: ${item.brand || 'N/A'}
                            </div>
                        </div>`;
                    });
                    html += `</div>`;
                    sitemapTestResult.innerHTML = html;
                } else {
                    sitemapTestResult.style.color = '#ef4444';
                    sitemapTestResult.innerHTML = `🔴 <strong>Error:</strong> ${data.message || 'Failed to test sitemap.'}`;
                }
            })
            .catch(err => {
                btnTestSitemap.disabled = false;
                sitemapTestResult.style.color = '#ef4444';
                sitemapTestResult.innerHTML = `🔴 <strong>Error:</strong> ${err.message || 'An unexpected error occurred.'}`;
            });
        });
    }

    // E-commerce API Generate Key
    const btnGenerateApi = document.getElementById('btn-generate-api');
    const inputEcomApiKey = document.getElementById('id_ecom_api_key');
    if (btnGenerateApi) {
        btnGenerateApi.addEventListener('click', function() {
            const randomString = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
            inputEcomApiKey.value = 'sk_' + randomString;
            alert('API Key generated! Remember to click "Save Changes" to save this key.');
        });
    }

    // Google Sheet Test Connection
    const btnFetchSheet = document.getElementById('btn-fetch-sheet');
    const sheetFetchResult = document.getElementById('sheet-fetch-result');
    if (btnFetchSheet) {
        btnFetchSheet.addEventListener('click', function() {
            const url = document.getElementById('id_google_sheet_url').value.trim();
            
            if (!url) {
                alert('Please provide a Google Sheet URL.');
                return;
            }

            sheetFetchResult.style.display = 'block';
            sheetFetchResult.innerHTML = 'Fetching data... Please wait.';
            sheetFetchResult.style.color = 'var(--text-muted)';
            btnFetchSheet.disabled = true;

            const formData = new FormData();
            formData.append('google_sheet_url', url);

            fetch("{% url 'superuser_test_google_sheet_connection' object.id %}", {
                method: 'POST',
                headers: { 'X-CSRFToken': csrftoken },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                btnFetchSheet.disabled = false;
                if (data.status === 'success') {
                    sheetFetchResult.style.color = '#10b981';
                    sheetFetchResult.innerHTML = `🟢 <strong>${data.message}</strong>\n\nFetched Data Preview:\n\n${data.data}`;
                } else {
                    sheetFetchResult.style.color = '#ef4444';
                    sheetFetchResult.innerHTML = `🔴 <strong>Error:</strong> ${data.message}`;
                }
            })
            .catch(err => {
                btnFetchSheet.disabled = false;
                sheetFetchResult.style.color = '#ef4444';
                sheetFetchResult.innerHTML = `🔴 <strong>Error:</strong> ${err.message}`;
            });
        });
    }

    // E-commerce API Test Connection
    const btnTestEcom = document.getElementById('btn-test-ecom');
    const ecomTestResult = document.getElementById('ecom-test-result');
    if (btnTestEcom) {
        btnTestEcom.addEventListener('click', function() {
            const url = document.getElementById('id_ecom_api_url').value.trim();
            const key = document.getElementById('id_ecom_api_key').value.trim();
            
            if (!url || !key) {
                alert('Please provide both URL and API Key.');
                return;
            }

            ecomTestResult.style.display = 'block';
            ecomTestResult.innerHTML = 'Testing connection... Please wait.';
            ecomTestResult.style.color = 'var(--text-muted)';
            btnTestEcom.disabled = true;

            const formData = new FormData();
            formData.append('ecom_api_url', url);
            formData.append('ecom_api_key', key);

            fetch("{% url 'superuser_test_ecom_connection' object.id %}", {
                method: 'POST',
                headers: { 'X-CSRFToken': csrftoken },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                btnTestEcom.disabled = false;
                if (data.status === 'success') {
                    ecomTestResult.style.color = '#10b981';
                    ecomTestResult.innerHTML = `🟢 <strong>${data.message}</strong>\n\nFetched Data:\n` + JSON.stringify(data.data, null, 2);
                } else {
                    ecomTestResult.style.color = '#ef4444';
                    ecomTestResult.innerHTML = `🔴 <strong>Error:</strong> ${data.message}`;
                }
            })
            .catch(err => {
                btnTestEcom.disabled = false;
                ecomTestResult.style.color = '#ef4444';
                ecomTestResult.innerHTML = `🔴 <strong>Error:</strong> ${err.message}`;
            });
        });
    }

    {% endif %}
</script>
<style>
@keyframes spin {
    to { transform: rotate(360deg); }
}
</style>
{% endblock %}