Update main.js

main.js

@@ -29,8 +29,10 @@ document.addEventListener('DOMContentLoaded', () => {
     const settingsBtn = document.getElementById('settingsBtn');
     const settingsModal = document.getElementById('settingsModal');
     const closeSettingsModal = document.getElementById('closeSettingsModal');
+    const aerodeckSection = document.getElementById('aerodeckSection');
+    const aerodeckList = document.getElementById('aerodeckList');
 
-    // --- FUNCTIONS ---
+    // --- CORE & UI FUNCTIONS ---
 
     function toggleARView(showAR) {
         arActive = showAR;
@@ -54,7 +56,7 @@ document.addEventListener('DOMContentLoaded', () => {
             .then(pois => {
                 poisData = pois;
                 const scene = document.querySelector('a-scene');
-                if (!scene) return console.error('A-Frame scene not found!');
+                if (!scene) return;
                 pois.forEach(poi => {
                     const entity = document.createElement('a-entity');
                     entity.setAttribute('gps-new-entity-place', { latitude: poi.latitude, longitude: poi.longitude });
@@ -79,30 +81,125 @@ document.addEventListener('DOMContentLoaded', () => {
                 toggleARView(false);
             });
     }
-
-    // THIS IS A SIMPLE, PLACEHOLDER FUNCTION FOR NOW
+    
     function showObjectInfo(poiId) {
-        const poi = poisData.find(p => p.id === poiId);
-        if (!poi) return;
-        objectTitle.textContent = poi.name;
-        objectDescription.textContent = poi.description || "No description available.";
-        objectImage.src = `https://via.placeholder.com/300x200?text=${encodeURIComponent(poi.name)}`;
-        objectModal.classList.remove('hidden');
+        objectTitle.textContent = 'Loading...';
+        objectDescription.textContent = '';
+        aerodeckSection.classList.add('hidden');
+
+        fetch(`${config.backendUrl}/api/pois/${poiId}`)
+            .then(response => { if (!response.ok) throw new Error('POI not found'); return response.json(); })
+            .then(data => {
+                objectTitle.textContent = data.name;
+                objectDescription.textContent = data.description || "No description available.";
+                objectImage.src = `https://via.placeholder.com/300x200?text=${encodeURIComponent(data.name)}`;
+                if (data.aerodecks && data.aerodecks.length > 0) {
+                    aerodeckList.innerHTML = '';
+                    data.aerodecks.forEach(deck => {
+                        const itemElement = document.createElement('div');
+                        itemElement.className = 'flex justify-between items-center p-2 bg-gray-100 rounded';
+                        const statusColor = deck.status === 'Operational' ? 'text-green-500' : 'text-orange-500';
+                        itemElement.innerHTML = `
+                            <div>
+                                <div class="font-medium">${deck.deck_name}</div>
+                                <div class="text-sm text-gray-600">Size: ${deck.size_meters}m | Charging: ${deck.is_charging_available ? 'Yes' : 'No'}</div>
+                            </div>
+                            <div class="font-bold text-sm ${statusColor}">${deck.status}</div>
+                        `;
+                        aerodeckList.appendChild(itemElement);
+                    });
+                    aerodeckSection.classList.remove('hidden');
+                }
+                objectModal.classList.remove('hidden');
+            })
+            .catch(error => {
+                console.error("Error fetching POI details:", error);
+                alert("Could not load details for this location.");
+            });
     }
 
-    function addUserMessage(message) { /* ... (rest of function) ... */ }
-    function addAIMessage(message) { /* ... (rest of function) ... */ }
-    function handleSearch() { /* ... (rest of function) ... */ }
+    function addUserMessage(message) {
+        const chatContainer = aiAssistant.querySelector('.flex-col');
+        const msg = `<div class="ai-message user-message"><p>${message}</p></div>`;
+        chatContainer.insertAdjacentHTML('beforeend', msg);
+        aiAssistant.scrollTop = aiAssistant.scrollHeight;
+    }
+
+    function addAIMessage(message) {
+        const chatContainer = aiAssistant.querySelector('.flex-col');
+        const msg = `<div class="ai-message assistant-message"><div class="font-bold text-indigo-800 mb-1">AR Guide</div><p>${message}</p></div>`;
+        chatContainer.insertAdjacentHTML('beforeend', msg);
+        aiAssistant.scrollTop = aiAssistant.scrollHeight;
+    }
+
+    function handleSearch() {
+        const searchTerm = userInput.value.trim();
+        if (!searchTerm) return;
+        addUserMessage(searchTerm);
+        userInput.value = '';
+        const searchKeywords = ['search', 'find', 'show', 'where is', 'landmark', 'park', 'beach', 'hollywood', 'map', 'navigate'];
+        const isLocalSearch = searchKeywords.some(keyword => searchTerm.toLowerCase().includes(keyword));
+        if (isLocalSearch) {
+            const stopWords = ['show', 'me', 'find', 'is', 'a', 'the', 'for', 'where', 'search', 'of', 'at'];
+            const searchTokens = searchTerm.toLowerCase().split(' ').filter(word => !stopWords.includes(word) && word.length > 2);
+            if (searchTokens.length === 0) return addAIMessage("Please be more specific in your local search.");
+            const results = poisData.filter(poi => {
+                const poiText = (poi.name + ' ' + (poi.description || '')).toLowerCase();
+                return searchTokens.some(token => {
+                    if (poiText.includes(token)) return true;
+                    if (token.endsWith('s')) return poiText.includes(token.slice(0, -1));
+                    return false;
+                });
+            });
+            if (results.length > 0) {
+                let responseMessage = `I found ${results.length} local result(s):<ul>`;
+                results.forEach(poi => { responseMessage += `<li class="mt-2 list-disc list-inside">${poi.name}</li>`; });
+                responseMessage += "</ul>";
+                addAIMessage(responseMessage);
+            } else {
+                addAIMessage(`Sorry, I couldn't find any local places matching "${searchTerm}".`);
+            }
+        } else {
+            addAIMessage("AI is thinking...");
+            fetch(`${config.backendUrl}/api/ask`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt: searchTerm })
+            })
+            .then(response => { if (!response.ok) throw new Error('Network error'); return response.json(); })
+            .then(data => {
+                const chatContainer = aiAssistant.querySelector('.flex-col');
+                const thinkingMessage = Array.from(chatContainer.querySelectorAll('.assistant-message')).pop();
+                if (thinkingMessage && thinkingMessage.textContent.includes("AI is thinking...")) {
+                    thinkingMessage.querySelector('p').innerHTML = data.response.replace(/\n/g, '<br>');
+                } else {
+                    addAIMessage(data.response.replace(/\n/g, '<br>'));
+                }
+            })
+            .catch(error => {
+                console.error('Error asking AI:', error);
+                const chatContainer = aiAssistant.querySelector('.flex-col');
+                const thinkingMessage = Array.from(chatContainer.querySelectorAll('.assistant-message')).pop();
+                if (thinkingMessage && thinkingMessage.textContent.includes("AI is thinking...")) {
+                     thinkingMessage.querySelector('p').innerHTML = "Sorry, I had trouble connecting to the AI.";
+                } else {
+                    addAIMessage("Sorry, I had trouble connecting to the AI.");
+                }
+            });
+        }
+    }
 
     // --- EVENT LISTENERS ---
     
     arToggle.addEventListener('click', () => toggleARView(!arActive));
-    document.querySelector('a-scene').addEventListener('click', (event) => {
-        if (event.target.hasAttribute('data-poi-id')) {
-            const poiId = parseInt(event.target.getAttribute('data-poi-id'), 10);
-            showObjectInfo(poiId);
-        }
-    });
+    if (document.querySelector('a-scene')) {
+        document.querySelector('a-scene').addEventListener('click', (event) => {
+            if (event.target.hasAttribute('data-poi-id')) {
+                const poiId = parseInt(event.target.getAttribute('data-poi-id'), 10);
+                showObjectInfo(poiId);
+            }
+        });
+    }
     closeObjectModal.addEventListener('click', () => objectModal.classList.add('hidden'));
     sendBtn.addEventListener('click', handleSearch);
     userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') handleSearch(); });
@@ -122,5 +219,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // --- INITIALIZATION ---
     fetchPoisAndCreateAREntities();
-});
-// NOTE: I have omitted the full code for addUserMessage, addAIMessage, and handleSearch for brevity, but they should be included in your file from the previous correct version. The key is that this version uses a very simple showObjectInfo function.
+});