<?php
/**
 * Page Activité — fil enrichi.
 *
 * @package Volade\SDK
 * @license GPL-2.0-or-later
 * @var array|null $user
 * @var array       $events
 * @var array       $activity_stats
 * @var array       $activity_groups
 */

defined( 'ABSPATH' ) || exit;
?>
<div class="volade-wrap volade-activity-page">
	<?php
	$hero_kicker  = __( 'Votre parcours Volade', 'core-version-switcher-by-volade' );
	$hero_title   = __( 'Activité', 'core-version-switcher-by-volade' );
	$hero_lead    = __( 'Connexions, XP, missions, badges et plugins — tout votre historique en un seul endroit.', 'core-version-switcher-by-volade' );
	$hero_variant = 'indigo';
	$hero_orbs    = array();

	if ( $user ) {
		ob_start();
		?>
		<div class="volade-hero-user-chip">
			<div class="volade-avatar volade-avatar--sm">
				<?php echo esc_html( strtoupper( substr( $user['pseudo'], 0, 2 ) ) ); ?>
			</div>
			<div class="volade-hero-user-chip-body">
				<strong><?php echo esc_html( $user['pseudo'] ); ?></strong>
				<span>
				<?php
				/* translators: %d: user level number. */
				printf( esc_html__( 'Niveau %d', 'core-version-switcher-by-volade' ), (int) $user['level'] );
				?>
				</span>
			</div>
		</div>
		<?php
		$hero_aside_html = ob_get_clean();
	} else {
		ob_start();
		?>
		<a href="<?php echo esc_url( admin_url( 'admin.php?page=volade-auth' ) ); ?>" class="volade-btn volade-btn-primary">
			<?php esc_html_e( 'Se connecter', 'core-version-switcher-by-volade' ); ?>
		</a>
		<a href="<?php echo esc_url( admin_url( 'admin.php?page=volade-discover' ) ); ?>" class="volade-btn volade-btn-secondary">
			<?php esc_html_e( 'Découvrir les plugins', 'core-version-switcher-by-volade' ); ?>
		</a>
		<?php
		$hero_actions_html = ob_get_clean();
	}

	require __DIR__ . '/partials/page-hero.php';
	?>

	<?php if ( ! $user ) : ?>
		<div class="volade-card volade-empty-state volade-activity-empty">
			<div class="volade-empty-icon">📋</div>
			<h2><?php esc_html_e( 'Votre fil d\'activité vous attend', 'core-version-switcher-by-volade' ); ?></h2>
			<p class="volade-muted volade-empty-lead">
				<?php esc_html_e( 'Connectez-vous pour suivre vos XP, missions, badges et plugins activés sur ce site.', 'core-version-switcher-by-volade' ); ?>
			</p>
		</div>
	<?php else : ?>

		<div class="volade-dash-grid volade-activity-stats">
			<div class="volade-stat-card">
				<div class="volade-stat-icon volade-stat-icon--indigo">📜</div>
				<span class="volade-stat-number"><?php echo (int) ( $activity_stats['total_events'] ?? 0 ); ?></span>
				<span class="volade-stat-label"><?php esc_html_e( 'Événements', 'core-version-switcher-by-volade' ); ?></span>
			</div>
			<div class="volade-stat-card">
				<div class="volade-stat-icon volade-stat-icon--amber">⭐</div>
				<span class="volade-stat-number">+<?php echo (int) ( $activity_stats['week_xp'] ?? 0 ); ?></span>
				<span class="volade-stat-label"><?php esc_html_e( 'XP (7 jours)', 'core-version-switcher-by-volade' ); ?></span>
			</div>
			<div class="volade-stat-card">
				<div class="volade-stat-icon volade-stat-icon--green">🎯</div>
				<span class="volade-stat-number"><?php echo (int) ( $activity_stats['missions'] ?? 0 ); ?></span>
				<span class="volade-stat-label"><?php esc_html_e( 'Missions', 'core-version-switcher-by-volade' ); ?></span>
			</div>
			<div class="volade-stat-card">
				<div class="volade-stat-icon volade-stat-icon--blue">📦</div>
				<span class="volade-stat-number"><?php echo (int) ( $activity_stats['plugins'] ?? 0 ); ?></span>
				<span class="volade-stat-label"><?php esc_html_e( 'Plugins testés', 'core-version-switcher-by-volade' ); ?></span>
			</div>
		</div>

		<?php if ( ! empty( $activity_stats['last_activity'] ) ) : ?>
			<p class="volade-activity-last">
				<?php
				printf(
					/* translators: %s: relative time of last activity, e.g. "2 hours ago". */
					esc_html__( 'Dernière activité %s', 'core-version-switcher-by-volade' ),
					'<strong>' . esc_html( $activity_stats['last_activity'] ) . '</strong>'
				);
				?>
			</p>
		<?php endif; ?>

		<?php if ( empty( $events ) ) : ?>
			<div class="volade-card volade-empty-state volade-activity-empty">
				<div class="volade-empty-icon">🌱</div>
				<h2><?php esc_html_e( 'C\'est le début de l\'aventure', 'core-version-switcher-by-volade' ); ?></h2>
				<p class="volade-muted volade-empty-lead">
					<?php esc_html_e( 'Installez des plugins Volade, complétez des missions et gagnez de l\'XP pour remplir ce fil.', 'core-version-switcher-by-volade' ); ?>
				</p>
				<div class="volade-activity-empty-actions">
					<a href="<?php echo esc_url( admin_url( 'admin.php?page=volade-discover' ) ); ?>" class="volade-btn volade-btn-primary">
						<?php esc_html_e( 'Découvrir les plugins', 'core-version-switcher-by-volade' ); ?>
					</a>
					<a href="<?php echo esc_url( admin_url( 'admin.php?page=volade-promote' ) ); ?>" class="volade-btn volade-btn-secondary">
						<?php esc_html_e( 'Voir les missions', 'core-version-switcher-by-volade' ); ?>
					</a>
				</div>
			</div>
		<?php else : ?>

			<div class="volade-activity-toolbar volade-card">
				<div class="volade-activity-filters" role="group" aria-label="<?php esc_attr_e( 'Filtrer l\'activité', 'core-version-switcher-by-volade' ); ?>">
					<button type="button" class="volade-activity-filter is-active" data-activity-filter="all"><?php esc_html_e( 'Tout', 'core-version-switcher-by-volade' ); ?></button>
					<button type="button" class="volade-activity-filter" data-activity-filter="xp"><?php esc_html_e( 'XP', 'core-version-switcher-by-volade' ); ?></button>
					<button type="button" class="volade-activity-filter" data-activity-filter="missions"><?php esc_html_e( 'Missions', 'core-version-switcher-by-volade' ); ?></button>
					<button type="button" class="volade-activity-filter" data-activity-filter="badges"><?php esc_html_e( 'Badges', 'core-version-switcher-by-volade' ); ?></button>
					<button type="button" class="volade-activity-filter" data-activity-filter="plugins"><?php esc_html_e( 'Plugins', 'core-version-switcher-by-volade' ); ?></button>
				</div>
			</div>

			<div class="volade-activity-timeline" id="volade-activity-timeline">
				<?php foreach ( $activity_groups as $group ) : ?>
					<section class="volade-activity-day-group">
						<h2 class="volade-activity-day-label">
							<span class="volade-activity-day-dot" aria-hidden="true"></span>
							<?php echo esc_html( $group['label'] ); ?>
						</h2>
						<div class="volade-activity-day-items">
							<?php foreach ( $group['events'] as $event ) : ?>
								<article class="volade-activity-card volade-activity-card--<?php echo esc_attr( $event['tone'] ?? 'default' ); ?>"
										data-activity-group="<?php echo esc_attr( $event['filter_group'] ?? 'other' ); ?>">
									<div class="volade-activity-card-icon" aria-hidden="true">
										<?php echo esc_html( $event['icon'] ?? '📌' ); ?>
									</div>
									<div class="volade-activity-card-body">
										<div class="volade-activity-card-head">
											<strong><?php echo esc_html( $event['label'] ); ?></strong>
											<?php if ( ! empty( $event['relative'] ) ) : ?>
												<span class="volade-activity-relative"><?php echo esc_html( $event['relative'] ); ?></span>
											<?php endif; ?>
										</div>
										<?php if ( ! empty( $event['detail'] ) ) : ?>
											<p class="volade-activity-card-detail"><?php echo esc_html( $event['detail'] ); ?></p>
										<?php endif; ?>
										<div class="volade-activity-card-meta">
											<?php if ( ! empty( $event['plugin'] ) ) : ?>
												<span class="volade-activity-pill"><?php echo esc_html( $event['plugin'] ); ?></span>
											<?php endif; ?>
											<time datetime="<?php echo esc_attr( $event['date'] ?? '' ); ?>">
												<?php echo esc_html( $event['date_h'] ?? '' ); ?>
											</time>
										</div>
									</div>
								</article>
							<?php endforeach; ?>
						</div>
					</section>
				<?php endforeach; ?>
			</div>

			<p class="volade-activity-empty-filter" id="volade-activity-empty-filter" hidden>
				<?php esc_html_e( 'Aucun événement pour ce filtre.', 'core-version-switcher-by-volade' ); ?>
			</p>

		<?php endif; ?>
	<?php endif; ?>
</div>
