<?php
/**
 * Template Name: Default
 * 博客详情页 — 默认布局。
 *
 * 变量作用域（由 layout 文件注入）：
 * @var PufferGo_Blog_Single_Data $data 文章数据对象。
 *
 * @package PufferGo
 */

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

<main class="puffergo-fullpage-layout">
	<div class="blog-detail-page mx-auto max-w-7xl 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
// 评论 AJAX 脚本配置
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; ?>
