<?php
/**
 * Template Name: What's On
 *
 * Event listing page with sidebar filters, calendar widget,
 * and JavaScript-based filtering (no page reload).
 *
 * @package Northfield_Theatre
 * @since 1.0.0
 */

get_header();

$all_events     = northfield_get_events( array( 'orderby' => 'date', 'order' => 'ASC' ) );
$categories     = northfield_get_event_categories();
$venues         = northfield_get_venues();
$events_by_date = northfield_get_events_by_date();

/*
 * Editorial hierarchy: pick the first two featured events for visual
 * promotion. The first drives a full-bleed hero above the grid; the
 * second spans two columns within the grid. Filters still affect the
 * grid version — the hero is a static curatorial pick.
 */
$featured_events = array_values( array_filter( $all_events, function ( $e ) {
	return ! empty( $e['featured'] );
} ) );
$featured_hero   = $featured_events[0] ?? null;
$featured_wide   = $featured_events[1] ?? null;
$featured_wide_id = $featured_wide ? $featured_wide['id'] : '';

// Build a JSON-safe version of events for JavaScript filtering.
$events_for_js = array();
foreach ( $all_events as $event ) {
	$first_date = northfield_get_event_first_date( $event['id'] );
	$last_date  = northfield_get_event_last_date( $event['id'] );
	$events_for_js[] = array(
		'id'           => $event['id'],
		'name'         => $event['name'],
		'slug'         => $event['slug'],
		'category'     => $event['category'],
		'venue'        => $event['venue'],
		'featured'     => $event['featured'],
		'availability' => $event['availability'],
		'saleStatus'   => $event['saleStatus'],
		'minPrice'     => $event['minPrice'],
		'maxPrice'     => $event['maxPrice'],
		'firstDate'    => $first_date,
		'lastDate'     => $last_date,
	);
}

// Get all instance dates for the calendar.
$all_instances = northfield_load_json( 'instances.json' );
$instance_dates = array();
foreach ( $all_instances as $inst ) {
	$date = substr( $inst['datetime'], 0, 10 );
	$instance_dates[ $date ] = true;
}
?>

