{% extends "admin_base.html" %}

{% block page_title %}Meta Cloud API Dashboard{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-6xl space-y-6 px-4 py-6 sm:px-6 lg:px-8">
    <header class="space-y-2">
        <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">Meta Cloud API</h1>
        <p class="max-w-3xl text-sm text-muted sm:text-base">Connect WhatsApp Business, verify webhook delivery, and send customer notifications.</p>
    </header>

    <section class="blocks-card space-y-4" aria-labelledby="meta-status-heading">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div><h2 id="meta-status-heading" class="text-lg font-semibold">Webhook and integration status</h2><p class="mt-1 text-sm text-muted">Use the endpoint and verify token when configuring webhooks in Meta.</p></div>
            <button type="button" class="blocks-button blocks-button-secondary hidden" id="btn-sync-templates"><i class="fas fa-sync" aria-hidden="true"></i> Sync templates</button>
        </div>
        <div id="status-display" class="space-y-2" role="status" aria-live="polite"><p class="text-sm text-muted">Loading configuration status…</p></div>
    </div>

    <div class="hidden rounded-xl border border-brand/30 bg-brand/5 p-4 text-sm" id="connect-banner-card" role="status">
        WhatsApp is not connected yet. <a class="font-semibold text-brand underline underline-offset-2" href="/plugins/meta-cloud/connection">Connect WhatsApp</a> to start sending messages.
    </div>

    <section class="blocks-card hidden space-y-5" id="send-card" aria-labelledby="meta-send-heading">
        <div><h2 id="meta-send-heading" class="text-lg font-semibold">Send a message or broadcast</h2><p class="mt-1 text-sm text-muted">Choose a recipient group or enter one or more phone numbers.</p></div>
        <form id="meta-cloud-send-form" class="space-y-4">
            <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
                <div class="space-y-2">
                    <label for="recipient-group" class="blocks-label">Recipient group (optional)</label>
                    <select id="recipient-group" class="blocks-input"><option value="">No group — send to phone number(s)</option></select>
                    <p class="text-xs text-muted">First-time contacts need an approved template.</p>
                </div>
                <div class="space-y-2"><label for="recipient-phone" class="blocks-label">Phone number(s)</label><input type="tel" id="recipient-phone" class="blocks-input" placeholder="+1234567890; separate numbers with commas"></div>
                <div class="space-y-2 lg:col-span-2"><label for="message-text" class="blocks-label">Message</label><textarea id="message-text" class="blocks-input min-h-28" rows="4" placeholder="Write your message…"></textarea></div>
                <div class="hidden space-y-2 lg:col-span-2" id="template-group"><label for="template-name" class="blocks-label">Approved template name</label><input type="text" id="template-name" class="blocks-input" placeholder="e.g. hello_world"><p class="text-xs text-muted">Used for group members you have never chatted with.</p></div>
            </div>
            <div class="blocks-workspace-notice" data-workspace-notice role="status" aria-live="polite" tabindex="-1" hidden></div>
            <button type="submit" class="blocks-button blocks-button-primary"><i class="fas fa-paper-plane" aria-hidden="true"></i> Send message</button>
        </form>
    </section>
</main>

<!-- Safe data passing via HTML data attributes as per guidelines -->
<div id="meta-cloud-data" 
     data-configured="{{ bot_configured }}" 
     data-base-url="{{ base_url }}"
     data-verify-token="{{ verify_token }}">
</div>

<script src="/plugins/meta-cloud/assets/js/meta_cloud_admin.js"></script>
{% endblock %}