<?php
declare(strict_types=1);
// ==================================================
// Nuclear Fancy Pants Edition™ — NUCLEAR+++
// File: /templates/social/x-connect.php
// Description: X (Twitter) not-connected screen - OAuth connect flow - NUCLEAR+++
// Last Edited: 2026-04-22
// ==================================================

namespace AutoMarketerAI;

defined('ABSPATH') || exit;

$connect_url = XAuth::getAuthUrl();
if ($connect_url === '') {
    echo '<div class="amai-notice amai-notice--warn" style="margin:32px auto;max-width:640px;padding:20px 24px;background:#FEF3C7;border:1.5px solid #FCD34D;border-radius:8px;font-size:14px;color:#78716C;">'
        . '<strong style="color:#57534E;">X is not configured.</strong> '
        . 'The <code>AMAI_X_CLIENT_ID</code> and <code>AMAI_X_CLIENT_SECRET</code> constants are missing from <code>wp-config.php</code>. '
        . 'Add them to enable X.</div>';
    return;
}
$error_msg   = isset($_GET['amai_x_error']) ? sanitize_text_field(wp_unslash($_GET['amai_x_error'])) : '';
?>
<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:#000000;border-radius:14px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="white"/>
                </svg>
            </div>
            <h2 class="amai-fb-connect-heading">Connect your X account</h2>
            <p class="amai-fb-connect-subheading">
                Link your X account and we'll create and post content for you automatically.
                Short-form posts, threads-ready copy, all written in your voice.
            </p>
        </div>

        <?php if ($error_msg !== '') : ?>
        <div class="amai-fb-connect-error">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.3" fill="none"/>
                <path d="M8 4.5v4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
                <circle cx="8" cy="11" r="0.6" fill="currentColor"/>
            </svg>
            <span><?php echo esc_html($error_msg); ?></span>
        </div>
        <?php endif; ?>

        <div class="amai-fb-connect-newbie-zone">
            <div class="amai-fb-help-block">
                <div class="amai-fb-help-heading">Don't have an X account yet?</div>
                <p class="amai-fb-help-body">
                    Creating an X account is free and takes about 2 minutes.
                    You can use it to share updates, connect with customers, and build your brand.
                </p>
                <a href="https://x.com/i/flow/signup" target="_blank" rel="noopener noreferrer" class="amai-fb-help-link">
                    Create an X account &rarr;
                </a>
            </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">Authorize with X</div>
                    <div class="amai-fb-step-desc">Click the button below and sign in with your X account. We'll ask for permission to post on your behalf.</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">We generate your content</div>
                    <div class="amai-fb-step-desc">AI writes a week of posts tailored to your business - punchy, on-brand, and ready to review.</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">Review, tweak if you want, and approve. Posts go out at the best times for engagement.</div>
                </div>
            </div>
        </div>

        <div class="amai-fb-connect-action">
            <a href="<?php echo esc_url($connect_url); ?>" class="amai-fb-connect-btn" style="background:#000000;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="white"/>
                </svg>
                Connect with X
            </a>
            <p class="amai-fb-connect-fine">We never post without your knowledge. You're always in control.</p>
        </div>

    </div>
</div>