<?php
require_once 'config.php';

// Fetch categories for filter
$categories = $pdo->query("SELECT * FROM categories")->fetchAll();

// Handle search and filters
$search = $_GET['search'] ?? '';
$category_id = $_GET['category'] ?? '';

$query = "SELECT p.*, c.name as category_name FROM products p LEFT JOIN categories c ON p.category_id = c.id WHERE 1=1";
$params = [];

if (!empty($search)) {
    $query .= " AND (p.name LIKE ? OR p.description LIKE ?)";
    $params[] = "%$search%";
    $params[] = "%$search%";
}

if (!empty($category_id)) {
    $query .= " AND p.category_id = ?";
    $params[] = $category_id;
}

$query .= " ORDER BY p.id DESC";
$stmt = $pdo->prepare($query);
$stmt->execute($params);
$products = $stmt->fetchAll();
?>
<?php include 'header.php'; ?>

<!-- Hero Banner -->
<div class="container">
    <div class="hero-banner">
        <div class="hero-text">
            <h1>Korean Chic, <br>Curated for <span>You</span></h1>
            <p>Welcome to Aora Closet. Explore premium Korean style fashion clothing with points collection system, and free shipping on all orders!</p>
            <a href="#shop-section" class="btn btn-primary">Shop Now</a>
        </div>
        <div class="hero-image">
            <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=600&auto=format&fit=crop&q=80" alt="Korean Fashion Trend">
        </div>
    </div>

    <!-- Category Selector -->
    <div class="section-title">
        <span>Browse Categories</span>
    </div>
    
    <div class="categories-grid">
        <a href="index.php#shop-section" class="category-card <?php echo empty($category_id) ? 'active' : ''; ?>" style="<?php echo empty($category_id) ? 'border-color: var(--primary); background: var(--primary-light);' : ''; ?>">
            <span class="icon">✨</span>
            <h3>All Items</h3>
        </a>
        <?php foreach ($categories as $cat): ?>
            <?php 
            $isActive = ($category_id == $cat['id']);
            $icon = '👗';
            if ($cat['name'] === 'Tops') $icon = '👚';
            if ($cat['name'] === 'Skirts & Pants') $icon = '👖';
            if ($cat['name'] === 'Accessories') $icon = '🎀';
            ?>
            <a href="index.php?category=<?php echo $cat['id']; ?>#shop-section" class="category-card" style="<?php echo $isActive ? 'border-color: var(--primary); background: var(--primary-light);' : ''; ?>">
                <span class="icon"><?php echo $icon; ?></span>
                <h3><?php echo htmlspecialchars($cat['name']); ?></h3>
            </a>
        <?php endforeach; ?>
    </div>

    <!-- Products Section -->
    <div id="shop-section" class="section-title">
        <span>Recommended for You</span>
        <?php if (!empty($search) || !empty($category_id)): ?>
            <a href="index.php" style="font-size: 14px; color: var(--primary-hover); font-weight: 500;">Clear Filters &times;</a>
        <?php endif; ?>
    </div>

    <?php if (empty($products)): ?>
        <div style="text-align: center; padding: 50px 0; background: var(--light); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-border);">
            <span style="font-size: 48px;">🔍</span>
            <h3 style="margin-top: 15px; font-weight: 600;">No Outfits Found</h3>
            <p style="color: var(--text-muted);">Try adjusting your search keywords or filter category.</p>
        </div>
    <?php else: ?>
        <div class="products-grid">
            <?php foreach ($products as $product): ?>
                <div class="product-card">
                    <a href="product_detail.php?id=<?php echo $product['id']; ?>">
                        <div class="product-image">
                            <img src="<?php echo htmlspecialchars($product['image_url']); ?>" alt="<?php echo htmlspecialchars($product['name']); ?>">
                        </div>
                    </a>
                    <div class="product-details">
                        <a href="product_detail.php?id=<?php echo $product['id']; ?>">
                            <h3 class="product-name"><?php echo htmlspecialchars($product['name']); ?></h3>
                        </a>
                        <div class="product-bottom">
                            <span class="product-price">฿<?php echo number_format($product['price'], 2); ?></span>
                            <?php if ($product['stock'] > 0): ?>
                                <a href="product_detail.php?id=<?php echo $product['id']; ?>" class="btn btn-primary" style="padding: 6px 14px; font-size: 13px;">View Details</a>
                            <?php else: ?>
                                <span class="badge badge-pending">Out of Stock</span>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<?php include 'footer.php'; ?>
