<?php
declare(strict_types=1);
// ==================================================
// Nuclear Fancy Pants Edition™ — NUCLEAR+++
// File: /templates/social/facebook-connect.php
// Description: Facebook connection screen template - NUCLEAR+++
// Last Edited: 2026-03-28
// ==================================================

namespace AutoMarketerAI;

// No direct access
defined('ABSPATH') || exit;

// $connect_url passed from SocialPage::renderChannel()
// $auth_error  passed from SocialPage::renderChannel()

// Block reconnect if already connected — one page per install
$existing_connection = FacebookAuth::getConnection();
if ($existing_connection !== null) :
    $connected_page   = esc_html((string) ($existing_connection['page_name'] ?? 'your page'));
    $dashboard_url    = esc_url(admin_url('admin.php?page=automarketer-ai-social&channel=facebook'));
    $disconnect_nonce = wp_create_nonce('amai_fb_disconnect');
?>
<div class="amai-fb-connect-area">
    <div class="amai-fb-connect-shell">
        <div class="amai-fb-connect-hero">
            <div class="amai-fb-connect-icon">
                <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="52" height="52" rx="14" fill="#1877F2"/>
                    <path d="M33 16h-4.5a6.5 6.5 0 0 0-6.5 6.5v3H19v4.5h3V38h4.5V30h3.5l.75-4.5H26.5V22.5a1 1 0 0 1 1-1H33V16z" fill="white"/>
                </svg>
            </div>
            <h2 class="amai-fb-connect-heading">You're already connected</h2>
            <p class="amai-fb-connect-subheading">
                <strong><?php echo $connected_page; ?></strong> is connected and ready to go.
                AutoMarketer AI supports one Business Page per install.
            </p>
        </div>
        <div class="amai-fb-connect-action">
            <a href="<?php echo $dashboard_url; ?>" class="amai-fb-connect-btn">
                Go to your Facebook dashboard →
            </a>
            <p class="amai-fb-connect-fine">
                Need to switch pages?
                <button type="button" class="amai-fb-disconnect-trigger" id="amai-fb-disconnect-trigger">Disconnect <?php echo $connected_page; ?></button>
            </p>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════════
     DISCONNECT CONFIRMATION MODAL
══════════════════════════════════════════════════ -->
<div id="amai-disconnect-modal" class="amai-dc-modal">
    <div class="amai-dc-wrap">
        <div class="amai-dc-header">
            <div>
                <div class="amai-dc-eyebrow">Are you sure?</div>
                <div class="amai-dc-title">Disconnect <?php echo $connected_page; ?>?</div>
            </div>
            <button type="button" class="amai-dc-close" id="amai-dc-close">&#10005;</button>
        </div>

        <div class="amai-dc-body">
            <div class="amai-dc-warning-icon">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="20" cy="20" r="18" stroke="#DC2626" stroke-width="2.5" fill="none"/>
                    <path d="M20 12v10" stroke="#DC2626" stroke-width="2.5" stroke-linecap="round"/>
                    <circle cx="20" cy="27" r="1.5" fill="#DC2626"/>
                </svg>
            </div>

            <p class="amai-dc-warning-text">
                Disconnecting will remove AutoMarketer AI's connection to this page. Your drafts, scheduled posts, and business profile will be cleared.
            </p>

            <div class="amai-dc-consequences">
                <div class="amai-dc-consequence">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3l8 8M11 3l-8 8" stroke="#DC2626" stroke-width="1.5" stroke-linecap="round"/></svg>
                    Post history and drafts - deleted
                </div>
                <div class="amai-dc-consequence">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3l8 8M11 3l-8 8" stroke="#DC2626" stroke-width="1.5" stroke-linecap="round"/></svg>
                    Scheduled posts - cancelled
                </div>
                <div class="amai-dc-consequence">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 3l8 8M11 3l-8 8" stroke="#DC2626" stroke-width="1.5" stroke-linecap="round"/></svg>
                    Business profile - cleared
                </div>
            </div>

            <p class="amai-dc-warning-sub">This can't be undone.</p>
        </div>

        <div class="amai-dc-footer">
            <button type="button" class="amai-dc-btn-cancel" id="amai-dc-cancel">Keep it connected</button>
            <button type="button"
                    class="amai-dc-btn-disconnect"
                    id="amai-dc-confirm-btn"
                    data-nonce="<?php echo esc_attr($disconnect_nonce); ?>">
                Yes, disconnect
            </button>
        </div>
    </div>
</div>
<?php
    return;
endif;

// Not connected — normal connect flow below
$auth_error    = $auth_error ?? get_transient('amai_fb_auth_error');
$show_cancelled = ($auth_error === 'user_cancelled');
$show_no_pages  = ($auth_error === 'no_business_pages_found');
$show_error     = (!$show_cancelled && !$show_no_pages && !empty($auth_error));

$generic_errors = [
    'invalid_state' => 'Something went wrong with the authorization. Please try again.',
    'missing_code'  => 'Authorization was incomplete. Please try again.',
    'save_failed'   => 'We couldn\'t save your connection. Please try again.',
    'http_error'    => 'A network error occurred. Please check your connection and try again.',
];
$error_msg        = $show_error ? ($generic_errors[$auth_error] ?? 'Something went wrong. Please try again.') : '';
$show_disconnected = isset($_GET['disconnected']);
?>

<?php if ($show_disconnected) : ?>
<div class="amai-fb-toast amai-fb-toast--success" id="amai-fb-disconnected-toast">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="#2D9E6B" stroke-width="1.5"/><path d="M5 8l2 2 4-4" stroke="#2D9E6B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <span>Page disconnected. Connect a new one whenever you're ready.</span>
</div>
<?php endif; ?>

