{% extends "admin_base.html" %}

{% block page_title %}WhatsApp Connection{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-5xl 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">WhatsApp Connection</h1>
        <p class="max-w-3xl text-sm text-muted sm:text-base">Connect your WhatsApp account using QR login. Supports personal and WhatsApp Business accounts.</p>
    </header>

    <section class="blocks-card space-y-3" aria-labelledby="mc-connection-heading">
        <h2 id="mc-connection-heading" class="text-lg font-semibold">Connection status</h2>
        <div id="mc-conn-status" role="status" aria-live="polite"><p class="text-sm text-muted">Loading connection status…</p></div>
    </section>

    <section class="blocks-card space-y-5" id="mc-qr-card" aria-labelledby="mc-qr-heading">
        <div><h2 id="mc-qr-heading" class="text-lg font-semibold">WhatsApp QR connection</h2><p class="mt-1 text-sm text-muted">Scan the QR code with your WhatsApp mobile app to connect.</p></div>
        <div id="mc-qr-error" class="hidden rounded-lg border border-danger/30 bg-danger/5 p-3 text-sm text-danger" role="alert" aria-live="assertive"></div>
        <div class="flex min-h-64 flex-col items-center justify-center gap-4 rounded-xl border border-border p-4 text-center">
            <img id="mc-qr-img" src="" alt="WhatsApp connection QR code" class="hidden max-h-72 max-w-full rounded-lg border border-border">
            <div id="mc-qr-placeholder" class="text-sm text-muted">Waiting for QR…</div>
            <div id="mc-qr-status" class="text-sm font-medium" role="status" aria-live="polite"></div>
        </div>
        <div class="flex flex-col justify-center gap-3 sm:flex-row">
            <button type="button" class="blocks-button blocks-button-primary" id="mc-btn-start">Start QR login</button>
            <button type="button" class="blocks-button blocks-button-secondary hidden" id="mc-btn-disconnect">Disconnect</button>
        </div>
    </section>

    <section class="blocks-card hidden space-y-2" id="mc-setup-card" aria-labelledby="mc-setup-heading">
        <h2 id="mc-setup-heading" class="text-lg font-semibold">Setup required</h2>
        <p class="text-sm text-muted">Configure the WhatsApp service URL in plugin settings. Once set, click “Start QR login”.</p>
    </section>
</main>

<div id="mc-conn-data" data-connected="{{ connected }}"></div>
<script src="/plugins/meta-cloud/assets/js/meta_cloud_connect.js"></script>
{% endblock %}