<?php
// phpcs:disable WordPress.Security.NonceVerification.Recommended -- Admin view reads URL state and notices but does not process sensitive actions.
if (!defined('ABSPATH')) exit;

$calliope_sp_tab = isset($_GET['tab']) ? sanitize_key(wp_unslash((string) $_GET['tab'])) : 'dashboard';
$calliope_sp_tab = in_array($calliope_sp_tab, ['dashboard', 'connections', 'logs'], true) ? $calliope_sp_tab : 'dashboard';

// Network tab inside Connections
$calliope_sp_net = isset($_GET['net']) ? sanitize_key(wp_unslash((string) $_GET['net'])) : 'bluesky';
$calliope_sp_net = in_array($calliope_sp_net, ['bluesky', 'mastodon', 'tumblr', 'pinterest', 'threads', 'instagram', 'linkedin', 'blogger', 'telegram', 'facebook'], true) ? $calliope_sp_net : 'bluesky';

$calliope_sp_msg  = isset($_GET['calliope_sp_msg']) ? sanitize_text_field(wp_unslash((string) $_GET['calliope_sp_msg'])) : '';
$calliope_sp_type = isset($_GET['calliope_sp_type']) ? sanitize_key(wp_unslash((string) $_GET['calliope_sp_type'])) : '';

$calliope_sp_status_bsky = calliope_sp_ui_network_status(
    (string) get_option('calliope_sp_bsky_connection_status', ''),
    calliope_sp_ui_option_has_value('calliope_sp_bsky_handle') && calliope_sp_ui_option_has_value('calliope_sp_bsky_password'),
    get_option('calliope_sp_bsky_connection_status', '') === 'connected',
    __('Save and test', 'calliope-social-publisher')
);
$calliope_sp_status_mstdn = calliope_sp_ui_network_status(
    (string) get_option('calliope_sp_mstdn_connection_status', ''),
    calliope_sp_ui_option_has_value('calliope_sp_mstdn_instance'),
    get_option('calliope_sp_mstdn_connection_status', '') === 'connected',
    __('Connect with Mastodon', 'calliope-social-publisher')
);
$calliope_sp_status_tumblr = calliope_sp_ui_network_status(
    (string) get_option('calliope_sp_tumblr_connection_status', ''),
    calliope_sp_ui_option_has_value('calliope_sp_tumblr_consumer_key') && calliope_sp_ui_option_has_value('calliope_sp_tumblr_consumer_secret'),
    get_option('calliope_sp_tumblr_connection_status', '') === 'connected',
    __('Connect with Tumblr', 'calliope-social-publisher')
);
$calliope_sp_status_pin = calliope_sp_ui_network_status(
    (string) get_option('calliope_sp_pinterest_connection_status', ''),
    calliope_sp_ui_option_has_value('calliope_sp_pinterest_app_id') && calliope_sp_ui_option_has_value('calliope_sp_pinterest_app_secret'),
    get_option('calliope_sp_pinterest_connection_status', '') === 'connected',
    __('Connect with Pinterest', 'calliope-social-publisher')
);
$calliope_sp_status_thr = calliope_sp_ui_network_status(
    (string) get_option('calliope_sp_threads_connection_status', ''),
    calliope_sp_ui_option_has_value('calliope_sp_threads_client_id') && calliope_sp_ui_option_has_value('calliope_sp_threads_client_secret'),
    get_option('calliope_sp_threads_connection_status', '') === 'connected',
    __('Connect with Threads', 'calliope-social-publisher')
);
$calliope_sp_status_ig = calliope_sp_ui_network_status(
    (string) get_option('calliope_sp_ig_connection_status', ''),
    calliope_sp_ui_option_has_value('calliope_sp_ig_app_id') && calliope_sp_ui_option_has_value('calliope_sp_ig_app_secret'),
    get_option('calliope_sp_ig_connection_status', '') === 'connected',
    __('Connect with Instagram', 'calliope-social-publisher')
);
$calliope_sp_c_li     = (get_option('calliope_sp_li_connection_status') === 'ready_to_publish') || calliope_sp_ui_option_has_value('calliope_sp_li_access_token');
$calliope_sp_status_blg = calliope_sp_ui_network_status(
    (string) get_option('calliope_sp_blogger_connection_status', ''),
    calliope_sp_ui_option_has_value('calliope_sp_blogger_client_id') && calliope_sp_ui_option_has_value('calliope_sp_blogger_client_secret'),
    get_option('calliope_sp_blogger_connection_status', '') === 'connected',
    __('Connect with Blogger', 'calliope-social-publisher')
);
$calliope_sp_status_telegram = calliope_sp_ui_network_status(
    (string) get_option('calliope_sp_telegram_connection_status', ''),
    calliope_sp_ui_option_has_value('calliope_sp_telegram_bot_token') && calliope_sp_ui_option_has_value('calliope_sp_telegram_chat_id'),
    get_option('calliope_sp_telegram_connection_status', '') === 'connected',
    __('Save and test', 'calliope-social-publisher')
);
$calliope_sp_fb_pages_raw = (string) get_option('calliope_sp_fb_pages_last', '');
$calliope_sp_fb_pages = $calliope_sp_fb_pages_raw ? json_decode($calliope_sp_fb_pages_raw, true) : [];
$calliope_sp_fb_selected_page_id = (string) get_option('calliope_sp_fb_page_id', '');
$calliope_sp_fb_has_publishable_page = calliope_sp_ui_option_has_value('calliope_sp_fb_page_id') && calliope_sp_ui_option_has_value('calliope_sp_fb_page_access_token');
$calliope_sp_fb_status_key = (string) get_option('calliope_sp_fb_connection_status', '');
if ($calliope_sp_fb_status_key === 'connected' && !$calliope_sp_fb_has_publishable_page) {
    $calliope_sp_fb_status_key = 'credentials_saved';
}
$calliope_sp_status_fb = calliope_sp_ui_network_status(
    $calliope_sp_fb_status_key,
    calliope_sp_ui_option_has_value('calliope_sp_fb_app_id') && calliope_sp_ui_option_has_value('calliope_sp_fb_app_secret'),
    $calliope_sp_fb_has_publishable_page,
    __('Connect Facebook', 'calliope-social-publisher')
);

$calliope_sp_fb_page_name = '';
if (is_array($calliope_sp_fb_pages)) {
    foreach ($calliope_sp_fb_pages as $calliope_sp_page_item) {
        if (!is_array($calliope_sp_page_item)) {
            continue;
        }
        $calliope_sp_page_id = (string) ($calliope_sp_page_item['id'] ?? '');
        if ($calliope_sp_page_id !== '' && $calliope_sp_page_id === $calliope_sp_fb_selected_page_id) {
            $calliope_sp_fb_page_name = (string) ($calliope_sp_page_item['name'] ?? $calliope_sp_page_id);
            break;
        }
    }
}

if (!empty($calliope_sp_status_fb['is_ready']) && $calliope_sp_fb_page_name !== '') {
    $calliope_sp_status_fb['message'] = sprintf(
        /* translators: %s: Facebook page name. */
        __('Connected to page: %s', 'calliope-social-publisher'),
        $calliope_sp_fb_page_name
    );
} elseif (calliope_sp_ui_option_has_value('calliope_sp_fb_user_access_token') && !$calliope_sp_fb_has_publishable_page) {
    $calliope_sp_status_fb['tone'] = 'warning';
    $calliope_sp_status_fb['label'] = __('Connected to Meta only', 'calliope-social-publisher');
    $calliope_sp_status_fb['message'] = __('Facebook is connected, but no publishable Page token was found yet.', 'calliope-social-publisher');
}

$calliope_sp_c_bsky   = !empty($calliope_sp_status_bsky['is_ready']);
$calliope_sp_c_mstdn  = !empty($calliope_sp_status_mstdn['is_ready']);
$calliope_sp_c_tumblr = !empty($calliope_sp_status_tumblr['is_ready']);
$calliope_sp_c_pin    = !empty($calliope_sp_status_pin['is_ready']);
$calliope_sp_c_thr    = !empty($calliope_sp_status_thr['is_ready']);
$calliope_sp_c_ig     = !empty($calliope_sp_status_ig['is_ready']);
$calliope_sp_c_blg    = !empty($calliope_sp_status_blg['is_ready']);
$calliope_sp_c_telegram = !empty($calliope_sp_status_telegram['is_ready']);
$calliope_sp_c_fb     = !empty($calliope_sp_status_fb['is_ready']);

$calliope_sp_li_status = [
    'key' => $calliope_sp_c_li ? 'ready_to_publish' : 'not_connected',
    'tone' => $calliope_sp_c_li ? 'success' : 'error',
    'label' => $calliope_sp_c_li ? __('Ready to publish', 'calliope-social-publisher') : __('Not connected', 'calliope-social-publisher'),
    'message' => '',
    'is_ready' => $calliope_sp_c_li,
    'target' => [],
];
$calliope_sp_li_member_scope_list = [];
$calliope_sp_li_page_scope_list = [];
$calliope_sp_li_has_token = false;
$calliope_sp_li_saved_page_target = '';

if ($calliope_sp_tab === 'connections' && $calliope_sp_net === 'linkedin' && class_exists('Calliope_SP_LinkedIn')) {
    $calliope_sp_li_client = new Calliope_SP_LinkedIn();
    $calliope_sp_li_status = $calliope_sp_li_client->get_connection_state();
    $calliope_sp_li_member_scope_list = $calliope_sp_li_client->get_oauth_scope_list_for_target($calliope_sp_li_status['target'], 'member');
    if (($calliope_sp_li_status['target']['kind'] ?? '') === 'organization') {
        $calliope_sp_li_page_scope_list = $calliope_sp_li_client->get_oauth_scope_list_for_target($calliope_sp_li_status['target'], 'organization');
    }
    $calliope_sp_c_li = !empty($calliope_sp_li_status['is_ready']);
    $calliope_sp_li_has_token = calliope_sp_ui_option_has_value('calliope_sp_li_access_token');
    $calliope_sp_li_saved_page_target = (string) get_option('calliope_sp_li_last_page_target', '');
}

$calliope_sp_logs = get_option('calliope_sp_debug_logs', []);
if (!is_array($calliope_sp_logs)) $calliope_sp_logs = [];

function calliope_sp_ui_option_has_value($option_name) {
    $value = get_option((string) $option_name, '');

    if (is_array($value)) {
        return !empty($value);
    }

    return trim((string) $value) !== '';
}

function calliope_sp_ui_badge($ok) {
    if ($ok) {
        return '<span class="calliope-sp-badge is-ok"><span class="dot"></span>' . esc_html__('Connected', 'calliope-social-publisher') . '</span>';
    }
    return '<span class="calliope-sp-badge is-bad"><span class="dot"></span>' . esc_html__('Not connected', 'calliope-social-publisher') . '</span>';
}

function calliope_sp_ui_network_status($status_key, $has_saved_credentials, $is_ready, $connect_label) {
    if ($is_ready || in_array((string) $status_key, ['connected', 'ready_to_publish'], true)) {
        return [
            'key' => (string) $status_key,
            'tone' => 'success',
            'label' => __('Connected', 'calliope-social-publisher'),
            'message' => '',
            'is_ready' => true,
        ];
    }

    if ((string) $status_key === 'credentials_saved' || ($has_saved_credentials && !$is_ready)) {
        return [
            'key' => 'credentials_saved',
            'tone' => 'warning',
            'label' => __('Credentials saved', 'calliope-social-publisher'),
            'message' => sprintf(
                /* translators: %s: Connection button label. */
                __('Credentials are saved. Click %s to finish the connection.', 'calliope-social-publisher'),
                $connect_label
            ),
            'is_ready' => false,
        ];
    }

    return [
        'key' => 'not_connected',
        'tone' => 'error',
        'label' => __('Not connected', 'calliope-social-publisher'),
        'message' => '',
        'is_ready' => false,
    ];
}

function calliope_sp_ui_status_badge($status) {
    $tone_map = [
        'success' => 'is-ok',
        'warning' => 'is-warn',
        'error' => 'is-bad',
    ];

    $tone = isset($status['tone']) ? (string) $status['tone'] : 'error';
    $label = !empty($status['label']) ? (string) $status['label'] : __('Not connected', 'calliope-social-publisher');
    $class = isset($tone_map[$tone]) ? $tone_map[$tone] : 'is-bad';

    return '<span class="calliope-sp-badge ' . esc_attr($class) . '"><span class="dot"></span>' . esc_html($label) . '</span>';
}


function calliope_sp_ui_disconnect_button($network, $connected) {
    if (!$connected) {
        return '';
    }

    $network = sanitize_key((string) $network);
    $url = wp_nonce_url(
        admin_url('admin-post.php?action=calliope_sp_disconnect_network&network=' . $network),
        'calliope_sp_disconnect_network_' . $network
    );

    return '<a class="button button-link-delete" href="' . esc_url($url) . '" onclick="return confirm(\'' . esc_js(__('Disconnect this network and remove all saved credentials?', 'calliope-social-publisher')) . '\');">' . esc_html__('Disconnect', 'calliope-social-publisher') . '</a>';
}

