<?php
/**
 * Spacetree Changelog Page
 * 
 * Displays changelog entries from the changelog endpoint.
 *
 * @package Spacetree
 * @since   2.1.0
 */

defined( 'ABSPATH' ) || exit;

// Get current plugin version
$spacetree = Spacetree::instance();
$current_version = $spacetree->version;

// Fetch changelog data
$changelogs = ST_Changelog::get_changelog_data();

?>

<div class="wrap st-changelog-page">
	<h1><?php esc_html_e( 'Changelog', 'spacetree' ); ?> - ProQyz LMS</h1>
	
	<?php if ( $changelogs && ! empty( $changelogs ) ) : ?>
		
		<div class="st-changelog-list">
			<?php foreach ( $changelogs as $changelog ) : ?>
				<div class="st-changelog-entry" style="background: #fff; padding: 30px; margin: 20px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
					<div class="changelog-header" style="border-bottom: 2px solid #0073aa; padding-bottom: 15px; margin-bottom: 20px;">
						<h2 style="margin: 0; color: #0073aa;">
							<?php 
							if ( isset( $changelog['version'] ) ) {
								echo esc_html( 'Version ' . $changelog['version'] );
							} else {
								echo esc_html( $changelog['title'] );
							}
							?>
						</h2>
						
						<div class="changelog-meta" style="margin-top: 10px; font-size: 13px; color: #666;">
							<?php if ( isset( $changelog['release_date'] ) ) : ?>
								<span style="margin-right: 15px;">
									<strong><?php esc_html_e( 'Released:', 'spacetree' ); ?></strong> 
									<?php echo esc_html( date( 'F j, Y', strtotime( $changelog['release_date'] ) ) ); ?>
								</span>
							<?php endif; ?>
							
							<?php if ( isset( $changelog['type'] ) ) : ?>
								<?php
								$type_colors = array(
									'release' => '#00a32a',
									'update'  => '#0073aa',
									'hotfix'  => '#d63638',
								);
								$badge_color = isset( $type_colors[ $changelog['type'] ] ) ? $type_colors[ $changelog['type'] ] : '#666';
								?>
								<span style="background: <?php echo esc_attr( $badge_color ); ?>; color: #fff; padding: 3px 10px; border-radius: 3px; font-size: 11px; text-transform: uppercase; font-weight: bold;">
									<?php echo esc_html( $changelog['type'] ); ?>
								</span>
							<?php endif; ?>
						</div>
					</div>
					
					<div class="changelog-content">
						<?php 
						if ( isset( $changelog['content'] ) ) {
							echo wp_kses_post( $changelog['content'] );
						}
						?>
					</div>
				</div>
			<?php endforeach; ?>
		</div>
		
	<?php else : ?>
		
		<div class="notice notice-info" style="margin: 20px 0;">
			<p>
				<strong><?php esc_html_e( 'No changelog entries found.', 'spacetree' ); ?></strong>
			</p>
			<p>
				<?php esc_html_e( 'Changelog data is fetched from:', 'spacetree' ); ?> 
				<code><?php echo esc_html( ST_CHANGELOG_ENDPOINT . '/wp-json/spacetree/v1/changelog' ); ?></code>
			</p>
			<p>
				<a href="<?php echo esc_url( admin_url( 'admin.php?page=st-changelog&clear-cache=1' ) ); ?>" class="button">
					<?php esc_html_e( 'Clear Cache & Retry', 'spacetree' ); ?>
				</a>
			</p>
		</div>
		
	<?php endif; ?>
	
	<?php if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) : ?>
		<div class="notice notice-info" style="margin: 20px 0;">
			<p>
				<strong>🔍 Debug Mode:</strong> Cache duration is set to 5 minutes. 
				<a href="<?php echo esc_url( admin_url( 'admin.php?page=st-changelog&clear-cache=1' ) ); ?>" class="button button-small">
					Clear Cache Now
				</a>
			</p>
		</div>
	<?php endif; ?>
</div>

<style>
.st-changelog-page {
	max-width: 1200px;
}

.st-changelog-entry h3 {
	color: #1d2327;
	font-size: 1.2em;
	margin: 20px 0 10px 0;
}

.st-changelog-entry ul {
	margin: 10px 0;
	padding-left: 30px;
}

.st-changelog-entry li {
	margin: 5px 0;
	line-height: 1.6;
}

.st-changelog-entry code {
	background: #f0f0f1;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 0.9em;
}
</style>

