<?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-groups text-[#ff3c00]"></span>
						<?php 
esc_html_e( 'Top Sessions', 'page-visit-counter-analytics' );
?>
					</h3>
					<p class="text-gray-500">
						<?php 
esc_html_e( 'Track your most engaging session journeys over any time range.', '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-sessions">
						<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-4 py-3"><?php 
esc_html_e( 'Device Info', 'page-visit-counter-analytics' );
?></th>
									<th class="px-4 py-3"><?php 
esc_html_e( 'Location', 'page-visit-counter-analytics' );
?></th>
									<th class="px-4 py-3 text-right"><?php 
esc_html_e( 'Sessions', 'page-visit-counter-analytics' );
?></th>
									<th class="px-4 py-3 text-right"><?php 
esc_html_e( 'Pageviews', 'page-visit-counter-analytics' );
?></th>
									<th class="px-4 py-3 text-right"><?php 
esc_html_e( 'Pages/Session', 'page-visit-counter-analytics' );
?></th>
									<th class="px-4 py-3"><?php 
esc_html_e( 'First Page', 'page-visit-counter-analytics' );
?></th>
									<th class="px-4 py-3"><?php 
esc_html_e( 'Time', 'page-visit-counter-analytics' );
?></th>
								</tr>
							</thead>
							<tbody class="bg-white divide-y divide-[#edf2f7]">
								<?php 
if ( empty( $results ) ) {
    ?>
									<tr>
										<td colspan="7" class="px-4 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 ) {
        ?>
										<?php 
        $pages = ( !empty( $row['pages_visited'] ) ? explode( '||', $row['pages_visited'] ) : array() );
        $first_page = $pages[0] ?? '';
        ?>
										<tr class="hover:bg-gray-50 transition-colors">
											<td class="px-4 py-4">
												<div class="flex flex-col gap-2">
													<div class="flex items-center gap-3">
														<span class="dashicons <?php 
        echo esc_attr( \PageVICO\Admin\Views\TopSessions::getDeviceIcon( $row['device_type'] ) );
        ?> text-[#ff3c00]"></span>
														<div>
															<p class="text-sm font-semibold text-gray-900 mb-1"><?php 
        echo esc_html( ucfirst( $row['device_type'] ) );
        ?></p>
															<div class="flex items-center gap-2 flex-wrap text-xs text-gray-500">
																<span><?php 
        echo esc_html( $row['browser'] );
        ?></span>
																<span>·</span>
																<span><?php 
        echo esc_html( $row['os'] );
        ?></span>
															</div>
														</div>
													</div>
													<?php 
        ?>
												</div>
											</td>
											<td class="px-4 py-4">
												<div class="flex items-center gap-3">
													<?php 
        $country_code = \PageVICO\Geo\GeoService::getCountryCode( $row['country'] );
        if ( $country_code ) {
            printf( '<img src="%s" alt="%s" width="24" height="16" class="rounded">', esc_url( PageVICO_PLUGIN_URL . 'assets/img/flags/' . strtolower( $country_code ) . '.svg' ), esc_attr( $row['country'] ) );
        }
        ?>
													<span class="text-sm text-gray-800"><?php 
        echo esc_html( $row['country'] );
        ?></span>
												</div>
											</td>
											<td class="px-4 py-4 text-right text-sm font-semibold text-gray-900"><?php 
        echo esc_html( \PageVICO\Utils\NumberFormatter::formatShort( $row['sessions'] ) );
        ?></td>
											<td class="px-4 py-4 text-right text-sm text-gray-700"><?php 
        echo esc_html( \PageVICO\Utils\NumberFormatter::formatShort( $row['pageviews'] ) );
        ?></td>
											<td class="px-4 py-4 text-right text-sm text-gray-700"><?php 
        echo esc_html( \PageVICO\Utils\NumberFormatter::formatDecimal( $row['pages_per_session'], 1 ) );
        ?></td>
											<td class="px-4 py-4 text-sm text-gray-700">
												<a href="<?php 
        echo esc_url( $first_page );
        ?>" target="_blank" class="text-[#ff3c00] underline transition-colors hover:text-opacity-80 truncate block max-w-[180px]">
													<?php 
        echo esc_html( \PageVICO\Admin\AdminPage::cleanURL( $first_page ) );
        ?>
												</a>
											</td>
											<td class="px-4 py-4 text-sm text-gray-700 space-y-1">
												<p><?php 
        echo esc_html( wp_date( 'M j, Y', strtotime( $row['first_seen'] ) ) );
        ?></p>
												<p class="text-xs text-gray-400"><?php 
        echo esc_html( wp_date( 'g:i A', strtotime( $row['first_seen'] ) ) );
        ?></p>
											</td>
										</tr>
									<?php 
    }
    ?>
								<?php 
}
?>
							</tbody>
						</table>
					</div>
				</div>

				<?php 
if ( $total > $limit ) {
    ?>
					<?php 
    $total_pages = ceil( $total / $limit );
    $current_page = max( 1, $paged );
    ?>
					<div class="flex flex-wrap items-center justify-end gap-2 mt-4">
						<?php 
    $prev_disabled = $current_page <= 1;
    ?>
						<a href="<?php 
    echo esc_url( add_query_arg( array(
        'paged' => max( 1, $current_page - 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 === $current_page;
        ?>
							<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 
    }
    ?>

						<?php 
    $next_disabled = $current_page >= $total_pages;
    ?>
						<a href="<?php 
    echo esc_url( add_query_arg( array(
        'paged' => min( $total_pages, $current_page + 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 
}
?>
			</div>
		</section>
	</main>

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