<?php
declare(strict_types=1);
// ==================================================
// Nuclear Fancy Pants Edition™ — NUCLEAR+++
// File: /templates/social/tiktok-connect.php
// Description: TikTok connection page - OAuth flow entry point - NUCLEAR+++
// Last Edited: 2026-04-15
// ==================================================

namespace AutoMarketerAI;

defined('ABSPATH') || exit;

$connect_url = TikTokAuth::getAuthUrl();
$auth_error  = get_transient('amai_tiktok_auth_error');
if ($auth_error !== false) {
    delete_transient('amai_tiktok_auth_error');
}
?>

<div class="amai-connect-card">

    <?php if ($auth_error !== false) : ?>
    <div class="amai-connect-notice amai-connect-notice-error amai-temp-notice">
        <div class="amai-connect-notice-inner">
            <?php
            $error_messages = [
                'tiktok_auth_denied'          => 'You cancelled the TikTok authorization. No worries - ready when you are.',
                'tiktok_missing_params'       => 'Something went wrong during authorization. Please try again.',
                'tiktok_invalid_state'        => 'Security check failed. Please try connecting again.',
                'tiktok_token_exchange_failed' => 'Could not complete the connection. Please try again.',
                'tiktok_empty_token'          => 'Authorization failed. Please try again.',
            ];
            echo esc_html($error_messages[$auth_error] ?? 'Something went wrong. Please try again.');
            ?>
        </div>
    </div>
    <?php endif; ?>

    <div class="amai-connect-header">
        <div class="amai-connect-icon amai-connect-icon-tiktok">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="32" height="32" rx="8" fill="#000"/>
                <path d="M20.6 6h-2.4v9.9a2.9 2.9 0 1 1-2-2.7V10a5.2 5.2 0 1 0 4.4 5.2V11c.9.5 1.9.8 2.9.8v-2.3c-1.6-.2-2.9-1.3-2.9-3V6z" fill="white"/>
            </svg>
        </div>
        <h2 class="amai-connect-title">Connect your TikTok account</h2>
        <p class="amai-connect-subtitle">Link your TikTok account so AutoMarketer AI can create and publish photo carousel posts for you.</p>
    </div>

    <div class="amai-connect-steps">
        <div class="amai-connect-step">
            <div class="amai-connect-step-num">1</div>
            <div class="amai-connect-step-body">
                <div class="amai-connect-step-title">Authorize with TikTok</div>
                <div class="amai-connect-step-desc">Click the button below to open TikTok login. Grant AutoMarketer AI permission to post on your behalf.</div>
            </div>
        </div>
        <div class="amai-connect-step">
            <div class="amai-connect-step-num">2</div>
            <div class="amai-connect-step-body">
                <div class="amai-connect-step-title">We connect your account</div>
                <div class="amai-connect-step-desc">Once authorized, your TikTok account links automatically. No extra setup needed.</div>
            </div>
        </div>
        <div class="amai-connect-step">
            <div class="amai-connect-step-num">3</div>
            <div class="amai-connect-step-body">
                <div class="amai-connect-step-title">Start generating content</div>
                <div class="amai-connect-step-desc">AutoMarketer AI creates photo carousel posts tailored to your business and schedules them throughout the week.</div>
            </div>
        </div>
    </div>

    <div class="amai-fb-connect-newbie-zone">
        <div class="amai-fb-help-block">
            <div class="amai-fb-help-heading">Don't have a TikTok Business Account yet?</div>
            <p class="amai-fb-help-body">
                No problem - a Business Account is free, takes about 3 minutes, and works on your phone or computer.
                We'll walk you through the whole thing.
            </p>
            <button type="button" class="amai-fb-help-link amai-create-tk-trigger">
                Create your TikTok Business Account (it's free) &rarr;
            </button>
        </div>
    </div>

    <div class="amai-connect-action">
        <a href="<?php echo esc_url($connect_url); ?>" class="amai-connect-btn amai-connect-btn-tiktok">
            <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.6 3.5h-1.3v5.5a1.6 1.6 0 1 1-1.1-1.5V6.2a2.9 2.9 0 1 0 2.4 2.9V6c.5.3 1 .4 1.5.4V5.1c-.9-.1-1.5-.7-1.5-1.6z" fill="white"/>
            </svg>
            Connect with TikTok
        </a>
        <p class="amai-connect-fine">We never post without your approval. You review every post before it goes live.</p>
    </div>

    <div class="amai-connect-help">
        <div class="amai-connect-help-heading">How does TikTok posting work?</div>
        <p class="amai-connect-help-body">
            AutoMarketer AI creates photo carousel posts for TikTok - multiple images with a caption.
            Each post uses images sourced from your image provider and copy written by your AI provider.
            Posts are scheduled throughout the week at optimal times.
        </p>
        <div class="amai-connect-help-heading" style="margin-top: 16px;">Important note</div>
        <p class="amai-connect-help-body">
            While our TikTok app is under review, posts will be published as private (visible only to you).
            Once approved by TikTok, posts will go out publicly as scheduled.
        </p>
    </div>

</div>

<!-- ══════════════════════════════════════════════════
     CREATE TIKTOK ACCOUNT WALKTHROUGH MODAL
══════════════════════════════════════════════════ -->
<div id="amai-create-tk-modal" class="amai-cp-modal">
    <div class="amai-cp-wrap">
        <div class="amai-cp-header">
            <div>
                <div class="amai-cp-eyebrow">TikTok Business Account</div>
                <div class="amai-cp-title">Set up in about 3 minutes</div>
            </div>
            <button type="button" class="amai-cp-close" id="amai-tk-cp-close">&#10005;</button>
        </div>
        <div class="amai-cp-progress">
            <div class="amai-cp-labels" id="amai-tk-cp-labels"></div>
            <div class="amai-cp-track"><div class="amai-cp-fill" id="amai-tk-cp-fill"></div></div>
        </div>
        <div class="amai-cp-counter" id="amai-tk-cp-counter">Step 1 of 4</div>
        <div class="amai-cp-body" id="amai-tk-cp-body"></div>
        <div class="amai-cp-footer">
            <div class="amai-cp-nav">
                <button type="button" class="amai-cp-btn-back" id="amai-tk-cp-back" disabled>&larr; Back</button>
                <button type="button" class="amai-cp-btn-next" id="amai-tk-cp-next">Next &rarr;</button>
                <button type="button" class="amai-cp-btn-go amai-cp-btn-go-connect" id="amai-tk-cp-done" style="display:none;">&#10003; Got It - Back to Connect</button>
            </div>
            <div class="amai-cp-tip" id="amai-tk-cp-tip">Takes about 3 minutes total</div>
        </div>
    </div>
</div>