<?php get_header(); ?>
<section class="container-main mt-8 md:mt-10 lg:mt-12">
    <div class="bg-white rounded-2xl shadow-sm p-5 md:p-6 border border-gray-100">
        <?php if(have_posts()): ?>
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8 pb-6 border-b border-gray-100">
                <div class="w-full md:w-1/2">
                    <h1 class="text-xl md:text-2xl font-bold text-gray-800">
                        <?php 
                        echo '<span class="text-[#6BAA74]">نتیجه جستجو برای : </span>' . get_search_query();
                        ?>
                    </h1>
                </div>
                <div class="w-full md:w-1/2"></div>
            </div>
            
            <div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6">
                <?php while(have_posts()): the_post();
                    global $product;
                    $product = wc_get_product(get_the_ID());
                    if (!$product) continue;
                    
                    $img = $product->get_image_id() ? wp_get_attachment_image_url($product->get_image_id(), 'medium') : wc_placeholder_img_src();
                    
                    if ($product->is_type('variable')) {
                        $regular_price = (float) $product->get_variation_regular_price('min');
                        $sale_price = (float) $product->get_variation_sale_price('min');
                        $price = $sale_price > 0 ? $sale_price : (float) $product->get_variation_price('min');
                        $is_sale = $product->is_on_sale() && $sale_price > 0 && $sale_price < $regular_price;
                    } else {
                        $regular_price = (float) $product->get_regular_price();
                        $sale_price = (float) $product->get_sale_price();
                        $price = wc_get_price_to_display($product);
                        $is_sale = $product->is_on_sale() && $sale_price > 0 && $sale_price < $regular_price;
                    }
                    
                    $is_in_stock = $product->is_in_stock();
                    $rating = $product->get_average_rating();
                    
                    $discount_percent = 0;
                    if ($is_sale && $regular_price > 0 && $price > 0) {
                        $discount_percent = round((($regular_price - $price) / $regular_price) * 100);
                    }
                ?>
                
                <article class="snap-start shrink-0">
                    <div class="group h-full rounded-[34px] md:rounded-[36px] bg-white px-5 pt-6 pb-5 ring-1 ring-slate-100 hover:ring-2 hover:ring-blue-200 transition-all relative">
                        <?php if ($is_sale && $discount_percent > 0): ?>
                        <div class="absolute top-3 right-3 z-10">
                            <span class="text-xs sm:text-sm text-white bg-red-500 rounded-full px-3 py-1.5 inline-flex items-center gap-1 shadow-lg">
                                <i class="ri-percent-line text-xs"></i>
                                <span class="font-bold"><?php echo esc_html($discount_percent); ?></span>
                            </span>
                        </div>
                        <?php endif; ?>
                        
                        <div class="h-[165px] sm:h-[175px] md:h-[190px] flex items-center justify-center relative">
                            <img class="max-h-[155px] sm:max-h-[165px] md:max-h-[180px] object-contain select-none" 
                                 src="<?php echo esc_url($img); ?>" 
                                 alt="<?php echo esc_attr($product->get_name()); ?>" 
                                 loading="lazy">
                        </div>

                        <a href="<?php echo esc_url($product->get_permalink()); ?>" class="mt-3 block no-underline">
                            <h3 class="text-[15px] sm:text-sm md:text-base font-extrabold text-slate-900 line-clamp-2 min-h-[46px] hover:text-blue-600 transition">
                                <?php echo esc_html($product->get_name()); ?>
                            </h3>
                        </a>

                        <div class="mt-2 flex items-center justify-between">
                            <?php if ($rating > 0): ?>
                            <div class="inline-flex items-center gap-1 text-amber-500 text-sm font-extrabold">
                                <i class="ri-star-fill"></i>
                                <span><?php echo esc_html(number_format($rating, 1)); ?></span>
                            </div>
                            <?php else: ?>
                            <div></div>
                            <?php endif; ?>
                            
                            <?php if ($is_in_stock): ?>
                            <span class="text-[12px] sm:text-xs text-green-500 bg-green-50 px-2 py-1 rounded-full">موجود</span>
                            <?php else: ?>
                            <span class="text-[12px] sm:text-xs text-red-500 bg-red-50 px-2 py-1 rounded-full">ناموجود</span>
                            <?php endif; ?>
                        </div>

                        <div class="mt-4 flex items-end justify-between">
                            <div class="flex flex-col gap-1">
                                <?php if ($is_sale && $regular_price > 0 && $discount_percent > 0): ?>
                                <div class="text-xs sm:text-[12px] text-slate-400 line-through">
                                    <?php echo wp_kses_post(wc_price($regular_price)); ?>
                                </div>
                                <?php endif; ?>
                                <div class="flex items-center gap-2">
                                    <span class="text-lg sm:text-xl font-extrabold text-emerald-600">
                                        <?php echo wp_kses_post(wc_price($price)); ?>
                                    </span>
                                </div>
                            </div>

                            <?php if ($product->is_purchasable() && $is_in_stock && $product->is_type('simple')): ?>
                            <a class="w-12 h-12 rounded-2xl bg-slate-50 ring-1 ring-slate-100 flex items-center justify-center hover:bg-blue-50 hover:ring-blue-200 hover:text-blue-600 transition no-underline"
                               href="<?php echo esc_url($product->add_to_cart_url()); ?>"
                               aria-label="افزودن به سبد خرید">
                                <i class="ri-shopping-bag-3-line text-xl"></i>
                            </a>
                            <?php else: ?>
                            <a class="w-12 h-12 rounded-2xl bg-slate-50 ring-1 ring-slate-100 flex items-center justify-center hover:bg-blue-50 hover:ring-blue-200 hover:text-blue-600 transition no-underline"
                               href="<?php echo esc_url($product->get_permalink()); ?>"
                               aria-label="مشاهده محصول">
                                <i class="ri-eye-line text-xl"></i>
                            </a>
                            <?php endif; ?>
                        </div>
                    </div>
                </article>
                <?php endwhile; ?>
            </div>
            
            <?php wp_reset_postdata(); ?>
            
            <div class="mt-10 flex justify-center">
                <?php
                $pagination = paginate_links(array(
                    'prev_text' => '<i class="ri-arrow-right-line text-gray-600"></i>',
                    'next_text' => '<i class="ri-arrow-left-line text-gray-600"></i>',
                    'type' => 'array'
                ));
                
                if($pagination):
                ?>
                <nav class="flex items-center gap-2">
                    <?php foreach($pagination as $link): ?>
                        <?php 
                        $link = str_replace('page-numbers', 'w-10 h-10 flex items-center justify-center border border-gray-300 rounded-lg hover:bg-gray-50 no-underline', $link);
                        $link = str_replace('current', 'bg-blue-600 text-white border-blue-600', $link);
                        echo $link;
                        ?>
                    <?php endforeach; ?>
                </nav>
                <?php endif; ?>
            </div>
            
        <?php else: ?>
            <div class="text-center py-12">
                <p class="text-gray-600 text-lg">متأسفانه محصولی یافت نشد.</p>
            </div>
        <?php endif; ?>
    </div>
</section>
<?php get_footer(); ?>
