<?php
declare(strict_types=1);
// ==================================================
// Nuclear Fancy Pants Edition™ — NUCLEAR+++
// File: /templates/social/instagram-connect.php
// Description: Instagram not-connected screen — explains connection via Facebook OAuth - NUCLEAR+++
// Last Edited: 2026-04-13
// ==================================================

namespace AutoMarketerAI;

defined('ABSPATH') || exit;

$fb_connection  = FacebookAuth::getConnection();
$fb_connected   = $fb_connection !== null;
$reconnect_url  = FacebookAuth::getAuthUrl();
?>
<div class="amai-fb-connect-area">
    <div class="amai-fb-connect-shell">

        <div class="amai-fb-connect-hero">
            <div class="amai-fb-connect-icon" style="background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-radius:14px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="5" y="5" width="18" height="18" rx="5" stroke="white" stroke-width="1.8" fill="none"/>
                    <circle cx="14" cy="14" r="4.5" stroke="white" stroke-width="1.8" fill="none"/>
                    <circle cx="19.5" cy="8.5" r="1.2" fill="white"/>
                </svg>
            </div>
            <?php if ($fb_connected) : ?>
            <h2 class="amai-fb-connect-heading">Instagram is disconnected</h2>
            <p class="amai-fb-connect-subheading">
                Your Facebook Page is still connected. Click below to re-check and reconnect your Instagram account.
            </p>
            <?php else : ?>
            <h2 class="amai-fb-connect-heading">Instagram isn't linked yet</h2>
            <p class="amai-fb-connect-subheading">
                Instagram connects through your Facebook Business Page - no separate login needed.
                Connect your Facebook Business Page first, and Instagram will link automatically if you have an Instagram Business Account attached to it.
            </p>
            <?php endif; ?>
        </div>

        <?php if ($fb_connected) : ?>
        <div class="amai-fb-connect-steps">
            <div class="amai-fb-connect-step">
                <div class="amai-fb-step-num">1</div>
                <div class="amai-fb-step-body">
                    <div class="amai-fb-step-title">Make sure your accounts are linked</div>
                    <div class="amai-fb-step-desc">In Meta Business Suite, go to Settings → Instagram → Connect Account. Your Instagram must be a Business or Creator account linked to your Facebook Page.</div>
                </div>
            </div>
            <div class="amai-fb-connect-step">
                <div class="amai-fb-step-num">2</div>
                <div class="amai-fb-step-body">
                    <div class="amai-fb-step-title">Click below to reconnect</div>
                    <div class="amai-fb-step-desc">AutoMarketer AI will re-check your Facebook Page and pick up your Instagram account automatically.</div>
                </div>
            </div>
        </div>
        <?php else : ?>
        <div class="amai-fb-connect-steps">
            <div class="amai-fb-connect-step">
                <div class="amai-fb-step-num">1</div>
                <div class="amai-fb-step-body">
                    <div class="amai-fb-step-title">Link Instagram to your Facebook Page</div>
                    <div class="amai-fb-step-desc">In Meta Business Suite, go to Settings → Instagram → Connect Account. Your Instagram must be a Business or Creator account.</div>
                </div>
            </div>
            <div class="amai-fb-connect-step">
                <div class="amai-fb-step-num">2</div>
                <div class="amai-fb-step-body">
                    <div class="amai-fb-step-title">Come back and check again</div>
                    <div class="amai-fb-step-desc">Once linked in Meta, click the button below. AutoMarketer AI will re-check your Facebook Page and detect your Instagram account automatically.</div>
                </div>
            </div>
            <div class="amai-fb-connect-step">
                <div class="amai-fb-step-num">3</div>
                <div class="amai-fb-step-body">
                    <div class="amai-fb-step-title">Start posting to Instagram</div>
                    <div class="amai-fb-step-desc">AutoMarketer AI will generate Instagram-optimised captions with hashtags every week, ready for your approval.</div>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <div class="amai-fb-connect-action">
            <a href="<?php echo esc_url($reconnect_url); ?>" class="amai-fb-connect-btn" style="background:#E1306C;">
                <svg width="18" height="18" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="5" y="5" width="18" height="18" rx="5" stroke="white" stroke-width="1.8" fill="none"/>
                    <circle cx="14" cy="14" r="4.5" stroke="white" stroke-width="1.8" fill="none"/>
                    <circle cx="19.5" cy="8.5" r="1.2" fill="white"/>
                </svg>
                <?php echo $fb_connected ? 'Reconnect Instagram' : 'Connect Facebook to get started'; ?>
            </a>
            <p class="amai-fb-connect-fine">Instagram connects automatically once your accounts are linked in Meta Business Suite.</p>
        </div>

    </div>
</div>