function calliope_sp_net_tab_class($slug, $active, $connected) {
    $classes = ['calliope-sp-net-tab', 'net-' . sanitize_html_class((string) $slug)];

    if ($active) {
        $classes[] = 'is-active';
    }

    $classes[] = $connected ? 'is-connected' : 'is-disconnected';

    return implode(' ', $classes);
}

function calliope_sp_ui_allowed_html() {
    return [
        'span' => [
            'class' => true,
            'style' => true,
        ],
        'small' => [
            'class' => true,
            'style' => true,
        ],
        'svg'  => [
            'class' => true,
            'viewbox' => true,
            'viewBox' => true,
            'fill' => true,
            'xmlns' => true,
            'aria-label' => true,
        ],
        'path' => [
            'class' => true,
            'd' => true,
            'fill' => true,
            'opacity' => true,
            'stroke' => true,
            'stroke-width' => true,
            'stroke-linecap' => true,
            'stroke-linejoin' => true,
        ],
    ];
}


function calliope_sp_ui_notice_allowed_html() {
    return [
        'a' => [
            'href' => true,
            'target' => true,
            'rel' => true,
        ],
        'br' => [],
        'code' => [],
        'strong' => [],
        'b' => [],
        'em' => [],
        'span' => [
            'class' => true,
        ],
    ];
}

function calliope_sp_ui_icon($name) {
    // Simple inline SVG icons (no external fetch)
    switch ($name) {
        case 'bluesky':
            return '<svg class="calliope-sp-net-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 12c1.6-2.2 4.8-6.2 7.2-7.6 1.7-1 3.3-.7 3.3 1.5 0 2.3-.9 6.6-1.4 9-.4 2.1-2 2.6-3.6 2.3-2.8-.6-4.9-2.2-5.5-2.9-.6.7-2.7 2.3-5.5 2.9-1.6.3-3.2-.2-3.6-2.3-.5-2.4-1.4-6.7-1.4-9 0-2.2 1.6-2.5 3.3-1.5C7.2 5.8 10.4 9.8 12 12Z" fill="currentColor"/><path d="M12 12c-.7 1-2 2.8-3.3 4.3-1.2 1.4-1.8 2.2-1.8 3.1 0 1.3 1.2 2.6 2.8 2.3 1.4-.3 2.4-1.3 2.3-2.7V12Z" fill="currentColor" opacity=".65"/><path d="M12 12c.7 1 2 2.8 3.3 4.3 1.2 1.4 1.8 2.2 1.8 3.1 0 1.3-1.2 2.6-2.8 2.3-1.4-.3-2.4-1.3-2.3-2.7V12Z" fill="currentColor" opacity=".65"/></svg>';
        case 'mastodon':
            return '<svg class="calliope-sp-net-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.5c4.8 0 8.8 1.2 8.8 6.4 0 4.1-.6 7.5-2.5 9.3-1.3 1.2-3.2 1.8-5.2 2l-1.7.2c-.7.1-1.4.1-2.1 0l-1.7-.2c-2-.2-3.9-.8-5.2-2C.8 16.4.2 13 .2 8.9.2 3.7 6.2 2.5 12 2.5Z" fill="currentColor"/><path d="M7.3 16V9.7c0-1.3.5-2.3 1.4-2.9.9-.6 2.1-.7 3.2-.1.6.3.9.7 1.1 1 .2-.3.5-.7 1.1-1 1.1-.6 2.3-.5 3.2.1.9.6 1.4 1.6 1.4 2.9V16h-2.6V10.2c0-.7-.3-1.1-.7-1.3-.4-.2-.9-.1-1.2.2-.2.2-.4.5-.4 1V16h-2.6V10.1c0-.5-.2-.8-.4-1-.3-.3-.8-.4-1.2-.2-.4.2-.7.6-.7 1.3V16H7.3Z" fill="#fff" opacity=".92"/></svg>';
        case 'tumblr':
            return '<svg class="calliope-sp-net-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 22c-3.8 0-6.2-2.2-6.2-5.7V9H6V6.5c2.6-.9 3.9-3.1 4.4-5h2.6v4.3H18V9h-4.6v7c0 1.6.8 2.3 2.1 2.3.9 0 1.6-.3 2.1-.6l.8 2.5c-.7.5-2 1-3.9 1Z" fill="currentColor"/></svg>';
        case 'threads':
            // Threads logo: use the exact SVG provided (kept as-is).
            // Coloring is handled via CSS (currentColor) to match the UI.
            return '<svg class="calliope-sp-net-icon calliope-sp-net-icon--threads" aria-label="Threads" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">'
                . '<path class="x19hqcy" d="M141.537 88.9883C140.71 88.5919 139.87 88.2104 139.019 87.8451C137.537 60.5382 122.616 44.905 97.5619 44.745C97.4484 44.7443 97.3355 44.7443 97.222 44.7443C82.2364 44.7443 69.7731 51.1409 62.102 62.7807L75.881 72.2328C81.6116 63.5383 90.6052 61.6848 97.2286 61.6848C97.3051 61.6848 97.3819 61.6848 97.4576 61.6855C105.707 61.7381 111.932 64.1366 115.961 68.814C118.893 72.2193 120.854 76.925 121.825 82.8638C114.511 81.6207 106.601 81.2385 98.145 81.7233C74.3247 83.0954 59.0111 96.9879 60.0396 116.292C60.5615 126.084 65.4397 134.508 73.775 140.011C80.8224 144.663 89.899 146.938 99.3323 146.423C111.79 145.74 121.563 140.987 128.381 132.296C133.559 125.696 136.834 117.143 138.28 106.366C144.217 109.949 148.617 114.664 151.047 120.332C155.179 129.967 155.42 145.8 142.501 158.708C131.182 170.016 117.576 174.908 97.0135 175.059C74.2042 174.89 56.9538 167.575 45.7381 153.317C35.2355 139.966 29.8077 120.682 29.6052 96C29.8077 71.3178 35.2355 52.0336 45.7381 38.6827C56.9538 24.4249 74.2039 17.11 97.0132 16.9405C119.988 17.1113 137.539 24.4614 149.184 38.788C154.894 45.8136 159.199 54.6488 162.037 64.9503L178.184 60.6422C174.744 47.9622 169.331 37.0357 161.965 27.974C147.036 9.60668 125.202 0.195148 97.0695 0H96.9569C68.8816 0.19447 47.2921 9.6418 32.7883 28.0793C19.8819 44.4864 13.2244 67.3157 13.0007 95.9325L13 96L13.0007 96.0675C13.2244 124.684 19.8819 147.514 32.7883 163.921C47.2921 182.358 68.8816 191.806 96.9569 192H97.0695C122.03 191.827 139.624 185.292 154.118 170.811C173.081 151.866 172.51 128.119 166.26 113.541C161.776 103.087 153.227 94.5962 141.537 88.9883ZM98.4405 129.507C88.0005 130.095 77.1544 125.409 76.6196 115.372C76.2232 107.93 81.9158 99.626 99.0812 98.6368C101.047 98.5234 102.976 98.468 104.871 98.468C111.106 98.468 116.939 99.0737 122.242 100.233C120.264 124.935 108.662 128.946 98.4405 129.507Z"></path>'
                . '</svg>';
        case 'facebook':
            return '<svg class="calliope-sp-net-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 21v-7h2.3l.4-3h-2.7V9.1c0-.9.2-1.5 1.5-1.5H16V5c-.2 0-1 0-2 0-2.1 0-3.5 1.3-3.5 3.7V11H8v3h2.5v7h3Z" fill="currentColor"/></svg>';
        case 'pinterest':
            return '<svg class="calliope-sp-net-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.2 2.2C6.8 2.2 3 5.8 3 10.8c0 3.4 2 5.4 3.7 5.4.6 0 1-.6 1.1-1.1.1-.4.4-1.5.5-1.9.2-.5.1-.7-.1-1.1-.3-.6-.6-1.5-.6-2.3 0-3.1 2.4-5.9 6.3-5.9 3.4 0 5.2 2.1 5.2 4.9 0 3.7-1.7 6.8-4.2 6.8-1.4 0-2.4-1.1-2.1-2.5.4-1.7 1.1-3.5 1.1-4.7 0-1.1-.6-2-1.8-2-1.4 0-2.5 1.4-2.5 3.3 0 1.2.4 2 .4 2l-1.7 7.1c-.5 2.1-.1 4.7-.1 4.9l.1.1c.1-.2 2-2.5 2.6-4.5l1-3.9c.5.9 1.9 1.7 3.4 1.7 4.5 0 7.5-4 7.5-9.4 0-4.1-3.6-7.9-8.9-7.9Z" fill="currentColor"/></svg>';
        case 'instagram':
            return '<svg class="calliope-sp-net-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9A5.5 5.5 0 0 1 16.5 22h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2Z" stroke="currentColor" stroke-width="2"/><path d="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" stroke="currentColor" stroke-width="2"/><path d="M17.5 6.6h.01" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>';
        case 'linkedin':
            return '<svg class="calliope-sp-net-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z" stroke="currentColor" stroke-width="2"/><path d="M7 10v7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M7 7.2v.1" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M11 17v-4.2c0-1.3.8-2.3 2.2-2.3 1.3 0 1.8.9 1.8 2.3V17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <path d="M11 12.1V17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
        case 'blogger':
            // Simple Blogger-like icon (B in a rounded square)
            return '<svg class="calliope-sp-net-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 3.5h7.1c2.7 0 4.9 2.2 4.9 4.9v7.1c0 2.7-2.2 4.9-4.9 4.9H6.5c-2.7 0-4.9-2.2-4.9-4.9V8.4c0-2.7 2.2-4.9 4.9-4.9Z" stroke="currentColor" stroke-width="2"/><path d="M8 8h4.2c1.3 0 2.3 1 2.3 2.3S13.5 12.6 12.2 12.6H8V8Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M8 12.6h4.6c1.4 0 2.4 1 2.4 2.4S14 17.4 12.6 17.4H8v-4.8Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>';
        case 'telegram':
            return '<svg class="calliope-sp-net-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.7 4.1 18.4 19.8c-.2 1-.8 1.3-1.6.8l-5-3.7-2.4 2.3c-.3.3-.5.5-1 .5l.4-5.1 9.3-8.4c.4-.4-.1-.6-.6-.2L6 13.2 1.1 11.7c-1-.3-1-1 .2-1.5L20.4 2.8c.9-.3 1.7.2 1.3 1.3Z" fill="currentColor"/></svg>';
        default:
            return '';
    }
}

function calliope_sp_url_with($args) {
    $base = admin_url('admin.php');
    $q = array_merge([
        'page' => 'calliope-social-publisher',
    ], $args);
    return add_query_arg($q, $base);
}

$calliope_sp_logo_url = CALLIOPE_SP_URL . 'assets/images/social-publisher-logo-transparent.png';
$calliope_sp_dashboard_url = calliope_sp_url_with(['tab' => 'dashboard']);
$calliope_sp_docs_url = 'https://pluginswordpress.calliope.com.ar/calliope-social-publisher';
$calliope_sp_support_url = 'https://wordpress.org/support/plugin/calliope-social-publisher/';
$calliope_sp_review_url  = 'https://wordpress.org/support/plugin/calliope-social-publisher/reviews/#new-post';
$calliope_sp_suggest_url = 'mailto:suggestions@calliope.com.ar';
?>

