<?php

if ( !defined( 'ABSPATH' ) ) {
    exit;
}
class Yatoon_SF_Admin {
    public function __construct() {
        add_action( 'admin_menu', array($this, 'add_menu'), 5 );
        add_action( 'admin_enqueue_scripts', array($this, 'enqueue') );
        add_action( 'admin_init', array($this, 'save_settings') );
        add_action( 'admin_notices', array($this, 'admin_notices') );
        add_action( 'wp_ajax_yatoon_sf_admin_preview', array( $this, 'ajax_admin_preview' ) );
    }

    public function add_menu() {
        add_menu_page(
            __( 'Yatoon Social Feed', 'yatoon-social-feed' ),
            __( 'Yatoon Social Feed', 'yatoon-social-feed' ),
            'manage_options',
            'ysf-social-feed-settings',
            array($this, 'render_page'),
            'dashicons-instagram',
            80
        );
    }

    public function enqueue( $hook ) {
        if ( $hook !== 'toplevel_page_ysf-social-feed-settings' ) {
            return;
        }
        wp_enqueue_style(
            'yatoon-sf-admin',
            YATOON_SF_URL . 'admin/admin.css',
            array(),
            YATOON_SF_VERSION
        );
        wp_add_inline_style(
            'yatoon-sf-admin',
            'body.toplevel_page_ysf-social-feed-settings #wpcontent{background:#f6f7f9;} body.toplevel_page_ysf-social-feed-settings .yatoon-booking-sidebar,body.toplevel_page_ysf-social-feed-settings .yatoon-booking-app-sidebar,body.toplevel_page_ysf-social-feed-settings [class*="booking-sidebar"]{display:none!important;}'
        );
        wp_enqueue_style(
            'yatoon-sf-public',
            YATOON_SF_URL . 'public/css/yatoon-sf-public.css',
            array(),
            YATOON_SF_VERSION
        );
        wp_enqueue_script(
            'yatoon-sf-admin',
            YATOON_SF_URL . 'admin/admin.js',
            array('jquery'),
            YATOON_SF_VERSION,
            true
        );
        wp_enqueue_script(
            'yatoon-sf-public',
            YATOON_SF_URL . 'public/js/yatoon-sf-public.js',
            array(),
            YATOON_SF_VERSION,
            true
        );
        wp_localize_script( 'yatoon-sf-admin', 'YatoonSF', array(
            'ajax_url'  => admin_url( 'admin-ajax.php' ),
            'nonce'     => wp_create_nonce( 'yatoon_sf_nonce' ),
            'verifying' => 'Verifying token...',
            'syncing'   => 'Syncing...',
            'error'     => 'Something went wrong. Please try again.',
        ) );
    }

    public function save_settings() {
        if ( !isset( $_POST['yatoon_sf_save_settings'] ) ) {
            return;
        }
        if ( !check_admin_referer( 'yatoon_sf_settings_save' ) ) {
            return;
        }
        if ( !current_user_can( 'manage_options' ) ) {
            return;
        }
        if ( isset( $_POST['yatoon_sf_auto_sync'] ) ) {
            $allowed_freq = array(
                'off',
                'hourly',
                'twicedaily',
                'daily'
            );
            $freq = sanitize_text_field( wp_unslash( $_POST['yatoon_sf_auto_sync'] ) );
            if ( in_array( $freq, $allowed_freq, true ) ) {
                $old_freq = get_option( 'yatoon_sf_auto_sync', 'daily' );
                update_option( 'yatoon_sf_auto_sync', $freq );
                if ( $old_freq !== $freq ) {
                    wp_clear_scheduled_hook( 'yatoon_sf_auto_sync' );
                    if ( 'off' !== $freq ) {
                        wp_schedule_event( time() + MINUTE_IN_SECONDS, $freq, 'yatoon_sf_auto_sync' );
                    }
                }
            }
        }
        if ( isset( $_POST['yatoon_sf_graph_version'] ) ) {
            $graph_version = sanitize_text_field( wp_unslash( $_POST['yatoon_sf_graph_version'] ) );
            if ( preg_match( '/^\\d+\\.\\d+$/', $graph_version ) ) {
                $graph_version = 'v' . $graph_version;
            }
            if ( preg_match( '/^v\\d+\\.\\d+$/', $graph_version ) ) {
                update_option( 'yatoon_sf_graph_version', $graph_version );
            }
        }
        foreach ( array(
            'columns',
            'rows',
            'gap',
            'fb_columns',
            'fb_rows',
            'ig_columns',
            'ig_rows'
        ) as $f ) {
            if ( isset( $_POST['yatoon_sf_' . $f] ) ) {
                update_option( 'yatoon_sf_' . $f, absint( wp_unslash( $_POST['yatoon_sf_' . $f] ) ) );
            }
        }
        $display_mode = isset( $_POST['yatoon_sf_display_mode'] ) ? sanitize_key( wp_unslash( $_POST['yatoon_sf_display_mode'] ) ) : 'image';
        if ( ! in_array( $display_mode, array( 'image', 'text', 'both' ), true ) ) {
            $display_mode = 'image';
        }
        $layout = isset( $_POST['yatoon_sf_layout'] ) ? sanitize_key( wp_unslash( $_POST['yatoon_sf_layout'] ) ) : 'grid';
        if ( ! in_array( $layout, array( 'grid', 'masonry' ), true ) ) {
            $layout = 'grid';
        }
        update_option( 'yatoon_sf_display_mode', $display_mode );
        update_option( 'yatoon_sf_layout', $layout );
        // Custom CSS textarea is only rendered (and thus only ever
        // submitted) when the Pro plan is active, but we double-check
        // here too rather than trusting the form alone.
        $yatoon_sf_is_premium_save = function_exists( 'yatoon_sf_fs' ) && method_exists( yatoon_sf_fs(), 'can_use_premium_code__premium_only' ) && yatoon_sf_fs()->can_use_premium_code__premium_only();
        if ( $yatoon_sf_is_premium_save && isset( $_POST['yatoon_sf_custom_css'] ) ) {
            update_option( 'yatoon_sf_custom_css', sanitize_textarea_field( wp_unslash( $_POST['yatoon_sf_custom_css'] ) ) );
        }
        update_option( 'yatoon_sf_lightbox', ( isset( $_POST['yatoon_sf_lightbox'] ) ? 1 : 0 ) );
        update_option( 'yatoon_sf_show_caption', ( 'both' === $display_mode ? 1 : 0 ) );
        update_option( 'yatoon_sf_open_link', ( isset( $_POST['yatoon_sf_open_link'] ) ? 1 : 0 ) );
        // Header toggles
        foreach ( array(
            'show_header',
            'show_avatar',
            'show_name',
            'show_bio',
            'show_followers',
            'show_follow_btn'
        ) as $t ) {
            update_option( 'yatoon_sf_' . $t, ( isset( $_POST['yatoon_sf_' . $t] ) ? 1 : 0 ) );
        }
        // Header text fields are auto-synced from API, not manually saved
        // Disconnect Facebook
        // phpcs:ignore WordPress.Security.NonceVerification.Missing,WordPress.Security.NonceVerification.Recommended -- Nonce is verified at the top of save_settings().
        if ( isset( $_POST['yatoon_sf_disconnect'] ) ) {
            foreach ( array(
                'fb_page_token',
                'fb_page_id',
                'fb_page_name',
                'fb_avatar',
                'fb_followers',
                'fb_bio',
                'last_sync_fb'
            ) as $k ) {
                update_option( 'yatoon_sf_' . $k, '' );
            }
        }
        // Disconnect Instagram
        // phpcs:ignore WordPress.Security.NonceVerification.Missing,WordPress.Security.NonceVerification.Recommended -- Nonce is verified at the top of save_settings().
        if ( isset( $_POST['yatoon_sf_disconnect_ig'] ) ) {
            foreach ( array(
                'ig_token',
                'ig_user_id',
                'ig_username',
                'ig_display_name',
                'ig_avatar',
                'ig_followers',
                'ig_bio',
                'last_sync_ig'
            ) as $k ) {
                update_option( 'yatoon_sf_' . $k, '' );
            }
        }
        wp_safe_redirect( admin_url( 'admin.php?page=ysf-social-feed-settings&notice=saved' ) );
        exit;
    }

