<?php defined( 'ABSPATH' ) || exit; ?>

<div class="tailwind-scope p-8 bg-gray-50 min-h-screen">
	<?php require PageVICO_PLUGIN_DIR . 'templates/header.php'; ?>

	<main class="mx-auto max-w-6xl space-y-6">
		<section class="pagevico-section">
			<div class="pagevico-section-header">
				<div>
					<h3>
						<span class="dashicons dashicons-admin-post text-[#ff3c00]"></span>
						<?php esc_html_e( 'Top Posts', 'page-visit-counter-analytics' ); ?>
					</h3>
					<p class="text-gray-500">
						<?php esc_html_e( 'Compare which posts bring the most visitors over any custom time window.', 'page-visit-counter-analytics' ); ?>
					</p>
				</div>
			</div>

			<div class="pagevico-section-content space-y-6">
				<div class="filters-bar">
					<form method="get" class="grid gap-4 sm:grid-cols-3 w-full items-end">
						<input type="hidden" name="page" value="pagevico-top-posts">
						<div class="pagevico-form-field">
							<label class="field-label"><?php esc_html_e( 'From', 'page-visit-counter-analytics' ); ?></label>
							<input type="date" name="from" value="<?php echo esc_attr( $date_from ); ?>" />
						</div>
						<div class="pagevico-form-field">
							<label class="field-label"><?php esc_html_e( 'To', 'page-visit-counter-analytics' ); ?></label>
							<input type="date" name="to" value="<?php echo esc_attr( $date_to ); ?>" />
						</div>
						<button type="submit" class="pagevico-btn-primary w-full flex items-center justify-center gap-2">
							<span class="dashicons dashicons-filter"></span>
							<?php esc_html_e( 'Filter', 'page-visit-counter-analytics' ); ?>
						</button>
					</form>
				</div>

				<div class="table-card">
					<div class="overflow-x-auto">
						<table class="min-w-full divide-y divide-gray-200 text-sm text-left">
							<thead class="bg-[#f8fafc] text-xs uppercase tracking-[0.2em] text-gray-500">
								<tr>
									<th class="px-6 py-3"><?php esc_html_e( 'Title', 'page-visit-counter-analytics' ); ?></th>
									<th class="px-6 py-3"><?php esc_html_e( 'URL', 'page-visit-counter-analytics' ); ?></th>
									<th class="px-6 py-3 text-right"><?php esc_html_e( 'Views', 'page-visit-counter-analytics' ); ?></th>
									<th class="px-6 py-3 text-right"><?php esc_html_e( 'Sessions', 'page-visit-counter-analytics' ); ?></th>
									<th class="px-6 py-3 text-right"><?php esc_html_e( 'Pages/Session', 'page-visit-counter-analytics' ); ?></th>
									<th class="px-6 py-3 text-right"><?php esc_html_e( 'Avg. Time', 'page-visit-counter-analytics' ); ?></th>
								</tr>
							</thead>
							<tbody class="bg-white divide-y divide-[#edf2f7]">
								<?php if ( empty( $results ) ) : ?>
									<tr>
										<td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">
											<?php esc_html_e( 'No data available for the selected period.', 'page-visit-counter-analytics' ); ?>
										</td>
									</tr>
								<?php else : ?>
									<?php foreach ( $results as $row ) : ?>
										<tr class="hover:bg-gray-50 transition-colors">
											<td class="px-6 py-4 text-gray-900 text-sm font-semibold">
												<?php echo esc_html( $row['post_title'] ?? '—' ); ?>
											</td>
											<td class="px-6 py-4">
												<a href="<?php echo esc_url( $row['page_url'] ); ?>" target="_blank" class="text-[#ff3c00] underline transition-colors hover:text-opacity-80 text-sm">
													<?php echo esc_html( PageVICO\Admin\AdminPage::cleanURL( $row['page_url'] ) ); ?>
												</a>
											</td>
											<td class="px-6 py-4 text-right text-sm font-semibold text-gray-900"><?php echo esc_html( \PageVICO\Utils\NumberFormatter::formatShort( $row['views'] ) ); ?></td>
											<td class="px-6 py-4 text-right text-sm text-gray-700"><?php echo esc_html( \PageVICO\Utils\NumberFormatter::formatShort( $row['sessions'] ?? 0 ) ); ?></td>
											<td class="px-6 py-4 text-right text-sm text-gray-700"><?php echo esc_html( \PageVICO\Utils\NumberFormatter::formatDecimal( $row['pages_per_session'] ?? 0, 1 ) ); ?></td>
											<td class="px-6 py-4 text-right text-sm text-gray-700">
												<?php
												if ( ! empty( $row['avg_time_on_page'] ) ) {
													echo esc_html( \PageVICO\Admin\Views\TopPages::formatDuration( $row['avg_time_on_page'] ) );
												} else {
													echo '—';
												}
												?>
											</td>
										</tr>
									<?php endforeach; ?>
								<?php endif; ?>
							</tbody>
						</table>
					</div>
				</div>

				<?php if ( $total > $limit ) : ?>
					<?php $total_pages = ceil( $total / $limit ); ?>
					<div class="flex flex-wrap items-center justify-end gap-2 mt-4">
						<?php $prev_disabled = $paged <= 1; ?>
						<a href="<?php echo esc_url( add_query_arg( array( 'paged' => max( 1, $paged - 1 ) ) ) ); ?>" class="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-600 shadow-sm transition <?php echo $prev_disabled ? 'opacity-50 pointer-events-none' : 'hover:bg-gray-50'; ?>">
							<span class="dashicons dashicons-arrow-left-alt"></span>
							<?php esc_html_e( 'Previous', 'page-visit-counter-analytics' ); ?>
						</a>

						<?php for ( $i = 1; $i <= $total_pages; $i++ ) : ?>
							<?php $is_active = $i === $paged; ?>
							<a href="<?php echo esc_url( add_query_arg( array( 'paged' => $i ) ) ); ?>" class="inline-flex items-center justify-center rounded-full border px-3 py-2 text-sm font-semibold transition <?php echo $is_active ? 'border-transparent bg-[#ff3c00] text-white shadow-lg' : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'; ?>">
								<?php echo esc_html( $i ); ?>
							</a>
						<?php endfor; ?>

						<?php $next_disabled = $paged >= $total_pages; ?>
						<a href="<?php echo esc_url( add_query_arg( array( 'paged' => min( $total_pages, $paged + 1 ) ) ) ); ?>" class="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-600 shadow-sm transition <?php echo $next_disabled ? 'opacity-50 pointer-events-none' : 'hover:bg-gray-50'; ?>">
							<?php esc_html_e( 'Next', 'page-visit-counter-analytics' ); ?>
							<span class="dashicons dashicons-arrow-right-alt"></span>
						</a>
					</div>
				<?php endif; ?>
			</div>
		</section>
	</main>

	<?php require PageVICO_PLUGIN_DIR . 'templates/footer.php'; ?>
</div>