<div class="wrap calliope-sp-wrap">

    <div class="calliope-sp-topbar">
        <div class="calliope-sp-topbar__brand">
            <img src="<?php echo esc_url($calliope_sp_logo_url); ?>" alt="Calliope Social Publisher" class="calliope-sp-topbar__logo-clean" />
            <div class="calliope-sp-topbar__copy">
                <p><?php echo esc_html__('Publish to multiple social networks from WordPress with a built-in image editor and Gutenberg support.', 'calliope-social-publisher'); ?></p>
            </div>
        </div>
        <div class="calliope-sp-topbar__actions">
            <a class="calliope-sp-topbar__button" href="<?php echo esc_url($calliope_sp_docs_url); ?>" target="_blank" rel="noopener noreferrer"><?php echo esc_html__('Documentation', 'calliope-social-publisher'); ?></a>
            <a class="calliope-sp-topbar__button" href="<?php echo esc_url($calliope_sp_support_url); ?>" target="_blank" rel="noopener noreferrer"><?php echo esc_html__('Support', 'calliope-social-publisher'); ?></a>
            <a class="calliope-sp-topbar__button" href="<?php echo esc_url($calliope_sp_suggest_url); ?>"><?php echo esc_html__('Suggestions', 'calliope-social-publisher'); ?></a>
        </div>
    </div>

    <h2 class="nav-tab-wrapper">
        <a href="<?php echo esc_url(calliope_sp_url_with(['tab' => 'dashboard'])); ?>" class="nav-tab <?php echo ($calliope_sp_tab === 'dashboard') ? 'nav-tab-active' : ''; ?>"><span class="dashicons dashicons-edit"></span><?php echo esc_html__('Publisher', 'calliope-social-publisher'); ?></a>
        <a href="<?php echo esc_url(calliope_sp_url_with(['tab' => 'connections', 'net' => $calliope_sp_net])); ?>" class="nav-tab <?php echo ($calliope_sp_tab === 'connections') ? 'nav-tab-active' : ''; ?>"><span class="dashicons dashicons-admin-links"></span><?php echo esc_html__('Connections', 'calliope-social-publisher'); ?></a>
        <a href="<?php echo esc_url(calliope_sp_url_with(['tab' => 'logs'])); ?>" class="nav-tab <?php echo ($calliope_sp_tab === 'logs') ? 'nav-tab-active' : ''; ?>"><span class="dashicons dashicons-list-view"></span><?php echo esc_html__('Logs', 'calliope-social-publisher'); ?></a>
    </h2>

    <?php if (!empty($calliope_sp_msg)): ?>
        <?php $calliope_sp_notice_type = in_array($calliope_sp_type, ['success', 'warning', 'error'], true) ? $calliope_sp_type : 'error'; ?>
        <div class="notice notice-<?php echo esc_attr($calliope_sp_notice_type); ?> is-dismissible">
            <p><?php echo wp_kses($calliope_sp_msg, calliope_sp_ui_notice_allowed_html()); ?></p>
        </div>
    <?php endif; ?>

    <div class="calliope-sp-panel">

        <?php if ($calliope_sp_tab === 'dashboard'): ?>

            <div class="calliope-sp-grid">
                <div class="calliope-sp-card">
                    <h3><?php echo esc_html__('Content', 'calliope-social-publisher'); ?></h3>
                    <form id="calliope_sp_publish_form" method="post" action="">
                        <?php wp_nonce_field('calliope_sp_action_publish', 'calliope_sp_nonce_publish'); ?>
                        <input type="hidden" name="calliope_sp_publish" value="1" />

                        <div class="calliope-sp-field">
                            <label for="calliope_sp_title"><?php echo esc_html__('Title', 'calliope-social-publisher'); ?></label>
                            <input id="calliope_sp_title" type="text" name="calliope_sp_title" />
                        </div>

                        <div class="calliope-sp-field">
                            <label for="calliope_sp_content"><?php echo esc_html__('Content', 'calliope-social-publisher'); ?></label>
                            <textarea id="calliope_sp_content" name="calliope_sp_content" rows="6"></textarea>
                        </div>

                        <div class="calliope-sp-field">
                            <label for="calliope_sp_link"><?php echo esc_html__('Link', 'calliope-social-publisher'); ?></label>
                            <input id="calliope_sp_link" type="url" name="calliope_sp_link" placeholder="https://" />
                        </div>

                        <div class="calliope-sp-field">
                            <label for="calliope_sp_hashtags"><?php echo esc_html__('Hashtags', 'calliope-social-publisher'); ?></label>
                            <input id="calliope_sp_hashtags" type="text" name="calliope_sp_hashtags" placeholder="#seo #wordpress" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('You can separate hashtags with spaces, commas, semicolons, or line breaks. They will be normalized automatically.', 'calliope-social-publisher'); ?></div>
                            <div class="calliope-sp-hint" id="calliope_sp_hashtags_preview_hint" style="display:none;"></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label for="calliope_sp_alt_text"><?php echo esc_html__('Alt text (image)', 'calliope-social-publisher'); ?></label>
                            <input id="calliope_sp_alt_text" type="text" name="calliope_sp_alt_text" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Recommended: describe the image in a single sentence.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-divider"></div>

                        <h3 style="margin-top:0;"><?php echo esc_html__('Destinations', 'calliope-social-publisher'); ?></h3>
                        <div class="calliope-sp-checks">
                            <label><input type="checkbox" name="post_to_bsky" value="1" <?php checked($calliope_sp_c_bsky); ?> /> <?php echo esc_html__('Bluesky', 'calliope-social-publisher'); ?></label>
                            <label><input type="checkbox" name="post_to_mastodon" value="1" <?php checked($calliope_sp_c_mstdn); ?> /> <?php echo esc_html__('Mastodon', 'calliope-social-publisher'); ?></label>
                            <label><input type="checkbox" name="post_to_tumblr" value="1" <?php checked($calliope_sp_c_tumblr); ?> /> <?php echo esc_html__('Tumblr', 'calliope-social-publisher'); ?></label>
                            <label><input type="checkbox" name="post_to_pinterest" value="1" <?php checked($calliope_sp_c_pin); ?> /> <?php echo esc_html__('Pinterest', 'calliope-social-publisher'); ?></label>
                            <label><input type="checkbox" name="post_to_threads" value="1" <?php checked($calliope_sp_c_thr); ?> /> <?php echo esc_html__('Threads', 'calliope-social-publisher'); ?></label>
                            <label><input type="checkbox" name="post_to_instagram" value="1" <?php checked($calliope_sp_c_ig); ?> /> <?php echo esc_html__('Instagram', 'calliope-social-publisher'); ?></label>
                            <label><input type="checkbox" name="post_to_linkedin" value="1" <?php checked($calliope_sp_c_li); ?> /> <?php echo esc_html__('LinkedIn', 'calliope-social-publisher'); ?></label>
                            <label><input type="checkbox" name="post_to_blogger" value="1" <?php checked($calliope_sp_c_blg); ?> /> <?php echo esc_html__('Blogger', 'calliope-social-publisher'); ?></label>
                            <label><input type="checkbox" name="post_to_telegram" value="1" <?php checked($calliope_sp_c_telegram); ?> /> <?php echo esc_html__('Telegram', 'calliope-social-publisher'); ?></label>
                            <label><input type="checkbox" name="post_to_facebook" value="1" <?php checked($calliope_sp_c_fb); ?> /> <?php echo esc_html__('Facebook Page', 'calliope-social-publisher'); ?></label>
                        </div>
                        <div class="calliope-sp-hint"><?php echo esc_html__('If a network is not connected, publishing may fail. Connect it from the Connections tab first.', 'calliope-social-publisher'); ?></div>

                        <div class="calliope-sp-actions" style="margin-top:14px;">
                            <button type="submit" class="button button-primary button-large" data-publishing-label="<?php echo esc_attr__('Publishing…', 'calliope-social-publisher'); ?>"><?php echo esc_html__('Publish now', 'calliope-social-publisher'); ?></button>
                        </div>
                    </form>
                </div>

                <div class="calliope-sp-card">
                    <h3><?php echo esc_html__('Image', 'calliope-social-publisher'); ?></h3>

                    <p class="calliope-sp-muted" style="margin-top:0;"><?php echo esc_html__('Choose an image and keep it original or adapt it to a social-friendly format before publishing.', 'calliope-social-publisher'); ?></p>
                    <p class="calliope-sp-hint"><?php echo esc_html__('Original keeps the full image without a forced crop. Crop formats are available when you want a square, portrait, or landscape result.', 'calliope-social-publisher'); ?></p>

                    <div class="calliope-sp-field">
                        <label for="calliope_sp_image_format"><?php echo esc_html__('Image format', 'calliope-social-publisher'); ?></label>
                        <select id="calliope_sp_image_format" name="calliope_sp_image_format" form="calliope_sp_publish_form">
                            <option value="original"><?php echo esc_html__('Original', 'calliope-social-publisher'); ?></option>
                            <option value="square"><?php echo esc_html__('Square 1:1', 'calliope-social-publisher'); ?></option>
                            <option value="portrait"><?php echo esc_html__('Portrait 4:5', 'calliope-social-publisher'); ?></option>
                            <option value="landscape"><?php echo esc_html__('Landscape 16:9', 'calliope-social-publisher'); ?></option>
                        </select>
                    </div>

                    <p>
                        <button type="button" class="button" id="btn-up"><?php echo esc_html__('Media Library', 'calliope-social-publisher'); ?></button>
                        <button type="button" class="button button-secondary calliope-sp-dark" id="btn-local"><?php echo esc_html__('From computer', 'calliope-social-publisher'); ?></button>
                        <input type="file" id="file-input" style="display:none;" accept="image/*" />
                    </p>

                    <div id="edit-area" style="display:none;">
                        <div class="cropper-wrapper">
                            <img id="img-crop" src="" alt="" />
                        </div>
                        <div class="calliope-sp-crop-actions">
                            <button type="button" class="button button-primary" id="btn-ok"><?php echo esc_html__('Apply crop', 'calliope-social-publisher'); ?></button>
                        </div>
                    </div>

                    <div id="preview" style="display:none; margin-top:10px;">
                        <img id="final-img" src="" alt="" style="max-width:280px;" />
                        <div>
                            <button type="button" class="button button-link-delete" id="btn-del" aria-label="<?php echo esc_attr__('Remove selected image', 'calliope-social-publisher'); ?>"><?php echo esc_html__('Remove selected image', 'calliope-social-publisher'); ?></button>
                        </div>
                    </div>

                    <input type="hidden" name="calliope_sp_cropped_image_data" id="calliope_sp_data" form="calliope_sp_publish_form" />
                </div>
            </div>


            <div class="calliope-sp-info-grid">
                <div class="calliope-sp-card calliope-sp-anchor-card" id="calliope-sp-docs">
                    <h3><?php echo esc_html__('Documentation', 'calliope-social-publisher'); ?></h3>
                    <p class="calliope-sp-muted" style="margin-top:0;"><?php echo esc_html__('Quick start steps to connect your accounts and publish without guesswork.', 'calliope-social-publisher'); ?></p>
                    <ol class="calliope-sp-steps">
                        <li><?php /* translators: %s: Connections tab label. */ echo wp_kses_post(sprintf(__('Connect each network from the <strong>%s</strong> tab.', 'calliope-social-publisher'), esc_html__('Connections', 'calliope-social-publisher'))); ?></li>
                        <li><?php echo esc_html__('Enter the title, content, link, and hashtags.', 'calliope-social-publisher'); ?></li>
                        <li><?php echo esc_html__('Upload an image and choose the format that best fits the networks you selected.', 'calliope-social-publisher'); ?></li>
                        <li><?php /* translators: %s: Publish button label. */ echo wp_kses_post(sprintf(__('Choose the destinations and click <strong>%s</strong>.', 'calliope-social-publisher'), esc_html__('Publish now', 'calliope-social-publisher'))); ?></li>
                    </ol>
                    <p class="calliope-sp-hint"><?php echo esc_html__('If you publish from Gutenberg, confirm the selected networks are connected before enabling auto-post.', 'calliope-social-publisher'); ?></p>
                </div>

            </div>
