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

namespace AutoMarketerAI;

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

// $connect_url passed from LinkedInChannel::render()

// Credentials not yet configured — show pending state
if (!LinkedInAuth::isConfigured()) :
?>
<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="#0A66C2"/>
                    <path d="M18 21h4v13h-4V21zm2-6.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM26 21h3.8v1.8h.1c.5-1 1.8-2.1 3.7-2.1 4 0 4.7 2.6 4.7 6V34h-4v-6.5c0-1.6 0-3.6-2.2-3.6s-2.6 1.7-2.6 3.5V34H26V21z" fill="white"/>
                </svg>
            </div>
            <h2 class="amai-fb-connect-heading">LinkedIn - Coming Soon</h2>
            <p class="amai-fb-connect-subheading">
                LinkedIn support is on its way. Once enabled, AutoMarketer AI will write,
                schedule, and post to your LinkedIn Page every week - automatically.
            </p>
        </div>
    </div>
</div>
<?php
    return;
endif;

// Block reconnect if already connected — one org per install
$existing_connection = LinkedInAuth::getConnection();
if ($existing_connection !== null) :
    $connected_org    = esc_html((string) ($existing_connection['organization_name'] ?? 'your page'));
    $dashboard_url    = esc_url(admin_url('admin.php?page=automarketer-ai-social&channel=linkedin'));
    $disconnect_nonce = wp_create_nonce('amai_li_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="#0A66C2"/>
                    <path d="M18 21h4v13h-4V21zm2-6.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM26 21h3.8v1.8h.1c.5-1 1.8-2.1 3.7-2.1 4 0 4.7 2.6 4.7 6V34h-4v-6.5c0-1.6 0-3.6-2.2-3.6s-2.6 1.7-2.6 3.5V34H26V21z" 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_org; ?></strong> is connected and ready to go.
                AutoMarketer AI supports one LinkedIn 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 LinkedIn dashboard →
            </a>
            <p class="amai-fb-connect-fine">
                Need to switch pages?
                <button type="button" class="amai-fb-disconnect-trigger" id="amai-li-disconnect-trigger">Disconnect <?php echo $connected_org; ?></button>
            </p>
        </div>
    </div>
</div>

<!-- Disconnect confirmation modal -->
<div id="amai-li-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_org; ?>?</div>
            </div>
            <button type="button" class="amai-dc-close" id="amai-li-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-li-dc-cancel">Keep it connected</button>
            <form method="post" action="<?php echo esc_url(admin_url('admin.php?page=automarketer-ai-social&channel=linkedin')); ?>" style="display:inline;">
                <?php wp_nonce_field('amai_li_disconnect'); ?>
                <input type="hidden" name="amai_li_action" value="disconnect"/>
                <button type="submit" class="amai-dc-btn-disconnect">Yes, disconnect</button>
            </form>
        </div>
    </div>
</div>

<script>
(function () {
    var trigger = document.getElementById('amai-li-disconnect-trigger');
    var modal   = document.getElementById('amai-li-disconnect-modal');
    var close   = document.getElementById('amai-li-dc-close');
    var cancel  = document.getElementById('amai-li-dc-cancel');

    if (!trigger || !modal) { return; }

    function openModal()  { modal.classList.add('is-open'); }
    function closeModal() { modal.classList.remove('is-open'); }

    trigger.addEventListener('click', openModal);
    close.addEventListener('click', closeModal);
    cancel.addEventListener('click', closeModal);

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && modal.classList.contains('is-open')) { closeModal(); }
    });
}());
</script>
<?php
    return;
endif;

// Not connected — normal connect flow below
$auth_error        = $auth_error ?? get_transient('amai_li_auth_error');
$show_cancelled    = ($auth_error === 'user_cancelled');
$show_no_orgs      = ($auth_error === 'no_orgs_found' || $auth_error === 'no_administered_orgs_found');
$show_error        = (!$show_cancelled && !$show_no_orgs && !empty($auth_error));
$show_disconnected = isset($_GET['disconnected']);

$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.',
    'session_expired' => 'Your session expired. Please try connecting again.',
];
$error_msg = $show_error ? ($generic_errors[$auth_error] ?? 'Something went wrong. Please try again.') : '';
?>

<?php if ($show_disconnected) : ?>
<div class="amai-fb-toast amai-fb-toast--success" id="amai-li-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">
        No problem - connect whenever you're ready.
    </div>
    <?php endif; ?>

    <?php if ($show_no_orgs) : ?>
    <div class="amai-fb-notice amai-fb-notice-warn">
        <div class="amai-fb-notice-body">
            <strong>We couldn't find a LinkedIn Page on that account.</strong>
            Personal profiles can't be used with AutoMarketer AI. You need to be an admin on a LinkedIn Page.
            <a href="https://www.linkedin.com/company/setup/new/" target="_blank" rel="noopener noreferrer" class="amai-fb-notice-link">Create a LinkedIn Page (it's free) →</a>
        </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="#0A66C2"/>
                    <path d="M18 21h4v13h-4V21zm2-6.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM26 21h3.8v1.8h.1c.5-1 1.8-2.1 3.7-2.1 4 0 4.7 2.6 4.7 6V34h-4v-6.5c0-1.6 0-3.6-2.2-3.6s-2.6 1.7-2.6 3.5V34H26V21z" fill="white"/>
                </svg>
            </div>
            <h2 class="amai-fb-connect-heading">Connect your LinkedIn Page</h2>
            <p class="amai-fb-connect-subheading">
                We'll write, schedule, and post to LinkedIn 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 LinkedIn Page yet?</div>
                <p class="amai-fb-help-body">
                    A LinkedIn Page is separate from your personal profile, it's free, and takes about 3 minutes to create.
                </p>
                <a href="https://www.linkedin.com/company/setup/new/"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="amai-fb-help-link">
                    Create your LinkedIn Page (it's free) →
                </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">Click Connect below</div>
                    <div class="amai-fb-step-desc">You'll be taken to LinkedIn 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 LinkedIn Page</div>
                    <div class="amai-fb-step-desc">You'll see a list of Pages you admin. 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 generate your first week of LinkedIn posts.</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:#0A66C2;">
                <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="M6 7.5h2v5H6V7.5zm1-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM10 7.5h1.5v.8c.3-.5.9-1 1.8-1 1.9 0 2.2 1.2 2.2 2.8V12.5H14v-2.3c0-.8 0-1.8-1.1-1.8s-1.2.9-1.2 1.7V12.5H10V7.5z" fill="white"/>
                </svg>
                Connect with LinkedIn
            </a>
            <p class="amai-fb-connect-fine">We never post without your knowledge. You're always in control.</p>
        </div>

    </div>
</div>