kickwp.php

<?php
/**
 * Plugin Name: KickWP
 * Plugin URI: https://github.com/PabloB07/kickwp
 * Description: WordPress plugin to integrate with Kick.com API for channel management
 * Version: 1.0.0
 * Author: Pablo Blanco
 * License: GPL2
 * Text Domain: kickwp
 * Domain Path: /languages
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

class KickWP {

    private $api_base = 'https://api.kick.com/public/v1/';
    private $oauth_base = 'https://id.kick.com/';
    private $plugin_version = '1.0.0';

    public function get_api_base() {
        return $this->api_base;
    }

    public function __construct() {
        add_action('admin_menu', array($this, 'add_admin_menu'));
        add_action('admin_enqueue_scripts', array($this, 'enqueue_admin_assets'));
        add_action('wp_ajax_kickwp_get_channels', array($this, 'ajax_get_channels'));
        add_action('wp_ajax_kickwp_update_channel', array($this, 'ajax_update_channel'));
        add_action('wp_ajax_kickwp_oauth_callback', array($this, 'ajax_oauth_callback'));
        add_action('admin_init', array($this, 'register_settings'));
        add_action('init', array($this, 'handle_oauth_callback'));
    }

    public function add_admin_menu() {
        add_menu_page(
            'KickWP Channels',
            'KickWP',
            'manage_options',
            'kickwp-channels',
            array($this, 'admin_page'),
            'dashicons-video-alt3',
            30
        );

        add_submenu_page(
            'kickwp-channels',
            'Settings',
            'Settings',
            'manage_options',
            'kickwp-settings',
            array($this, 'settings_page')
        );
    }

    public function register_settings() {
        register_setting('kickwp_settings', 'kickwp_client_id');
        register_setting('kickwp_settings', 'kickwp_client_secret');
        register_setting('kickwp_settings', 'kickwp_redirect_uri');
        register_setting('kickwp_settings', 'kickwp_access_token');
        register_setting('kickwp_settings', 'kickwp_refresh_token');
        register_setting('kickwp_settings', 'kickwp_token_expires');
        register_setting('kickwp_settings', 'kickwp_cache_duration');
        register_setting('kickwp_settings', 'kickwp_custom_css');

        add_settings_section(
            'kickwp_oauth_section',
            'OAuth 2.1 Configuration',
            array($this, 'oauth_section_callback'),
            'kickwp-settings'
        );

        add_settings_field(
            'kickwp_client_id',
            'Client ID',
            array($this, 'client_id_callback'),
            'kickwp-settings',
            'kickwp_oauth_section'
        );

        add_settings_field(
            'kickwp_client_secret',
            'Client Secret',
            array($this, 'client_secret_callback'),
            'kickwp-settings',
            'kickwp_oauth_section'
        );

        add_settings_field(
            'kickwp_redirect_uri',
            'Redirect URI',
            array($this, 'redirect_uri_callback'),
            'kickwp-settings',
            'kickwp_oauth_section'
        );

        add_settings_field(
            'kickwp_cache_duration',
            'Cache Duration (minutes)',
            array($this, 'cache_duration_callback'),
            'kickwp-settings',
            'kickwp_oauth_section'
        );

        add_settings_section(
            'kickwp_css_section',
            'CSS Customization',
            array($this, 'css_section_callback'),
            'kickwp-settings'
        );

        add_settings_field(
            'kickwp_custom_css',
            'Custom CSS',
            array($this, 'custom_css_callback'),
            'kickwp-settings',
            'kickwp_css_section'
        );
    }

    public function oauth_section_callback() {
        echo '<p>Configure your Kick.com OAuth 2.1 application settings below. Get these from <a href="https://docs.kick.com/getting-started/kick-apps-setup" target="_blank">Kick Developer Portal</a>.</p>';

        $access_token = get_option('kickwp_access_token');
        $expires = get_option('kickwp_token_expires');

        if ($access_token) {
            if ($expires && time() > $expires) {
                echo '<div class="notice notice-warning"><p>Your access token has expired. Please reconnect your account.</p></div>';
            } else {
                echo '<div class="notice notice-success"><p>Connected to Kick.com API successfully!</p></div>';
            }
        }
    }

    public function client_id_callback() {
        $client_id = get_option('kickwp_client_id');
        echo '<input type="text" name="kickwp_client_id" value="' . esc_attr($client_id) . '" class="regular-text" />';
        echo '<p class="description">Your OAuth 2.1 Client ID</p>';
    }

    public function client_secret_callback() {
        $client_secret = get_option('kickwp_client_secret');
        echo '<input type="password" name="kickwp_client_secret" value="' . esc_attr($client_secret) . '" class="regular-text" />';
        echo '<p class="description">Your OAuth 2.1 Client Secret</p>';
    }

    public function redirect_uri_callback() {
        $redirect_uri = get_option('kickwp_redirect_uri', admin_url('admin.php?page=kickwp-channels'));
        echo '<input type="url" name="kickwp_redirect_uri" value="' . esc_attr($redirect_uri) . '" class="regular-text" />';
        echo '<p class="description">Must match exactly what\'s registered in Kick Developer Portal</p>';
        echo '<small>Current default: ' . esc_html(admin_url('admin.php?page=kickwp-channels')) . '</small>';
    }

    public function cache_duration_callback() {
        $duration = get_option('kickwp_cache_duration', 5);
        echo '<input type="number" name="kickwp_cache_duration" value="' . esc_attr($duration) . '" min="1" max="60" />';
        echo '<p class="description">How long to cache API responses (1-60 minutes)</p>';
    }

    public function css_section_callback() {
        echo '<p>Customize the CSS for shortcodes and widgets to match your theme.</p>';
    }

    public function custom_css_callback() {
        $custom_css = get_option('kickwp_custom_css', '');
        echo '<textarea name="kickwp_custom_css" rows="10" cols="50" class="large-text code">' . esc_textarea($custom_css) . '</textarea>';
        echo '<p class="description">Add custom CSS to style the KickWP shortcodes and widgets</p>';
    }

    public function enqueue_admin_assets($hook) {
        if (strpos($hook, 'kickwp') === false) {
            return;
        }

        wp_enqueue_style('kickwp-admin', plugins_url('assets/css/admin.css', __FILE__), array(), $this->plugin_version);
        wp_enqueue_script('kickwp-admin', plugins_url('assets/js/admin.js', __FILE__), array('jquery'), $this->plugin_version, true);

        wp_localize_script('kickwp-admin', 'kickwp_ajax', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('kickwp_nonce')
        ));
    }

    public function admin_page() {
        ?>
        <div class="wrap">
            <h1>KickWP Channels</h1>

            <div id="kickwp-notice" class="notice" style="display: none;">
                <p id="kickwp-notice-message"></p>
            </div>

            <div class="kickwp-oauth-status">
                <?php
                $access_token = get_option('kickwp_access_token');
                $client_id = get_option('kickwp_client_id');
                $client_secret = get_option('kickwp_client_secret');

                if (!$client_id || !$client_secret) {
                    echo '<div class="notice notice-error"><p>Please configure your OAuth Client ID and Secret in <a href="' . admin_url('admin.php?page=kickwp-settings') . '">Settings</a> first.</p></div>';
                } elseif (!$access_token) {
                    echo '<div class="notice notice-warning"><p>Connect your Kick.com account to start using the plugin.</p></div>';
                    echo '<button id="kickwp-oauth-connect" class="button button-primary">Connect to Kick.com</button>';
                } else {
                    $expires = get_option('kickwp_token_expires');
                    if ($expires && time() > $expires) {
                        echo '<div class="notice notice-warning"><p>Your access token has expired. Please reconnect your account.</p></div>';
                        echo '<button id="kickwp-oauth-connect" class="button button-primary">Reconnect to Kick.com</button>';
                    } else {
                        echo '<div class="notice notice-success"><p>Connected to Kick.com API successfully!</p></div>';
                        echo '<p class="description">You can search for any channel or view your own channels below.</p>';
                    }
                }
                ?>
            </div>

            <div class="kickwp-controls" style="<?php echo (!$access_token || ($expires && time() > $expires)) ? 'opacity: 0.5; pointer-events: none;' : ''; ?>">
                <button id="kickwp-refresh" class="button button-primary">Refresh Channels</button>
                <button id="kickwp-search" class="button">Search Channels</button>
                <input type="text" id="kickwp-search-input" placeholder="Enter channel slug or user ID" style="display: none;" />
                <select id="kickwp-category-filter" style="display: none;">
                    <option value="">All Categories</option>
                </select>
                <div class="kickwp-view-options">
                    <label><input type="checkbox" id="kickwp-show-all" checked> Show all channels</label>
                    <label><input type="checkbox" id="kickwp-show-own-only"> Show only my channels</label>
                </div>
            </div>

            <div id="kickwp-channels" class="kickwp-channels-grid">
                <div class="kickwp-loading">Loading channels...</div>
            </div>
        </div>

        <!-- Edit Channel Modal -->
        <div class="kickwp-modal">
            <div class="kickwp-modal-content">
                <div class="kickwp-modal-header">
                    <h2 class="kickwp-modal-title">Edit Channel</h2>
                    <button class="kickwp-close">&times;</button>
                </div>

                <form id="kickwp-edit-form">
                    <input type="hidden" id="kickwp-channel-slug" name="channel_slug" />

                    <div class="kickwp-form-group">
                        <label for="kickwp-channel-title">Stream Title</label>
                        <input type="text" id="kickwp-channel-title" name="stream_title" />
                    </div>

                    <div class="kickwp-form-group">
                        <label for="kickwp-channel-description">Description</label>
                        <textarea id="kickwp-channel-description" name="channel_description" rows="3"></textarea>
                    </div>

                    <div class="kickwp-form-group">
                        <label for="kickwp-category-id">Category</label>
                        <select id="kickwp-category-id" name="category_id">
                            <option value="">Select Category</option>
                            <option value="1">Gaming</option>
                            <option value="2">Music</option>
                            <option value="3">Art</option>
                            <option value="4">Technology</option>
                            <option value="5">Sports</option>
                            <!-- Add more categories as needed -->
                        </select>
                    </div>

                    <div class="kickwp-form-group">
                        <label>Custom Tags</label>
                        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
                            <input type="text" id="kickwp-new-tag" placeholder="Add tag" style="flex: 1;" />
                            <button type="button" class="kickwp-btn kickwp-btn-secondary kickwp-add-tag">Add</button>
                        </div>
                        <div class="kickwp-tags-container"></div>
                    </div>

                    <div class="kickwp-modal-actions">
                        <button type="button" class="kickwp-btn kickwp-btn-secondary kickwp-close">Cancel</button>
                        <button type="submit" class="kickwp-btn kickwp-btn-primary">Update Channel</button>
                    </div>
                </form>
            </div>
        </div>
        <?php
    }

    public function settings_page() {
        ?>
        <div class="wrap">
            <h1>KickWP Settings</h1>
            <form method="post" action="options.php">
                <?php
                settings_fields('kickwp_settings');
                do_settings_sections('kickwp-settings');
                submit_button();
                ?>
            </form>
        </div>
        <?php
    }

    public function ajax_get_channels() {
        check_ajax_referer('kickwp_nonce', 'nonce');

        if (!current_user_can('manage_options')) {
            wp_die('Unauthorized');
        }

        $token = $this->get_access_token();
        if (empty($token)) {
            wp_send_json_error('OAuth not configured or token expired');
            return;
        }

        $search = isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '';
        $category_id = isset($_POST['category_id']) ? intval($_POST['category_id']) : '';

        $cache_key = 'kickwp_channels_' . md5($search . $category_id);
        $cache_duration = intval(get_option('kickwp_cache_duration', 5)) * 60;
        $cached_data = get_transient($cache_key);

        if ($cached_data !== false && empty($search) && empty($category_id)) {
            wp_send_json_success($cached_data);
            return;
        }

        $url = $this->api_base . 'channels';
        $query_args = array();

        if (!empty($search)) {
            // Search by slug or broadcaster_user_id
            if (is_numeric($search)) {
                $query_args['broadcaster_user_id'] = $search;
            } else {
                $query_args['slug'] = $search;
            }
        }

        if (!empty($query_args)) {
            $url .= '?' . http_build_query($query_args);
        }

        $response = wp_remote_get($url, array(
            'headers' => array(
                'Authorization' => 'Bearer ' . $token,
                'Accept' => 'application/json'
            ),
            'timeout' => 30
        ));

        if (is_wp_error($response)) {
            wp_send_json_error('API request failed: ' . $response->get_error_message());
            return;
        }

        $status_code = wp_remote_retrieve_response_code($response);
        $body = wp_remote_retrieve_body($response);

        if ($status_code !== 200) {
            wp_send_json_error('API returned status ' . $status_code . ': ' . $body);
            return;
        }

        $data = json_decode($body, true);

        if (json_last_error() !== JSON_ERROR_NONE) {
            wp_send_json_error('Invalid JSON response from API');
            return;
        }

        // Filter by category if specified
        if (!empty($category_id) && isset($data['data'])) {
            $data['data'] = array_filter($data['data'], function($channel) use ($category_id) {
                return isset($channel['category']['id']) && $channel['category']['id'] == $category_id;
            });
        }

        set_transient($cache_key, $data, $cache_duration);
        wp_send_json_success($data);
    }

    public function ajax_get_categories() {
        check_ajax_referer('kickwp_nonce', 'nonce');

        if (!current_user_can('manage_options')) {
            wp_die('Unauthorized');
        }

        $token = $this->get_access_token();
        if (empty($token)) {
            wp_send_json_error('OAuth not configured or token expired');
            return;
        }

        $cache_key = 'kickwp_categories';
        $cache_duration = intval(get_option('kickwp_cache_duration', 5)) * 60;
        $cached_data = get_transient($cache_key);

        if ($cached_data !== false) {
            wp_send_json_success($cached_data);
            return;
        }

        $response = wp_remote_get($this->api_base . 'categories', array(
            'headers' => array(
                'Authorization' => 'Bearer ' . $token,
                'Accept' => 'application/json'
            ),
            'timeout' => 30
        ));

        if (is_wp_error($response)) {
            wp_send_json_error('API request failed: ' . $response->get_error_message());
            return;
        }

        $status_code = wp_remote_retrieve_response_code($response);
        $body = wp_remote_retrieve_body($response);

        if ($status_code !== 200) {
            wp_send_json_error('API returned status ' . $status_code . ': ' . $body);
            return;
        }

        $data = json_decode($body, true);

        if (json_last_error() !== JSON_ERROR_NONE) {
            wp_send_json_error('Invalid JSON response from API');
            return;
        }

        set_transient($cache_key, $data, $cache_duration);
        wp_send_json_success($data);
    }

    public function ajax_update_channel() {
        check_ajax_referer('kickwp_nonce', 'nonce');

        if (!current_user_can('manage_options')) {
            wp_die('Unauthorized');
        }

        $token = $this->get_access_token();
        if (empty($token)) {
            wp_send_json_error('OAuth not configured or token expired');
            return;
        }

        $channel_data = array();
        if (isset($_POST['category_id'])) {
            $channel_data['category_id'] = intval($_POST['category_id']);
        }
        if (isset($_POST['stream_title'])) {
            $channel_data['stream_title'] = sanitize_text_field($_POST['stream_title']);
        }
        if (isset($_POST['custom_tags']) && is_array($_POST['custom_tags'])) {
            $channel_data['custom_tags'] = array_map('sanitize_text_field', $_POST['custom_tags']);
        }

        if (empty($channel_data)) {
            wp_send_json_error('No data to update');
            return;
        }

        $response = wp_remote_request($this->api_base . 'channels', array(
            'method' => 'PATCH',
            'headers' => array(
                'Authorization' => 'Bearer ' . $token,
                'Content-Type' => 'application/json',
                'Accept' => 'application/json'
            ),
            'body' => json_encode($channel_data),
            'timeout' => 30
        ));

        if (is_wp_error($response)) {
            wp_send_json_error('API request failed: ' . $response->get_error_message());
            return;
        }

        $status_code = wp_remote_retrieve_response_code($response);

        if ($status_code === 204) {
            // Clear cache on successful update
            delete_transient('kickwp_channels');
            wp_send_json_success('Channel updated successfully');
        } else {
            $body = wp_remote_retrieve_body($response);
            wp_send_json_error('API returned status ' . $status_code . ': ' . $body);
        }
    }

    public function get_access_token() {
        $token = get_option('kickwp_access_token');
        $expires = get_option('kickwp_token_expires');

        // Check if token is expired
        if ($expires && time() > $expires) {
            $this->refresh_access_token();
            $token = get_option('kickwp_access_token');
        }

        return $token;
    }

    public function refresh_access_token() {
        $refresh_token = get_option('kickwp_refresh_token');
        $client_id = get_option('kickwp_client_id');
        $client_secret = get_option('kickwp_client_secret');

        if (!$refresh_token || !$client_id || !$client_secret) {
            return false;
        }

        $response = wp_remote_post($this->oauth_base . 'oauth/token', array(
            'headers' => array(
                'Content-Type' => 'application/x-www-form-urlencoded'
            ),
            'body' => array(
                'grant_type' => 'refresh_token',
                'client_id' => $client_id,
                'client_secret' => $client_secret,
                'refresh_token' => $refresh_token
            ),
            'timeout' => 30
        ));

        if (is_wp_error($response)) {
            return false;
        }

        $status_code = wp_remote_retrieve_response_code($response);
        $body = wp_remote_retrieve_body($response);

        if ($status_code !== 200) {
            return false;
        }

        $data = json_decode($body, true);

        if (json_last_error() !== JSON_ERROR_NONE) {
            return false;
        }

        // Update tokens
        update_option('kickwp_access_token', $data['access_token']);
        update_option('kickwp_refresh_token', $data['refresh_token']);
        update_option('kickwp_token_expires', time() + $data['expires_in']);

        return true;
    }

    public function get_oauth_url() {
        $client_id = get_option('kickwp_client_id');
        $redirect_uri = get_option('kickwp_redirect_uri', admin_url('admin.php?page=kickwp-channels'));

        if (!$client_id) {
            return false;
        }

        $state = wp_generate_password(32, false);
        update_option('kickwp_oauth_state', $state);

        // Generate code verifier (43-128 characters, URL-safe)
        $code_verifier = wp_generate_password(128, false);
        update_option('kickwp_code_verifier', $code_verifier);

        // Generate code challenge (SHA256 hash of code verifier, base64url encoded)
        $code_challenge = $this->base64url_encode(hash('sha256', $code_verifier, true));
        update_option('kickwp_code_challenge', $code_challenge);

        $scopes = 'channel:read channel:edit user:read';

        return add_query_arg(array(
            'response_type' => 'code',
            'client_id' => $client_id,
            'redirect_uri' => urlencode($redirect_uri),
            'scope' => $scopes,
            'code_challenge' => $code_challenge,
            'code_challenge_method' => 'S256',
            'state' => $state
        ), $this->oauth_base . 'oauth/authorize');
    }

    private function base64url_encode($data) {
        return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
    }

    public function handle_oauth_callback() {
        if (!isset($_GET['page']) || $_GET['page'] !== 'kickwp-channels') {
            return;
        }

        if (!isset($_GET['code']) || !isset($_GET['state'])) {
            return;
        }

        $saved_state = get_option('kickwp_oauth_state');
        $code_verifier = get_option('kickwp_code_verifier');

        if ($_GET['state'] !== $saved_state) {
            wp_die('Invalid OAuth state');
        }

        $client_id = get_option('kickwp_client_id');
        $client_secret = get_option('kickwp_client_secret');
        $redirect_uri = get_option('kickwp_redirect_uri', admin_url('admin.php?page=kickwp-channels'));

        if (!$client_id || !$client_secret) {
            wp_die('OAuth configuration missing');
        }

        $response = wp_remote_post($this->oauth_base . 'oauth/token', array(
            'headers' => array(
                'Content-Type' => 'application/x-www-form-urlencoded'
            ),
            'body' => array(
                'grant_type' => 'authorization_code',
                'client_id' => $client_id,
                'client_secret' => $client_secret,
                'redirect_uri' => $redirect_uri,
                'code_verifier' => $code_verifier,
                'code' => $_GET['code']
            ),
            'timeout' => 30
        ));

        if (is_wp_error($response)) {
            wp_die('OAuth token exchange failed: ' . $response->get_error_message());
        }

        $status_code = wp_remote_retrieve_response_code($response);
        $body = wp_remote_retrieve_body($response);

        if ($status_code !== 200) {
            wp_die('OAuth token exchange failed with status ' . $status_code . ': ' . $body);
        }

        $data = json_decode($body, true);

        if (json_last_error() !== JSON_ERROR_NONE) {
            wp_die('Invalid JSON response from OAuth server');
        }

        // Save tokens
        update_option('kickwp_access_token', $data['access_token']);
        update_option('kickwp_refresh_token', $data['refresh_token']);
        update_option('kickwp_token_expires', time() + $data['expires_in']);

        // Clean up temporary data
        delete_option('kickwp_oauth_state');
        delete_option('kickwp_code_verifier');
        delete_option('kickwp_code_challenge');

        // Redirect to clean URL
        wp_redirect(admin_url('admin.php?page=kickwp-channels'));
        exit;
    }

    public function ajax_oauth_callback() {
        check_ajax_referer('kickwp_nonce', 'nonce');

        if (!current_user_can('manage_options')) {
            wp_die('Unauthorized');
        }

        $oauth_url = $this->get_oauth_url();

        if (!$oauth_url) {
            wp_send_json_error('OAuth configuration incomplete. Please check your Client ID and Redirect URI in settings.');
            return;
        }

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

// Initialize the plugin
new KickWP();

// Activation hook
register_activation_hook(__FILE__, 'kickwp_activate');
function kickwp_activate() {
    // Set default options
    add_option('kickwp_cache_duration', 5);
    add_option('kickwp_client_id', '');
    add_option('kickwp_client_secret', '');
    add_option('kickwp_redirect_uri', admin_url('admin.php?page=kickwp-channels'));
    add_option('kickwp_access_token', '');
    add_option('kickwp_refresh_token', '');
    add_option('kickwp_token_expires', 0);
    add_option('kickwp_custom_css', '');
}

// Deactivation hook
register_deactivation_hook(__FILE__, 'kickwp_deactivate');
function kickwp_deactivate() {
    // Clean up transients
    delete_transient('kickwp_channels');
    delete_transient('kickwp_categories');
}

// Shortcodes
add_shortcode('kickwp_channel', 'kickwp_channel_shortcode');
function kickwp_channel_shortcode($atts) {
    $atts = shortcode_atts(array(
        'slug' => '',
        'show_thumbnail' => 'true',
        'show_description' => 'true',
        'show_viewers' => 'true',
        'class' => 'kickwp-channel-widget'
    ), $atts);

    if (empty($atts['slug'])) {
        return '<!-- KickWP: Channel slug required -->';
    }

    $kickwp = new KickWP();
    $token = $kickwp->get_access_token();

    if (empty($token)) {
        return '<!-- KickWP: Not connected to API -->';
    }

    // Use cached data if available
    $cache_key = 'kickwp_channel_' . sanitize_title($atts['slug']);
    $cached_channel = get_transient($cache_key);

    if ($cached_channel !== false) {
        $channel = $cached_channel;
    } else {
        $response = wp_remote_get($kickwp->get_api_base() . 'channels?slug=' . urlencode($atts['slug']), array(
            'headers' => array(
                'Authorization' => 'Bearer ' . $token,
                'Accept' => 'application/json'
            ),
            'timeout' => 30
        ));

        if (is_wp_error($response)) {
            return '<!-- KickWP: API Error -->';
        }

        $status_code = wp_remote_retrieve_response_code($response);
        if ($status_code !== 200) {
            return '<!-- KickWP: Channel not found or API error -->';
        }

        $data = json_decode(wp_remote_retrieve_body($response), true);

        if (empty($data['data'][0])) {
            return '<!-- KickWP: Channel not found -->';
        }

        $channel = $data['data'][0];

        // Cache for 5 minutes
        set_transient($cache_key, $channel, 300);
    }

    $is_live = $channel['stream']['is_live'] ?? false;
    $thumbnail = $channel['stream']['thumbnail'] ?? $channel['banner_picture'] ?? '';
    $stream_title = $channel['stream_title'] ?: $channel['channel_description'] ?: 'Untitled Stream';

    ob_start();
    ?>
    <div class="<?php echo esc_attr($atts['class']); ?>">
        <?php if ($thumbnail && $atts['show_thumbnail'] === 'true'): ?>
            <div class="kickwp-channel-thumbnail">
                <img src="<?php echo esc_url($thumbnail); ?>"
                     alt="<?php echo esc_attr($stream_title); ?>"
                     onerror="this.style.display='none';" />
                <?php if ($is_live): ?>
                    <div class="kickwp-live-indicator">LIVE</div>
                <?php endif; ?>
            </div>
        <?php endif; ?>

        <div class="kickwp-channel-info">
            <h3><?php echo esc_html($stream_title); ?></h3>

            <?php if ($channel['channel_description'] && $atts['show_description'] === 'true'): ?>
                <p><?php echo esc_html($channel['channel_description']); ?></p>
            <?php endif; ?>

            <?php if ($is_live && $atts['show_viewers'] === 'true' && isset($channel['stream']['viewer_count'])): ?>
                <div class="kickwp-viewer-count">
                    <?php echo intval($channel['stream']['viewer_count']); ?> viewers
                </div>
            <?php endif; ?>

            <a href="https://kick.com/<?php echo esc_attr($channel['slug']); ?>"
               target="_blank" class="kickwp-watch-button">
                Watch Stream
            </a>
        </div>
    </div>
    <?php
    return ob_get_clean();
}

// Add CSS for shortcodes
add_action('wp_head', 'kickwp_shortcode_styles');
function kickwp_shortcode_styles() {
    $custom_css = get_option('kickwp_custom_css', '');
    ?>
    <style>
    .kickwp-channel-widget {
        max-width: 400px;
        margin: 20px auto;
        border: 1px solid #e1e1e1;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background: #fff;
    }

    .kickwp-channel-widget:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }

    .kickwp-channel-thumbnail {
        position: relative;
        margin-bottom: 0;
        height: 200px;
        overflow: hidden;
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .kickwp-channel-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .kickwp-channel-thumbnail:hover img {
        transform: scale(1.05);
    }

    .kickwp-live-indicator {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #dc3545;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
        z-index: 2;
    }

    .kickwp-channel-info {
        padding: 20px;
    }

    .kickwp-channel-info h3 {
        margin: 0 0 10px 0;
        font-size: 18px;
        color: #333;
        font-weight: 600;
    }

    .kickwp-channel-info p {
        color: #666;
        margin-bottom: 15px;
        line-height: 1.5;
    }

    .kickwp-viewer-count {
        color: #28a745;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .kickwp-watch-button {
        display: inline-block;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 12px 24px;
        text-decoration: none;
        border-radius: 25px;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .kickwp-watch-button:hover {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }

    /* Responsive design for shortcodes */
    @media (max-width: 480px) {
        .kickwp-channel-widget {
            margin: 15px;
        }

        .kickwp-channel-thumbnail {
            height: 150px;
        }

        .kickwp-channel-info {
            padding: 15px;
        }
    }

    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .kickwp-channel-widget {
            background: #2c2c2c;
            border-color: #404040;
        }

        .kickwp-channel-info h3 {
            color: #e0e0e0;
        }

        .kickwp-channel-info p {
            color: #b0b0b0;
        }
    }

    <?php echo $custom_css; ?>
    </style>
    <?php
}

// Clear channel cache when settings are updated
add_action('update_option_kickwp_cache_duration', 'kickwp_clear_channel_cache');
add_action('update_option_kickwp_access_token', 'kickwp_clear_channel_cache');
function kickwp_clear_channel_cache() {
    global $wpdb;
    $wpdb->query("DELETE FROM {$wpdb->options} WHERE option_name LIKE '_transient_kickwp_channel_%'");
    $wpdb->query("DELETE FROM {$wpdb->options} WHERE option_name LIKE '_transient_timeout_kickwp_channel_%'");
}