<?php
/**
 * Header template for the plugin
 *
 * @package PageVisitCounter
 */
defined( 'ABSPATH' ) || exit;
?>
<header class="pagevico-header">
	<div class="pagevico-header-content">
		<div class="pagevico-branding">
			<?php
			printf(
				// phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- Plugin branding logo, cannot be enqueued
				'<img src="%s" alt="%s" class="pagevico-logo" width="200" height="40">',
				esc_url( PageVICO_PLUGIN_URL . 'assets/img/pvc-logo.svg' ),
				esc_attr__( 'Page Visit Counter Logo', 'page-visit-counter-analytics' )
			);
			?>
		</div>
		<nav class="pagevico-header-nav">
			<ul class="pagevico-nav-links">
				<li>
					<a href="#" id="pagevico-clear-cache" class="pagevico-nav-link">
						<span class="dashicons dashicons-update"></span>
						<?php esc_html_e( 'Clear Cache', 'page-visit-counter-analytics' ); ?>
					</a>
				</li>
				<li>
					<a href="https://wordpress.org/support/plugin/page-visit-counter-analytics/reviews/" target="_blank" class="pagevico-nav-link">
						<span class="dashicons dashicons-star-filled"></span>
						<?php esc_html_e( 'Give Review', 'page-visit-counter-analytics' ); ?>
					</a>
				</li>
				<li>
					<a href="https://wordpress.org/support/plugin/page-visit-counter-analytics/" target="_blank" class="pagevico-nav-link">
						<span class="dashicons dashicons-sos"></span>
						<?php esc_html_e( 'Contact Support', 'page-visit-counter-analytics' ); ?>
					</a>
				</li>
				<li>
					<a href="https://pluginstack.dev/plugins" target="_blank" class="pagevico-nav-link pagevico-pro-link">
						<span class="dashicons dashicons-awards"></span>
						<?php esc_html_e( 'Get All PluginStack Plugins for 75% OFF!', 'page-visit-counter-analytics' ); ?>
					</a>
				</li>
			</ul>
		</nav>
	</div>
</header>
<div id="pagevico-toast-container" class="pvc-toast-container" aria-live="assertive" aria-atomic="true"></div>

<style>
.pagevico-header {
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 15px 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.pagevico-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.pagevico-branding {
    display: flex;
    align-items: center;
}

.pagevico-header-nav {
    display: flex;
    align-items: center;
}

.pagevico-nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.pagevico-nav-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #1a1a1a;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.pagevico-nav-link:hover {
    background: #f8f9fa;
    color: #2563eb;
}

.pagevico-nav-link .dashicons {
    margin-right: 5px;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.pagevico-pro-link {
    background: #2563eb;
    color: #ffffff !important;
}

.pagevico-pro-link:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

.pagevico-cache-spinner {
    display: none;
    margin-left: 5px;
}

.pagevico-cache-spinner.is-active {
    display: inline-block;
}
</style>

<script>
jQuery(document).ready(function($) {
    $('#pagevico-clear-cache').on('click', function(e) {
        e.preventDefault();
        
        const $button = $(this);
        const $spinner = $('<span class="dashicons dashicons-update pagevico-cache-spinner"></span>');
        
        // Add spinner
        $button.append($spinner);
        $spinner.addClass('is-active');
        
        // Disable button
        $button.prop('disabled', true);
        
        // Make AJAX request
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'pagevico_clear_cache',
                nonce: '<?php echo wp_create_nonce('pagevico_clear_cache'); ?>'
            },
            success: function(response) {
                if (response.success) {
                    showToast(response.data.message, 'success');
                } else {
                    showToast(response.data.message, 'error');
                }
            },
            error: function() {
                showToast('<?php echo esc_js( esc_html__( 'Failed to clear cache. Please try again.', 'page-visit-counter-analytics' ) ); ?>', 'error');
            },
            complete: function() {
                // Remove spinner and re-enable button
                $spinner.remove();
                $button.prop('disabled', false);
            }
        });
    });

    function showToast(message, type = 'success') {
        const $container = $('#pagevico-toast-container');
        if (!$container.length) {
            return;
        }

        const $toast = $(`
            <div class="pvc-toast pvc-toast-${type}">
                <div class="pvc-toast-body">
                    <span>${message}</span>
                </div>
                <button type="button" class="pvc-toast-close" aria-label="<?php esc_attr_e( 'Close notification', 'page-visit-counter-analytics' ); ?>">
                    <span class="dashicons dashicons-no-alt"></span>
                </button>
            </div>
        `);

        $container.append($toast);
        setTimeout(() => $toast.addClass('pvc-toast-visible'), 20);

        const removeToast = () => {
            $toast.removeClass('pvc-toast-visible');
            setTimeout(() => $toast.remove(), 400);
        };

        setTimeout(removeToast, 4500);
        $toast.on('click', '.pvc-toast-close', removeToast);
    }
});
</script>
