const foodTypes = [
    "קובה סלק של שישי?",
    "אבטיח טרי?",
    "סיר קציצות של אמא?",
    "ירקות כמו חדשים?",
    "קוסקוס ומרק?",
    "פסטה טריה?"
];

let currentIndex = 0;
const textElement = document.getElementById('changing-text');

function rotateText() {
    if (!textElement) return;
    
    textElement.style.opacity = 0;
    
    setTimeout(() => {
        currentIndex = (currentIndex + 1) % foodTypes.length;
        textElement.innerText = foodTypes[currentIndex];
        textElement.style.opacity = 1;
    }, 500);
}

setInterval(rotateText, 3000);

async function fetchFeed() {
    const grid = document.getElementById('items-grid');
    const loader = document.getElementById('loading-msg');

    try {
        const response = await fetch('../api/get_feed.php');
        const items = await response.json();
        
        if (!items || items.length === 0) {
            loader.innerHTML = "<h3>אין כרגע אוכל זמין בסביבה.</h3><p>שתפו משהו ראשונים!</p>";
            return;
        }

        loader.style.display = 'none';
        grid.innerHTML = '';

        items.forEach(item => {
            const card = document.createElement('div');
            card.className = 'item-card';
            card.innerHTML = `
                <img src="../${item.image_url}" alt="${item.title}" style="width:100%; height:220px; object-fit:cover;">
                <div style="padding:20px;">
                    <h3 style="margin:0 0 10px 0; color:#0d4d44; font-size:1.4rem;">${item.title}</h3>
                    <p style="color:#666; font-size:0.95rem; margin-bottom:15px;">${item.description}</p>
                    <span style="color:#d63031; font-weight:bold; font-size:0.9rem;">📍 במרחק ${parseFloat(item.distance).toFixed(1)} ק"מ</span>
                </div>
                <button onclick="viewItem(${item.id})">אני רוצה את זה!</button>
            `;
            grid.appendChild(card);
        });
    } catch (e) {
        console.error("Fetch error:", e);
    }
}

function viewItem(id) {
    window.location.href = `item_details.php?id=${id}`;
}

document.addEventListener('DOMContentLoaded', fetchFeed);