    /**
     * Renders the shortcode with the settings currently in the (unsaved)
     * form, so Step 3's Live Preview panel updates instantly instead of
     * only reflecting whatever was last saved. Only the fields that are
     * actually overridable per-render are accepted here (layout, display
     * mode, lightbox, link, gap, and - Pro only - custom CSS); everything
     * else (tokens, header content, synced photos) still comes from the
     * real saved options, same as the front-end shortcode.
     */
    public function ajax_admin_preview() {
        check_ajax_referer( 'yatoon_sf_nonce', 'nonce' );
        if ( ! current_user_can( 'manage_options' ) ) {
            wp_send_json_error( 'Permission denied.' );
        }

        $layout = isset( $_POST['layout'] ) ? sanitize_key( wp_unslash( $_POST['layout'] ) ) : 'grid';
        if ( ! in_array( $layout, array( 'grid', 'masonry' ), true ) ) {
            $layout = 'grid';
        }
        $display = isset( $_POST['display'] ) ? sanitize_key( wp_unslash( $_POST['display'] ) ) : 'image';
        if ( ! in_array( $display, array( 'image', 'text', 'both' ), true ) ) {
            $display = 'image';
        }
        $lightbox  = ! empty( $_POST['lightbox'] ) ? 1 : 0;
        $open_link = ! empty( $_POST['open_link'] ) ? 1 : 0;
        $gap       = isset( $_POST['gap'] ) ? max( 0, min( 40, (int) $_POST['gap'] ) ) : 8;
        $columns   = isset( $_POST['columns'] ) ? max( 1, min( 12, (int) $_POST['columns'] ) ) : 4;
        // The preview panel scrolls (both directions), so there's no need
        // to truncate rows - just mirror the real 1-20 range so what you
        // see here matches what visitors actually get.
        $rows      = isset( $_POST['rows'] ) ? max( 1, min( 20, (int) $_POST['rows'] ) ) : 3;

        $atts = array(
            'columns'   => $columns,
            'rows'      => $rows,
            'layout'    => $layout,
            'display'   => $display,
            'lightbox'  => $lightbox,
            'open_link' => $open_link,
            'gap'       => $gap,
        );

        $is_premium = function_exists( 'yatoon_sf_fs' ) && method_exists( yatoon_sf_fs(), 'can_use_premium_code__premium_only' ) && yatoon_sf_fs()->can_use_premium_code__premium_only();
        $preview_css_filter = null;

        if ( $is_premium && isset( $_POST['custom_css'] ) ) {
            $preview_css = sanitize_textarea_field( wp_unslash( $_POST['custom_css'] ) );
            // Temporarily swap in the not-yet-saved textarea value for this
            // one render only, so Custom CSS also previews live.
            $preview_css_filter = function () use ( $preview_css ) {
                return $preview_css;
            };
            add_filter( 'pre_option_yatoon_sf_custom_css', $preview_css_filter );
        }

        $shortcode = new Yatoon_SF_Shortcode();
        $html      = $shortcode->render( $atts );

        if ( $preview_css_filter ) {
            remove_filter( 'pre_option_yatoon_sf_custom_css', $preview_css_filter );
        }

        wp_send_json_success( array( 'html' => $html ) );
    }

    public function admin_notices() {
        $this->maybe_render_token_warning();

        // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Notice flag is read-only and only controls admin message display.
        if ( !isset( $_GET['notice'] ) ) {
            return;
        }
        $map = array(
            'saved' => array('success', 'Settings saved.'),
        );
        // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Notice flag is read-only and only controls admin message display.
        $n = sanitize_key( $_GET['notice'] );
        if ( isset( $map[$n] ) ) {
            list( $type, $msg ) = $map[$n];
            echo '<div class="notice notice-' . esc_attr( $type ) . ' is-dismissible"><p>' . esc_html( $msg ) . '</p></div>';
        }
    }

