<?php
if (! defined('ABSPATH')) {
    exit;
} ?>

<main class="puffergo-fullpage-layout">
	<div class="blog-detail-page mx-auto max-w-canvas px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
		<!-- 面包屑导航 -->
		<?php puffergo_render_component('breadcrumb', array('items' => $data->get_breadcrumb_items())); ?>

		<!-- 文章头部 -->
		<header class="article-header">
			<div class="header-content">
				<h1 class="title"><?php echo wp_kses_post($data->title); ?></h1>
				<div class="meta">
					<span class="author"><?php esc_html_e('Author:', 'puffergo'); ?> <?php echo esc_html($data->author); ?></span>
					<span class="date"><?php echo esc_html($data->date); ?></span>
				</div>
			</div>
			<?php if ($data->hero_image_url) : ?>
				<div class="hero-image">
					<img src="<?php echo esc_url($data->hero_image_url); ?>" alt="<?php echo esc_attr($data->hero_image_alt); ?>" />
				</div>
			<?php endif; ?>
		</header>

		<!-- 文章内容 -->
		<article class="article-content">
			<div class="content-container">
				<div class="introduction">
					<?php echo $data->content; ?>
				</div>
				<div class="divider no-bg"></div>
			</div>
		</article>

		<!-- 文章导航（上一篇 / 下一篇） -->
		<nav class="article-navigation">
			<?php if ($data->prev_post) : ?>
				<a href="<?php echo esc_url($data->prev_post['url']); ?>" class="nav-card">
					<div class="card-content">
						<?php if (! empty($data->prev_post['category_name'])) : ?>
							<div class="tag"><?php echo esc_html($data->prev_post['category_name']); ?></div>
						<?php endif; ?>
						<h3 class="title"><?php echo esc_html($data->prev_post['title']); ?></h3>
					</div>
					<div class="nav-button"><?php esc_html_e('Previous', 'puffergo'); ?></div>
				</a>
			<?php else : ?>
				<div class="nav-card disabled">
					<div class="card-content"><h3 class="title"><?php esc_html_e('No previous post', 'puffergo'); ?></h3></div>
					<div class="nav-button disabled-btn"><?php esc_html_e('Previous', 'puffergo'); ?></div>
				</div>
			<?php endif; ?>

			<?php if ($data->next_post) : ?>
				<a href="<?php echo esc_url($data->next_post['url']); ?>" class="nav-card">
					<div class="card-content">
						<?php if (! empty($data->next_post['category_name'])) : ?>
							<div class="tag"><?php echo esc_html($data->next_post['category_name']); ?></div>
						<?php endif; ?>
						<h3 class="title"><?php echo esc_html($data->next_post['title']); ?></h3>
					</div>
					<div class="nav-button"><?php esc_html_e('Next', 'puffergo'); ?></div>
				</a>
			<?php else : ?>
				<div class="nav-card disabled">
					<div class="card-content"><h3 class="title"><?php esc_html_e('No next post', 'puffergo'); ?></h3></div>
					<div class="nav-button disabled-btn"><?php esc_html_e('Next', 'puffergo'); ?></div>
				</div>
			<?php endif; ?>
		</nav>
		<div class="divider"></div>

		<!-- 评论区 -->
		<?php if ($data->comments_open || $data->comment_count > 0) : ?>
			<section class="comments-section">
				<div class="container">
					<h2 class="comments-title">
						<?php
if ($data->comment_count === 0) {
    esc_html_e('Leave a Comment', 'puffergo');
} else {
    printf(_n('%s Comment', '%s Comments', $data->comment_count, 'puffergo'), number_format_i18n($data->comment_count));
} ?>
					</h2>

					<?php if (have_comments()) : ?>
						<ol class="comment-list">
							<?php
wp_list_comments(array('style' => 'ol', 'short_ping' => true, 'avatar_size' => 48, 'callback' => function ($comment, $args, $depth) { $tag = ('div' === $args['style']) ? 'div' : 'li'; ?>
									<<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class('comment-item', $comment); ?>>
										<div class="comment-body">
											<div class="comment-author-avatar">
												<?php echo get_avatar($comment, $args['avatar_size']); ?>
											</div>
											<div class="comment-content-wrap">
												<div class="comment-meta">
													<span class="comment-author-name"><?php echo get_comment_author_link($comment); ?></span>
													<span class="comment-date"><?php echo get_comment_date(get_option('date_format') . ' H:i', $comment); ?></span>
												</div>
												<div class="comment-text"><?php comment_text(); ?></div>
												<?php if ('0' == $comment->comment_approved) : ?>
													<p class="comment-awaiting-moderation"><?php esc_html_e('Your comment is awaiting moderation.', 'puffergo'); ?></p>
												<?php endif; ?>
												<div class="comment-reply">
													<?php
comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth'], 'reply_text' => __('Reply', 'puffergo'), ))); ?>
												</div>
											</div>
										</div>
									<?php
}, )); ?>
						</ol>
						<?php
