<?php
/**
 * The template for displaying single posts
 *
 * Features:
 * – Full-width hero featured image with title overlay
 * – Reading progress bar (filled by reading-progress.ts)
 * – Auto-generated TOC (filled by toc.ts)
 * – Author bio card
 * – Related posts (same category)
 * – Social share buttons (no third-party SDK)
 * – Breadcrumb, prev/next navigation, comments
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package CyyWordpress
 */

get_header();
?>

<!-- Reading progress bar -->
<div id="reading-progress" class="reading-progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="<?php esc_attr_e( '阅读进度', 'cyywordpress' ); ?>">
	<div class="reading-progress__bar"></div>
</div>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">

		<nav class="breadcrumb" aria-label="<?php esc_attr_e( '面包屑导航', 'cyywordpress' ); ?>">
			<ul>
				<li>
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
						<span class="icon is-small"><i class="fa-solid fa-house" aria-hidden="true"></i></span>
						<span><?php esc_html_e( '首页', 'cyywordpress' ); ?></span>
					</a>
				</li>
				<li class="is-active">
					<a href="#" aria-current="page">
						<span class="icon is-small"><i class="fa-solid fa-file-lines" aria-hidden="true"></i></span>
						<span><?php esc_html_e( '文章', 'cyywordpress' ); ?></span>
					</a>
				</li>
			</ul>
		</nav>

		<?php
		while ( have_posts() ) :
			the_post();
			?>

			<?php if ( has_post_thumbnail() ) : ?>
				<div class="single-hero">
					<?php
					the_post_thumbnail(
						'full',
						array(
							'class'   => 'single-hero__image',
							'loading' => 'eager',
							'decoding'=> 'async',
							'alt'     => the_title_attribute( array( 'echo' => false ) ),
						)
					);
					?>
					<div class="single-hero__overlay">
						<?php the_title( '<h1 class="single-hero__title">', '</h1>' ); ?>
					</div>
				</div>
			<?php endif; ?>

			<div class="columns single-layout">
				<!-- TOC sidebar (populated by toc.ts) -->
				<aside class="column is-3-desktop is-hidden-touch single-toc" aria-label="<?php esc_attr_e( '目录', 'cyywordpress' ); ?>">
					<div id="toc" class="toc card">
						<div class="card-header">
							<p class="card-header-title">
								<i class="fa-solid fa-list" aria-hidden="true"></i>
								&nbsp;<?php esc_html_e( '目录', 'cyywordpress' ); ?>
							</p>
						</div>
						<div class="card-content" id="toc-list"></div>
					</div>
				</aside>

				<!-- Main article column -->
				<div class="column is-9-desktop single-article">
					<?php get_template_part( 'template-parts/content', get_post_type() ); ?>

					<!-- Social share -->
					<div class="social-share">
						<span class="social-share__label"><?php esc_html_e( '分享：', 'cyywordpress' ); ?></span>
						<a
							class="social-share__btn social-share__btn--weibo"
							href="<?php echo esc_url( 'https://service.weibo.com/share/share.php?url=' . rawurlencode( get_permalink() ) . '&title=' . rawurlencode( get_the_title() ) ); ?>"
							target="_blank"
							rel="noopener noreferrer"
							aria-label="<?php esc_attr_e( '分享到微博', 'cyywordpress' ); ?>"
						>
							<i class="fa-brands fa-weibo" aria-hidden="true"></i>
						</a>
						<a
							class="social-share__btn social-share__btn--twitter"
							href="<?php echo esc_url( 'https://twitter.com/intent/tweet?url=' . rawurlencode( get_permalink() ) . '&text=' . rawurlencode( get_the_title() ) ); ?>"
							target="_blank"
							rel="noopener noreferrer"
							aria-label="<?php esc_attr_e( '分享到 Twitter', 'cyywordpress' ); ?>"
						>
							<i class="fa-brands fa-x-twitter" aria-hidden="true"></i>
						</a>
						<button
							class="social-share__btn social-share__btn--copy"
							data-url="<?php echo esc_attr( get_permalink() ); ?>"
							aria-label="<?php esc_attr_e( '复制链接', 'cyywordpress' ); ?>"
						>
							<i class="fa-solid fa-link" aria-hidden="true"></i>
						</button>
					</div>

					<!-- Post navigation -->
					<?php
					the_post_navigation(
						array(
							'prev_text' => '<span class="nav-subtitle"><i class="fa-solid fa-chevron-left" aria-hidden="true"></i> ' . esc_html__( '上一篇', 'cyywordpress' ) . '</span><span class="nav-title">%title</span>',
							'next_text' => '<span class="nav-subtitle">' . esc_html__( '下一篇', 'cyywordpress' ) . ' <i class="fa-solid fa-chevron-right" aria-hidden="true"></i></span><span class="nav-title">%title</span>',
						)
					);
					?>

					<!-- Author bio -->
					<?php
					$author_id  = (int) get_the_author_meta( 'ID' );
					$author_bio = get_the_author_meta( 'description' );
					if ( $author_bio ) :
						?>
						<div class="author-bio card">
							<div class="card-content">
								<div class="media">
									<div class="media-left">
										<?php
										echo get_avatar(
											$author_id,
											80,
											'',
											get_the_author(),
											array(
												'class'   => 'author-bio__avatar',
												'loading' => 'lazy',
											)
										);
										?>
									</div>
									<div class="media-content">
										<a class="author-bio__name title is-5" href="<?php echo esc_url( get_author_posts_url( $author_id ) ); ?>">
											<?php echo esc_html( get_the_author() ); ?>
										</a>
										<p class="author-bio__description"><?php echo esc_html( $author_bio ); ?></p>
									</div>
								</div>
							</div>
						</div><!-- .author-bio -->
					<?php endif; ?>

					<!-- Related posts (same first category) -->
					<?php
					$cats = get_the_category();
					if ( $cats ) :
						$related = get_posts(
							array(
								'category__in'   => array( $cats[0]->term_id ),
								'post__not_in'   => array( get_the_ID() ),
								'posts_per_page' => 3,
								'orderby'        => 'rand',
							)
						);

						if ( $related ) :
							?>
							<div class="related-posts">
								<h3 class="related-posts__title title is-5">
									<?php esc_html_e( '相关文章', 'cyywordpress' ); ?>
								</h3>
								<div class="columns is-multiline">
									<?php
									foreach ( $related as $related_post ) :
										setup_postdata( $related_post );
										?>
										<div class="column is-4">
											<div class="card related-post-card">
												<?php if ( has_post_thumbnail( $related_post ) ) : ?>
													<div class="card-image">
														<figure class="image is-16by9">
															<?php
															echo get_the_post_thumbnail(
																$related_post,
																'card-thumbnail-sm',
																array(
																	'loading'  => 'lazy',
																	'decoding' => 'async',
																	'class'    => 'related-post-card__image',
																	'alt'      => esc_attr( get_the_title( $related_post ) ),
																)
															);
															?>
														</figure>
													</div>
												<?php endif; ?>
												<div class="card-content">
													<a class="related-post-card__title" href="<?php echo esc_url( get_permalink( $related_post ) ); ?>">
														<?php echo esc_html( get_the_title( $related_post ) ); ?>
													</a>
												</div>
											</div>
										</div>
										<?php
									endforeach;
									wp_reset_postdata();
									?>
								</div><!-- .columns -->
							</div><!-- .related-posts -->
						<?php endif; ?>
					<?php endif; ?>

					<!-- Comments -->
					<?php
					if ( comments_open() || get_comments_number() ) :
						comments_template();
					endif;
					?>

				</div><!-- .single-article -->
			</div><!-- .columns.single-layout -->

		<?php endwhile; ?>

	</main><!-- #main -->
</div><!-- #primary -->

<?php
get_sidebar();
get_footer();