    /**
     * Proactive "your token probably expired" warning, shown only on our
     * own settings screen. This covers two signals rather than just
     * waiting for a hard sync failure:
     *   1. Several consecutive failed syncs for a platform.
     *   2. The Instagram token is older than its ~60-day validity window
     *      and hasn't been re-saved since.
     */
    private function maybe_render_token_warning() {
        if ( ! current_user_can( 'manage_options' ) ) {
            return;
        }
        // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only check of which admin page we're on.
        if ( ! isset( $_GET['page'] ) || 'ysf-social-feed-settings' !== $_GET['page'] ) {
            return;
        }

        $messages = array();

        $fb_fails = (int) get_option( 'yatoon_sf_fb_sync_fail_count', 0 );
        if ( $fb_fails >= Yatoon_SF_Sync::FAIL_THRESHOLD && get_option( 'yatoon_sf_fb_page_token' ) ) {
            $messages[] = sprintf(
                /* translators: %d: number of consecutive failed syncs */
                esc_html__( 'The last %d Facebook syncs in a row have failed. Your Page token may have expired or been revoked - try re-saving it in Step 1A.', 'yatoon-social-feed' ),
                $fb_fails
            );
        }

        $ig_token = get_option( 'yatoon_sf_ig_token' );
        if ( $ig_token ) {
            $ig_fails = (int) get_option( 'yatoon_sf_ig_sync_fail_count', 0 );
            $saved_at = get_option( 'yatoon_sf_ig_token_saved_at', '' );
            $is_stale = false;
            if ( $saved_at ) {
                $age_days = ( current_time( 'timestamp' ) - strtotime( $saved_at ) ) / DAY_IN_SECONDS; // phpcs:ignore WordPress.DateTime.RestrictedFunctions.date_date_default_timezone_get
                $is_stale = $age_days >= 55; // warn a few days before the ~60-day window closes
            }

            if ( $ig_fails >= Yatoon_SF_Sync::FAIL_THRESHOLD ) {
                $messages[] = esc_html__( 'The last few Instagram syncs in a row have failed. Your Instagram token has likely expired - please generate a new one in Step 1B.', 'yatoon-social-feed' );
            } elseif ( $is_stale ) {
                $messages[] = esc_html__( 'Your Instagram token is close to its ~60-day expiry. Refresh it soon in Step 1B to avoid an interruption in syncing.', 'yatoon-social-feed' );
            }
        }

        foreach ( $messages as $message ) {
            echo '<div class="notice notice-warning"><p><strong>Yatoon Social Feed:</strong> ' . esc_html( $message ) . '</p></div>';
        }
    }

