script.js

const searchInput = document.getElementById('searchInput');
const searchBtn = document.getElementById('searchBtn');
const suggestionsList = document.getElementById('suggestions');
const resultsGrid = document.getElementById('resultsGrid');
const modal = document.getElementById('detailModal');
const modalBody = document.getElementById('modalBody');
const closeModal = document.querySelector('.close-modal');
const sourceInfoBtn = document.getElementById('sourceInfoBtn');
const sourceModal = document.getElementById('sourceModal');
const closeSourceModal = document.getElementById('closeSourceModal');

let debounceTimer;
let currentFocus = -1;

// Debounce function to limit API calls
const debounce = (func, delay) => {
    return (...args) => {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => func.apply(this, args), delay);
    };
};

// Fetch ingredients from API
const fetchIngredients = async (query) => {
    BaseUrl = "https://kronextech.in/global/ingredients/search?q=";
    if (!query) return [];
    try {
        const response = await fetch(`${BaseUrl}${encodeURIComponent(query)}`);
        if (!response.ok) throw new Error('Network response was not ok');
        return await response.json();
    } catch (error) {
        console.error('Error fetching ingredients:', error);
        return [];
    }
};

// Handle input for suggestions
const handleInput = async (e) => {
    const query = e.target.value.trim();
    currentFocus = -1; // Reset focus on new input

    if (query.length < 2) {
        suggestionsList.classList.remove('show');
        suggestionsList.innerHTML = '';
        return;
    }

    const results = await fetchIngredients(query);
    renderSuggestions(results);
};

// Render suggestions dropdown
const renderSuggestions = (results) => {
    suggestionsList.innerHTML = '';

    if (results.length === 0) {
        suggestionsList.classList.remove('show');
        return;
    }

    results.slice(0, 8).forEach(item => {
        const div = document.createElement('div');
        div.className = 'suggestion-item';
        div.textContent = item.name;
        div.addEventListener('click', () => {
            searchInput.value = item.name;
            suggestionsList.classList.remove('show');
            performSearch(item.name);
        });
        suggestionsList.appendChild(div);
    });

    suggestionsList.classList.add('show');
};

// Perform full search and render grid
const performSearch = async (query) => {
    if (!query) return;

    suggestionsList.classList.remove('show');
    resultsGrid.innerHTML = '<div class="loading">Loading...</div>'; // Simple loading state

    const results = await fetchIngredients(query);
    renderGrid(results);
};

// Render Grid Results
const renderGrid = (results) => {
    resultsGrid.innerHTML = '';

    if (results.length === 0) {
        resultsGrid.innerHTML = `
            <div class="empty-state">
                <p>No ingredients found matching "${searchInput.value}".</p>
            </div>
        `;
        return;
    }

    results.forEach(item => {
        const card = document.createElement('div');
        card.className = 'ingredient-card';

        const ratingClass = getRatingClass(item.rating);

        card.innerHTML = `
            <div class="card-header">
                <span class="rating-badge ${ratingClass}">${item.rating || 'Unknown'}</span>
                <h3>${item.name}</h3>
            </div>
            <p>${item.description || 'No description available.'}</p>
            <button class="read-more-btn">Read More</button>
        `;

        card.querySelector('.read-more-btn').addEventListener('click', () => openModal(item));
        resultsGrid.appendChild(card);
    });
};

const getRatingClass = (rating) => {
    if (!rating) return '';
    const r = rating.toLowerCase();
    if (r.includes('best')) return 'rating-best';
    if (r.includes('good')) return 'rating-good';
    if (r.includes('average')) return 'rating-average';
    if (r.includes('poor')) return 'rating-poor';
    return '';
};

// Modal Logic
const openModal = (item) => {
    // Populate modal content
    // We try to find the detailed info from the 'details' array if available
    const details = item.details && item.details[0] ? item.details[0] : {};
    const glance = details.Glance && details.Glance[0] ? details.Glance[0].details : [];
    const descDetails = details.desp_details || [];

    let glanceHtml = '';
    if (glance.length > 0) {
        glanceHtml = `
            <div class="modal-section">
                <h4>At a Glance</h4>
                <ul>
                    ${glance.map(g => `<li>${g}</li>`).join('')}
                </ul>
            </div>
        `;
    }

    let descHtml = '';
    if (descDetails.length > 0) {
        descHtml = `
            <div class="modal-section">
                <h4>Description</h4>
                ${descDetails.map(d => `<p>${d}</p>`).join('')}
            </div>
        `;
    } else if (item.description) {
        descHtml = `
            <div class="modal-section">
                <h4>Description</h4>
                <p>${item.description}</p>
            </div>
        `;
    }

    const ratingClass = getRatingClass(item.rating);

    modalBody.innerHTML = `
        <div class="modal-header">
            <span class="modal-rating ${ratingClass}">${item.rating || 'Unknown'}</span>
            <h2 class="modal-title">${item.name}</h2>
            <p style="color: var(--text-muted);">${details.Categories || ''}</p>
        </div>
        ${glanceHtml}
        ${descHtml}
        ${details.Benefits ? `<div class="modal-section"><h4>Benefits</h4><p>${details.Benefits}</p></div>` : ''}
    `;

    modal.classList.add('visible');
    document.body.style.overflow = 'hidden'; // Prevent background scrolling
};

const closeModalFunc = () => {
    modal.classList.remove('visible');
    document.body.style.overflow = '';
};

const openSourceModalFunc = () => {
    sourceModal.classList.add('visible');
    document.body.style.overflow = 'hidden';
};

const closeSourceModalFunc = () => {
    sourceModal.classList.remove('visible');
    document.body.style.overflow = '';
};

// Event Listeners
searchInput.addEventListener('input', debounce(handleInput, 400));

searchInput.addEventListener('keydown', (e) => {
    const items = suggestionsList.getElementsByClassName('suggestion-item');

    if (e.key === 'ArrowDown') {
        e.preventDefault(); // Prevent cursor movement
        currentFocus++;
        addActive(items);
    } else if (e.key === 'ArrowUp') {
        e.preventDefault(); // Prevent cursor movement
        currentFocus--;
        addActive(items);
    } else if (e.key === 'Enter') {
        e.preventDefault();
        if (currentFocus > -1) {
            if (items) items[currentFocus].click();
        } else {
            performSearch(searchInput.value);
        }
    }
});

const addActive = (items) => {
    if (!items) return false;
    removeActive(items);
    if (currentFocus >= items.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = items.length - 1;
    items[currentFocus].classList.add('suggestion-active');

    // Scroll to view
    items[currentFocus].scrollIntoView({ block: 'nearest' });
};

const removeActive = (items) => {
    for (let i = 0; i < items.length; i++) {
        items[i].classList.remove('suggestion-active');
    }
};

searchBtn.addEventListener('click', () => {
    performSearch(searchInput.value);
});

closeModal.addEventListener('click', closeModalFunc);

modal.addEventListener('click', (e) => {
    if (e.target === modal) {
        closeModalFunc();
    }
});

sourceInfoBtn.addEventListener('click', openSourceModalFunc);
closeSourceModal.addEventListener('click', closeSourceModalFunc);
sourceModal.addEventListener('click', (e) => {
    if (e.target === sourceModal) {
        closeSourceModalFunc();
    }
});

// Close suggestions when clicking outside
document.addEventListener('click', (e) => {
    if (!e.target.closest('.search-container')) {
        suggestionsList.classList.remove('show');
    }
});