// Shortcode: [vrs_embed_route id="123"]
add_shortcode( 'vrs_embed_route', function( $atts ) {
    $atts = shortcode_atts( [
        'id' => 0,
    ], $atts, 'vrs_embed_route' );

    $route_id = intval( $atts['id'] );
    if ( ! $route_id ) {
        return '<p>Invalid route ID.</p>';
    }

    $route = get_post( $route_id );
    if ( ! $route || $route->post_type !== 'vrs_route' ) {
        return '<p>Route not found.</p>';
    }

    // route basic data
    $title = esc_html( $route->post_title );
    $start = get_post_meta( $route_id, '_vrs_route_start_time', true );
    $end   = get_post_meta( $route_id, '_vrs_route_end_time', true );

    // does user have this challenge?
    if ( ! is_user_logged_in() ) {
        $login_url = esc_url( wp_login_url( get_permalink() ) );
        $html = '<div class="vrs-embed-route">';
        $html .= "<h3>{$title}</h3>";
        if ( $start ) $html .= '<div class="vrs-embed-date">Starts: ' . esc_html( date( 'M j, Y', strtotime( $start ) ) ) . '</div>';
        if ( $end )   $html .= '<div class="vrs-embed-date">Ends: '   . esc_html( date( 'M j, Y', strtotime( $end ) ) )   . '</div>';
        $html .= '<p>Please <a href="' . $login_url . '">log in</a> to register for this race.</p>';
        $html .= '</div>';
        return $html;
    }

    $user_id = get_current_user_id();
    $user_chals = get_user_meta( $user_id, '_vrs_user_challenges', true ) ?: [];

    // detect if route requires purchase (same approach used elsewhere)
    $linked = get_posts( [
        'post_type'      => 'product',
        'posts_per_page' => 1,
        'fields'         => 'ids',
        'meta_query'     => [ [
            'key'     => '_vrs_linked_route',
            'value'   => $route_id,
            'compare' => '=',
        ] ],
    ] );
    $requires_purchase = ! empty( $linked );
    $purchase_url = $requires_purchase ? get_permalink( $linked[0] ) : '';

    $joined = in_array( $route_id, $user_chals, true );

    // Build HTML
    $html = '<div class="vrs-embed-route" data-route-id="' . esc_attr( $route_id ) . '">';
    $html .= "<h3 class='vrs-embed-title'>{$title}</h3>";
    if ( $start ) $html .= '<div class="vrs-embed-date">Starts: ' . esc_html( date( 'M j, Y', strtotime( $start ) ) ) . '</div>';
    if ( $end )   $html .= '<div class="vrs-embed-date">Ends: '   . esc_html( date( 'M j, Y', strtotime( $end ) ) )   . '</div>';

    if ( $joined ) {
        $html .= '<p class="vrs-embed-status vrs-joined">You are registered for this race.</p>';
    } else {
        if ( $requires_purchase && $purchase_url ) {
            $html .= '<p class="vrs-embed-status vrs-not-joined">Please purchase to join this race.</p>';
            $html .= '<p><a href="' . esc_url( $purchase_url ) . '" class="vrs-embed-purchase vrs-btn">Purchase to Join</a></p>';
        } else {
            // show join button
            $html .= '<p class="vrs-embed-status vrs-not-joined">You are not registered for this race.</p>';
            $html .= '<p><button class="vrs-embed-join-btn vrs-btn" data-route-id="' . esc_attr( $route_id ) . '">Join this Race</button></p>';
        }
    }

    $html .= '</div>';

    // Enqueue assets only when the shortcode is used
    add_action( 'wp_footer', function() use ( $route_id ) {
        // ensure script added once
        static $done = false;
        if ( $done ) return;
        $done = true;

        // Register and enqueue script file (assumes you place it in assets/js/)
        wp_register_script( 'vrs-embed-route-js', plugins_url( 'assets/js/vrs-embed-route.js', __FILE__ ), [ 'jquery' ], '1.0', true );
        wp_localize_script( 'vrs-embed-route-js', 'vrsEmbedData', [
            'ajaxUrl' => admin_url( 'admin-ajax.php' ),
            'nonce'   => wp_create_nonce( 'vrs_challenge_nonce' ),
        ] );
        wp_enqueue_script( 'vrs-embed-route-js' );

        // Minimal inline CSS for the embed (you can move to your plugin CSS)
        echo "<style>
          .vrs-embed-route{border:1px solid #eee;padding:12px;border-radius:6px;background:#fff;max-width:480px}
          .vrs-embed-title{margin:0 0 .5rem;font-weight:700;color:#333}
          .vrs-embed-date{font-size:0.9rem;color:#666;margin-bottom:.25rem}
          .vrs-embed-status{margin:.75rem 0;font-weight:600}
          .vrs-btn{background:#c17846;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer}
          .vrs-joined{color:#2e7d32}
          .vrs-not-joined{color:#b71c1c}
        </style>";
    } );

    return $html;
} );