the_comments_pagination(array('prev_text' => '<span class="nav-arrow">&larr;</span> ' . __('Previous', 'puffergo'), 'next_text' => __('Next', 'puffergo') . ' <span class="nav-arrow">&rarr;</span>', 'class' => 'comments-pagination', )); ?>
					<?php endif; ?>

					<?php if ($data->comments_open) : ?>
						<div class="comment-form-wrapper">
							<?php
$commenter = wp_get_current_commenter();
					    comment_form(array('title_reply' => __('Leave a Comment', 'puffergo'), 'title_reply_to' => __('Reply to %s', 'puffergo'), 'cancel_reply_link' => __('Cancel reply', 'puffergo'), 'label_submit' => __('Submit Comment', 'puffergo'), 'comment_field' => '<p class="comment-form-comment"><label for="comment">' . __('Comment', 'puffergo') . ' <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p>', 'fields' => array('author' => '<p class="comment-form-author"><label for="author">' . __('Name', 'puffergo') . ' <span class="required">*</span></label><input id="author" name="author" type="text" value="' . esc_attr($commenter['comment_author'] ?? '') . '" size="30" maxlength="245" required /></p>', 'email' => '<p class="comment-form-email"><label for="email">' . __('Email', 'puffergo') . ' <span class="required">*</span></label><input id="email" name="email" type="email" value="' . esc_attr($commenter['comment_author_email'] ?? '') . '" size="30" maxlength="100" aria-describedby="email-notes" required /></p>', ), 'class_form' => 'comment-form', 'class_submit' => 'submit-button', 'submit_button' => '<button type="submit" name="%1$s" id="%2$s" class="%3$s">%4$s</button>', 'comment_notes_before' => '', 'comment_notes_after' => '', 'action' => admin_url('admin-ajax.php?action=puffergo_submit_comment'), 'format' => 'html5', )); ?>
						</div>
					<?php endif; ?>
				</div>
			</section>
			<div class="divider"></div>
		<?php endif; ?>

		<!-- 相关文章 -->
		<?php if (! empty($data->related_posts)) : ?>
			<section class="related-articles">
				<div class="container">
					<h2 class="title"><?php esc_html_e('Related Posts', 'puffergo'); ?></h2>
					<div class="articles-grid">
						<?php foreach ($data->related_posts as $related) : ?>
							<a href="<?php echo esc_url($related['url']); ?>" class="article-card">
								<?php if (! empty($related['image_url'])) : ?>
									<div class="article-image">
										<img src="<?php echo esc_url($related['image_url']); ?>" alt="<?php echo esc_attr($related['title']); ?>" />
									</div>
								<?php endif; ?>
								<div class="article-content">
									<h3 class="article-title"><?php echo esc_html($related['title']); ?></h3>
								</div>
								<?php if (! empty($related['category_name'])) : ?>
									<div class="article-meta">
										<div class="tag"><?php echo esc_html($related['category_name']); ?></div>
									</div>
								<?php endif; ?>
							</a>
						<?php endforeach; ?>
					</div>
				</div>
			</section>
		<?php endif; ?>
	</div>
</main>

<?php
					    if ($data->comments_open) : ?>
<script>
var puffergoComments = {
	ajaxUrl: '<?php echo esc_js(admin_url("admin-ajax.php")); ?>',
	action: 'puffergo_submit_comment',
	postId: <?php echo absint($data->id); ?>,
	nonce: '<?php echo wp_create_nonce("puffergo_comment_nonce_" . $data->id); ?>',
	cookieHash: '<?php echo esc_js(COOKIEHASH); ?>',
	i18n: {
		nameRequired: '<?php echo esc_js(__('Please enter your name', 'puffergo')); ?>',
		emailRequired: '<?php echo esc_js(__('Please enter your email', 'puffergo')); ?>',
		emailInvalid: '<?php echo esc_js(__('Please enter a valid email address', 'puffergo')); ?>',
		commentRequired: '<?php echo esc_js(__('Please enter your comment', 'puffergo')); ?>',
		commentTooShort: '<?php echo esc_js(__('Comment must be at least 5 characters', 'puffergo')); ?>',
		submitting: '<?php echo esc_js(__('Submitting...', 'puffergo')); ?>',
		commentSuccess: '<?php echo esc_js(__('Comment submitted successfully!', 'puffergo')); ?>',
		commentAwaitingModeration: '<?php echo esc_js(__('Your comment is awaiting moderation.', 'puffergo')); ?>',
		submitFailed: '<?php echo esc_js(__('Comment submission failed, please try again.', 'puffergo')); ?>',
		networkError: '<?php echo esc_js(__('Network error, please check your connection.', 'puffergo')); ?>'
	}
};
</script>
<?php endif; ?>