</div>

        <?php elseif ($calliope_sp_tab === 'connections'): ?>
            <div class="calliope-sp-net-tabs">
                <a class="<?php echo esc_attr(calliope_sp_net_tab_class('bluesky', $calliope_sp_net === 'bluesky', $calliope_sp_c_bsky)); ?>" href="<?php echo esc_url(calliope_sp_url_with(['tab' => 'connections', 'net' => 'bluesky'])); ?>"><?php echo wp_kses(calliope_sp_ui_icon('bluesky'), calliope_sp_ui_allowed_html()); ?><?php echo esc_html__('Bluesky', 'calliope-social-publisher'); ?></a>
                <a class="<?php echo esc_attr(calliope_sp_net_tab_class('mastodon', $calliope_sp_net === 'mastodon', $calliope_sp_c_mstdn)); ?>" href="<?php echo esc_url(calliope_sp_url_with(['tab' => 'connections', 'net' => 'mastodon'])); ?>"><?php echo wp_kses(calliope_sp_ui_icon('mastodon'), calliope_sp_ui_allowed_html()); ?><?php echo esc_html__('Mastodon', 'calliope-social-publisher'); ?></a>
                <a class="<?php echo esc_attr(calliope_sp_net_tab_class('tumblr', $calliope_sp_net === 'tumblr', $calliope_sp_c_tumblr)); ?>" href="<?php echo esc_url(calliope_sp_url_with(['tab' => 'connections', 'net' => 'tumblr'])); ?>"><?php echo wp_kses(calliope_sp_ui_icon('tumblr'), calliope_sp_ui_allowed_html()); ?><?php echo esc_html__('Tumblr', 'calliope-social-publisher'); ?></a>
                <a class="<?php echo esc_attr(calliope_sp_net_tab_class('pinterest', $calliope_sp_net === 'pinterest', $calliope_sp_c_pin)); ?>" href="<?php echo esc_url(calliope_sp_url_with(['tab' => 'connections', 'net' => 'pinterest'])); ?>"><?php echo wp_kses(calliope_sp_ui_icon('pinterest'), calliope_sp_ui_allowed_html()); ?><?php echo esc_html__('Pinterest', 'calliope-social-publisher'); ?></a>
                <a class="<?php echo esc_attr(calliope_sp_net_tab_class('threads', $calliope_sp_net === 'threads', $calliope_sp_c_thr)); ?>" href="<?php echo esc_url(calliope_sp_url_with(['tab' => 'connections', 'net' => 'threads'])); ?>"><?php echo wp_kses(calliope_sp_ui_icon('threads'), calliope_sp_ui_allowed_html()); ?><?php echo esc_html__('Threads', 'calliope-social-publisher'); ?></a>
                <a class="<?php echo esc_attr(calliope_sp_net_tab_class('instagram', $calliope_sp_net === 'instagram', $calliope_sp_c_ig)); ?>" href="<?php echo esc_url(calliope_sp_url_with(['tab' => 'connections', 'net' => 'instagram'])); ?>"><?php echo wp_kses(calliope_sp_ui_icon('instagram'), calliope_sp_ui_allowed_html()); ?><?php echo esc_html__('Instagram', 'calliope-social-publisher'); ?></a>
                <a class="<?php echo esc_attr(calliope_sp_net_tab_class('linkedin', $calliope_sp_net === 'linkedin', $calliope_sp_c_li)); ?>" href="<?php echo esc_url(calliope_sp_url_with(['tab' => 'connections', 'net' => 'linkedin'])); ?>"><?php echo wp_kses(calliope_sp_ui_icon('linkedin'), calliope_sp_ui_allowed_html()); ?><?php echo esc_html__('LinkedIn', 'calliope-social-publisher'); ?></a>
                <a class="<?php echo esc_attr(calliope_sp_net_tab_class('blogger', $calliope_sp_net === 'blogger', $calliope_sp_c_blg)); ?>" href="<?php echo esc_url(calliope_sp_url_with(['tab' => 'connections', 'net' => 'blogger'])); ?>"><?php echo wp_kses(calliope_sp_ui_icon('blogger'), calliope_sp_ui_allowed_html()); ?><?php echo esc_html__('Blogger', 'calliope-social-publisher'); ?></a>
                <a class="<?php echo esc_attr(calliope_sp_net_tab_class('telegram', $calliope_sp_net === 'telegram', $calliope_sp_c_telegram)); ?>" href="<?php echo esc_url(calliope_sp_url_with(['tab' => 'connections', 'net' => 'telegram'])); ?>"><?php echo wp_kses(calliope_sp_ui_icon('telegram'), calliope_sp_ui_allowed_html()); ?><?php echo esc_html__('Telegram', 'calliope-social-publisher'); ?></a>
                <a class="<?php echo esc_attr(calliope_sp_net_tab_class('facebook', $calliope_sp_net === 'facebook', $calliope_sp_c_fb)); ?>" href="<?php echo esc_url(add_query_arg(['tab' => 'connections', 'net' => 'facebook'])); ?>"><?php echo wp_kses(calliope_sp_ui_icon('facebook'), calliope_sp_ui_allowed_html()); ?><?php echo esc_html__('Facebook', 'calliope-social-publisher'); ?></a>
            </div>

            <div class="calliope-sp-divider"></div>

            <?php if ($calliope_sp_net === 'bluesky'): ?>
                <div class="calliope-sp-card">
                    <h3><?php echo esc_html__('Bluesky', 'calliope-social-publisher'); ?></h3>

                    <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>">
                        <input type="hidden" name="action" value="calliope_sp_test_bluesky" />
                        <?php wp_nonce_field('calliope_sp_test_bluesky_action', 'calliope_sp_test_bluesky_nonce'); ?>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Handle', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_bsky_handle" type="text" value="<?php echo esc_attr(get_option('calliope_sp_bsky_handle')); ?>" />
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('App password (not your main password)', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_bsky_password" type="password" placeholder="***" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Leave this empty to keep the saved app password.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-actions">
                            <span><strong><?php echo esc_html__('Status', 'calliope-social-publisher'); ?>:</strong> <?php echo wp_kses(calliope_sp_ui_status_badge($calliope_sp_status_bsky), calliope_sp_ui_allowed_html()); ?></span>
                            <?php echo wp_kses(calliope_sp_ui_disconnect_button('bluesky', $calliope_sp_c_bsky), ['a' => ['class' => true, 'href' => true, 'onclick' => true]]); ?>
                        </div>

                        <div class="calliope-sp-actions">
                            <button class="button button-primary"><?php echo esc_html__('Save and test', 'calliope-social-publisher'); ?></button>
                        </div>

                        <div class="calliope-sp-howto calliope-sp-howto--below">
                            <b><?php echo esc_html__('Quick guide (Bluesky)', 'calliope-social-publisher'); ?></b>
                            <ol class="calliope-sp-steps calliope-sp-steps--compact">
                                <li><?php echo esc_html__('Create or sign in to your Bluesky account at https://bsky.app/.', 'calliope-social-publisher'); ?></li>
                                <li><?php echo esc_html__('Go to Settings > Privacy and Security > App Passwords and create a new app password for Calliope Social Publisher.', 'calliope-social-publisher'); ?></li>
                                <li><?php echo esc_html__('Important: this app password is NOT your regular account password. Do not paste your main password here.', 'calliope-social-publisher'); ?></li>
                                <li><?php echo esc_html__('Paste your handle above, for example yourname.bsky.social, and paste the new app password in the password field.', 'calliope-social-publisher'); ?></li>
                                <li><?php echo esc_html__('Click Save and test. When it works, the status will change to Connected.', 'calliope-social-publisher'); ?></li>
                            </ol>
                        </div>
                    </form>
                </div>

            <?php elseif ($calliope_sp_net === 'mastodon'): ?>
                <div class="calliope-sp-card">
                    <h3><?php echo esc_html__('Mastodon', 'calliope-social-publisher'); ?></h3>

                    <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="margin-top:14px;">
                        <input type="hidden" name="action" value="calliope_sp_save_mastodon_settings" />
                        <?php wp_nonce_field('calliope_sp_save_mastodon_settings_action', 'calliope_sp_save_mastodon_settings_nonce'); ?>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Mastodon server', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_mstdn_instance" type="text" value="<?php echo esc_attr(get_option('calliope_sp_mstdn_instance')); ?>" placeholder="mastodon.social" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Example: if your Mastodon address is @name@mastodon.social, type only mastodon.social here.', 'calliope-social-publisher'); ?></div>
                            <div class="calliope-sp-hint"><?php echo esc_html__('If your address is @name@fosstodon.org, type only fosstodon.org.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Manual token (optional)', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_mstdn_token" type="password" placeholder="***" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Use this only if you prefer the manual method. It is not your Mastodon password.', 'calliope-social-publisher'); ?></div>
                            <div class="calliope-sp-hint"><?php echo esc_html__('Leave this empty to keep the saved token.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-actions">
                            <span><strong><?php echo esc_html__('Status', 'calliope-social-publisher'); ?>:</strong> <?php echo wp_kses(calliope_sp_ui_status_badge($calliope_sp_status_mstdn), calliope_sp_ui_allowed_html()); ?></span>
                            <?php echo wp_kses(calliope_sp_ui_disconnect_button('mastodon', $calliope_sp_c_mstdn), ['a' => ['class' => true, 'href' => true, 'onclick' => true]]); ?>
                        </div>

                        <div class="calliope-sp-actions">
                            <button class="button button-primary"><?php echo esc_html__('Save settings', 'calliope-social-publisher'); ?></button>
                            <a class="button button-link-delete" href="<?php echo esc_url( wp_nonce_url( admin_url('admin-post.php?action=calliope_sp_mastodon_clear_tokens'), 'calliope_sp_mastodon_clear_tokens_action' ) ); ?>" onclick="return confirm('<?php echo esc_js(__('Delete saved Mastodon credentials?', 'calliope-social-publisher')); ?>');"><?php echo esc_html__('Clear tokens', 'calliope-social-publisher'); ?></a>
                        </div>
                    </form>

                    <div class="calliope-sp-howto calliope-sp-howto--below">
                        <b><?php echo esc_html__('Step 2: Connect with Mastodon', 'calliope-social-publisher'); ?></b>
                        <p class="calliope-sp-muted" style="margin:8px 0 0;"><?php echo esc_html__('First save the server above. Then click the button below, authorize access in Mastodon, and return here.', 'calliope-social-publisher'); ?></p>
                        <div class="calliope-sp-actions" style="margin-top:12px;">
                            <a class="button button-secondary calliope-sp-dark" href="<?php echo esc_url( wp_nonce_url( admin_url('admin-post.php?action=calliope_sp_mastodon_oauth_start'), 'calliope_sp_mastodon_oauth_start_action' ) ); ?>"><?php echo esc_html__('Connect with Mastodon', 'calliope-social-publisher'); ?></a>
                        </div>
                    </div>

                    <div class="calliope-sp-howto calliope-sp-howto--below">
                        <b><?php echo esc_html__('Quick guide (Mastodon)', 'calliope-social-publisher'); ?></b>
                        <ol class="calliope-sp-steps calliope-sp-steps--compact">
                            <li><?php echo esc_html__('Create or sign in to your Mastodon account on your own server, for example mastodon.social.', 'calliope-social-publisher'); ?></li>
                            <li><?php echo esc_html__('In Mastodon server, enter only the server. Example: if your account is @name@mastodon.social, enter only mastodon.social here.', 'calliope-social-publisher'); ?></li>
                            <li><?php echo esc_html__('First click Save settings.', 'calliope-social-publisher'); ?></li>
                            <li><?php echo esc_html__('Then click Connect with Mastodon and authorize access on the permissions screen.', 'calliope-social-publisher'); ?></li>
                            <li><?php echo esc_html__('When you return to WordPress, the connection will be ready to publish.', 'calliope-social-publisher'); ?></li>
                            <li><?php echo esc_html__('Use the manual method only if you really need it: create an app on your Mastodon server, use urn:ietf:wg:oauth:2.0:oob only if the server asks for a Redirect URI, and enable read:accounts, write:statuses, and write:media.', 'calliope-social-publisher'); ?></li>
                        </ol>
                    </div>
                </div>

            <?php elseif ($calliope_sp_net === 'tumblr'): ?>
                <div class="calliope-sp-card">
                    <h3><?php echo esc_html__('Tumblr', 'calliope-social-publisher'); ?></h3>

                    <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="margin-top:14px;">
                        <input type="hidden" name="action" value="calliope_sp_save_tumblr_settings" />
                        <?php wp_nonce_field('calliope_sp_save_tumblr_settings_action', 'calliope_sp_save_tumblr_settings_nonce'); ?>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Blog identifier', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_tumblr_blog_identifier" type="text" value="<?php echo esc_attr(get_option('calliope_sp_tumblr_blog_identifier')); ?>" placeholder="yourblog.tumblr.com" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Enter only your blog address, without https:// or extra paths. Example: yourblog.tumblr.com', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Consumer Key', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_tumblr_consumer_key" type="text" value="<?php echo esc_attr(get_option('calliope_sp_tumblr_consumer_key')); ?>" />
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Consumer Secret', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_tumblr_consumer_secret" type="password" placeholder="***" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Leave this empty to keep the saved consumer secret.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-hint calliope-sp-hint-box"><?php echo esc_html__('Tumblr stores Token and Token Secret automatically after you click Connect with Tumblr. You do not need to fill them manually.', 'calliope-social-publisher'); ?></div>

                        <div class="calliope-sp-actions">
                            <span><strong><?php echo esc_html__('Status', 'calliope-social-publisher'); ?>:</strong> <?php echo wp_kses(calliope_sp_ui_status_badge($calliope_sp_status_tumblr), calliope_sp_ui_allowed_html()); ?></span>
                            <?php echo wp_kses(calliope_sp_ui_disconnect_button('tumblr', $calliope_sp_c_tumblr), ['a' => ['class' => true, 'href' => true, 'onclick' => true]]); ?>
                        </div>

                        <div class="calliope-sp-actions">
                            <button class="button button-primary"><?php echo esc_html__('Save settings', 'calliope-social-publisher'); ?></button>
                        </div>
                    </form>

                    <div class="calliope-sp-howto calliope-sp-howto--below">
                        <b><?php echo esc_html__('Step 2: Connect with Tumblr', 'calliope-social-publisher'); ?></b>
                        <p class="calliope-sp-muted" style="margin:8px 0 0;"><?php echo esc_html__('After you click the button below, Tumblr will open a permissions screen. Click Allow to finish the connection.', 'calliope-social-publisher'); ?></p>
                        <div class="calliope-sp-actions" style="margin-top:12px;">
                            <a class="button button-secondary calliope-sp-dark" href="<?php echo esc_url( wp_nonce_url( admin_url('admin-post.php?action=calliope_sp_tumblr_oauth_start'), 'calliope_sp_tumblr_oauth_start_action' ) ); ?>"><?php echo esc_html__('Connect with Tumblr', 'calliope-social-publisher'); ?></a>
                            <a class="button button-link-delete" href="<?php echo esc_url( wp_nonce_url( admin_url('admin-post.php?action=calliope_sp_tumblr_clear_tokens'), 'calliope_sp_tumblr_clear_tokens_action' ) ); ?>" onclick="return confirm('<?php echo esc_js(__('Delete saved Tumblr tokens?', 'calliope-social-publisher')); ?>');"><?php echo esc_html__('Clear tokens', 'calliope-social-publisher'); ?></a>
                        </div>
                    </div>

                    <div class="calliope-sp-howto calliope-sp-howto--below">
                        <b><?php echo esc_html__('Quick guide (Tumblr)', 'calliope-social-publisher'); ?></b>
                        <ol class="calliope-sp-steps calliope-sp-steps--compact">
                            <li><?php echo esc_html__('Create or sign in to your Tumblr account.', 'calliope-social-publisher'); ?></li>
                            <li><?php echo esc_html__('Open https://www.tumblr.com/oauth/register and create your app.', 'calliope-social-publisher'); ?></li>
                            <li><?php echo esc_html__('Complete the required fields: Application Name, Website, Description, and Admin Contact Email.', 'calliope-social-publisher'); ?></li>
                            <li><?php echo esc_html__('For Callback URL and OAuth Redirect URL, use this exact address:', 'calliope-social-publisher'); ?><br><code><?php echo esc_html( admin_url('admin-post.php?action=calliope_sp_tumblr_oauth_callback') ); ?></code></li>
                            <li><?php echo esc_html__('If Tumblr asks for icons in several sizes, upload the requested PNG files and finish creating the app.', 'calliope-social-publisher'); ?></li>
                            <li><?php echo esc_html__('Copy the Consumer Key and Consumer Secret and paste them into this plugin.', 'calliope-social-publisher'); ?></li>
                            <li><?php echo esc_html__('In Blog identifier, enter only the blog host, for example yourblog.tumblr.com.', 'calliope-social-publisher'); ?></li>
                            <li><?php echo esc_html__('Click Save settings, then Connect with Tumblr, and finally Allow on the permissions screen.', 'calliope-social-publisher'); ?></li>
                        </ol>
                    </div>
                </div>

            <?php elseif ($calliope_sp_net === 'threads'): ?>
                <div class="calliope-sp-card">
                    <h3><?php echo esc_html__('Threads', 'calliope-social-publisher'); ?></h3>

                    <div class="calliope-sp-actions" style="margin-top:0;">
                        <span style="margin-left:auto;"><?php echo wp_kses(calliope_sp_ui_status_badge($calliope_sp_status_thr), calliope_sp_ui_allowed_html()); ?></span>
                        <?php echo wp_kses(calliope_sp_ui_disconnect_button('threads', $calliope_sp_c_thr), ['a' => ['class' => true, 'href' => true, 'onclick' => true]]); ?>
                    </div>
                    <?php if (!empty($calliope_sp_status_thr['message'])): ?>
                        <div class="calliope-sp-hint" style="margin-top:8px;"><?php echo esc_html($calliope_sp_status_thr['message']); ?></div>
                    <?php endif; ?>

                    <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="margin-top:14px;">
                        <input type="hidden" name="action" value="calliope_sp_test_threads" />
                        <?php wp_nonce_field('calliope_sp_test_threads_action', 'calliope_sp_test_threads_nonce'); ?>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Threads App ID', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_threads_client_id" type="text" placeholder="Example: 2529..." value="<?php echo esc_attr(get_option('calliope_sp_threads_client_id')); ?>" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Use the dedicated Threads App ID, not the generic Meta App ID.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Threads App Secret', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_threads_client_secret" type="password" placeholder="***" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Leave this empty to keep the saved secret.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-actions">
                            <button class="button button-primary calliope-sp-cta" type="submit"><?php echo esc_html__('Save and test', 'calliope-social-publisher'); ?></button>
                            <a class="button button-secondary calliope-sp-dark" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_threads_oauth_start'), 'calliope_sp_threads_oauth_start_action')); ?>"><?php echo esc_html__('Connect with Threads', 'calliope-social-publisher'); ?></a>
                            <a class="button" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_test_meta_media_url&calliope_sp_meta_media_network=threads'), 'calliope_sp_test_meta_media_url_action')); ?>"><?php echo esc_html__('Test Meta media URL', 'calliope-social-publisher'); ?></a>
                            <a class="button button-link-delete" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_threads_clear_tokens'), 'calliope_sp_threads_clear_tokens_action')); ?>"><?php echo esc_html__('Clear tokens', 'calliope-social-publisher'); ?></a>
                        </div>

                        <div class="calliope-sp-howto calliope-sp-howto--below">
                            <b><?php echo esc_html__('Quick guide (Threads)', 'calliope-social-publisher'); ?></b>
                            <div class="calliope-sp-muted" style="margin-top:6px;">
                                <?php echo wp_kses(__('1) Open <code>https://developers.facebook.com/</code> and create an app for Threads.<br>2) Choose the correct <b>Business Portfolio</b>. If the portfolio is wrong, the connection often fails later.<br>3) Add the <b>Threads API</b> product and enable <b>threads_basic</b> and <b>threads_content_publish</b>.<br>4) In the basic app settings, add a valid <b>Privacy Policy</b> and move the app to <b>Live</b> when Meta requires it.<br>5) In the login settings, add this exact redirect URI:', 'calliope-social-publisher'), calliope_sp_ui_notice_allowed_html()); ?> <code><?php echo esc_html(admin_url('admin-post.php')); ?></code><br>
                                <span class="calliope-sp-hint"><?php echo wp_kses(__('In Meta, use this same URL in Redirect Callback URL, Deauthorize Callback URL, and Delete Callback URL. Threads often refuses to save the form if any of those fields are empty or different.', 'calliope-social-publisher'), calliope_sp_ui_notice_allowed_html()); ?></span><br>
                                <?php echo wp_kses(__('6) Paste the <b>Threads App ID</b> and <b>Threads App Secret</b> here, then click <b>Save and test</b>.<br>7) Add your account as a <b>Threads Tester</b> and accept the invitation at <code>https://www.threads.com/settings/website_permissions</code>.<br>8) Then click <b>Connect with Threads</b>, authorize access, and when you return to WordPress the connection should be ready.', 'calliope-social-publisher'), calliope_sp_ui_notice_allowed_html()); ?>
                            </div>
                        </div>
                    </form>
                </div>

            <?php elseif ($calliope_sp_net === 'instagram'): ?>
                <div class="calliope-sp-card">
                    <h3><?php echo esc_html__('Instagram', 'calliope-social-publisher'); ?></h3>

                    <div class="calliope-sp-actions" style="margin-top:0;">
                        <a class="button button-link-delete" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_instagram_clear_tokens'), 'calliope_sp_instagram_clear_tokens_action')); ?>" onclick="return confirm('<?php echo esc_js(__('Clear saved Instagram tokens?', 'calliope-social-publisher')); ?>');"><?php echo esc_html__('Clear tokens', 'calliope-social-publisher'); ?></a>
                        <span style="margin-left:auto;"><?php echo wp_kses(calliope_sp_ui_status_badge($calliope_sp_status_ig), calliope_sp_ui_allowed_html()); ?></span>
                        <?php echo wp_kses(calliope_sp_ui_disconnect_button('instagram', $calliope_sp_c_ig), ['a' => ['class' => true, 'href' => true, 'onclick' => true]]); ?>
                    </div>
                    <?php if (!empty($calliope_sp_status_ig['message'])): ?>
                        <div class="calliope-sp-hint" style="margin-top:8px;"><?php echo esc_html($calliope_sp_status_ig['message']); ?></div>
                    <?php endif; ?>
                    <div class="calliope-sp-hint" style="margin-top:8px;">
                        <?php echo esc_html__('Instagram feed posts only accept image ratios from 4:5 portrait to 1.91:1 landscape. If an image is outside that range, the plugin prepares a centered compatible crop for Instagram automatically.', 'calliope-social-publisher'); ?>
                    </div>

                    <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="margin-top:14px;">
                        <input type="hidden" name="action" value="calliope_sp_test_instagram" />
                        <?php wp_nonce_field('calliope_sp_test_instagram_action', 'calliope_sp_test_instagram_nonce'); ?>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('App ID', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_ig_app_id" type="text" value="<?php echo esc_attr(get_option('calliope_sp_ig_app_id')); ?>" />
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('App Secret', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_ig_app_secret" type="password" placeholder="***" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Leave this empty to keep the saved secret.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Redirect URI', 'calliope-social-publisher'); ?></label>
                            <?php
                            $calliope_sp_ig_redirect_uri = $this->get_instagram_redirect_uri();
                            $calliope_sp_ig_legacy_redirect_uri = admin_url('admin-post.php?action=calliope_sp_instagram_callback');
                            ?>
                            <input type="text" readonly value="<?php echo esc_attr($calliope_sp_ig_redirect_uri); ?>" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Paste this exact URL into the OAuth redirect URI field for Instagram Login / Business Login in Meta Developers.', 'calliope-social-publisher'); ?></div>
                            <div class="calliope-sp-hint" style="margin-top:6px;"><?php echo esc_html__('It must match exactly, including https/http, trailing slash, and every query parameter if the URL contains any.', 'calliope-social-publisher'); ?></div>
                            <?php if ($calliope_sp_ig_redirect_uri !== $calliope_sp_ig_legacy_redirect_uri) : ?>
                                <div class="calliope-sp-hint" style="margin-top:6px;"><?php echo esc_html__('Legacy callback previously used by older installs:', 'calliope-social-publisher'); ?> <code><?php echo esc_html($calliope_sp_ig_legacy_redirect_uri); ?></code></div>
                            <?php endif; ?>
                        </div>

                        <div class="calliope-sp-actions">
                            <button class="button button-primary calliope-sp-cta" type="submit"><?php echo esc_html__('Save and test', 'calliope-social-publisher'); ?></button>
                            <a class="button button-secondary calliope-sp-dark" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_instagram_oauth_start'), 'calliope_sp_instagram_oauth_start_action')); ?>"><?php echo esc_html__('Connect with Instagram', 'calliope-social-publisher'); ?></a>
                            <a class="button" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_test_meta_media_url&calliope_sp_meta_media_network=instagram'), 'calliope_sp_test_meta_media_url_action')); ?>"><?php echo esc_html__('Test Meta media URL', 'calliope-social-publisher'); ?></a>
                        </div>

                        <div class="calliope-sp-howto calliope-sp-howto--below">
                            <b><?php echo esc_html__('Quick guide (Instagram)', 'calliope-social-publisher'); ?></b>
                            <div class="calliope-sp-muted" style="margin-top:6px;">
                                <?php echo wp_kses(__('1) Open <code>https://developers.facebook.com/</code> and create an app.<br>2) Choose the <b>Other</b> use case, set the app type to <b>Business</b>, and select the correct <b>Business Portfolio</b>.<br>3) Add the <b>Instagram</b> or <b>Instagram Login</b> product, depending on how Meta shows it in your panel.<br>4) In <b>Business login settings</b> or Instagram Login settings, add this exact redirect URI:', 'calliope-social-publisher'), calliope_sp_ui_notice_allowed_html()); ?> <code><?php echo esc_html($calliope_sp_ig_redirect_uri); ?></code><br>
                                <?php echo wp_kses(__('5) Add a valid <b>Privacy Policy</b> in the app settings and move the app to <b>Live</b> when Meta requires it.<br>6) Add your account as an <b>Instagram Tester</b> and accept the invitation at <code>https://www.instagram.com/accounts/manage_access</code>.<br>7) Paste the <b>App ID</b> and <b>App Secret</b> here, click <b>Save and test</b>, and only then click <b>Connect with Instagram</b>.<br>8) If Meta shows <code>Invalid redirect_uri</code>, it usually means the callback is entered in the wrong place or does not match exactly. Check the real OAuth redirect field and copy the URL shown above exactly.', 'calliope-social-publisher'), calliope_sp_ui_notice_allowed_html()); ?>
                            </div>
                        </div>
                    </form>
                </div>

            <?php elseif ($calliope_sp_net === 'linkedin'): ?>
                <div class="calliope-sp-card">
                    <h3><?php echo esc_html__('LinkedIn', 'calliope-social-publisher'); ?></h3>

                    <div class="calliope-sp-actions" style="margin-top:0;">
                        <a class="button button-link-delete" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_linkedin_clear_tokens'), 'calliope_sp_linkedin_clear_tokens_action')); ?>" onclick="return confirm('<?php echo esc_js(__('Clear saved LinkedIn token?', 'calliope-social-publisher')); ?>');"><?php echo esc_html__('Clear tokens', 'calliope-social-publisher'); ?></a>
                        <span style="margin-left:auto;"><?php echo wp_kses(calliope_sp_ui_status_badge($calliope_sp_li_status), calliope_sp_ui_allowed_html()); ?></span>
                        <?php echo wp_kses(calliope_sp_ui_disconnect_button('linkedin', $calliope_sp_c_li || $calliope_sp_li_has_token), ['a' => ['class' => true, 'href' => true, 'onclick' => true]]); ?>
                    </div>

                    <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="margin-top:14px;">
                        <input type="hidden" name="action" value="calliope_sp_test_linkedin" />
                        <?php wp_nonce_field('calliope_sp_test_linkedin_action', 'calliope_sp_test_linkedin_nonce'); ?>

                        <div class="calliope-sp-help" style="margin-bottom:14px;">
                            <strong><?php echo esc_html__('Personal profile only', 'calliope-social-publisher'); ?></strong><br>
                            <?php echo esc_html__('This LinkedIn connection is only for personal profiles. It is not for company pages or business page publishing.', 'calliope-social-publisher'); ?>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Client ID', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_li_client_id" type="text" value="<?php echo esc_attr(get_option('calliope_sp_li_client_id')); ?>" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Copy this from LinkedIn Developers > Auth. This is not the App ID from the approval email.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Client Secret', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_li_client_secret" type="password" placeholder="***" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Copy this from LinkedIn Developers > Auth. Leave this empty to keep the saved secret.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Redirect URI', 'calliope-social-publisher'); ?></label>
                            <input type="text" readonly value="<?php echo esc_attr(rest_url('calliope-social-publisher/v1/linkedin/callback')); ?>" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Paste this exact URL into LinkedIn Developers > Auth > Authorized redirect URLs.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Access token (optional)', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_li_access_token" type="password" placeholder="***" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Usually this is not needed. Connect with LinkedIn stores the token automatically.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Profile author ID (optional)', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_li_person_id" type="text" value="<?php echo esc_attr(get_option('calliope_sp_li_person_id')); ?>" placeholder="urn:li:person:ABC123..." />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Recommended: save your credentials, click Connect with LinkedIn, and then click Use connected profile so the plugin fills this automatically.', 'calliope-social-publisher'); ?></div>
                            <div class="calliope-sp-hint"><?php echo esc_html__('Paste a full Person URN here only if LinkedIn does not let the plugin detect it automatically.', 'calliope-social-publisher'); ?></div>
                            <div class="calliope-sp-hint"><?php echo esc_html__('Do not paste a company page ID, company page URL, Client ID, App ID, or approval email number here.', 'calliope-social-publisher'); ?></div>
                            <?php if (!empty($calliope_sp_li_member_scope_list)): ?>
                                <div class="calliope-sp-hint"><?php echo esc_html__('Connection scopes:', 'calliope-social-publisher'); ?> <code><?php echo esc_html(implode(', ', $calliope_sp_li_member_scope_list)); ?></code></div>
                            <?php endif; ?>
                        </div>

                        <p><strong><?php echo esc_html__('Status', 'calliope-social-publisher'); ?>:</strong> <?php echo wp_kses(calliope_sp_ui_status_badge($calliope_sp_li_status), calliope_sp_ui_allowed_html()); ?></p>
                        <?php if (!empty($calliope_sp_li_status['message'])): ?>
                            <div class="calliope-sp-hint"><?php echo esc_html($calliope_sp_li_status['message']); ?></div>
                        <?php endif; ?>

                        <div class="calliope-sp-actions">
                            <button class="button button-primary calliope-sp-cta" type="submit"><?php echo esc_html__('Save and test', 'calliope-social-publisher'); ?></button>
                            <a class="button button-secondary calliope-sp-dark" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_linkedin_oauth_start'), 'calliope_sp_linkedin_oauth_start_action')); ?>"><?php echo esc_html__('Connect with LinkedIn', 'calliope-social-publisher'); ?></a>
                            <?php if ($calliope_sp_li_has_token): ?>
                                <a class="button button-secondary" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_linkedin_detect_profile_target'), 'calliope_sp_linkedin_detect_profile_target_action')); ?>"><?php echo esc_html__('Use connected profile', 'calliope-social-publisher'); ?></a>
                            <?php endif; ?>
                        </div>
                        <div class="calliope-sp-hint" style="margin-top:10px;"><?php echo esc_html__('This LinkedIn setup is intentionally limited to personal profile posting so the connection is easier to understand and test.', 'calliope-social-publisher'); ?></div>
                        <?php if ($calliope_sp_li_has_token): ?>
                            <div class="calliope-sp-hint"><?php echo esc_html__('Use connected profile tries to detect the member profile author ID from the current LinkedIn token.', 'calliope-social-publisher'); ?></div>
                        <?php endif; ?>

                        <div class="calliope-sp-howto calliope-sp-howto--below">
                            <b><?php echo esc_html__('Quick guide (LinkedIn)', 'calliope-social-publisher'); ?></b>
                            <div class="calliope-sp-muted" style="margin-top:6px;">
                                1) <a href="https://developer.linkedin.com/" target="_blank" rel="noopener noreferrer"><?php echo esc_html__('Open LinkedIn Developers', 'calliope-social-publisher'); ?></a> and create your app.<br>
                                2) <?php echo esc_html__('Open the Auth section, copy the Client ID and Client Secret, and paste them into this plugin.', 'calliope-social-publisher'); ?><br>
                                3) <?php echo esc_html__('Copy the Redirect URI shown above and paste that exact same URL into LinkedIn Developers > Auth > Authorized redirect URLs.', 'calliope-social-publisher'); ?><br>
                                4) <?php echo esc_html__('First click Save and test so Calliope Social Publisher saves the credentials.', 'calliope-social-publisher'); ?><br>
                                5) <?php echo esc_html__('Then click Connect with LinkedIn and approve access in LinkedIn.', 'calliope-social-publisher'); ?><br>
                                6) <?php echo esc_html__('When LinkedIn returns you to WordPress, click Use connected profile so the plugin can automatically fill the author ID for your personal profile.', 'calliope-social-publisher'); ?><br>
                                7) <?php echo esc_html__('If automatic detection fails, manually paste a complete Person URN into the Profile author ID field.', 'calliope-social-publisher'); ?><br>
                                8) <?php echo esc_html__('Important: this LinkedIn connection is only for personal profiles. It does not publish to company pages or business pages from this plugin.', 'calliope-social-publisher'); ?><br>
                                <span class="calliope-sp-hint"><?php echo esc_html__('In this version, LinkedIn supports text, links, and images on personal profiles.', 'calliope-social-publisher'); ?></span>
                            </div>
                        </div>
                    </form>
                </div>

            <?php elseif ($calliope_sp_net === 'blogger'): ?>
                <?php $calliope_sp_blogs = get_option('calliope_sp_blogger_blogs_last', []); if (!is_array($calliope_sp_blogs)) $calliope_sp_blogs = []; ?>
                <div class="calliope-sp-card">
                    <h3><?php echo esc_html__('Blogger', 'calliope-social-publisher'); ?></h3>

                    <div class="calliope-sp-actions" style="margin-top:0;">
                        <a class="button button-link-delete" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_blogger_clear_tokens'), 'calliope_sp_blogger_clear_tokens_action')); ?>" onclick="return confirm('<?php echo esc_js(__('Clear saved Blogger tokens?', 'calliope-social-publisher')); ?>');"><?php echo esc_html__('Clear tokens', 'calliope-social-publisher'); ?></a>
                        <span style="margin-left:auto;"><?php echo wp_kses(calliope_sp_ui_status_badge($calliope_sp_status_blg), calliope_sp_ui_allowed_html()); ?></span>
                        <?php echo wp_kses(calliope_sp_ui_disconnect_button('blogger', $calliope_sp_c_blg), ['a' => ['class' => true, 'href' => true, 'onclick' => true]]); ?>
                    </div>
                    <?php if (!empty($calliope_sp_status_blg['message'])): ?>
                        <div class="calliope-sp-hint" style="margin-top:8px;"><?php echo esc_html($calliope_sp_status_blg['message']); ?></div>
                    <?php endif; ?>

                    <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="margin-top:14px;">
                        <input type="hidden" name="action" value="calliope_sp_test_blogger" />
                        <?php wp_nonce_field('calliope_sp_test_blogger_action', 'calliope_sp_test_blogger_nonce'); ?>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Google OAuth Client ID', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_blogger_client_id" type="text" value="<?php echo esc_attr(get_option('calliope_sp_blogger_client_id')); ?>" />
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Google OAuth Client Secret', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_blogger_client_secret" type="password" placeholder="***" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Leave this empty to keep the saved secret.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Redirect URI', 'calliope-social-publisher'); ?></label>
                            <input type="text" readonly value="<?php echo esc_attr(rest_url('calliope-social-publisher/v1/blogger/callback')); ?>" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Paste this into Google Cloud > OAuth consent / Credentials > Authorized redirect URIs.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Blog destination', 'calliope-social-publisher'); ?></label>
                            <select name="calliope_sp_blogger_blog_id">
                                <?php
                                $calliope_sp_selected_blog = (string) get_option('calliope_sp_blogger_blog_id', '');
                                if (empty($calliope_sp_blogs)) {
                                    echo '<option value="">' . esc_html__('Connect first to list your blogs', 'calliope-social-publisher') . '</option>';
                                } else {
                                    foreach ($calliope_sp_blogs as $calliope_sp_item) {
                                        $blog_id   = (string) ($calliope_sp_item['id'] ?? '');
                                        $calliope_sp_blog_name = (string) ($calliope_sp_item['name'] ?? $blog_id);
                                        $calliope_sp_blog_url  = (string) ($calliope_sp_item['url'] ?? '');
                                        ?>
                                        <option value="<?php echo esc_attr($blog_id); ?>" <?php selected($calliope_sp_selected_blog, $blog_id); ?>>
                                            <?php echo esc_html($calliope_sp_blog_name); ?><?php echo $calliope_sp_blog_url !== '' ? esc_html(' - ' . $calliope_sp_blog_url) : ''; ?>
                                        </option>
                                        <?php
                                    }
                                }
                                ?>
                            </select>
                            <div class="calliope-sp-hint"><?php echo esc_html__('Refresh this screen after connecting if the blog list does not appear immediately.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <p><strong><?php echo esc_html__('Status', 'calliope-social-publisher'); ?>:</strong> <?php echo wp_kses(calliope_sp_ui_status_badge($calliope_sp_status_blg), calliope_sp_ui_allowed_html()); ?></p>
                        <?php if (!empty($calliope_sp_status_blg['message'])): ?>
                            <div class="calliope-sp-hint"><?php echo esc_html($calliope_sp_status_blg['message']); ?></div>
                        <?php endif; ?>

                        <div class="calliope-sp-actions">
                            <button class="button button-primary calliope-sp-cta" type="submit"><?php echo esc_html__('Save and test', 'calliope-social-publisher'); ?></button>
                            <a class="button button-secondary calliope-sp-dark" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_blogger_oauth_start'), 'calliope_sp_blogger_oauth_start_action')); ?>"><?php echo esc_html__('Connect with Blogger', 'calliope-social-publisher'); ?></a>
                        </div>

                        <div class="calliope-sp-howto calliope-sp-howto--below">
                            <?php
                            $calliope_sp_blogger_console_url = 'https://console.cloud.google.com/';
                            $calliope_sp_blogger_redirect_uri = rest_url('calliope-social-publisher/v1/blogger/callback');
                            $calliope_sp_blogger_guide_allowed = [
                                'a' => [
                                    'href'   => true,
                                    'target' => true,
                                    'rel'    => true,
                                ],
                                'b' => [],
                            ];
                            ?>
                            <b><?php echo esc_html__('Quick guide (Blogger)', 'calliope-social-publisher'); ?></b>
                            <div class="calliope-sp-muted" style="margin-top:6px;">
                                <ol class="calliope-sp-guide-list">
                                    <li><?php /* translators: %s: Google Cloud Console URL. */ echo wp_kses(sprintf(__('Open <a href="%s" target="_blank" rel="noopener noreferrer">Google Cloud Console</a>.', 'calliope-social-publisher'), esc_url($calliope_sp_blogger_console_url)), $calliope_sp_blogger_guide_allowed); ?></li>
                                    <li><?php echo wp_kses(__('Create a project if needed, then go to <b>APIs &amp; Services &rarr; Library</b>, search for <b>Blogger API</b>, and enable it.', 'calliope-social-publisher'), $calliope_sp_blogger_guide_allowed); ?></li>
                                    <li><?php echo wp_kses(__('Go to <b>APIs &amp; Services &rarr; OAuth consent screen</b> and complete the consent screen step by step.', 'calliope-social-publisher'), $calliope_sp_blogger_guide_allowed); ?></li>
                                    <li><?php echo wp_kses(__('Create an <b>OAuth Client ID</b> with application type <b>Web application</b>.', 'calliope-social-publisher'), $calliope_sp_blogger_guide_allowed); ?></li>
                                    <li><?php echo esc_html__('Add this exact authorized redirect URI:', 'calliope-social-publisher'); ?><br><code><?php echo esc_html($calliope_sp_blogger_redirect_uri); ?></code></li>
                                    <li><?php echo wp_kses(__('Copy the <b>Client ID</b> and <b>Client Secret</b> from Google and paste them into this plugin.', 'calliope-social-publisher'), $calliope_sp_blogger_guide_allowed); ?></li>
                                    <li><?php echo wp_kses(__('If Google requires it for your case, move the app to <b>External</b> / production before connecting.', 'calliope-social-publisher'), $calliope_sp_blogger_guide_allowed); ?></li>
                                    <li><?php echo wp_kses(__('First click <b>Save and test</b>. This only saves the credentials. Then click <b>Connect with Blogger</b> and allow access to the Google account.', 'calliope-social-publisher'), $calliope_sp_blogger_guide_allowed); ?></li>
                                    <li><?php echo wp_kses(__('If the blog list is still empty, verify that <b>Blogger API</b> is enabled in the same Google project and wait a few minutes if you just activated it.', 'calliope-social-publisher'), $calliope_sp_blogger_guide_allowed); ?></li>
                                    <li><?php echo wp_kses(__('If you have more than one blog, choose the correct <b>Blog destination</b> and save again.', 'calliope-social-publisher'), $calliope_sp_blogger_guide_allowed); ?></li>
                                </ol>
                                <span class="calliope-sp-hint"><?php echo esc_html__('In this version, Blogger supports text, links, and images inside the content.', 'calliope-social-publisher'); ?></span>
                            </div>
                        </div>
                    </form>
                </div>

            <?php elseif ($calliope_sp_net === 'pinterest'): ?>
                <?php $calliope_sp_pin_env = get_option('calliope_sp_pinterest_env', 'production'); ?>
                <div class="calliope-sp-card">
                    <h3><?php echo esc_html__('Pinterest', 'calliope-social-publisher'); ?></h3>

                    <div class="calliope-sp-actions" style="margin-top:0;">
                        <a class="button button-link-delete" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_pinterest_clear_tokens'), 'calliope_sp_pinterest_clear_tokens_action')); ?>" onclick="return confirm('<?php echo esc_js(__('Clear saved Pinterest tokens?', 'calliope-social-publisher')); ?>');"><?php echo esc_html__('Clear tokens', 'calliope-social-publisher'); ?></a>
                        <span style="margin-left:auto;"><?php echo wp_kses(calliope_sp_ui_status_badge($calliope_sp_status_pin), calliope_sp_ui_allowed_html()); ?></span>
                        <?php echo wp_kses(calliope_sp_ui_disconnect_button('pinterest', $calliope_sp_c_pin), ['a' => ['class' => true, 'href' => true, 'onclick' => true]]); ?>
                    </div>
                    <?php if (!empty($calliope_sp_status_pin['message'])): ?>
                        <div class="calliope-sp-hint" style="margin-top:8px;"><?php echo esc_html($calliope_sp_status_pin['message']); ?></div>
                    <?php endif; ?>

                    <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="margin-top:14px;">
                        <input type="hidden" name="action" value="calliope_sp_test_pinterest" />
                        <?php wp_nonce_field('calliope_sp_test_pinterest_action', 'calliope_sp_test_pinterest_nonce'); ?>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Environment', 'calliope-social-publisher'); ?></label>
                            <select name="calliope_sp_pinterest_env">
                                <option value="production" <?php selected($calliope_sp_pin_env, 'production'); ?>><?php echo esc_html__('Production (api.pinterest.com)', 'calliope-social-publisher'); ?></option>
                                <option value="sandbox" <?php selected($calliope_sp_pin_env, 'sandbox'); ?>><?php echo esc_html__('Sandbox (api-sandbox.pinterest.com)', 'calliope-social-publisher'); ?></option>
                            </select>
                            <div class="calliope-sp-hint"><?php echo esc_html__('If the app still has Trial access, use Sandbox. Production publishing usually requires Standard access.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('App ID', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_pinterest_app_id" type="text" value="<?php echo esc_attr(get_option('calliope_sp_pinterest_app_id')); ?>" />
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('App Secret', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_pinterest_app_secret" type="password" placeholder="***" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Leave this empty to keep the saved secret.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Token', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_pinterest_token" type="password" placeholder="***" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('If you use Connect with Pinterest, the plugin stores the token automatically. Leave this empty to keep the saved token.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Board ID', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_pinterest_board_id" type="text" value="<?php echo esc_attr(get_option('calliope_sp_pinterest_board_id')); ?>" />
                        </div>

                        <div class="calliope-sp-actions">
                            <a class="button" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_pinterest_detect_board'), 'calliope_sp_pinterest_detect_board_action')); ?>"><?php echo esc_html__('Detect Board ID', 'calliope-social-publisher'); ?></a>
                        </div>

                        <?php $calliope_sp_pin_boards = get_option('calliope_sp_pinterest_boards_last', []); ?>
                        <?php if (is_array($calliope_sp_pin_boards) && !empty($calliope_sp_pin_boards)) : ?>
                            <div class="calliope-sp-howto" style="margin-top:12px;">
                                <b><?php echo esc_html__('Detected boards', 'calliope-social-publisher'); ?></b>
                                <ul style="margin:8px 0 0 18px;">
                                    <?php foreach ($calliope_sp_pin_boards as $calliope_sp_item) : ?>
                                        <?php if (!is_array($calliope_sp_item) || empty($calliope_sp_item['id'])) continue; ?>
                                        <li>
                                            <code><?php echo esc_html($calliope_sp_item['id']); ?></code>
                                            - <?php echo esc_html($calliope_sp_item['name'] ?? __('(no name)', 'calliope-social-publisher')); ?>
                                            <?php if (!empty($calliope_sp_item['privacy'])) : ?><small>(<?php echo esc_html($calliope_sp_item['privacy']); ?>)</small><?php endif; ?>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                                <div class="calliope-sp-hint"><?php echo esc_html__('Copy one of those IDs and paste it into Board ID.', 'calliope-social-publisher'); ?></div>
                            </div>
                        <?php endif; ?>

                        <div class="calliope-sp-actions">
                            <button class="button button-primary"><?php echo esc_html__('Save and test', 'calliope-social-publisher'); ?></button>
                            <a class="button button-secondary calliope-sp-dark" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_pinterest_oauth_start'), 'calliope_sp_pinterest_oauth_start_action')); ?>"><?php echo esc_html__('Connect with Pinterest', 'calliope-social-publisher'); ?></a>
                        </div>

                        <div class="calliope-sp-howto calliope-sp-howto--below">
                            <b><?php echo esc_html__('Quick guide (Pinterest)', 'calliope-social-publisher'); ?></b>
                            <div class="calliope-sp-muted" style="margin-top:6px;">
                                <?php echo wp_kses(__('1) Create your app at <code>https://developers.pinterest.com/apps</code> and complete all required fields, including website and privacy policy.<br>2) Add this exact redirect URI in your Pinterest app:', 'calliope-social-publisher'), calliope_sp_ui_notice_allowed_html()); ?> <code><?php echo esc_html(admin_url('admin-post.php')); ?></code><br>
                                <span class="calliope-sp-hint"><?php echo esc_html__('Pinterest does not accept query parameters in the redirect URI. Calliope Social Publisher resolves the callback using the OAuth state.', 'calliope-social-publisher'); ?></span><br>
                                <?php echo wp_kses(__('3) Paste the <b>App ID</b> and <b>App Secret</b> here, then click <b>Save and test</b> first.<br>4) If your app is still pending or under review, wait for approval by email before trying to publish.<br>5) Then click <b>Detect Board ID</b> to fetch your boards, and then <b>Connect with Pinterest</b> to complete the connection.<br>6) To publish in production, your app needs <b>Standard access active</b>. Without standard access, publishing may fail even if login works.<br>7) If you recently enabled permissions or changed the environment, reconnect Pinterest to generate a new token.', 'calliope-social-publisher'), calliope_sp_ui_notice_allowed_html()); ?>
                            </div>
                        </div>

                        <p class="calliope-sp-hint" style="margin-top:12px;"><?php echo esc_html__('Scopes used:', 'calliope-social-publisher'); ?> <code>pins:read boards:read user_accounts:read pins:write boards:write</code></p>
                    </form>
                </div>


            <?php elseif ($calliope_sp_net === 'telegram'): ?>
                <div class="calliope-sp-card">
                    <h3><?php echo esc_html__('Telegram', 'calliope-social-publisher'); ?></h3>

                    <div class="calliope-sp-row">
                        <div class="calliope-sp-hint"><?php echo esc_html__('Publish posts to a Telegram group, supergroup, channel, or topic using a Telegram bot.', 'calliope-social-publisher'); ?></div>
                        <span style="margin-left:auto;"><?php echo wp_kses(calliope_sp_ui_status_badge($calliope_sp_status_telegram), calliope_sp_ui_allowed_html()); ?></span>
                        <?php echo wp_kses(calliope_sp_ui_disconnect_button('telegram', $calliope_sp_c_telegram), ['a' => ['class' => true, 'href' => true, 'onclick' => true]]); ?>
                    </div>
                    <?php if (!empty($calliope_sp_status_telegram['message'])): ?>
                        <div class="calliope-sp-hint" style="margin-top:8px;"><?php echo esc_html($calliope_sp_status_telegram['message']); ?></div>
                    <?php endif; ?>

                    <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="margin-top:14px;">
                        <input type="hidden" name="action" value="calliope_sp_test_telegram" />
                        <?php wp_nonce_field('calliope_sp_test_telegram_action', 'calliope_sp_test_telegram_nonce'); ?>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Bot Token', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_telegram_bot_token" type="password" placeholder="123456789:ABC..." />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Create the bot with BotFather and paste the Bot Token here. Leave this empty to keep the saved token.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Group / Channel ID', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_telegram_chat_id" type="text" value="<?php echo esc_attr(get_option('calliope_sp_telegram_chat_id')); ?>" placeholder="@yourchannel or -1001234567890" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('For public channels or groups, you can use @username. For private groups, use the numeric chat ID.', 'calliope-social-publisher'); ?></div>
                            <div class="calliope-sp-hint"><?php echo esc_html__('Public t.me links like https://t.me/yourchannel are normalized automatically to @yourchannel.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Topic ID (optional)', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_telegram_message_thread_id" type="number" min="0" step="1" value="<?php echo esc_attr((int) get_option('calliope_sp_telegram_message_thread_id', 0)); ?>" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Only use this if your Telegram group has forum topics and you want posts sent to a specific topic.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-actions">
                            <button class="button button-primary calliope-sp-cta" type="submit"><?php echo esc_html__('Save and test', 'calliope-social-publisher'); ?></button>
                        </div>

                        <div class="calliope-sp-howto calliope-sp-howto--below">
                            <b><?php echo esc_html__('Quick guide (Telegram)', 'calliope-social-publisher'); ?></b>
                            <ol class="calliope-sp-steps calliope-sp-steps--compact">
                                <li><?php echo esc_html__('Open Telegram and search for BotFather.', 'calliope-social-publisher'); ?></li>
                                <li><?php echo esc_html__('Create a new bot with /newbot and copy the Bot Token.', 'calliope-social-publisher'); ?></li>
                                <li><?php echo esc_html__('Add the bot to your group or channel. For channels, make it an administrator so it can publish.', 'calliope-social-publisher'); ?></li>
                                <li><?php echo esc_html__('Paste the Bot Token and the Group / Channel ID here, then click Save and test.', 'calliope-social-publisher'); ?></li>
                                <li><?php echo esc_html__('If the destination is public, use @yourchannel. If it is private, use the numeric chat ID, usually starting with -100 for supergroups/channels.', 'calliope-social-publisher'); ?></li>
                                <li><?php echo esc_html__('Publishing supports text, link, hashtags, and one image. If the post has an image, Telegram receives it as a photo with the message as caption.', 'calliope-social-publisher'); ?></li>
                            </ol>
                        </div>
                    </form>
                </div>

            <?php elseif ($calliope_sp_net === 'facebook'): ?>
                <div class="calliope-sp-card">
                    <h3><?php echo esc_html__('Facebook', 'calliope-social-publisher'); ?></h3>

                    <div class="calliope-sp-row">
                        <div class="calliope-sp-hint"><?php echo esc_html__('Automatic publishing to a Facebook Page with text, image, and link support.', 'calliope-social-publisher'); ?></div>
                        <span style="margin-left:auto;"><?php echo wp_kses(calliope_sp_ui_status_badge($calliope_sp_status_fb), calliope_sp_ui_allowed_html()); ?></span>
                        <?php echo wp_kses(calliope_sp_ui_disconnect_button('facebook', $calliope_sp_c_fb), ['a' => ['class' => true, 'href' => true, 'onclick' => true]]); ?>
                    </div>
                    <?php if (!empty($calliope_sp_status_fb['message'])): ?>
                        <div class="calliope-sp-hint" style="margin-top:8px;"><?php echo esc_html($calliope_sp_status_fb['message']); ?></div>
                    <?php endif; ?>

                    <?php if (!empty($calliope_sp_status_fb['is_ready'])): ?>
                        <div class="calliope-sp-hint" style="margin-top:10px;">
                            <?php echo esc_html__('Facebook may allow the Page connection but still block publishing until the connected account completes a security or identity confirmation. If publishing fails with an identity confirmation message, open the Facebook mobile app with the connected account and follow the instructions to confirm your account or phone.', 'calliope-social-publisher'); ?>
                        </div>
                    <?php endif; ?>

                    <?php
                    $calliope_sp_fb_dbg_raw = (string) get_option('calliope_sp_fb_last_oauth_debug');
                    $calliope_sp_fb_dbg = $calliope_sp_fb_dbg_raw ? json_decode($calliope_sp_fb_dbg_raw, true) : null;
                    if (is_array($calliope_sp_fb_dbg)):
                        $calliope_sp_step = (string) ($calliope_sp_fb_dbg['step'] ?? '');
                        $calliope_sp_ts = !empty($calliope_sp_fb_dbg['ts']) ? date_i18n('Y-m-d H:i:s', (int) $calliope_sp_fb_dbg['ts']) : '';
                        ?>
                        <div class="calliope-sp-hint" style="margin-top:10px;">
                            <b><?php echo esc_html__('Last OAuth attempt:', 'calliope-social-publisher'); ?></b> <?php echo esc_html($calliope_sp_step); ?><?php echo $calliope_sp_ts ? ' - ' . esc_html($calliope_sp_ts) : ''; ?>
                            <span style="display:block;opacity:.8;"><?php echo esc_html__('If it remains not connected, check the Logs tab for callback and token details.', 'calliope-social-publisher'); ?></span>
                        </div>
                    <?php endif; ?>

                    <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="margin-top:14px;">
                        <input type="hidden" name="action" value="calliope_sp_test_facebook" />
                        <?php wp_nonce_field('calliope_sp_test_facebook_action', 'calliope_sp_test_facebook_nonce'); ?>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Facebook App ID', 'calliope-social-publisher'); ?></label>
                            <input type="text" name="calliope_sp_fb_app_id" value="<?php echo esc_attr(get_option('calliope_sp_fb_app_id')); ?>" />
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Facebook App Secret', 'calliope-social-publisher'); ?></label>
                            <input name="calliope_sp_fb_app_secret" type="password" placeholder="***" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Leave this empty to keep the saved secret.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Facebook Login for Business Config ID', 'calliope-social-publisher'); ?></label>
                            <input type="text" name="calliope_sp_fb_config_id" value="<?php echo esc_attr(get_option('calliope_sp_fb_config_id')); ?>" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Recommended for current Meta apps. Paste the Configuration ID from Facebook Login for Business if your app uses that product.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Redirect URI', 'calliope-social-publisher'); ?></label>
                            <?php $calliope_sp_fb_redirect_uri = rest_url('calliope-social-publisher/v1/facebook/callback'); ?>
                            <input type="text" readonly value="<?php echo esc_attr($calliope_sp_fb_redirect_uri); ?>" />
                            <div class="calliope-sp-hint"><?php echo esc_html__('Paste this into Meta Developers > Facebook Login > Settings > Valid OAuth Redirect URIs.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-field">
                            <label><?php echo esc_html__('Page destination', 'calliope-social-publisher'); ?></label>
                            <?php
                            $calliope_sp_pages_raw = (string) get_option('calliope_sp_fb_pages_last');
                            $pages = $calliope_sp_pages_raw ? json_decode($calliope_sp_pages_raw, true) : [];
                            $calliope_sp_sel = (string) get_option('calliope_sp_fb_page_id');
                            ?>
                            <select name="calliope_sp_fb_page_id">
                                <option value=""><?php echo esc_html__('Auto-detect', 'calliope-social-publisher'); ?></option>
                                <?php if (is_array($pages)) : foreach ($pages as $calliope_sp_page_item) : ?>
                                    <?php $calliope_sp_pid = (string) ($calliope_sp_page_item['id'] ?? ''); $calliope_sp_pname = (string) ($calliope_sp_page_item['name'] ?? $calliope_sp_pid); ?>
                                    <option value="<?php echo esc_attr($calliope_sp_pid); ?>" <?php selected($calliope_sp_sel, $calliope_sp_pid); ?>><?php echo esc_html($calliope_sp_pname); ?></option>
                                <?php endforeach; endif; ?>
                            </select>
                            <div class="calliope-sp-hint"><?php echo esc_html__('Refresh this screen after connecting if the page list does not appear immediately.', 'calliope-social-publisher'); ?></div>
                        </div>

                        <div class="calliope-sp-actions">
                            <button class="button button-primary" type="submit"><?php echo esc_html__('Save', 'calliope-social-publisher'); ?></button>
                        </div>
                    </form>

                    <div class="calliope-sp-divider"></div>

                    <div class="calliope-sp-actions">
                        <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="display:inline-block;margin-right:8px;">
                            <input type="hidden" name="action" value="calliope_sp_facebook_oauth_start" />
                            <?php wp_nonce_field('calliope_sp_fb_oauth_start_action', 'calliope_sp_fb_oauth_start_nonce'); ?>
                            <button class="button button-secondary" type="submit"><?php echo esc_html__('Connect Facebook', 'calliope-social-publisher'); ?></button>
                        </form>

                        <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="display:inline-block;margin-right:8px;">
                            <input type="hidden" name="action" value="calliope_sp_diagnose_facebook" />
                            <?php wp_nonce_field('calliope_sp_diagnose_facebook_action', 'calliope_sp_diagnose_facebook_nonce'); ?>
                            <button class="button button-secondary" type="submit"><?php echo esc_html__('Run diagnostics', 'calliope-social-publisher'); ?></button>
                        </form>

                        <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="display:inline-block;">
                            <input type="hidden" name="action" value="calliope_sp_facebook_clear_tokens" />
                            <?php wp_nonce_field('calliope_sp_fb_clear_action', 'calliope_sp_fb_clear_nonce'); ?>
                            <button class="button" type="submit"><?php echo esc_html__('Clear tokens', 'calliope-social-publisher'); ?></button>
                        </form>
                    </div>

                    <div class="calliope-sp-divider"></div>

                    <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" class="calliope-sp-actions" style="align-items:center;gap:8px;">
                        <input type="hidden" name="action" value="calliope_sp_facebook_test_publish" />
                        <?php wp_nonce_field('calliope_sp_facebook_test_publish_action', 'calliope_sp_facebook_test_publish_nonce'); ?>
                        <label for="calliope-sp-fb-test-mode" style="margin-right:4px;"><?php echo esc_html__('Facebook test publish', 'calliope-social-publisher'); ?></label>
                        <select id="calliope-sp-fb-test-mode" name="calliope_sp_fb_test_mode" style="max-width:180px;">
                            <option value="text"><?php echo esc_html__('Text only', 'calliope-social-publisher'); ?></option>
                            <option value="link"><?php echo esc_html__('Text + link', 'calliope-social-publisher'); ?></option>
                            <option value="image"><?php echo esc_html__('Text + image', 'calliope-social-publisher'); ?></option>
                        </select>
                        <button class="button button-secondary" type="submit"><?php echo esc_html__('Publish test', 'calliope-social-publisher'); ?></button>
                    </form>
                    <div class="calliope-sp-hint" style="margin-top:6px;"><?php echo esc_html__('This creates a real test post on the connected Facebook Page. Use it only when diagnosing permissions, link restrictions, or image upload errors.', 'calliope-social-publisher'); ?></div>

                    <div class="calliope-sp-hint" style="margin-top:12px;">
                        <?php echo esc_html__('If Meta shows "Invalid Scopes" for pages_* permissions, save a Facebook Login for Business Config ID above and try again. Newer Meta apps often reject the classic Pages scopes unless the login configuration is attached to the OAuth dialog.', 'calliope-social-publisher'); ?>
                    </div>

                    <div class="calliope-sp-hint" style="margin-top:12px;">
                        <b><?php echo esc_html__('Quick guide (Facebook)', 'calliope-social-publisher'); ?></b><br>
                        <?php
                        echo wp_kses(
                            sprintf(
                                /* translators: %s: Meta Developers URL. */
                                __('1) Open <a href="%s" target="_blank" rel="noreferrer">Meta Developers</a> and create an app.<br>2) Choose the <b>Manage all aspects of your Page</b> use case and select the correct <b>Business Portfolio</b>. If the portfolio is wrong, the page list may come back empty.<br>3) In <b>Facebook Login &gt; Settings</b>, add the <b>Valid OAuth Redirect URI</b> shown above.<br>4) In the login settings or use case settings, enable page permissions such as <code>pages_show_list</code>, <code>pages_manage_metadata</code>, <code>pages_manage_posts</code>, and <code>pages_read_engagement</code> when available.<br>5) Add a valid <b>Privacy Policy</b> in the basic settings and publish the app when Meta requires it.<br>6) Paste the <b>App ID</b> and <b>App Secret</b> here, click <b>Save</b>, and only then click <b>Connect Facebook</b>.<br>7) During the Meta permissions screen, choose the correct Page and approve access.<br>8) If no Pages appear, review the Page roles, assigned business portfolio, and selected permissions before trying again.', 'calliope-social-publisher'),
                                esc_url('https://developers.facebook.com/')
                            ),
                            calliope_sp_ui_notice_allowed_html()
                        );
                        ?>
                    </div>
                </div>

            <?php endif; ?>

        <?php else: ?>

            <div class="calliope-sp-card">
                <h3><?php echo esc_html__('Logs', 'calliope-social-publisher'); ?></h3>
                <p class="calliope-sp-muted"><?php echo esc_html__('Up to 50 events are stored. You can clear them at any time.', 'calliope-social-publisher'); ?></p>

                <div class="calliope-sp-actions" style="margin-bottom:12px;">
                    <a class="button" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_test_meta_media_url&calliope_sp_meta_media_network=instagram'), 'calliope_sp_test_meta_media_url_action')); ?>"><?php echo esc_html__('Test Instagram media URL', 'calliope-social-publisher'); ?></a>
                    <a class="button" href="<?php echo esc_url(wp_nonce_url(admin_url('admin-post.php?action=calliope_sp_test_meta_media_url&calliope_sp_meta_media_network=threads'), 'calliope_sp_test_meta_media_url_action')); ?>"><?php echo esc_html__('Test Threads media URL', 'calliope-social-publisher'); ?></a>
                </div>

                <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="margin-bottom:12px;">
                    <input type="hidden" name="action" value="calliope_sp_clear_logs" />
                    <?php wp_nonce_field('calliope_sp_clear_logs_action', 'calliope_sp_clear_logs_nonce'); ?>
                    <button class="button"><?php echo esc_html__('Clear logs', 'calliope-social-publisher'); ?></button>
                </form>

                <?php if (empty($calliope_sp_logs)): ?>
                    <p><em><?php echo esc_html__('No logs yet.', 'calliope-social-publisher'); ?></em></p>
                <?php else: ?>
                    <table class="widefat striped">
                        <thead>
                            <tr>
                                <th><?php echo esc_html__('Date', 'calliope-social-publisher'); ?></th>
                                <th><?php echo esc_html__('Network', 'calliope-social-publisher'); ?></th>
                                <th><?php echo esc_html__('Status', 'calliope-social-publisher'); ?></th>
                                <th><?php echo esc_html__('Message', 'calliope-social-publisher'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        <?php foreach ($calliope_sp_logs as $calliope_sp_row): ?>
                            <tr>
                                <td><?php echo esc_html($calliope_sp_row['date'] ?? ''); ?></td>
                                <td><?php echo esc_html($calliope_sp_row['network'] ?? ''); ?></td>
                                <td><?php echo esc_html($calliope_sp_row['status'] ?? ''); ?></td>
                                <td><?php echo esc_html($calliope_sp_row['message'] ?? ''); ?></td>
                            </tr>
                        <?php endforeach; ?>
                        </tbody>
                    </table>
                <?php endif; ?>
            </div>

            <div class="calliope-sp-card" style="margin-top:18px;">
                <h3><?php echo esc_html__('Uninstall', 'calliope-social-publisher'); ?></h3>
                <p class="calliope-sp-muted"><?php echo esc_html__('By default, deleting Calliope Social Publisher preserves your saved connections and settings. Enable this only if you want WordPress to remove Calliope Social Publisher data when the plugin is deleted.', 'calliope-social-publisher'); ?></p>
                <p class="calliope-sp-muted"><?php echo esc_html__('Disconnecting a network only removes that network credentials. To delete the plugin itself, first deactivate Calliope Social Publisher from the WordPress Plugins screen, then click Delete.', 'calliope-social-publisher'); ?></p>

                <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" style="margin-top:12px;">
                    <input type="hidden" name="action" value="calliope_sp_save_cleanup_settings" />
                    <?php wp_nonce_field('calliope_sp_save_cleanup_settings_action', 'calliope_sp_save_cleanup_settings_nonce'); ?>
                    <label style="display:flex;gap:10px;align-items:flex-start;">
                        <input type="checkbox" name="calliope_sp_cleanup_on_delete" value="1" <?php checked((bool) get_option('calliope_sp_cleanup_on_delete', false)); ?> />
                        <span><?php echo esc_html__('Delete Calliope Social Publisher data when the plugin is deleted (tokens, settings, logs, cached boards/pages/blogs, and temporary Calliope Social Publisher upload files).', 'calliope-social-publisher'); ?></span>
                    </label>
                    <div class="calliope-sp-actions" style="margin-top:12px;">
                        <button class="button button-primary" type="submit"><?php echo esc_html__('Save uninstall setting', 'calliope-social-publisher'); ?></button>
                    </div>
                </form>
            </div>

        <?php endif; ?>

    </div>

    <div class="calliope-sp-review-box" style="background-color:rgba(255,255,255,0);border-style:none;box-shadow:0 18px 44px 0 rgba(24,34,79,0);">
        <div class="calliope-sp-review-box__text">
            <strong><?php echo esc_html__('Enjoying Social Publisher?', 'calliope-social-publisher'); ?></strong>
            <span><?php echo esc_html__('A ⭐⭐⭐⭐⭐ review helps the plugin grow and keeps improvements coming.', 'calliope-social-publisher'); ?></span>
        </div>
        <div class="calliope-sp-review-box__actions">
            <a class="calliope-sp-review-box__button" href="<?php echo esc_url($calliope_sp_review_url); ?>" target="_blank" rel="noopener noreferrer"><?php echo esc_html__('Leave a review', 'calliope-social-publisher'); ?></a>
        </div>
    </div>
</div>