<div class="whats-on container">
	<header class="page-header">
		<h1 class="page-header__title"><?php esc_html_e( "What's On", 'northfield-theatre' ); ?></h1>
		<p class="page-header__subtitle"><?php esc_html_e( 'All events', 'northfield-theatre' ); ?></p>
	</header>

	<?php if ( $featured_hero ) :
		$hero_first_date   = northfield_get_event_first_date( $featured_hero['id'] );
		$hero_last_date    = northfield_get_event_last_date( $featured_hero['id'] );
		$hero_date_display = northfield_format_event_date_range( $hero_first_date, $hero_last_date );
		$hero_price        = northfield_format_event_price_range( $featured_hero );
		$hero_has_image    = ! empty( $featured_hero['image'] ) && file_exists( NORTHFIELD_DIR . '/assets/images/' . $featured_hero['image'] );
		$hero_image_url    = $hero_has_image ? NORTHFIELD_URI . '/assets/images/' . $featured_hero['image'] : '';
		$hero_badge        = northfield_get_event_badge( $featured_hero );
	?>
		<section class="whats-on__feature" aria-label="<?php esc_attr_e( 'Featured show', 'northfield-theatre' ); ?>">
			<a class="whats-on__feature-link" href="<?php echo esc_url( home_url( '/events/' . $featured_hero['slug'] . '/' ) ); ?>">
				<div class="whats-on__feature-media"<?php if ( $hero_image_url ) : ?> style="background-image: url('<?php echo esc_url( $hero_image_url ); ?>')"<?php endif; ?>>
					<span class="whats-on__feature-flag"><?php esc_html_e( 'Featured', 'northfield-theatre' ); ?></span>
				</div>
				<div class="whats-on__feature-body">
					<p class="whats-on__feature-eyebrow">
						<?php echo esc_html( $featured_hero['category'] ); ?> · <?php echo esc_html( $featured_hero['venue'] ); ?>
					</p>
					<h2 class="whats-on__feature-title"><?php echo esc_html( $featured_hero['name'] ); ?></h2>
					<?php if ( $hero_date_display ) : ?>
						<p class="whats-on__feature-date"><?php echo esc_html( $hero_date_display ); ?></p>
					<?php endif; ?>
					<p class="whats-on__feature-summary"><?php echo esc_html( $featured_hero['summary'] ); ?></p>
					<div class="whats-on__feature-meta">
						<?php if ( $hero_price ) : ?>
							<span class="whats-on__feature-price"><?php echo esc_html( $hero_price ); ?></span>
						<?php endif; ?>
						<?php if ( $hero_badge ) : ?>
							<span class="badge badge--<?php echo esc_attr( $hero_badge['variant'] ); ?>"><?php echo esc_html( $hero_badge['label'] ); ?></span>
						<?php endif; ?>
					</div>
					<span class="btn btn--primary whats-on__feature-cta"><?php esc_html_e( 'Book now', 'northfield-theatre' ); ?></span>
				</div>
			</a>
		</section>
	<?php endif; ?>

	<!-- Mobile filter toggle -->
	<div class="whats-on__mobile-controls show-mobile-only">
		<button class="btn btn--outline btn--full whats-on__filter-toggle" id="filter-toggle" aria-expanded="false" aria-controls="whats-on-sidebar">
			<?php echo northfield_icon( 'search', 18 ); ?>
			<?php esc_html_e( 'Filter & Search', 'northfield-theatre' ); ?>
		</button>
	</div>

	<div class="whats-on__layout">
		<!-- Main content -->
		<div class="whats-on__main" id="whats-on-results">
			<!-- View toggle -->
			<div class="whats-on__view-controls">
				<span class="whats-on__result-count" id="result-count">
					<?php
					printf(
						/* translators: %d: number of events */
						esc_html( _n( '%d event', '%d events', count( $all_events ), 'northfield-theatre' ) ),
						count( $all_events )
					);
					?>
				</span>
				<div class="whats-on__view-toggle" role="group" aria-label="<?php esc_attr_e( 'View mode', 'northfield-theatre' ); ?>">
					<button class="whats-on__view-btn whats-on__view-btn--active" data-view="grid" aria-pressed="true" aria-label="<?php esc_attr_e( 'Grid view', 'northfield-theatre' ); ?>">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
					</button>
					<button class="whats-on__view-btn" data-view="list" aria-pressed="false" aria-label="<?php esc_attr_e( 'List view', 'northfield-theatre' ); ?>">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="3" y="4" width="18" height="2"/><rect x="3" y="11" width="18" height="2"/><rect x="3" y="18" width="18" height="2"/></svg>
					</button>
				</div>
			</div>

			<!-- Events grid (default view) -->
			<div class="whats-on__grid event-grid event-grid--3" id="events-grid">
				<?php foreach ( $all_events as $event ) :
					$is_wide = ( $event['id'] === $featured_wide_id );
					$wrapper_classes = 'whats-on__event-wrapper' . ( $is_wide ? ' whats-on__event-wrapper--wide' : '' );
				?>
					<div class="<?php echo esc_attr( $wrapper_classes ); ?>"
					     data-event-id="<?php echo esc_attr( $event['id'] ); ?>"
					     data-category="<?php echo esc_attr( $event['category'] ); ?>"
					     data-venue="<?php echo esc_attr( $event['venue'] ); ?>"
					     data-first-date="<?php echo esc_attr( northfield_get_event_first_date( $event['id'] ) ); ?>"
					     data-last-date="<?php echo esc_attr( northfield_get_event_last_date( $event['id'] ) ); ?>">
						<?php get_template_part( 'template-parts/content', 'event-card', array(
							'event'   => $event,
							'variant' => $is_wide ? 'wide' : 'default',
						) ); ?>
					</div>
				<?php endforeach; ?>
			</div>

			<!-- No results message -->
			<div class="whats-on__no-results" id="no-results" hidden>
				<h2><?php esc_html_e( 'No events match your filters', 'northfield-theatre' ); ?></h2>
				<p><?php esc_html_e( 'Try adjusting your search or filters to find what you\'re looking for.', 'northfield-theatre' ); ?></p>
				<button class="btn btn--outline" id="clear-filters"><?php esc_html_e( 'Clear all filters', 'northfield-theatre' ); ?></button>
			</div>
		</div>

		<!-- Sidebar filters -->
		<aside class="whats-on__sidebar" id="whats-on-sidebar" aria-label="<?php esc_attr_e( 'Event filters', 'northfield-theatre' ); ?>">
			<div class="whats-on__sidebar-inner">
				<!-- Mobile close button -->
				<div class="whats-on__sidebar-header show-mobile-only">
					<h2 class="whats-on__sidebar-title"><?php esc_html_e( 'Filters', 'northfield-theatre' ); ?></h2>
					<button class="whats-on__sidebar-close" id="filter-close" aria-label="<?php esc_attr_e( 'Close filters', 'northfield-theatre' ); ?>">
						<?php echo northfield_icon( 'close', 24 ); ?>
					</button>
				</div>

				<!-- Quick date filters -->
				<div class="filter-group">
					<h3 class="filter-group__title"><?php esc_html_e( 'Date', 'northfield-theatre' ); ?></h3>
					<div class="filter-group__options" role="group" aria-label="<?php esc_attr_e( 'Date filters', 'northfield-theatre' ); ?>">
						<label class="filter-chip">
							<input type="radio" name="date_filter" value="all" checked class="sr-only" />
							<span class="filter-chip__label"><?php esc_html_e( 'All dates', 'northfield-theatre' ); ?></span>
						</label>
						<label class="filter-chip">
							<input type="radio" name="date_filter" value="today" class="sr-only" />
							<span class="filter-chip__label"><?php esc_html_e( 'Today', 'northfield-theatre' ); ?></span>
						</label>
						<label class="filter-chip">
							<input type="radio" name="date_filter" value="7days" class="sr-only" />
							<span class="filter-chip__label"><?php esc_html_e( 'Next 7 days', 'northfield-theatre' ); ?></span>
						</label>
						<label class="filter-chip">
							<input type="radio" name="date_filter" value="30days" class="sr-only" />
							<span class="filter-chip__label"><?php esc_html_e( 'Next 30 days', 'northfield-theatre' ); ?></span>
						</label>
					</div>
				</div>

				<!-- Category filter -->
				<div class="filter-group">
					<h3 class="filter-group__title"><?php esc_html_e( 'Category', 'northfield-theatre' ); ?></h3>
					<div class="filter-group__options">
						<?php foreach ( $categories as $cat ) : ?>
							<label class="filter-checkbox">
								<input type="checkbox" name="category" value="<?php echo esc_attr( $cat ); ?>" />
								<span class="filter-checkbox__mark"></span>
								<span class="filter-checkbox__label"><?php echo esc_html( $cat ); ?></span>
							</label>
						<?php endforeach; ?>
					</div>
				</div>

				<!-- Venue filter -->
				<div class="filter-group">
					<h3 class="filter-group__title"><?php esc_html_e( 'Venue', 'northfield-theatre' ); ?></h3>
					<div class="filter-group__options">
						<?php foreach ( $venues as $venue ) : ?>
							<label class="filter-checkbox">
								<input type="checkbox" name="venue" value="<?php echo esc_attr( $venue ); ?>" />
								<span class="filter-checkbox__mark"></span>
								<span class="filter-checkbox__label"><?php echo esc_html( $venue ); ?></span>
							</label>
						<?php endforeach; ?>
					</div>
				</div>

				<!-- Calendar widget -->
				<div class="filter-group">
					<h3 class="filter-group__title"><?php esc_html_e( 'Calendar', 'northfield-theatre' ); ?></h3>
					<div class="calendar-widget" id="calendar-widget" role="application" aria-label="<?php esc_attr_e( 'Event calendar', 'northfield-theatre' ); ?>">
						<!-- Rendered by JavaScript -->
					</div>
				</div>

				<!-- Mobile apply button -->
				<div class="whats-on__sidebar-actions show-mobile-only">
					<button class="btn btn--primary btn--full" id="apply-filters">
						<?php esc_html_e( 'Show results', 'northfield-theatre' ); ?>
					</button>
				</div>
			</div>
		</aside>
	</div>
</div>

<script type="application/json" id="whats-on-events-data">
<?php echo wp_json_encode( $events_for_js ); ?>
</script>

<script type="application/json" id="whats-on-instance-dates">
<?php echo wp_json_encode( array_keys( $instance_dates ) ); ?>
</script>

<?php
get_footer();
