<?php
/**
 * Event countdown timer component
 */
if (!defined('ABSPATH')) exit;

// Get countdown settings - force enable if component is being rendered
$em_countdown_enabled = 'yes';
$em_countdown_progress_thickness = $event_settings['em_countdown_progress_thickness'] ?? '8';
$em_countdown_progress_color = $event_settings['em_countdown_progress_color'] ?? '#8B5CF6';
$em_countdown_bg_color = $event_settings['em_countdown_bg_color'] ?? '#E5E7EB';
$em_countdown_label_days = $event_settings['em_countdown_label_days'] ?? 'Days';
$em_countdown_label_hours = $event_settings['em_countdown_label_hours'] ?? 'Hours';
$em_countdown_label_minutes = $event_settings['em_countdown_label_minutes'] ?? 'Minutes';
$em_countdown_label_seconds = $event_settings['em_countdown_label_seconds'] ?? 'Seconds';

// Get event date and time
$em_start_date = $event_settings['em_start_date'] ?? '';
$em_start_time = $event_settings['em_start_time'] ?? '';

// Create event datetime - if no date set, use a future date for demo
if (empty($em_start_date)) {
    $em_start_date = date('Y-m-d', strtotime('+7 days'));
    $em_start_time = '18:00';
}

$event_datetime = $em_start_date . ' ' . $em_start_time;
$event_timestamp = strtotime($event_datetime);
$current_timestamp = current_time('timestamp');

// Only show countdown if event hasn't started yet
if ($event_timestamp <= $current_timestamp) {
    return;
}

// Check if magazine layout
$layout_preference = $event_settings['em_layout_preference'] ?? 'default';
$rounded_class = ($layout_preference === 'magazine') ? 'em-rounded-2xl' : '';
?>
<div class="em-bg-white em-p-5 em-border em-border-slate-200 em-shadow-sm em-animate-fade-in em-animate-delay-300 em-h-full em-flex em-flex-col <?php echo esc_attr($rounded_class); ?>">
    <h2 class="em-text-lg em-font-bold em-text-slate-900 em-mb-4">Event Countdown</h2>

    <div id="em-countdown-timer" class="em-grid em-grid-cols-4 em-gap-3 em-text-center em-mb-4"
         data-event-time="<?php echo esc_attr($event_timestamp); ?>"
         data-progress-color="<?php echo esc_attr($em_countdown_progress_color); ?>"
         data-bg-color="<?php echo esc_attr($em_countdown_bg_color); ?>"
         data-thickness="<?php echo esc_attr($em_countdown_progress_thickness); ?>">

        <!-- Days -->
        <div class="em-text-center">
            <div id="em-days" class="em-text-2xl em-font-bold em-text-indigo-600 em-bg-indigo-50 em-rounded-lg em-py-3 em-px-2">00</div>
            <div class="em-text-xs em-text-slate-500 em-mt-1"><?php echo esc_html($em_countdown_label_days); ?></div>
        </div>

        <!-- Hours -->
        <div class="em-text-center">
            <div id="em-hours" class="em-text-2xl em-font-bold em-text-indigo-600 em-bg-indigo-50 em-rounded-lg em-py-3 em-px-2">00</div>
            <div class="em-text-xs em-text-slate-500 em-mt-1"><?php echo esc_html($em_countdown_label_hours); ?></div>
        </div>

        <!-- Minutes -->
        <div class="em-text-center">
            <div id="em-minutes" class="em-text-2xl em-font-bold em-text-indigo-600 em-bg-indigo-50 em-rounded-lg em-py-3 em-px-2">00</div>
            <div class="em-text-xs em-text-slate-500 em-mt-1"><?php echo esc_html($em_countdown_label_minutes); ?></div>
        </div>

        <!-- Seconds -->
        <div class="em-text-center">
            <div id="em-seconds" class="em-text-2xl em-font-bold em-text-indigo-600 em-bg-indigo-50 em-rounded-lg em-py-3 em-px-2">00</div>
            <div class="em-text-xs em-text-slate-500 em-mt-1"><?php echo esc_html($em_countdown_label_seconds); ?></div>
        </div>
    </div>

    <div class="em-text-center em-mt-auto">
        <p class="em-text-sm em-text-slate-600">
            <?php echo date_i18n(get_option('date_format') . ' at ' . get_option('time_format'), $event_timestamp); ?>
        </p>
    </div>
</div>

<script>
jQuery(document).ready(function($) {
    const countdownTimer = $('#em-countdown-timer');
    const eventTime = parseInt(countdownTimer.data('event-time')) * 1000; // Convert to milliseconds
    
    function updateCountdown() {
        const now = new Date().getTime();
        const distance = eventTime - now;
        
        if (distance < 0) {
            // Event has started, hide countdown
            countdownTimer.parent().fadeOut();
            return;
        }
        
        // Calculate time units
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        // Update numbers
        $('#em-days').text(days.toString().padStart(2, '0'));
        $('#em-hours').text(hours.toString().padStart(2, '0'));
        $('#em-minutes').text(minutes.toString().padStart(2, '0'));
        $('#em-seconds').text(seconds.toString().padStart(2, '0'));
        
        // Update progress circles
        const circumference = 2 * Math.PI * 45; // radius = 45
        
        // Days progress (out of 365)
        const daysProgress = (days % 365) / 365;
        $('.em-countdown-days').css('stroke-dashoffset', circumference - (daysProgress * circumference));
        
        // Hours progress (out of 24)
        const hoursProgress = hours / 24;
        $('.em-countdown-hours').css('stroke-dashoffset', circumference - (hoursProgress * circumference));
        
        // Minutes progress (out of 60)
        const minutesProgress = minutes / 60;
        $('.em-countdown-minutes').css('stroke-dashoffset', circumference - (minutesProgress * circumference));
        
        // Seconds progress (out of 60)
        const secondsProgress = seconds / 60;
        $('.em-countdown-seconds').css('stroke-dashoffset', circumference - (secondsProgress * circumference));
    }
    
    // Update immediately and then every second
    updateCountdown();
    setInterval(updateCountdown, 1000);
});
</script>

<style>
.em-countdown-circle {
    transition: stroke-dashoffset 0.5s ease-in-out;
}

.em-countdown-number {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .em-countdown-circle {
        width: 80px;
        height: 80px;
    }
    
    .em-countdown-circle circle {
        r: 35;
        cx: 40;
        cy: 40;
    }
    
    .em-countdown-number {
        font-size: 1.25rem;
    }
}
</style>


