<?php
/**
 * Render Articles [Author Pro] Block
 */

$block_id = isset($attributes['blockId']) ? $attributes['blockId'] : '';
if (empty($block_id)) {
    $block_id = 'author-pro-articles-' . uniqid();
}

$anchor = isset($attributes['anchor']) ? $attributes['anchor'] : '';
$element_id = !empty($anchor) ? $anchor : $block_id;

$section_badge = isset($attributes['sectionBadge']) ? $attributes['sectionBadge'] : 'The Blog';
$section_title = isset($attributes['sectionTitle']) ? $attributes['sectionTitle'] : 'Latest Articles';
$view_all_text = isset($attributes['viewAllText']) ? $attributes['viewAllText'] : 'View All Posts';
$view_all_url = isset($attributes['viewAllUrl']) ? $attributes['viewAllUrl'] : '#';

$posts_to_show = isset($attributes['postsToShow']) ? $attributes['postsToShow'] : 3;
$selected_category = isset($attributes['selectedCategory']) ? $attributes['selectedCategory'] : '';
$order = isset($attributes['order']) ? $attributes['order'] : 'DESC';

$bg_color = isset($attributes['bgColor']) ? $attributes['bgColor'] : '#f3f4f6';
$accent_color = isset($attributes['accentColor']) ? $attributes['accentColor'] : '#ea580c';
$title_color = isset($attributes['titleColor']) ? $attributes['titleColor'] : '#1e293b';
$text_color = isset($attributes['textColor']) ? $attributes['textColor'] : '#4b5563';

$padding_top = isset($attributes['paddingTop']) ? $attributes['paddingTop'] : 96;
$padding_bottom = isset($attributes['paddingBottom']) ? $attributes['paddingBottom'] : 96;

// Dynamic CSS
$custom_css = "
    #{$element_id} {
        background-color: {$bg_color} !important;
    }
    #{$element_id} .awt-accent-text {
        color: {$accent_color} !important;
    }
    #{$element_id} .awt-title a {
        color: {$title_color};
    }
    #{$element_id} .awt-text {
        color: {$text_color};
    }
    #{$element_id} .awt-view-all:hover {
        color: {$accent_color};
        border-bottom-color: {$accent_color};
    }
    #{$element_id} .group:hover .awt-card-title a {
        color: {$accent_color};
    }
";

$style = "padding-top: {$padding_top}px; padding-bottom: {$padding_bottom}px;";

$wrapper_attributes = get_block_wrapper_attributes([
    'class' => 'awt-author-pro-articles',
    'style' => $style,
    'id'    => $element_id
]);

// Query Arguments
$args = array(
    'post_type'      => 'post',
    'posts_per_page' => $posts_to_show,
    'post_status'    => 'publish',
    'order'          => $order,
    'orderby'        => 'date',
);

if (!empty($selected_category)) {
    $args['cat'] = $selected_category;
}

$posts_query = new WP_Query($args);
?>

<?php if (!empty($custom_css)) : ?>
    <style><?php echo $custom_css; ?></style>
<?php endif; ?>

<section <?php echo $wrapper_attributes; ?>>
    <div class="awt-container">
        <div class="flex justify-between items-end mb-12">
            <div>
                <?php if ($section_badge): ?>
                    <span class="awt-accent-text font-bold text-xs uppercase tracking-widest"><?php echo esc_html($section_badge); ?></span>
                <?php endif; ?>
                <?php if ($section_title): ?>
                    <h2 class="text-3xl font-serif font-bold awt-title mt-2"><?php echo esc_html($section_title); ?></h2>
                <?php endif; ?>
            </div>
            <?php if ($view_all_text): ?>
                <a href="<?php echo esc_url($view_all_url); ?>"
                    class="text-sm font-bold awt-view-all border-b transition">
                    <?php echo esc_html($view_all_text); ?>
                </a>
            <?php endif; ?>
        </div>

        <?php if ($posts_query->have_posts()) : ?>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php while ($posts_query->have_posts()) : $posts_query->the_post(); 
                    $categories = get_the_category();
                    $cat_name = !empty($categories) ? $categories[0]->name : 'Blog';
                    $thumbnail_url = get_the_post_thumbnail_url(get_the_ID(), 'medium_large');
                    if (!$thumbnail_url) {
                        $thumbnail_url = 'https://via.placeholder.com/800x400?text=No+Image'; // Fallback
                    }
                ?>
                    <article class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition group">
                        <div class="overflow-hidden h-48">
                            <a href="<?php the_permalink(); ?>">
                                <img src="<?php echo esc_url($thumbnail_url); ?>"
                                    class="w-full h-full object-cover group-hover:scale-105 transition duration-500" alt="<?php echo esc_attr(get_the_title()); ?>">
                            </a>
                        </div>
                        <div class="p-6">
                            <span class="text-xs font-bold awt-accent-text uppercase"><?php echo esc_html($cat_name); ?></span>
                            <h3 class="text-lg font-bold awt-title awt-card-title mt-2 mb-3 leading-snug transition">
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </h3>
                            <p class="text-sm awt-text mb-4 line-clamp-2"><?php echo wp_trim_words(get_the_excerpt(), 20, '...'); ?></p>
                            <a href="<?php the_permalink(); ?>" class="text-xs font-bold uppercase underline">Read More</a>
                        </div>
                    </article>
                <?php endwhile; wp_reset_postdata(); ?>
            </div>
        <?php else : ?>
            <p class="awt-text italic"><?php _e('No articles found.', 'author-website-templates'); ?></p>
        <?php endif; ?>
    </div>
</section>