<div class="amai-fb-connect-area">

    <?php if ($show_cancelled) : ?>
    <div class="amai-fb-notice amai-fb-notice-soft" id="amai-fb-notice-auto">
        No problem - connect whenever you're ready.
    </div>
    <?php endif; ?>

    <?php if ($show_no_pages) : ?>
    <div class="amai-fb-notice amai-fb-notice-warn">
        <div class="amai-fb-notice-body">
            <strong>We couldn't find a Business Page on that account.</strong>
            Personal profiles can't be used with AutoMarketer AI. A Business Page looks more professional and takes about 4 minutes to create - it's free.
            <button type="button" class="amai-fb-notice-link amai-create-page-trigger">Create your Business Page (it's free) →</button>
        </div>
    </div>
    <?php endif; ?>

    <?php if ($show_error) : ?>
    <div class="amai-fb-notice amai-fb-notice-warn">
        <div class="amai-fb-notice-body"><?php echo esc_html($error_msg); ?></div>
    </div>
    <?php endif; ?>

    <div class="amai-fb-connect-shell">

        <div class="amai-fb-connect-hero">
            <div class="amai-fb-connect-icon">
                <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="52" height="52" rx="14" fill="#1877F2"/>
                    <path d="M33 16h-4.5a6.5 6.5 0 0 0-6.5 6.5v3H19v4.5h3V38h4.5V30h3.5l.75-4.5H26.5V22.5a1 1 0 0 1 1-1H33V16z" fill="white"/>
                </svg>
            </div>
            <h2 class="amai-fb-connect-heading">Connect your Facebook Business Page</h2>
            <p class="amai-fb-connect-subheading">
                We'll write, schedule, and post to Facebook for you - Monday through Friday,
                every week. All you do is approve or let it run.
            </p>
        </div>

        <div class="amai-fb-connect-newbie-zone">
            <div class="amai-fb-connect-commitment-notice">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 1.5L1 13.5h14L8 1.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round" fill="none"/>
                    <path d="M8 6.5v3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
                    <circle cx="8" cy="11.5" r="0.6" fill="currentColor"/>
                </svg>
                <span>Take a moment to pick the right page. Switching pages later will clear your post history and business profile.</span>
            </div>

            <div class="amai-fb-help-block">
                <div class="amai-fb-help-heading">Don't have a Facebook Business Page yet?</div>
                <p class="amai-fb-help-body">
                    No problem - a Business Page is separate from your personal profile, it's free, and takes about 4 minutes.
                    We'll walk you through the whole thing.
                </p>
                <button type="button" class="amai-fb-help-link amai-create-page-trigger">
                    Create your Business Page (it's free) →
                </button>
            </div>
        </div>

        <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">Click Connect below</div>
                    <div class="amai-fb-step-desc">You'll be taken to Facebook to authorize AutoMarketer AI. We only ask for the permissions we actually use - nothing else.</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">Pick your Business Page</div>
                    <div class="amai-fb-step-desc">You'll see a list of Pages you manage. Select the one you want us to post to. Personal profiles won't appear - that's intentional.</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 generating content</div>
                    <div class="amai-fb-step-desc">You'll land on your dashboard where you can set up your business profile and generate your first week of posts.</div>
                </div>
            </div>
        </div>

        <div class="amai-fb-connect-action">
            <a href="<?php echo esc_url($connect_url); ?>" class="amai-fb-connect-btn">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="18" height="18" rx="5" fill="white" fill-opacity="0.2"/>
                    <path d="M11.5 5h-1.5a2.25 2.25 0 0 0-2.25 2.25v1.125H6.5v1.5h1.25V13.5h1.5V9.875H10.5l.375-1.5H9.25V7.25a.75.75 0 0 1 .75-.75h1.5V5z" fill="white"/>
                </svg>
                Connect with Facebook
            </a>
            <p class="amai-fb-connect-fine">We never post without your knowledge. You're always in control.</p>
        </div>

    </div>
</div>


<!-- ══════════════════════════════════════════════════
     CREATE PAGE WALKTHROUGH MODAL
══════════════════════════════════════════════════ -->

<div id="amai-create-page-modal" class="amai-cp-modal">
    <div class="amai-cp-wrap">

        <div class="amai-cp-header">
            <div>
                <div class="amai-cp-eyebrow">Facebook Business Page</div>
                <div class="amai-cp-title">Creating a page is easier than you think</div>
            </div>
            <button type="button" class="amai-cp-close" id="amai-cp-close">&#10005;</button>
        </div>

        <div class="amai-cp-progress">
            <div class="amai-cp-labels" id="amai-cp-labels"></div>
            <div class="amai-cp-track"><div class="amai-cp-fill" id="amai-cp-fill"></div></div>
        </div>
        <div class="amai-cp-counter" id="amai-cp-counter">Step 1 of 5</div>

        <div class="amai-cp-body" id="amai-cp-body"></div>

        <div class="amai-cp-footer">
            <div class="amai-cp-nav">
                <button type="button" class="amai-cp-btn-back" id="amai-cp-back" disabled>← Back</button>
                <button type="button" class="amai-cp-btn-next" id="amai-cp-next">Next →</button>
                <a href="https://www.facebook.com/pages/creation/"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="amai-cp-btn-go amai-cp-btn-go-fb"
                   id="amai-cp-go-fb">
                    Let's go - open Facebook →
                </a>
                <button type="button"
                        class="amai-cp-btn-go amai-cp-btn-go-connect"
                        id="amai-cp-go-connect">
                    ✓ Got It - Back to Connect
                </button>
            </div>
            <div class="amai-cp-tip" id="amai-cp-tip">Takes about 4 minutes total</div>
        </div>

    </div>
</div>