<?php
declare(strict_types=1);
// ==================================================
// Nuclear Fancy Pants Edition™ -- NUCLEAR+++
// File: /home/ploi/automarketer-ai.com/public/wp-content/plugins/automarketer-ai/templates/social/pinterest-dashboard.php
// Description: Pinterest channel dashboard - connected account view - NUCLEAR+++
// Last Edited: 2026-05-27
// ==================================================

namespace AutoMarketerAI;

defined('ABSPATH') || exit;

$connection = PinterestAuth::getConnection();

if ($connection === null) {
    include AMAI_PLUGIN_DIR . 'templates/social/pinterest-connect.php';
    return;
}

$display_name   = esc_html((string) ($connection['display_name'] ?? ''));
$username       = esc_html((string) ($connection['username'] ?? ''));
$avatar_url     = esc_url((string) ($connection['avatar_url'] ?? ''));
$follower_count = (int) ($connection['follower_count'] ?? 0);
$connected_at   = (string) ($connection['connected_at'] ?? '');

$connected_date = '';
if ($connected_at !== '') {
    $ts = strtotime($connected_at);
    if ($ts !== false) {
        $connected_date = gmdate('M j, Y', $ts);
    }
}

$disconnect_nonce = wp_create_nonce('amai_pinterest_disconnect');
$disconnected     = isset($_GET['disconnected']) && $_GET['disconnected'] === '1';
$just_connected   = isset($_GET['connected']) && $_GET['connected'] === '1';
?>

<div class="amai-channel-dashboard">

    <?php if ($just_connected) : ?>
    <div class="amai-dash-notice amai-dash-notice--success amai-temp-notice">
        Pinterest connected successfully. You're all set.
    </div>
    <?php endif; ?>

    <?php if ($disconnected) : ?>
    <div class="amai-dash-notice amai-dash-notice--info amai-temp-notice">
        Pinterest disconnected.
    </div>
    <?php endif; ?>

    <div class="amai-dash-tabs">
        <button type="button" class="amai-dash-tab amai-dash-tab--active" data-tab="dashboard">Dashboard</button>
        <button type="button" class="amai-dash-tab" data-tab="compose">Compose Pin</button>
    </div>

    <div class="amai-dash-tab-panel" data-panel="dashboard">

        <div class="amai-dash-account-card">
            <?php if ($avatar_url !== '') : ?>
            <img src="<?php echo $avatar_url; ?>" alt="<?php echo $display_name; ?>" class="amai-dash-account-avatar">
            <?php else : ?>
            <div class="amai-dash-account-avatar amai-dash-account-avatar--placeholder" style="background:#E60023;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2C6.477 2 2 6.477 2 12c0 4.236 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.181-.78 1.172-4.97 1.172-4.97s-.299-.598-.299-1.482c0-1.388.806-2.428 1.808-2.428.853 0 1.267.641 1.267 1.408 0 .858-.546 2.141-.828 3.33-.236.995.499 1.806 1.476 1.806 1.771 0 3.132-1.867 3.132-4.563 0-2.386-1.715-4.054-4.164-4.054-2.837 0-4.5 2.128-4.5 4.327 0 .857.33 1.775.741 2.276a.3.3 0 0 1 .069.284c-.076.313-.244.995-.277 1.134-.044.183-.146.221-.337.133-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.966-.527-2.292-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.523 0 10-4.477 10-10S17.523 2 12 2z" fill="white"/>
                </svg>
            </div>
            <?php endif; ?>

            <div class="amai-dash-account-meta">
                <div class="amai-dash-account-name"><?php echo $display_name !== '' ? $display_name : $username; ?></div>
                <?php if ($username !== '') : ?>
                <div class="amai-dash-account-handle">@<?php echo $username; ?></div>
                <?php endif; ?>
                <div class="amai-dash-account-stats">
                    <span class="amai-dash-account-stat">
                        <strong><?php echo number_format($follower_count); ?></strong> followers
                    </span>
                    <?php if ($connected_date !== '') : ?>
                    <span class="amai-dash-account-stat-sep">·</span>
                    <span class="amai-dash-account-stat">Connected <?php echo esc_html($connected_date); ?></span>
                    <?php endif; ?>
                </div>
            </div>

            <div class="amai-dash-account-actions">
                <span class="amai-dash-status-dot amai-dash-status-dot--green"></span>
                <span class="amai-dash-status-label">Connected</span>
                <form method="post" style="display:inline;" onsubmit="return confirm('Disconnect Pinterest? Scheduled Pins will not be published until you reconnect.');">
                    <?php wp_nonce_field('amai_pinterest_disconnect'); ?>
                    <button type="submit" name="amai_pinterest_disconnect" value="1" class="amai-dash-disconnect-btn">
                        Disconnect
                    </button>
                </form>
            </div>
        </div>

        <div class="amai-dash-coming-soon-block" style="margin-top:32px;padding:40px 32px;background:#FDF6F3;border:1.5px solid #EDD5C8;border-radius:16px;text-align:center;">
            <div style="font-size:36px;margin-bottom:16px;">&#128204;</div>
            <h3 style="font-family:'Nunito',sans-serif;font-size:18px;font-weight:800;color:#1C1917;margin:0 0 8px;">Pinterest publishing is almost ready</h3>
            <p style="font-size:14px;color:#78716C;max-width:420px;margin:0 auto;">
                Your account is connected. Pinterest Pin scheduling and content generation will be available once our app review is approved.
                We'll notify you as soon as it's live.
            </p>
        </div>

    </div>

    <div class="amai-dash-tab-panel amai-dash-tab-panel--hidden" data-panel="compose">
        <div style="padding:40px 32px;background:#FDF6F3;border:1.5px solid #EDD5C8;border-radius:16px;text-align:center;">
            <h3 style="font-family:'Nunito',sans-serif;font-size:18px;font-weight:800;color:#1C1917;margin:0 0 8px;">Compose coming soon</h3>
            <p style="font-size:14px;color:#78716C;max-width:420px;margin:0 auto;">
                Pinterest Pin composition and scheduling will be available once our app review is approved.
            </p>
        </div>
    </div>

</div>

<script>
(function() {
    var tabs   = document.querySelectorAll('.amai-dash-tab');
    var panels = document.querySelectorAll('.amai-dash-tab-panel');

    tabs.forEach(function(tab) {
        tab.addEventListener('click', function() {
            var target = tab.getAttribute('data-tab');

            tabs.forEach(function(t) { t.classList.remove('amai-dash-tab--active'); });
            tab.classList.add('amai-dash-tab--active');

            panels.forEach(function(panel) {
                if (panel.getAttribute('data-panel') === target) {
                    panel.classList.remove('amai-dash-tab-panel--hidden');
                } else {
                    panel.classList.add('amai-dash-tab-panel--hidden');
                }
            });
        });
    });

    // Auto-dismiss flash notices
    var notices = document.querySelectorAll('.amai-temp-notice');
    notices.forEach(function(notice) {
        setTimeout(function() {
            notice.style.transition = 'opacity 0.4s';
            notice.style.opacity = '0';
            setTimeout(function() { notice.style.display = 'none'; }, 400);
        }, 4000);
    });
}());
</script>