document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('search-input');
    const searchBtn = document.getElementById('search-btn');
    const searchResults = document.getElementById('search-results');
    const exampleQueries = document.getElementById('example-queries');
    
    // Mock data for demonstration
    const mockResponses = {
        "what's the capital of france": {
            answer: "The capital of France is Paris. Paris is located in the northern part of France on the Seine River and has been an important city for over 2,000 years.",
            sources: [
                { name: "Wikipedia", url: "https://en.wikipedia.org/wiki/Paris" },
                { name: "Britannica", url: "https://www.britannica.com/place/Paris" }
            ],
            process: [
                "Searching for 'capital of France' across verified sources",
                "Analyzing geographical data from multiple references",
                "Cross-referencing historical records",
                "Verifying with official government sources"
            ]
        },
        "explain quantum computing": {
            answer: "Quantum computing is an area of computing focused on developing computer technology based on the principles of quantum theory, which explains the behavior of energy and material on the atomic and subatomic levels. Unlike classical computers that use bits (0s and 1s), quantum computers use quantum bits or qubits which can exist in multiple states simultaneously (superposition) and be entangled with each other, enabling them to solve certain complex problems much faster than classical computers.",
            sources: [
                { name: "IBM Research", url: "https://research.ibm.com/quantum-computing" },
                { name: "Nature Journal", url: "https://www.nature.com/articles/s41534-019-0187-2" }
            ],
            process: [
                "Compiling definitions from leading research institutions",
                "Analyzing recent scientific papers on quantum mechanics",
                "Comparing explanations from multiple experts",
                "Simplifying complex concepts for general understanding"
            ]
        }
    };

    searchBtn.addEventListener('click', performSearch);
    searchInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') performSearch();
    });

    // Add click handlers to example queries
    document.querySelectorAll('#example-queries > div').forEach(example => {
        example.addEventListener('click', () => {
            const query = example.querySelector('h3').textContent.replace(/"/g, '');
            searchInput.value = query;
            performSearch();
        });
    });

    function performSearch() {
        const query = searchInput.value.trim().toLowerCase();
        if (!query) return;

        exampleQueries.classList.add('hidden');
        searchResults.classList.remove('hidden');
        searchResults.innerHTML = '';

        // Show loading state
        const loadingHTML = `
            <div class="p-6 rounded-xl bg-gray-900 border border-gray-800">
                <div class="flex items-center mb-4">
                    <div class="h-4 w-4 rounded-full bg-white mr-2 animate-pulse"></div>
                    <div class="text-sm text-gray-400">Processing your query...</div>
                </div>
                <div class="space-y-2">
                    ${mockResponses[query]?.process.map(step => `
                        <div class="flex items-center">
                            <div class="h-2 w-2 rounded-full bg-gray-500 mr-2"></div>
                            <div class="search-process h-3 rounded-full" style="width: ${Math.random() * 50 + 30}%"></div>
                        </div>
                    `).join('')}
                </div>
            </div>
        `;
        searchResults.innerHTML = loadingHTML;

        // Simulate API delay
        setTimeout(() => {
            showResults(query);
        }, 2000);
    }

    function showResults(query) {
        const response = mockResponses[query] || {
            answer: "I couldn't find a specific answer to that question. Try rephrasing or asking something else.",
            sources: [],
            process: []
        };

        const resultHTML = `
            <div class="p-6 rounded-xl bg-gray-900 border border-gray-800">
                <div class="flex items-start mb-6">
                    <div class="bg-white text-black rounded-full p-2 mr-4">
                        <i data-feather="check-circle"></i>
                    </div>
                    <div class="flex-grow">
                        <h2 class="text-xl font-semibold mb-2">Answer</h2>
                        <div class="typing-effect text-gray-200">${response.answer}</div>
                    </div>
                </div>

                ${response.sources.length > 0 ? `
                <div class="mt-6">
                    <h3 class="text-lg font-medium mb-3">Sources</h3>
                    <div class="flex flex-wrap gap-2">
                        ${response.sources.map(source => `
                            <a href="${source.url}" target="_blank" class="source-badge px-3 py-1 bg-gray-800 rounded-full text-sm flex items-center">
                                <i data-feather="external-link" class="mr-1" width="14"></i>
                                ${source.name}
                            </a>
                        `).join('')}
                    </div>
                </div>
                ` : ''}

                ${response.process.length > 0 ? `
                <div class="mt-6 pt-6 border-t border-gray-800">
                    <h3 class="text-lg font-medium mb-3">Search Process</h3>
                    <div class="space-y-3">
                        ${response.process.map((step, i) => `
                            <div class="flex items-start">
                                <div class="text-gray-500 mr-3">${i + 1}.</div>
                                <div class="text-gray-300">${step}</div>
                            </div>
                        `).join('')}
                    </div>
                </div>
                ` : ''}
            </div>

            <div class="p-6 rounded-xl bg-gray-900 border border-gray-800">
                <h3 class="text-lg font-medium mb-4">Related Questions</h3>
                <div class="space-y-3">
                    <div class="p-3 hover:bg-gray-800 rounded-lg cursor-pointer">What are some interesting facts about ${query.includes('france') ? 'Paris' : 'quantum computing'}?</div>
                    <div class="p-3 hover:bg-gray-800 rounded-lg cursor-pointer">How does ${query.includes('france') ? 'Paris compare to other European capitals' : 'quantum computing differ from classical computing'}?</div>
                    <div class="p-3 hover:bg-gray-800 rounded-lg cursor-pointer">What is the history of ${query.includes('france') ? 'Paris as the capital of France' : 'quantum computing development'}?</div>
                </div>
            </div>
        `;

        searchResults.innerHTML = resultHTML;
        feather.replace();
    }
});