// Main application script
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Toggle sidebar on mobile
    const sidebarToggle = document.getElementById('sidebarToggle');
    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', function() {
            document.querySelector('.sidebar').classList.toggle('-translate-x-full');
        });
    }

    // Dark mode toggle (placeholder - would need implementation)
    const darkModeToggle = document.getElementById('darkModeToggle');
    if (darkModeToggle) {
        darkModeToggle.addEventListener('click', function() {
            document.documentElement.classList.toggle('dark');
        });
    }

    // Simulate loading data
    function simulateLoading() {
        const loadingElements = document.querySelectorAll('.loading-placeholder');
        loadingElements.forEach(el => {
            el.innerHTML = '<div class="animate-pulse flex space-x-4"><div class="flex-1 space-y-4 py-1"><div class="h-4 bg-gray-200 rounded w-3/4"></div><div class="space-y-2"><div class="h-4 bg-gray-200 rounded"></div><div class="h-4 bg-gray-200 rounded w-5/6"></div></div></div></div>';
        });

        setTimeout(() => {
            loadingElements.forEach(el => {
                el.innerHTML = '<p>Data loaded successfully!</p>';
            });
        }, 1500);
    }

    // Initialize any buttons that might need loading simulation
    const loadDataButtons = document.querySelectorAll('.load-data');
    loadDataButtons.forEach(button => {
        button.addEventListener('click', simulateLoading);
    });

    // Company search functionality
    const companySearch = document.getElementById('companySearch');
    if (companySearch) {
        companySearch.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            // This would be replaced with actual search functionality
            console.log('Searching for:', searchTerm);
        });
    }
});

// API function to fetch MAD landscape data
async function fetchMADLandscapeData() {
    try {
        // In a real implementation, this would fetch from the MAD API
        // For demo purposes, we'll use a mock response
        const mockResponse = {
            categories: [
                {
                    name: "Generative AI",
                    companies: ["OpenAI", "Anthropic", "Stability AI", "Midjourney"]
                },
                {
                    name: "Computer Vision",
                    companies: ["Scale AI", "Hive", "Clarifai", "Labelbox"]
                }
            ]
        };
        
        return mockResponse;
    } catch (error) {
        console.error("Error fetching MAD landscape data:", error);
        return null;
    }
}

// Function to render company cards
function renderCompanyCards(companies, containerId) {
    const container = document.getElementById(containerId);
    if (!container) return;

    container.innerHTML = companies.map(company => `
        <div class="bg-white rounded-lg shadow p-4 hover:shadow-md transition-shadow">
            <div class="flex items-center space-x-4">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="http://static.photos/technology/200x200/${Math.floor(Math.random() * 100)}" alt="${company} logo">
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-900 truncate">${company}</p>
                    <p class="text-sm text-gray-500 truncate">${company} description</p>
                </div>
                <div>
                    <i data-feather="chevron-right" class="text-gray-400"></i>
                </div>
            </div>
        </div>
    `).join('');

    feather.replace();
}