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

{% block title %}Site Settings | ChatLab{% endblock %}
{% block settings_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Global Site Settings</h2>
        <p class="page-subtitle">Configure platform-wide Meta (Facebook) and WhatsApp API Webhooks.</p>
    </div>
</div>

<!-- Meta Webhooks (SaaS settings) -->
<div class="glass-card" style="padding: 2.5rem; margin-top: 1rem;">
    <form method="post">
        {% csrf_token %}
        
        <div style="margin-bottom: 2rem;">
            <h3 style="font-family: var(--font-heading); font-size: 1.25rem; margin-top: 0; margin-bottom: 0.5rem; color: var(--primary); display: flex; align-items: center; gap: 0.5rem;">
                ⚙️ Global Meta App Webhooks Configuration
            </h3>
            <p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.6;">
                Configure a single webhook Callback URL in your Meta (Facebook) Developer App. Our platform uses this global endpoint to route events to individual tenant companies by matching their Page ID or Phone Number ID.
            </p>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;">
                <div>
                    <label class="form-label" style="font-weight: 600;">Facebook Webhook Callback URL</label>
                    <div style="display: flex; gap: 0.5rem; align-items: center;">
                        <code style="font-size: 0.82rem; padding: 0.65rem; background: rgba(0,0,0,0.25); border: 1px solid var(--border-color); display: block; word-break: break-all; flex: 1; font-family: monospace;" id="fb-webhook-url"></code>
                        <button type="button" class="btn btn-secondary" onclick="copyToClipboard('fb-webhook-url')" style="padding: 0.5rem 0.75rem; font-size: 0.8rem; white-space: nowrap; border-radius: 0;">Copy</button>
                    </div>
                </div>
                <div>
                    <label class="form-label" style="font-weight: 600;">WhatsApp Webhook Callback URL</label>
                    <div style="display: flex; gap: 0.5rem; align-items: center;">
                        <code style="font-size: 0.82rem; padding: 0.65rem; background: rgba(0,0,0,0.25); border: 1px solid var(--border-color); display: block; word-break: break-all; flex: 1; font-family: monospace;" id="wa-webhook-url"></code>
                        <button type="button" class="btn btn-secondary" onclick="copyToClipboard('wa-webhook-url')" style="padding: 0.5rem 0.75rem; font-size: 0.8rem; white-space: nowrap; border-radius: 0;">Copy</button>
                    </div>
                </div>
            </div>

            <div class="form-group" style="margin-top: 1rem;">
                <label for="id_fb_app_verify_token" class="form-label" style="font-weight: 600;">Global Verify Token (ভেরিফিকেশন টোকেন - ১২ ডিজিটের সংখ্যা)</label>
                <div style="display: flex; gap: 0.5rem; align-items: center;">
                    <input type="text" name="fb_app_verify_token" id="id_fb_app_verify_token" class="form-input" value="{{ settings.fb_app_verify_token|default:'' }}" style="font-family: monospace; font-size: 0.95rem; font-weight: bold; letter-spacing: 0.1em; flex: 1;" required placeholder="e.g. 123456789012" pattern="\d{12}">
                    <button type="button" class="btn btn-secondary" onclick="regenerateAppVerifyToken()" style="padding: 0.5rem 0.75rem; font-size: 0.8rem; white-space: nowrap; border-radius: 0;">Regenerate</button>
                </div>
                <span style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.35rem; display: block;">
                    এটি আপনার মেটা (Facebook) ডেভেলপার অ্যাপে Webhook সেটিংস ভেরিফাই করার জন্য ব্যবহৃত হবে। (Must be exactly 12 numeric digits).
                </span>
            </div>
        </div>

        <!-- Meta Developer Hub Guidance / Explanation -->
        <div style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 2rem;">
            <h4 style="font-family: var(--font-heading); color: #f59e0b; margin: 0 0 0.75rem 0; font-size: 1rem;">
                ⚠️ Important Guidance on Meta Developer Settings & Validation Error
            </h4>
            
            <div style="background: rgba(245, 158, 11, 0.05); border-left: 4px solid #f59e0b; padding: 1.25rem; font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary);">
                <div style="font-weight: bold; margin-bottom: 0.5rem; color: #fff;">
                    ভেরিফিকেশন টোকেন (Verify Token) বনাম পেজ এক্সেস টোকেন (Page Access Token)
                </div>
                <p style="margin: 0 0 0.75rem 0;">
                    ১. ওপরে যে <strong>Verify Token (ভেরিফিকেশন টোকেন)</strong> দেখতে পাচ্ছেন, এটি মেটা ডেভেলপার পোর্টালে <strong>Webhook Setup</strong> করার সময় <strong>Callback URL</strong>-এর সাথে মেলাতে ব্যবহার করা হয়। এটি সেট করার পর মেটা আমাদের সার্ভারের সাথে সফলভাবে সংযুক্ত হয়ে যাবে।
                </p>
                <p style="margin: 0 0 0.75rem 0;">
                    ২. <strong>গুরুত্বপূর্ণ ভুল ধারণা:</strong> মেটা ডেভেলপার পোর্টালের <strong>Messenger API Settings</strong>-এর নিচে <strong>"API Integration Helper"</strong> মেনু বা কোনো <strong>"Validate"</strong> বাটনে এই ১২ ডিজিটের টোকেনটি দিলে <strong>Invalid</strong> দেখাবে। এটি সম্পূর্ণ স্বাভাবিক এবং কোনো সমস্যা নয়।
                </p>
                <p style="margin: 0;">
                    ৩. কারণ ওই <strong>"Validate/API Integration Helper"</strong> ফিল্ডে আমাদের সিস্টেমের ভেরিফিকেশন টোকেন নয়, বরং মেটার নিজের জেনারেট করা <strong>Facebook Page Access Token</strong> দিতে হয়। আমাদের সিস্টেমের কোম্পানির এডিটিং ফর্ম থেকে (Edit Credentials) পেজ আইডি ও মেটা থেকে জেনারেট করা পেজ এক্সেস টোকেন সঠিকভাবে বসালেই সিস্টেম ফেসবুকে মেসেজ পাঠাতে এবং মেসেজ পড়তে পারবে।
                </p>
            </div>
        </div>

        <div class="form-actions" style="margin-top: 2.5rem;">
            <button class="btn btn-primary" type="submit">
                Save Settings
            </button>
            <a href="{% url 'superuser_dashboard' %}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>

<script>
    // Generate Webhook Callback URLs dynamically
    const protocol = window.location.protocol;
    const host = window.location.host;
    document.getElementById('fb-webhook-url').textContent = `${protocol}//${host}/webhooks/facebook/`;
    document.getElementById('wa-webhook-url').textContent = `${protocol}//${host}/webhooks/whatsapp/`;

    function copyToClipboard(elementId) {
        const text = document.getElementById(elementId).textContent;
        navigator.clipboard.writeText(text).then(() => {
            alert('Callback URL copied to clipboard!');
        }).catch(err => {
            console.error('Could not copy text: ', err);
        });
    }

    function regenerateAppVerifyToken() {
        let rand = "";
        for (let i = 0; i < 12; i++) {
            rand += Math.floor(Math.random() * 10);
        }
        document.getElementById('id_fb_app_verify_token').value = rand;
    }
</script>
{% endblock %}