    public function render_page() {
        $page_token = get_option( 'yatoon_sf_fb_page_token', '' );
        $page_name = get_option( 'yatoon_sf_fb_page_name', '' );
        $page_id = get_option( 'yatoon_sf_fb_page_id', '' );
        $ig_user_id = get_option( 'yatoon_sf_ig_user_id', '' );
        $ig_user = get_option( 'yatoon_sf_ig_username', '' );
        $ig_display = get_option( 'yatoon_sf_ig_display_name', '' );
        $connected = !empty( $page_token ) && !empty( $page_id );
        $ig_linked = !empty( $ig_user_id );
        $columns = get_option( 'yatoon_sf_columns', 4 );
        $rows = get_option( 'yatoon_sf_rows', 3 );
        $gap = get_option( 'yatoon_sf_gap', 8 );
        $display_mode = get_option( 'yatoon_sf_display_mode', get_option( 'yatoon_sf_show_caption', 0 ) ? 'both' : 'image' );
        $layout = get_option( 'yatoon_sf_layout', 'grid' );
        $lightbox = get_option( 'yatoon_sf_lightbox', 1 );
        $open_link = get_option( 'yatoon_sf_open_link', 1 );
        $auto_sync = get_option( 'yatoon_sf_auto_sync', 'daily' );
        $last_ig = get_option( 'yatoon_sf_last_sync_ig', '' );
        $last_fb = get_option( 'yatoon_sf_last_sync_fb', '' );
        $next_auto_sync = wp_next_scheduled( 'yatoon_sf_auto_sync' );
        $last_auto_sync = get_option( 'yatoon_sf_last_auto_sync_finished', '' );
        $last_error_fb = get_option( 'yatoon_sf_last_error_fb', '' );
        $last_error_ig = get_option( 'yatoon_sf_last_error_ig', '' );
        $graph_version = get_option( 'yatoon_sf_graph_version', Yatoon_SF_API::DEFAULT_GRAPH_VERSION );
        ?>
        <div class="yatoon-sf-wrap">

            <div class="yatoon-sf-header">
                <h1>Yatoon Social Feed</h1>
                <p class="yatoon-sf-tagline">Paste your permanent Page token once - syncs Facebook &amp; Instagram forever, no login required.</p>
            </div>

        <?php 
        $yatoon_sf_show_upgrade_notice = true;
        if ( function_exists( 'yatoon_sf_fs' ) && method_exists( yatoon_sf_fs(), 'can_use_premium_code__premium_only' ) && yatoon_sf_fs()->can_use_premium_code__premium_only() ) {
            $yatoon_sf_show_upgrade_notice = false;
        }
        if ( $yatoon_sf_show_upgrade_notice ) {
            ?>
            <div class="yatoon-sf-section" style="background:#fff7ed;border:1px solid #fed7aa;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;">
                <div>
                    <strong style="color:#9a3412;">Remove the "by Yatoon.com" credit</strong>
                    <p style="margin:4px 0 0;color:#7c2d12;font-size:13px;">Upgrade to Pro to hide the footer credit shown under your photo grid.</p>
                </div>
                <a href="<?php 
            echo esc_url( yatoon_sf_fs()->get_upgrade_url() );
            ?>" class="button button-primary">Upgrade to Pro</a>
            </div>
            <?php 
        }
        ?>

            <form method="post" action="">
                <?php 
        wp_nonce_field( 'yatoon_sf_settings_save' );
        ?>
                <input type="hidden" name="yatoon_sf_save_settings" value="1" />

                <!-- STEP 1: Token -->
                <div class="yatoon-sf-section">
                    <h2 class="yatoon-sf-section-title">
                        <span class="dashicons dashicons-admin-network"></span>
                        Step 1A &mdash; Facebook Page Token
                    </h2>

                    <?php 
        if ( $connected ) {
            ?>

                        <!-- Connected -->
                        <div class="yatoon-sf-connected-panel">
                            <div class="yatoon-sf-platform-row">
                                <div class="yatoon-sf-platform-icon yatoon-sf-fb-icon">
                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073C24 5.404 18.627 0 12 0S0 5.404 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.413c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/></svg>
                                </div>
                                <div class="yatoon-sf-platform-info">
                                    <strong>Facebook Page</strong>
                                    <span class="yatoon-sf-badge-connected">Connected</span>
                                    <p class="yatoon-sf-acct"><?php 
            echo esc_html( $page_name );
            ?></p>
                                    <p class="yatoon-sf-last">Last sync: <?php 
            echo ( $last_fb ? esc_html( $last_fb ) : esc_html__( 'Not synced yet', 'yatoon-social-feed' ) );
            ?></p>
                                    <?php if ( $last_error_fb ) { ?>
                                        <p class="yatoon-sf-warn-text">Last error: <?php echo esc_html( $last_error_fb ); ?></p>
                                    <?php } ?>
                                </div>
                            </div>

                            <div class="yatoon-sf-divider"></div>

                            <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0 4px;">
                                <button type="button" class="yatoon-sf-btn yatoon-sf-btn-all" data-platform="facebook">Sync Facebook</button>
                                <button type="submit" name="yatoon_sf_disconnect" value="1" class="yatoon-sf-btn yatoon-sf-btn-disconnect"
                                    onclick="return confirm('Remove Facebook token only? Instagram token and synced photos stay in database.')">Remove Facebook Token</button>
                            </div>
                        </div>

                    <?php 
        } else {
            ?>

                        <!-- Token input -->
                        <p class="yatoon-sf-section-desc">
                            Generate a <strong>permanent Facebook Page Access Token</strong> from Meta Business Suite and paste it below. This saves Facebook only; Instagram is configured separately in Step 1B.
                            See the <strong>Setup Guide</strong> at the bottom for step-by-step instructions.
                        </p>
                        <div class="yatoon-sf-token-input-row">
                            <input type="text" id="yatoon-sf-token-input" placeholder="Paste your Page Access Token here..." class="regular-text yatoon-sf-token-input" />
                            <button type="button" id="yatoon-sf-verify-btn" class="yatoon-sf-btn yatoon-sf-btn-verify">Verify &amp; Save Facebook Token</button>
                        </div>
                        <div id="yatoon-sf-verify-result" class="yatoon-sf-verify-result" style="display:none;"></div>

                    <?php 
        }
        ?>
                </div>

                <!-- STEP 1B: Instagram Token -->
                <?php 
        $ig_token_saved = get_option( 'yatoon_sf_ig_token', '' );
        $ig_username_saved = get_option( 'yatoon_sf_ig_username', '' );
        $ig_display_saved = get_option( 'yatoon_sf_ig_display_name', '' );
        ?>
                <div class="yatoon-sf-section">
                    <h2 class="yatoon-sf-section-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="18" height="18"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
                        Step 1B &mdash; Instagram Access Token
                    </h2>

                    <?php 
        if ( !empty( $ig_token_saved ) && !empty( $ig_username_saved ) ) {
            ?>
                        <div class="yatoon-sf-connected-panel">
                            <div class="yatoon-sf-platform-row">
                                <div class="yatoon-sf-platform-icon yatoon-sf-ig-icon">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
                                </div>
                                <div class="yatoon-sf-platform-info">
                                    <strong>Instagram Account</strong>
                                    <span class="yatoon-sf-badge-connected">Connected</span>
                                    <p class="yatoon-sf-acct"><?php 
            echo esc_html( ( $ig_display_saved ? $ig_display_saved : '@' . $ig_username_saved ) );
            ?></p>
                                    <?php 
            if ( $ig_display_saved && $ig_username_saved ) {
                ?><p class="yatoon-sf-last">@<?php 
                echo esc_html( $ig_username_saved );
                ?></p><?php 
            }
            ?>
                                    <?php 
            $last_ig_top = get_option( 'yatoon_sf_last_sync_ig', '' );
            if ( $last_ig_top ) {
                ?><p class="yatoon-sf-last">Last sync: <?php 
                echo esc_html( $last_ig_top );
                ?></p><?php 
            }
            ?>
                                    <?php if ( $last_error_ig ) { ?>
                                        <p class="yatoon-sf-warn-text">Last error: <?php echo esc_html( $last_error_ig ); ?></p>
                                    <?php } ?>
                                </div>
                            </div>
                            <div class="yatoon-sf-divider"></div>

                            <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0 4px;">
                                <button type="button" class="yatoon-sf-btn yatoon-sf-btn-all" data-platform="instagram">Sync Instagram</button>
                                <button type="submit" name="yatoon_sf_disconnect_ig" value="1" class="yatoon-sf-btn yatoon-sf-btn-disconnect" onclick="return confirm('Remove Instagram token? Synced photos stay in database.')">Remove Token</button>
                            </div>
                        </div>
                    <?php 
        } else {
            ?>
                        <p class="yatoon-sf-section-desc">
                            Generate an <strong>Instagram User Access Token</strong> via Instagram Business Login, then paste it here.
                        </p>
                        <p style="margin:0 0 14px;display:flex;gap:8px;flex-wrap:wrap;">
                            <a href="https://developers.facebook.com/apps/" target="_blank" rel="noopener" class="button">Open Meta Apps (Desktop)</a>
                            <a href="https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/get-started/" target="_blank" rel="noopener" class="button">Instagram Token Guide</a>
                        </p>
                        <p class="yatoon-sf-section-desc" style="margin-top:-4px;">
                            Use a computer for this step. Meta's app dashboard and token generator are much easier to complete on desktop.
                        </p>
                        <div class="yatoon-sf-token-input-row">
                            <input type="text" id="yatoon-sf-ig-token-input" placeholder="Paste your Instagram Access Token here..." class="regular-text yatoon-sf-token-input" />
                            <button type="button" id="yatoon-sf-ig-verify-btn" class="yatoon-sf-btn yatoon-sf-btn-verify">
                                &#10003; Verify &amp; Save IG Token
                            </button>
                        </div>
                        <div id="yatoon-sf-ig-verify-result" class="yatoon-sf-verify-result" style="display:none;"></div>
                    <?php 
        }
        ?>
                </div>

                <!-- STEP 2: Header Settings -->
                <div class="yatoon-sf-section">
                    <h2 class="yatoon-sf-section-title">
                        <span class="dashicons dashicons-id-alt"></span>
                        Step 2 &mdash; Profile Header
                    </h2>
                    <p class="yatoon-sf-section-desc">Show a profile card above the photo grid. Toggle each element on or off, and customize the text.</p>

                    <div class="yatoon-sf-fields" style="margin-bottom:16px;">
                        <div class="yatoon-sf-field yatoon-sf-field-check">
                            <label><input type="checkbox" name="yatoon_sf_show_header" value="1" <?php 
        checked( get_option( 'yatoon_sf_show_header', 1 ), 1 );
        ?> /> Show profile header</label>
                        </div>
                        <div class="yatoon-sf-field yatoon-sf-field-check">
                            <label><input type="checkbox" name="yatoon_sf_show_avatar" value="1" <?php 
        checked( get_option( 'yatoon_sf_show_avatar', 1 ), 1 );
        ?> /> Show avatar / logo</label>
                        </div>
                        <div class="yatoon-sf-field yatoon-sf-field-check">
                            <label><input type="checkbox" name="yatoon_sf_show_name" value="1" <?php 
        checked( get_option( 'yatoon_sf_show_name', 1 ), 1 );
        ?> /> Show page / account name</label>
                        </div>
                        <div class="yatoon-sf-field yatoon-sf-field-check">
                            <label><input type="checkbox" name="yatoon_sf_show_followers" value="1" <?php 
        checked( get_option( 'yatoon_sf_show_followers', 1 ), 1 );
        ?> /> Show follower count</label>
                        </div>
                        <div class="yatoon-sf-field yatoon-sf-field-check">
                            <label><input type="checkbox" name="yatoon_sf_show_bio" value="1" <?php 
        checked( get_option( 'yatoon_sf_show_bio', 1 ), 1 );
        ?> /> Show bio / description</label>
                        </div>
                        <div class="yatoon-sf-field yatoon-sf-field-check">
                            <label><input type="checkbox" name="yatoon_sf_show_follow_btn" value="1" <?php 
        checked( get_option( 'yatoon_sf_show_follow_btn', 1 ), 1 );
        ?> /> Show Follow button</label>
                        </div>
                    </div>

                    <!-- Auto-synced info preview -->
                    <?php 
        $fb_name_preview = get_option( 'yatoon_sf_fb_page_name', '' );
        $fb_avatar_preview = get_option( 'yatoon_sf_fb_avatar', '' );
        $fb_followers_preview = get_option( 'yatoon_sf_fb_followers', '' );
        $ig_username_preview = get_option( 'yatoon_sf_ig_username', '' );
        $ig_name_preview = get_option( 'yatoon_sf_ig_display_name', '' );
        if ( !$ig_name_preview && $ig_username_preview ) {
            $ig_name_preview = '@' . $ig_username_preview;
        }
        $ig_avatar_preview = get_option( 'yatoon_sf_ig_avatar', '' );
        $ig_followers_preview = get_option( 'yatoon_sf_ig_followers', '' );
        if ( $fb_name_preview || $ig_name_preview ) {
            ?>
                    <div class="yatoon-sf-synced-preview">
                        <p class="yatoon-sf-synced-title">Auto-synced data (updates on each sync):</p>
                        <?php 
            if ( $fb_name_preview ) {
                ?>
                        <div class="yatoon-sf-synced-row">
                            <span class="yatoon-sf-synced-platform yatoon-sf-synced-fb">FB</span>
                            <?php 
                if ( $fb_avatar_preview ) {
                    ?><img src="<?php 
                    echo esc_url( $fb_avatar_preview );
                    ?>" class="yatoon-sf-synced-avatar" /><?php 
                }
                ?>
                            <span><strong><?php 
                echo esc_html( $fb_name_preview );
                ?></strong><?php 
                if ( $fb_followers_preview ) {
                    ?> &middot; <?php 
                    echo esc_html( $fb_followers_preview );
                    ?> followers<?php 
                }
                ?></span>
                        </div>
                        <?php 
            }
            ?>
                        <?php 
            if ( $ig_name_preview ) {
                ?>
                        <div class="yatoon-sf-synced-row">
                            <span class="yatoon-sf-synced-platform yatoon-sf-synced-ig">IG</span>
                            <?php 
                if ( $ig_avatar_preview ) {
                    ?><img src="<?php 
                    echo esc_url( $ig_avatar_preview );
                    ?>" class="yatoon-sf-synced-avatar" /><?php 
                }
                ?>
                            <span><strong><?php 
                echo esc_html( $ig_name_preview );
                ?></strong><?php 
                if ( $ig_username_preview && strpos( $ig_name_preview, '@' ) !== 0 ) {
                    ?> &middot; @<?php 
                    echo esc_html( $ig_username_preview );
                }
                if ( $ig_followers_preview ) {
                    ?> &middot; <?php 
                    echo esc_html( $ig_followers_preview );
                    ?> followers<?php 
                }
                ?></span>
                        </div>
                        <?php 
            }
            ?>
                    </div>
                    <?php 
        }
        ?>
                </div>

                <!-- STEP 3: Display Settings -->
                <?php 
        $fb_columns = get_option( 'yatoon_sf_fb_columns', 4 );
        $fb_rows = get_option( 'yatoon_sf_fb_rows', 3 );
        $ig_columns = get_option( 'yatoon_sf_ig_columns', 4 );
        $ig_rows = get_option( 'yatoon_sf_ig_rows', 3 );
        ?>
                <div class="yatoon-sf-section">
                    <h2 class="yatoon-sf-section-title">
                        <span class="dashicons dashicons-admin-appearance"></span>
                        Step 3 &mdash; Display Settings
                    </h2>
                    <p class="yatoon-sf-section-desc">Choose a simple look for the feed. Most sites only need these few controls.</p>

                    <div class="yatoon-sf-step3-columns">
                    <div class="yatoon-sf-step3-controls">
                    <div class="yatoon-sf-fields">
                        <div class="yatoon-sf-field">
                            <label for="yatoon_sf_layout">Layout</label>
                            <select id="yatoon_sf_layout" name="yatoon_sf_layout">
                                <option value="grid" <?php selected( $layout, 'grid' ); ?>>Clean grid</option>
                                <option value="masonry" <?php selected( $layout, 'masonry' ); ?>>Masonry</option>
                            </select>
                            <span class="yatoon-sf-hint">Grid is neat and predictable. Masonry feels more like a social wall.</span>
                        </div>
                        <div class="yatoon-sf-field">
                            <label for="yatoon_sf_display_mode">Post display</label>
                            <select id="yatoon_sf_display_mode" name="yatoon_sf_display_mode">
                                <option value="image" <?php selected( $display_mode, 'image' ); ?>>Photos + videos</option>
                                <option value="text" <?php selected( $display_mode, 'text' ); ?>>Text only</option>
                                <option value="both" <?php selected( $display_mode, 'both' ); ?>>Photos/videos + text</option>
                            </select>
                            <span class="yatoon-sf-hint">Videos show as a poster image with a play button; captions/messages are synced when Meta provides them.</span>
                        </div>
                        <div class="yatoon-sf-field yatoon-sf-field-check">
                            <label><input type="checkbox" name="yatoon_sf_lightbox" value="1" <?php checked( $lightbox, 1 ); ?> /> Open photos in popup lightbox</label>
                        </div>
                        <div class="yatoon-sf-field yatoon-sf-field-check">
                            <label><input type="checkbox" name="yatoon_sf_open_link" value="1" <?php 
        checked( $open_link, 1 );
        ?> /> Show original-post link in lightbox</label>
                        </div>
                        <div class="yatoon-sf-field">
                            <label for="yatoon_sf_columns">Columns</label>
                            <input type="number" id="yatoon_sf_columns" name="yatoon_sf_columns" value="<?php echo esc_attr( $columns ); ?>" min="1" max="12" class="small-text" />
                            <span class="yatoon-sf-hint">Used by the default <code>[yatoon_social_feed]</code> shortcode (combined Facebook + Instagram).</span>
                        </div>
                        <div class="yatoon-sf-field">
                            <label for="yatoon_sf_rows">Rows</label>
                            <input type="number" id="yatoon_sf_rows" name="yatoon_sf_rows" value="<?php echo esc_attr( $rows ); ?>" min="1" max="20" class="small-text" />
                            <span class="yatoon-sf-hint">Total photos shown = columns &times; rows.</span>
                        </div>
                    </div>

                    <details class="yatoon-sf-advanced">
                        <summary>Advanced grid controls</summary>

                    <!-- Facebook grid settings -->
                    <div class="yatoon-sf-header-platform-block">
                        <h3 class="yatoon-sf-platform-label yatoon-sf-platform-label-fb">
                            <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M24 12.073C24 5.404 18.627 0 12 0S0 5.404 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.413c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/></svg>
                            Facebook Grid
                        </h3>
                        <div class="yatoon-sf-fields yatoon-sf-fields-3">
                            <div class="yatoon-sf-field">
                                <label for="yatoon_sf_fb_columns">Columns</label>
                                <input type="number" id="yatoon_sf_fb_columns" name="yatoon_sf_fb_columns" value="<?php 
        echo esc_attr( $fb_columns );
        ?>" min="1" max="12" class="small-text" />
                                <span class="yatoon-sf-hint">Photos per row</span>
                            </div>
                            <div class="yatoon-sf-field">
                                <label for="yatoon_sf_fb_rows">Rows</label>
                                <input type="number" id="yatoon_sf_fb_rows" name="yatoon_sf_fb_rows" value="<?php 
        echo esc_attr( $fb_rows );
        ?>" min="1" max="20" class="small-text" />
                                <span class="yatoon-sf-hint">Number of rows</span>
                            </div>
                            <div class="yatoon-sf-field">
                                <span class="yatoon-sf-hint" style="margin-top:24px;display:block;">Total: <strong><span class="yatoon-sf-fb-total"><?php 
        echo esc_html( $fb_columns * $fb_rows );
        ?></span></strong> photos</span>
                            </div>
                        </div>
                    </div>

                    <!-- Instagram grid settings -->
                    <div class="yatoon-sf-header-platform-block" style="margin-top:16px;">
                        <h3 class="yatoon-sf-platform-label yatoon-sf-platform-label-ig">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="16" height="16"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
                            Instagram Grid
                        </h3>
                        <div class="yatoon-sf-fields yatoon-sf-fields-3">
                            <div class="yatoon-sf-field">
                                <label for="yatoon_sf_ig_columns">Columns</label>
                                <input type="number" id="yatoon_sf_ig_columns" name="yatoon_sf_ig_columns" value="<?php 
        echo esc_attr( $ig_columns );
        ?>" min="1" max="12" class="small-text" />
                                <span class="yatoon-sf-hint">Photos per row</span>
                            </div>
                            <div class="yatoon-sf-field">
                                <label for="yatoon_sf_ig_rows">Rows</label>
                                <input type="number" id="yatoon_sf_ig_rows" name="yatoon_sf_ig_rows" value="<?php 
        echo esc_attr( $ig_rows );
        ?>" min="1" max="20" class="small-text" />
                                <span class="yatoon-sf-hint">Number of rows</span>
                            </div>
                            <div class="yatoon-sf-field">
                                <span class="yatoon-sf-hint" style="margin-top:24px;display:block;">Total: <strong><span class="yatoon-sf-ig-total"><?php 
        echo esc_html( $ig_columns * $ig_rows );
        ?></span></strong> photos</span>
                            </div>
                        </div>
                    </div>

                    <div class="yatoon-sf-fields" style="margin-top:16px;">
                        <div class="yatoon-sf-field">
                            <label for="yatoon_sf_gap">Gap (px)</label>
                            <input type="number" id="yatoon_sf_gap" name="yatoon_sf_gap" value="<?php 
        echo esc_attr( $gap );
        ?>" min="0" max="40" class="small-text" />
                            <span class="yatoon-sf-hint">Space between photos (applies to both)</span>
                        </div>
                    </div>

                    </details>

                    <?php
                    $yatoon_sf_is_premium = function_exists( 'yatoon_sf_fs' ) && method_exists( yatoon_sf_fs(), 'can_use_premium_code__premium_only' ) && yatoon_sf_fs()->can_use_premium_code__premium_only();
                    ?>
                    <div class="yatoon-sf-field" style="margin-top:16px;">
                        <label for="yatoon_sf_custom_css">
                            Custom CSS
                            <?php if ( ! $yatoon_sf_is_premium ) { ?>
                                <span class="yatoon-sf-badge-connected" style="background:#9a3412;">Pro</span>
                            <?php } ?>
                        </label>
                        <?php if ( $yatoon_sf_is_premium ) { ?>
                            <textarea id="yatoon_sf_custom_css" name="yatoon_sf_custom_css" rows="6" class="large-text code" placeholder=".yatoon-sf-grid { --yatoon-gap: 12px; }"><?php echo esc_textarea( get_option( 'yatoon_sf_custom_css', '' ) ); ?></textarea>
                            <span class="yatoon-sf-hint">Applies only around this feed's markup (.yatoon-sf-grid, .yatoon-sf-item, .yatoon-sf-header-card, etc). Loaded after the plugin's own stylesheet.</span>
                        <?php } else { ?>
                            <textarea disabled rows="6" class="large-text code" placeholder="Upgrade to Pro to add your own CSS overrides here."></textarea>
                            <span class="yatoon-sf-hint">
                                <a href="<?php echo esc_url( yatoon_sf_fs()->get_upgrade_url() ); ?>">Upgrade to Pro</a> to fine-tune colors, spacing and fonts without a child theme.
                            </span>
                        <?php } ?>
                    </div>
                    </div>
                    <!-- /.yatoon-sf-step3-controls -->

                    <div class="yatoon-sf-step3-preview">
                        <div class="yatoon-sf-live-preview-sticky">
                            <h3 class="yatoon-sf-live-preview-title"><span class="dashicons dashicons-visibility"></span> Live Preview</h3>
                            <p class="yatoon-sf-hint">Updates as you change settings below - no need to save first. Scrolls in both directions for larger grids.</p>
                            <div class="yatoon-sf-admin-live-preview" id="yatoon-sf-live-preview-content">
                                <?php echo do_shortcode( sprintf( '[yatoon_social_feed columns="%d" rows="%d"]', max( 1, min( 12, (int) $columns ) ), max( 1, min( 20, (int) $rows ) ) ) ); ?>
                            </div>
                            <div class="yatoon-sf-live-preview-loading" id="yatoon-sf-live-preview-loading" style="display:none;">Updating preview&hellip;</div>
                        </div>
                    </div>
                    </div>
                    <!-- /.yatoon-sf-step3-columns -->
                </div>

                <!-- Auto Sync -->
                <div class="yatoon-sf-section">
                    <h2 class="yatoon-sf-section-title"><span class="dashicons dashicons-clock"></span> Sync Health</h2>
                    <div class="yatoon-sf-health-grid">
                        <div class="yatoon-sf-health-card <?php echo $connected ? 'is-ok' : 'is-warn'; ?>">
                            <strong>Facebook</strong>
                            <span><?php echo $last_error_fb ? esc_html__( 'Needs attention', 'yatoon-social-feed' ) : ( $connected ? esc_html__( 'Ready', 'yatoon-social-feed' ) : esc_html__( 'Not connected', 'yatoon-social-feed' ) ); ?></span>
                            <small><?php echo $last_fb ? esc_html( 'Last sync: ' . $last_fb ) : esc_html__( 'No successful sync yet', 'yatoon-social-feed' ); ?></small>
                        </div>
                        <div class="yatoon-sf-health-card <?php echo $ig_linked ? 'is-ok' : 'is-warn'; ?>">
                            <strong>Instagram</strong>
                            <span><?php echo $last_error_ig ? esc_html__( 'Needs attention', 'yatoon-social-feed' ) : ( $ig_linked ? esc_html__( 'Ready', 'yatoon-social-feed' ) : esc_html__( 'Not connected', 'yatoon-social-feed' ) ); ?></span>
                            <small><?php echo $last_ig ? esc_html( 'Last sync: ' . $last_ig ) : esc_html__( 'No successful sync yet', 'yatoon-social-feed' ); ?></small>
                        </div>
                        <div class="yatoon-sf-health-card <?php echo $next_auto_sync ? 'is-ok' : 'is-warn'; ?>">
                            <strong>Auto-sync</strong>
                            <span><?php echo $next_auto_sync ? esc_html__( 'Scheduled', 'yatoon-social-feed' ) : esc_html__( 'Not scheduled', 'yatoon-social-feed' ); ?></span>
                            <small><?php echo $next_auto_sync ? esc_html( wp_date( 'Y-m-d H:i:s', $next_auto_sync ) ) : esc_html__( 'Manual sync only', 'yatoon-social-feed' ); ?></small>
                        </div>
                    </div>
                    <?php if ( $last_error_fb || $last_error_ig ) { ?>
                        <div class="yatoon-sf-sync-diagnostics">
                            <?php if ( $last_error_fb ) { ?><p><strong>Facebook last error:</strong> <?php echo esc_html( $last_error_fb ); ?></p><?php } ?>
                            <?php if ( $last_error_ig ) { ?><p><strong>Instagram last error:</strong> <?php echo esc_html( $last_error_ig ); ?></p><?php } ?>
                        </div>
                    <?php } ?>
                    <details class="yatoon-sf-advanced">
                        <summary>Advanced sync settings</summary>
                    <div class="yatoon-sf-field">
                        <label for="yatoon_sf_auto_sync">Frequency</label>
                        <select id="yatoon_sf_auto_sync" name="yatoon_sf_auto_sync">
                            <option value="off"        <?php 
        selected( $auto_sync, 'off' );
        ?>>Off (manual only)</option>
                            <option value="hourly"     <?php 
        selected( $auto_sync, 'hourly' );
        ?>>Every hour</option>
                            <option value="twicedaily" <?php 
        selected( $auto_sync, 'twicedaily' );
        ?>>Twice a day</option>
                            <option value="daily"      <?php 
        selected( $auto_sync, 'daily' );
        ?>>Once a day</option>
                        </select>
                        <span class="yatoon-sf-hint">
                            WordPress runs this with WP-Cron, so it triggers on site traffic or your host cron. Next auto-sync:
                            <strong><?php echo $next_auto_sync ? esc_html( wp_date( 'Y-m-d H:i:s', $next_auto_sync ) ) : esc_html__( 'Not scheduled', 'yatoon-social-feed' ); ?></strong>
                        </span>
                        <?php if ( $last_auto_sync ) { ?>
                            <span class="yatoon-sf-hint">Last auto-sync run: <strong><?php echo esc_html( $last_auto_sync ); ?></strong></span>
                        <?php } ?>
                    </div>
                    <div class="yatoon-sf-field" style="margin-top:16px;">
                        <label for="yatoon_sf_graph_version">Meta API version</label>
                        <input type="text" id="yatoon_sf_graph_version" name="yatoon_sf_graph_version" value="<?php 
        echo esc_attr( $graph_version );
                        ?>" class="small-text" pattern="v?[0-9]+\.[0-9]+" />
                        <span class="yatoon-sf-hint">Default: v25.0. Change only if Meta retires the current Graph API version.</span>
                    </div>
                    </details>
                </div>

                <!-- Shortcode -->
                <div class="yatoon-sf-section yatoon-sf-section-shortcode">
                    <h2 class="yatoon-sf-section-title"><span class="dashicons dashicons-shortcode"></span> Add to Your Website</h2>
                    <p>Paste this shortcode into any page or post:</p>
                    <div class="yatoon-sf-shortcode-box">
                        <code>[yatoon_social_feed]</code>
                        <button type="button" class="yatoon-sf-copy-btn" data-copy="[yatoon_social_feed]">Copy</button>
                    </div>
                    <p style="margin-top:10px;color:#6b7280;font-size:13px;">
                        Show one platform: <code>[yatoon_social_feed platform="instagram"]</code> or <code>[yatoon_social_feed platform="facebook"]</code><br>
                        Override grid: <code>[yatoon_social_feed columns="3" rows="4"]</code>
                    </p>
                </div>

                <!-- Setup Guide -->
                <details class="yatoon-sf-section yatoon-sf-section-guide yatoon-sf-guide-details">
                    <summary><span class="dashicons dashicons-editor-help"></span> Facebook token setup guide</summary>
                    <ol class="yatoon-sf-guide">
                        <li>
                            <strong>Go to Graph API Explorer</strong><br>
                            Open <a href="https://developers.facebook.com/tools/explorer/" target="_blank" rel="noopener">developers.facebook.com/tools/explorer</a>
                        </li>
                        <li>
                            <strong>Select your App</strong><br>
                            Top-right dropdown "Meta App"  - select any app (or create a basic one). It doesn't matter which app.
                        </li>
                        <li>
                            <strong>Switch to Page Token</strong><br>
                            Under "User or Page" dropdown  - select <strong>"Get Page Access Token"</strong>  - choose <strong>your Facebook Page</strong>  - authorize when prompted.
                        </li>
                        <li>
                            <strong>Copy the token</strong><br>
                            The Access Token field will update with a Page token. Click the copy icon next to it.
                        </li>
                        <li>
                            <strong>Make it permanent (never expires)</strong><br>
                            Open <a href="https://developers.facebook.com/tools/debug/accesstoken/" target="_blank" rel="noopener">Access Token Debugger</a> - paste your token - click <strong>"Extend Access Token"</strong> at the bottom - copy the new token.
                        </li>
                        <li>
                            <strong>Paste the token above</strong><br>
                            Come back here, paste into the token field, click <strong>"Verify &amp; Save Facebook Token"</strong>. Done!</li>
                    </ol>
                    <div class="yatoon-sf-tip-box">
                        <strong>Page tokens are permanent</strong> - unlike User tokens (60 days), a Page Access Token never expires as long as your password doesn't change and you don't revoke app access.
                    </div>
                </details>

                <!-- Instagram Setup Guide -->
                <details class="yatoon-sf-section yatoon-sf-section-guide yatoon-sf-guide-details">
                    <summary>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="18" height="18"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
                        Instagram token setup guide
                    </summary>
                    <ol class="yatoon-sf-guide">
                        <li>
                            <strong>Make sure your App has the Instagram product added</strong><br>
                            <a href="https://developers.facebook.com/apps/" target="_blank" rel="noopener">Open Meta Apps (Desktop)</a><br>
                            In your Meta App dashboard (developers.facebook.com), the left sidebar should show "Instagram" under Products. If not, click "Add Product"  - Instagram  - Set up.
                        </li>
                        <li>
                            <strong>Add your Instagram account as a Tester</strong><br>
                            Left sidebar  - <strong>App roles  - Roles</strong>  - add an Instagram Tester using your @username. Then open the Instagram app on your phone  - Settings  - Apps and Websites  - Tester Invites  - Accept.
                        </li>
                        <li>
                            <strong>Generate the login link</strong><br>
                            <a href="https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/get-started/" target="_blank" rel="noopener">Open the official Instagram token guide</a><br>
                            Left sidebar  - Instagram  - <strong>API setup with Instagram login</strong>  - under "1. Generate access tokens", click <strong>"Add account"</strong> (or "Generate token" if your account is already listed).
                        </li>
                        <li>
                            <strong>Authorize</strong><br>
                            A popup opens asking to allow access. Turn on <strong>"View profile and access media" (required)</strong> and click <strong>Allow</strong>.
                        </li>
                        <li>
                            <strong>Copy the token</strong><br>
                            After authorizing, the browser address bar (or a results page) will show a long token starting with <code>IGAA...</code>. Copy the whole thing.
                        </li>
                        <li>
                            <strong>Paste it above</strong><br>
                            Come back here, paste it into the Instagram token field, click <strong>"Verify &amp; Save IG Token"</strong>. Done!</li>
                    </ol>
                    <div class="yatoon-sf-tip-box">
                        This Instagram token lasts about <strong>60 days</strong>. We'll remind you to refresh it - or you can just repeat steps 3-5 above whenever sync stops working.
                    </div>
                </details>

                <div class="yatoon-sf-save-bar">
                    <button type="submit" class="button button-primary button-hero">Save Settings</button>
                </div>
            </form>

            <div id="yatoon-sf-sync-status" class="yatoon-sf-sync-status" style="display:none;"></div>
        </div>
        <?php 
    }

}
