add_action('atk_widget_features', function() {
    ?>
    <div class="atk-feature-group">
        <button class="atk-feature-btn" data-feature="custom-feature">
            <span class="atk-feature-icon">⭐</span>
            <span class="atk-feature-label">Custom Feature</span>
        </button>
    </div>
    <?php
});

add_action('atk_before_widget', function() {
    // Add custom HTML or tracking code
    echo '<div class="custom-wrapper">';
});

add_action('atk_after_widget', function() {
    echo '</div>'; // Close custom wrapper
});

add_filter('atk_enabled_features', function($features) {
    // Disable text-to-speech on mobile devices
    if (wp_is_mobile()) {
        unset($features['textToSpeech']);
    }

    // Enable extra features for logged-in users
    if (is_user_logged_in()) {
        $features['advancedMode'] = true;
    }

    return $features;
});

add_filter('atk_widget_position', function($position) {
    // Move to top-left on blog pages
    if (is_home() || is_archive()) {
        return 'top-left';
    }
    return $position;
});

add_filter('atk_primary_color', function($color) {
    // Use red for important pages
    if (is_page('emergency-information')) {
        return '#cc0000';
    }
    return $color;
});

jQuery(document).on('atk_feature_enabled', function(e, feature) {
    console.log('Feature enabled:', feature);

    // Track in Google Analytics
    if (typeof gtag !== 'undefined') {
        gtag('event', 'accessibility_feature_enabled', {
            'feature_name': feature
        });
    }
});

jQuery(document).on('atk_feature_disabled', function(e, feature) {
    console.log('Feature disabled:', feature);
});

// Enable high contrast after page load
jQuery(document).ready(function() {
    if (window.AccessibilityToolkit) {
        // Check if user prefers dark mode
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            window.AccessibilityToolkit.enableFeature('contrast');
        }
    }
});

// Get all active features
const activeFeatures = window.AccessibilityToolkit.state;

// Check if specific feature is enabled
if (activeFeatures.contrast) {
    console.log('High contrast mode is active');
}

// Add button to widget (requires Pro license)
add_action('atk_widget_features', function() {
    ?>
    <div class="atk-feature-group">
        <button class="atk-feature-btn" data-feature="dark-mode">
            <span class="atk-feature-icon">🌙</span>
            <span class="atk-feature-label">Dark Mode</span>
        </button>
    </div>
    <?php
});

// Add JavaScript handler
add_action('wp_footer', function() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        $(document).on('click', '[data-feature="dark-mode"]', function() {
            $(this).toggleClass('active');
            $('body').toggleClass('dark-mode');

            // Trigger event for tracking
            $(document).trigger('atk_feature_enabled', ['dark-mode']);
        });
    });
    </script>
    <?php
});

// Add CSS
add_action('wp_head', function() {
    ?>
    <style>
    body.dark-mode {
        background: #1a1a1a;
        color: #f0f0f0;
    }
    body.dark-mode a {
        color: #66b3ff;
    }
    </style>
    <?php
});

add_filter('atk_enabled_features', function($features) {
    $user = wp_get_current_user();

    // Admins get all features
    if (in_array('administrator', $user->roles)) {
        return $features;
    }

    // Subscribers get basic features only
    if (in_array('subscriber', $user->roles)) {
        return [
            'fontSizeAdjust' => $features['fontSizeAdjust'],
            'contrast' => $features['contrast'],
        ];
    }

    return $features;
});

/* Primary widget button */
.atk-toggle-btn {
    background: #6366f1 !important;
    color: white !important;
}

.atk-toggle-btn:hover {
    background: #4f46e5 !important;
}

/* Feature buttons */
.atk-feature-btn.active {
    background: #10b981 !important;
    border-color: #10b981 !important;
}

/* Panel background */
.atk-panel {
    background: #ffffff !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
}

/* Make widget larger */
.atk-toggle-btn {
    width: 70px !important;
    height: 70px !important;
    font-size: 28px !important;
}

/* Adjust panel width */
.atk-panel {
    width: 400px !important;
}

/* Custom position offset */
.atk-widget.atk-position-bottom-right {
    right: 30px !important;
    bottom: 30px !important;
}