<?php
require_once __DIR__ . '/../functions.php';
requireAuth();
$page_title = 'My Wishlist';
$db = db();
$user = getCurrentUser();

$stmt = $db->prepare("
    SELECT w.*, p.name, p.slug, p.price, p.compare_price,
           (SELECT image_path FROM product_images WHERE product_id = p.id AND is_primary = 1 LIMIT 1) as image
    FROM wishlists w
    JOIN products p ON w.product_id = p.id
    WHERE w.user_id = ?
    ORDER BY w.created_at DESC
");
$stmt->execute([$user['id']]);
$items = $stmt->fetchAll();

require_once __DIR__ . '/../includes/header.php';
?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">My Wishlist</h1>
    <?php if (count($items) === 0): ?>
    <div class="text-center py-16"><i class="fas fa-heart text-gray-300 text-5xl mb-4"></i><h2 class="text-xl font-semibold text-gray-800 mb-2">Your wishlist is empty</h2><a href="../catalog.php" class="text-primary-600 hover:underline">Browse Products</a></div>
    <?php else: ?>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <?php foreach ($items as $item): ?>
        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden relative group" id="wishlist-item-<?= $item['id'] ?>">
            <a href="../product.php?slug=<?= h($item['slug']) ?>">
                <div class="aspect-square bg-gray-100 flex items-center justify-center overflow-hidden">
                    <?php if ($item['image']): ?><img src="<?= h($item['image']) ?>" alt="" class="w-full h-full object-cover group-hover:scale-105 transition"><?php else: ?><i class="fas fa-box text-gray-300 text-4xl"></i><?php endif; ?>
                </div>
            </a>
            <button onclick="removeWishlist(<?= $item['id'] ?>)" class="absolute top-2 right-2 w-8 h-8 bg-white rounded-full shadow flex items-center justify-center text-red-500 hover:bg-red-50"><i class="fas fa-times"></i></button>
            <div class="p-3">
                <a href="../product.php?slug=<?= h($item['slug']) ?>" class="font-medium text-gray-800 text-sm hover:text-primary-600"><?= h($item['name']) ?></a>
                <div class="flex items-center gap-2 mt-1"><span class="font-bold text-primary-600"><?= formatPrice($item['price']) ?></span><?php if ($item['compare_price'] > $item['price']): ?><span class="text-xs text-gray-400 line-through"><?= formatPrice($item['compare_price']) ?></span><?php endif; ?></div>
                <button onclick="addToCart(<?= $item['product_id'] ?>)" class="mt-2 w-full bg-primary-600 text-white text-sm py-1.5 rounded-lg hover:bg-primary-700 transition"><i class="fas fa-shopping-cart mr-1"></i> Add to Cart</button>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
</div>
<script>
async function removeWishlist(id) {
    const r = await fetch('../api/wishlist.php', { method: 'POST', headers: {'Content-Type':'application/x-www-form-urlencoded'}, body: 'wishlist_id=' + id });
    const d = await r.json();
    if (d.success) document.getElementById('wishlist-item-' + id).remove();
}
async function addToCart(productId) {
    const r = await fetch('../api/cart.php', { method: 'POST', headers: {'Content-Type':'application/x-www-form-urlencoded'}, body: 'action=add&product_id=' + productId });
    const d = await r.json();
    if (d.success) document.getElementById('cart-count').textContent = d.cart_count;
}
</script>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
