<?php
/**
 * Template part for displaying the Ticker News section.
 * Supports multiple layout styles via Customizer.
 *
 * @package Blog_Over
 */

// Check if ticker is enabled
$enable_ticker = get_theme_mod('blog_over_enable_ticker', false);
if (!$enable_ticker) {
    return;
}

// Check "Enable On" setting
$enable_on = get_theme_mod('blog_over_ticker_enable_on', array('home', 'posts_page'));
if (!is_array($enable_on)) {
    $enable_on = array('home', 'posts_page');
}

$show_ticker = false;
if (in_array('home', $enable_on) && is_front_page()) $show_ticker = true;
if (in_array('posts_page', $enable_on) && is_home()) $show_ticker = true;
if (in_array('archive', $enable_on) && is_archive()) $show_ticker = true;
if (in_array('search', $enable_on) && is_search()) $show_ticker = true;
if (in_array('post', $enable_on) && is_single()) $show_ticker = true;

if (!$show_ticker) {
    return;
}

// Layout style
$ticker_layout = get_theme_mod('blog_over_ticker_layout', 'classic');

// Container setting
$container = get_theme_mod('blog_over_ticker_container', 'container');
// For Gradient Alert, we might want to extend full width internally, but let's respect container
$container_class = ($container === 'full-width') ? 'blog-over-container blog-over-container-wide' : 'blog-over-container';

// Content settings
$ticker_title = get_theme_mod('blog_over_ticker_title', __('Top Stories', 'blog-over'));
$posts_count = get_theme_mod('blog_over_ticker_posts_count', 6);
$source = get_theme_mod('blog_over_ticker_source', 'latest');
$category = get_theme_mod('blog_over_ticker_category', '');

// Display settings
$show_image = get_theme_mod('blog_over_ticker_show_image', true);
$show_date = get_theme_mod('blog_over_ticker_show_date', true);
$show_pause = get_theme_mod('blog_over_ticker_show_pause', true);

// Motion settings
$direction = get_theme_mod('blog_over_ticker_direction', 'left');
$speed = get_theme_mod('blog_over_ticker_speed', 50);
$pause_hover = get_theme_mod('blog_over_ticker_pause_hover', true);

// Build query args
$args = array(
    'post_type' => 'post',
    'posts_per_page' => $posts_count,
    'ignore_sticky_posts' => true,
    'post_status' => 'publish',
);

if ($source === 'category' && !empty($category)) {
    if (is_numeric($category)) {
        $args['cat'] = intval($category);
    } else {
        $args['category_name'] = sanitize_title($category);
    }
}

$ticker_query = new WP_Query($args);
if (!$ticker_query->have_posts()) {
    return;
}

?>

