<?php
/**
 * [nemtly_event] widget template.
 *
 * Renders a server-side themed event hero (instant paint + SEO) followed by a
 * React booking-wizard mount point. The hero markup mirrors the React
 * `EventHero` component 1:1 (same classes, same `--nb-*` styling vars) so the
 * client-side takeover produces no visible flash.
 *
 * Override by copying this file to
 * <theme>/nemtly-booking/shortcodes/single-event.php.
 *
 * @package NemtlyBooking
 *
 * @var Event      $event           The event being displayed.
 * @var array      $seed            Event data seed, JSON-encoded to data-initial-event.
 * @var string     $style_vars      Inline CSS custom properties (--nb-* overrides).
 * @var string[]   $wrapper_classes CSS classes applied to the widget wrapper.
 * @var array      $json_ld         JSON-LD Event schema (empty to suppress).
 * @var array      $atts            Sanitized shortcode attributes.
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped -- variables are escaped below.

$slot_based = in_array( $event->get_event_type(), [ 'one-on-one', 'group' ], true );
$duration   = (int) $event->get_duration();
$type_label = $slot_based ? __( 'Session', 'nemtly-booking' ) : __( 'Event', 'nemtly-booking' );
if ( 'one-on-one' === $event->get_event_type() ) {
    $type_label = __( '1:1 Session', 'nemtly-booking' );
} elseif ( 'group' === $event->get_event_type() ) {
    $type_label = __( 'Group Session', 'nemtly-booking' );
}

if ( $duration ) {
    /* translators: 1: event type label, 2: duration in minutes */
    $type_line = sprintf( __( '%1$s · %2$d min', 'nemtly-booking' ), $type_label, $duration );
} else {
    $type_line = $type_label;
}

$description = wp_strip_all_tags( $event->get_description() );
$summary     = mb_strlen( $description ) > 120 ? mb_substr( $description, 0, 120 ) . '…' : $description;

$price  = (float) $event->get_price();
$symbol = get_option( 'nemtly_currency_symbol', '$' );

$banner     = get_the_post_thumbnail_url( $event->get_id(), 'medium' ) ? get_the_post_thumbnail_url( $event->get_id(), 'medium' ) : '';
$top_class  = $banner ? 'nb-event-hero__top nb-event-hero__top--has-banner' : 'nb-event-hero__top';
$top_style  = $banner ? sprintf( '--nb-banner: url("%s");', esc_url( $banner ) ) : '';
$hero_style = trim( $style_vars . ' ' . $top_style );
?>
<div class="<?php echo esc_attr( implode( ' ', $wrapper_classes ) ); ?>"
    data-event-id="<?php echo esc_attr( $event->get_id() ); ?>"
    data-initial-event="<?php echo esc_attr( wp_json_encode( $seed ) ); ?>">

    <div class="nb-event-hero" style="<?php echo esc_attr( $hero_style ); ?>">
        <div class="<?php echo esc_attr( $top_class ); ?>">
            <span class="nb-event-hero__tag"><?php echo esc_html( $type_line ); ?></span>
            <h2 class="nb-event-hero__title"><?php echo esc_html( $event->get_title() ); ?></h2>
            <?php if ( $summary ) : ?>
                <p class="nb-event-hero__sub"><?php echo esc_html( $summary ); ?></p>
            <?php endif; ?>
        </div>

        <div class="nb-event-hero__body">
            <div class="nb-event-hero__meta">
                <?php if ( ! $slot_based ) : ?>
                    <div class="nb-event-hero__meta-item">
                        <span class="nb-event-hero__meta-icon" aria-hidden="true">📅</span>
                        <?php
                        if ( $event->get_formatted_date() ) {
                            echo esc_html( $event->get_formatted_date() );
                        } else {
                            esc_html_e( 'Date to be announced', 'nemtly-booking' );
                        }
                        ?>
                    </div>
                <?php endif; ?>

                <?php if ( ! $slot_based && $event->get_formatted_time() ) : ?>
                    <div class="nb-event-hero__meta-item">
                        <span class="nb-event-hero__meta-icon" aria-hidden="true">🕙</span>
                        <?php echo esc_html( $event->get_formatted_time() ); ?>
                    </div>
                <?php endif; ?>

                <?php if ( $event->get_location() ) : ?>
                    <div class="nb-event-hero__meta-item">
                        <span class="nb-event-hero__meta-icon" aria-hidden="true">📍</span>
                        <?php echo esc_html( $event->get_location() ); ?>
                    </div>
                <?php endif; ?>
            </div>

            <?php if ( $description ) : ?>
                <p class="nb-event-hero__desc"><?php echo esc_html( $description ); ?></p>
            <?php endif; ?>

            <div class="nb-event-hero__cta">
                <div>
                    <?php if ( $price > 0 ) : ?>
                        <div class="nb-event-hero__price">
                            <?php echo esc_html( $symbol . number_format( (float) $price, 2, '.', '' ) ); ?>
                            <span class="nb-event-hero__price-note"><?php esc_html_e( 'per person', 'nemtly-booking' ); ?></span>
                        </div>
                    <?php else : ?>
                        <div class="nb-event-hero__price"><?php esc_html_e( 'Free', 'nemtly-booking' ); ?></div>
                    <?php endif; ?>
                </div>
                <button type="button" class="nemtly-button-primary nemtly-button-lg" data-nemtly-book>
                    <?php esc_html_e( 'Book now →', 'nemtly-booking' ); ?>
                </button>
            </div>
        </div>
    </div>

    <div class="nb-booking-wizard" hidden>
        <div class="nb-loading" role="status" aria-live="polite">
            <?php esc_html_e( 'Loading booking form…', 'nemtly-booking' ); ?>
        </div>
    </div>

</div>

<?php if ( ! empty( $json_ld ) ) : ?>
    <script type="application/ld+json"><?php echo wp_json_encode( $json_ld ); ?></script>
<?php endif; ?>