<div id="ticker" class="blog-over-ticker-slider ticker-layout-<?php echo esc_attr($ticker_layout); ?>">
    <div class="<?php echo esc_attr($container_class); ?>">

        <?php if ($ticker_layout === 'minimal'): ?>
            <!-- MINIMAL LAYOUT -->
            <div class="ticker-slider-items minimal-wrapper"
                data-speed="<?php echo esc_attr($speed); ?>" data-direction="<?php echo esc_attr($direction); ?>"
                data-pauseonhover="<?php echo esc_attr($pause_hover ? 'true' : 'false'); ?>">
                
                <?php if ($ticker_title): ?>
                    <div class="ticker-title minimal-title" style="white-space:nowrap;margin-right:15px;align-self:center;display:flex;align-items:center;gap:6px;">
                        <span class="live-dot"></span>
                        <strong><?php echo esc_html($ticker_title); ?>:</strong>
                    </div>
                <?php endif; ?>

                <div class="ticker-slider-box" style="flex:1;overflow:hidden;">
                    <div class="ticker-slider-wrap">
                        <?php while ($ticker_query->have_posts()): $ticker_query->the_post(); ?>
                            <div class="ticker-slide-item minimal-item" style="display:inline-flex;align-items:center;float:left;margin-right:35px;gap:8px;">
                                <?php if ($show_image && get_the_post_thumbnail_url()): ?>
                                    <div class="minimal-thumb" style="width:30px;height:30px;border-radius:4px;overflow:hidden;flex-shrink:0;">
                                        <?php echo get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('style'=>'width:100%;height:100%;object-fit:cover;')); ?>
                                    </div>
                                <?php endif; ?>
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                <?php if ($show_date): ?>
                                    <span class="ticker-date-inline" style="font-size:0.85em; opacity:0.6;">
                                        (<?php echo get_the_date(); ?>)
                                    </span>
                                <?php endif; ?>
                            </div>
                        <?php endwhile; wp_reset_postdata(); ?>
                    </div>
                </div>

                <?php if ($show_pause): ?>
                    <div class="ticker-slider-controls" style="flex-shrink:0;">
                        <button class="ticker-slider-pause" type="button"
                            style="display:inline-flex;align-items:center;justify-content:center;font-size:16px;border:none;outline:none;color:#fff;background-color:var(--blog-over-secondary, #1e293b);padding:0;width:55px;height:55px;cursor:pointer;"
                            aria-label="<?php esc_attr_e('Pause/Play Ticker', 'blog-over'); ?>">
                            <i class="fas fa-pause"></i>
                        </button>
                    </div>
                <?php endif; ?>
            </div>

        <?php elseif ($ticker_layout === 'pill'): ?>
            <!-- PILL LAYOUT -->
            <div class="ticker-slider-items pill-wrapper" style="display:flex;align-items:center;"
                data-speed="<?php echo esc_attr($speed); ?>" data-direction="<?php echo esc_attr($direction); ?>"
                data-pauseonhover="<?php echo esc_attr($pause_hover ? 'true' : 'false'); ?>">
                
                <?php if ($ticker_title): ?>
                    <div class="ticker-title pill-badge" style="display:flex;align-items:center;gap:6px;">
                        <span class="icon"><i class="fas fa-bolt"></i></span>
                        <span class="title"><?php echo esc_html($ticker_title); ?></span>
                    </div>
                <?php endif; ?>

                <div class="ticker-slider-box pill-box" style="flex:1;overflow:hidden;margin-left:10px;">
                    <div class="ticker-slider-wrap">
                        <?php while ($ticker_query->have_posts()): $ticker_query->the_post(); ?>
                            <div class="ticker-slide-item pill-item" style="display:inline-flex;align-items:center;float:left;margin-right:25px;">
                                <?php if ($show_image && get_the_post_thumbnail_url()): ?>
                                    <div class="pill-thumb" style="width:45px;height:35px;border-radius:50px 0 0 50px;margin-right:10px;overflow:hidden;flex-shrink:0;">
                                        <?php echo get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('style'=>'width:100%;height:100%;object-fit:cover;')); ?>
                                    </div>
                                <?php else: ?>
                                    <div style="padding-left:15px;"></div>
                                <?php endif; ?>
                                <div class="pill-text">
                                    <a href="<?php the_permalink(); ?>"><strong><?php the_title(); ?></strong></a>
                                    <?php if ($show_date): ?>
                                        <span class="pill-date" style="font-size:11px;opacity:0.7;display:block;"><?php echo get_the_date(); ?></span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endwhile; wp_reset_postdata(); ?>
                    </div>
                </div>

                <?php if ($show_pause): ?>
                    <div class="ticker-slider-controls" style="flex-shrink:0;margin-left:5px;">
                        <button class="ticker-slider-pause" type="button"
                            style="display:inline-flex;align-items:center;justify-content:center;font-size:16px;border:none;outline:none;color:#fff;background-color:var(--blog-over-secondary, #1e293b);padding:0;width:55px;height:55px;cursor:pointer;border-radius:50px;"
                            aria-label="<?php esc_attr_e('Pause/Play Ticker', 'blog-over'); ?>">
                            <i class="fas fa-pause"></i>
                        </button>
                    </div>
                <?php endif; ?>
            </div>

        <?php elseif ($ticker_layout === 'gradient'): ?>
            <!-- GRADIENT ALERT LAYOUT -->
            <div class="ticker-slider-items gradient-wrapper" style="display:flex;align-items:center;"
                data-speed="<?php echo esc_attr($speed); ?>" data-direction="<?php echo esc_attr($direction); ?>"
                data-pauseonhover="<?php echo esc_attr($pause_hover ? 'true' : 'false'); ?>">
                
                <?php if ($ticker_title): ?>
                    <div class="ticker-title gradient-title">
                        <span class="icon"><i class="fas fa-exclamation-triangle"></i></span>
                        <span class="title"><?php echo esc_html($ticker_title); ?></span>
                    </div>
                <?php endif; ?>

                <div class="ticker-slider-box gradient-box" style="flex:1;overflow:hidden;">
                    <div class="ticker-slider-wrap">
                        <?php while ($ticker_query->have_posts()): $ticker_query->the_post(); ?>
                            <div class="ticker-slide-item gradient-item" style="display:inline-flex;align-items:center;float:left;margin-right:45px;gap:8px;">
                                <?php if ($show_image && get_the_post_thumbnail_url()): ?>
                                    <div class="gradient-thumb" style="width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid rgba(255,255,255,0.2);">
                                        <?php echo get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('style'=>'width:100%;height:100%;object-fit:cover;')); ?>
                                    </div>
                                <?php endif; ?>
                                <a href="<?php the_permalink(); ?>" class="gradient-link">
                                    <i class="fas fa-angle-right" style="margin-right:6px;font-size:12px;"></i>
                                    <?php the_title(); ?>
                                </a>
                                <?php if ($show_date): ?>
                                    <span class="ticker-date-inline" style="font-size:0.85em; opacity:0.8;">
                                        <?php echo get_the_date(); ?>
                                    </span>
                                <?php endif; ?>
                            </div>
                        <?php endwhile; wp_reset_postdata(); ?>
                    </div>
                </div>

                <?php if ($show_pause): ?>
                    <div class="ticker-slider-controls" style="flex-shrink:0;">
                        <button class="ticker-slider-pause" type="button"
                            style="display:inline-flex;align-items:center;justify-content:center;font-size:16px;border:none;outline:none;color:#fff;background-color:var(--blog-over-secondary, #1e293b);padding:0;width:55px;height:55px;cursor:pointer;"
                            aria-label="<?php esc_attr_e('Pause/Play Ticker', 'blog-over'); ?>">
                            <i class="fas fa-pause"></i>
                        </button>
                    </div>
                <?php endif; ?>
            </div>

        <?php elseif ($ticker_layout === 'spotlight'): ?>
            <!-- SPOTLIGHT LAYOUT (Pro) -->
            <div class="ticker-slider-items spotlight-wrapper" style="display:flex;align-items:center;"
                data-speed="<?php echo esc_attr($speed); ?>" data-direction="<?php echo esc_attr($direction); ?>"
                data-pauseonhover="<?php echo esc_attr($pause_hover ? 'true' : 'false'); ?>">
                
                <?php if ($ticker_title): ?>
                    <div class="ticker-title spotlight-title">
                        <span class="icon"><i class="fas fa-star"></i></span>
                        <span class="title"><?php echo esc_html($ticker_title); ?></span>
                    </div>
                <?php endif; ?>

                <div class="ticker-slider-box spotlight-box" style="flex:1;overflow:hidden;">
                    <div class="ticker-slider-wrap">
                        <?php while ($ticker_query->have_posts()): $ticker_query->the_post(); ?>
                            <div class="ticker-slide-item spotlight-item" style="display:inline-flex;align-items:center;float:left;margin-right:30px;gap:14px;">
                                <?php if ($show_image && get_the_post_thumbnail_url(get_the_ID(), 'thumbnail')): ?>
                                    <a href="<?php the_permalink(); ?>" class="ticker-spotlight-thumb">
                                        <?php echo get_the_post_thumbnail(get_the_ID(), 'thumbnail'); ?>
                                    </a>
                                <?php endif; ?>
                                <div class="ticker-spotlight-text">
                                    <h6 class="ticker-spotlight-title">
                                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                    </h6>
                                    <?php if ($show_date): ?>
                                        <span class="ticker-spotlight-date">
                                            <i class="far fa-calendar-alt"></i>
                                            <?php echo esc_html(get_the_date()); ?>
                                        </span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endwhile; wp_reset_postdata(); ?>
                    </div>
                </div>

                <?php if ($show_pause): ?>
                    <div class="ticker-slider-controls" style="flex-shrink:0;">
                        <button class="ticker-slider-pause" type="button"
                            style="display:inline-flex;align-items:center;justify-content:center;font-size:16px;border:none;outline:none;color:#1e293b;background-color:#f1f5f9;padding:0;width:55px;height:55px;cursor:pointer;border-radius:12px;transition:all 0.3s ease;margin-left:15px;"
                            aria-label="<?php esc_attr_e('Pause/Play Ticker', 'blog-over'); ?>">
                            <i class="fas fa-pause"></i>
                        </button>
                    </div>
                <?php endif; ?>
            </div>

        <?php else: ?>
            <!-- CLASSIC LAYOUT (Default Theme Fallback) -->
            <div class="ticker-slider-items" style="display:flex;align-items:center;margin:18px 0;"
                data-speed="<?php echo esc_attr($speed); ?>" data-direction="<?php echo esc_attr($direction); ?>"
                data-pauseonhover="<?php echo esc_attr($pause_hover ? 'true' : 'false'); ?>">

                <?php if ($ticker_title): ?>
                    <div class="ticker-title"
                        style="position:relative;flex:0 0 auto;min-height:55px;font-size:16px;line-height:35px;font-weight:600;padding:10px 16px;margin-right:0;text-align:center;background-color:var(--blog-over-primary, #3b82f6);color:#fff;display:flex;align-items:center;gap:6px;">
                        <span class="icon"
                            style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background-color:#fff;color:var(--blog-over-primary, #3b82f6);">
                            <i class="fas fa-bolt"></i>
                        </span>
                        <span class="title"><?php echo esc_html($ticker_title); ?></span>
                    </div>
                <?php endif; ?>

                <div class="ticker-slider-box"
                    style="overflow:hidden;flex:1 1 85%;background-color:rgba(59,130,246,0.09);padding:5px 0;height:55px;display:flex;align-items:center;">
                    <div class="ticker-slider-wrap" style="display:flex;align-items:center;white-space:nowrap;">
                        <?php while ($ticker_query->have_posts()): $ticker_query->the_post(); ?>
                            <div class="ticker-slide-item"
                                style="position:relative;float:left;clear:none;display:inline-flex;align-items:center;margin-right:26px;white-space:nowrap;flex-shrink:0;">
                                <?php if ($show_image && get_the_post_thumbnail_url(get_the_ID(), 'thumbnail')): ?>
                                    <div class="ticker-slider-backgrounds" style="width:46px;height:46px;margin-right:16px;flex-shrink:0;">
                                        <a href="<?php the_permalink(); ?>" style="display:block;width:100%;height:100%;">
                                            <?php echo get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('style' => 'width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 0 15px rgba(0,0,0,0.09);')); ?>
                                        </a>
                                    </div>
                                <?php endif; ?>
                                <div class="slide-inner" style="display:flex;flex-direction:column;white-space:nowrap;">
                                    <h6 style="font-size:16px;margin:2px 0;line-height:1.3;font-weight:600;white-space:nowrap;">
                                        <a href="<?php the_permalink(); ?>" style="color:inherit;text-decoration:none;"><?php the_title(); ?></a>
                                    </h6>
                                    <?php if ($show_date): ?>
                                        <div class="entry-meta" style="font-size:12px;color:#8a8a8c;margin-top:0;white-space:nowrap;">
                                            <span class="posted-on"><?php echo get_the_date(); ?></span>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endwhile; wp_reset_postdata(); ?>
                    </div>
                </div>

                <?php if ($show_pause): ?>
                    <div class="ticker-slider-controls" style="flex-shrink:0;">
                        <button class="ticker-slider-pause" type="button"
                            style="display:inline-flex;align-items:center;justify-content:center;font-size:16px;border:none;outline:none;color:#fff;background-color:var(--blog-over-secondary, #1e293b);padding:0;width:55px;height:55px;cursor:pointer;"
                            aria-label="<?php esc_attr_e('Pause/Play Ticker', 'blog-over'); ?>">
                            <i class="fas fa-pause"></i>
                        </button>
                    </div>
                <?php endif; ?>
            </div>
        <?php endif; ?>

    </div>
</div>