browser-lego.js

/**
 * BROWSER CONTAINER
 * Left container with iframe browser and navigation controls
 */

let isBrowserInitialized = false;
let currentUrl = 'about:blank';
let historyStack = [];
let historyIndex = -1;

// Search mode state
let currentMode = 'website'; // 'search' or 'website'
let searchResults = [];
let currentQuery = '';

/**
 * Initialize Browser container
 */
function initBrowserContainer() {
  if (isBrowserInitialized) {
    console.log('BROWSER: Already initialized, just showing');
    showBrowser();
    return;
  }

  console.log('BROWSER: Initializing container...');
  
  // Find the left container
  const container = document.querySelector('.lego-container[data-position="left"]');
  if (!container) {
    console.error('BROWSER: Container not found');
    return;
  }

  // Clear existing content and create structure
  container.innerHTML = `
    <div class="browser-wrapper">
      <div class="browser-toolbar">
        <button class="toolbar-btn" id="browser-back" title="Go back" disabled>←</button>
        <button class="toolbar-btn" id="browser-forward" title="Go forward" disabled>→</button>
        <button class="toolbar-btn" id="browser-refresh" title="Refresh">⟳</button>
        <button class="toolbar-btn" id="browser-home" title="Home">⌂</button>
        <div class="browser-address-bar">
          <input type="text" id="browser-url" placeholder="Search the web or enter URL..." value="${currentUrl}">
        </div>
        <button class="toolbar-btn" id="browser-go" title="Search">Search</button>
      </div>
      <div class="browser-content">
        <div class="search-results" id="search-results" style="display: none;">
          <!-- Search results will be displayed here -->
        </div>
        <iframe id="browser-iframe" 
                src="${currentUrl}"
                sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-top-navigation"
                allow="camera; microphone; geolocation; clipboard-read; clipboard-write">
        </iframe>
        <div class="browser-loading" id="browser-loading" style="display: none;">
          <div class="loading-spinner"></div>
          <span>Loading...</span>
        </div>
      </div>
    </div>
  `;

  // Setup toolbar controls
  setupBrowserControls();

  // Default homepage: wait for weather to geocode map coordinates, then show location-based news
  // Don't run default query immediately - wait for map/weather to be ready
  try {
    const last = localStorage.getItem('browser:last');
    if (last) {
      handleSearchOrNavigate(last);
    } else {
      // Wait for weather to geocode the default map coordinates (same as weather does)
      // Weather uses default coordinates on init, so we wait for it to finish geocoding
      let retries = 0;
      const maxRetries = 10; // Try for up to 5 seconds (10 * 500ms)
      const checkLocation = () => {
        if (window.WeatherContainer && typeof window.WeatherContainer.getCurrentLocation === 'function') {
          const location = window.WeatherContainer.getCurrentLocation();
          if (location && location.trim().length > 0) {
            console.log('BROWSER: Got location from weather, searching news:', location);
            searchLocationNews(location);
            return;
          }
        }
        
        // Retry if weather hasn't geocoded yet
        retries++;
        if (retries < maxRetries) {
          setTimeout(checkLocation, 500); // Check every 500ms
        } else {
          // Fallback after all retries - should rarely happen
          console.log('BROWSER: Weather geocoding taking too long, using default');
          searchWithPerplexity('top 20 news stories today');
        }
      };
      
      // Start checking after a short delay to let weather start
      setTimeout(checkLocation, 500);
    }
  } catch {}

  isBrowserInitialized = true;
  console.log('BROWSER: Initialized successfully');
}

/**
 * Setup browser controls
 */
function setupBrowserControls() {
  // Back button
  document.getElementById('browser-back').addEventListener('click', function() {
    goBack();
  });

  // Forward button
  document.getElementById('browser-forward').addEventListener('click', function() {
    goForward();
  });

  // Refresh button
  document.getElementById('browser-refresh').addEventListener('click', function() {
    refreshPage();
  });

  // Home button - use current map location if available
  document.getElementById('browser-home').addEventListener('click', function() {
    // Try to get location from weather (which has map coordinates)
    if (window.WeatherContainer && typeof window.WeatherContainer.getCurrentLocation === 'function') {
      const location = window.WeatherContainer.getCurrentLocation();
      if (location) {
        document.getElementById('browser-url').value = location;
        searchLocationNews(location);
      } else {
        // Fallback to generic news
        const q = 'top news today';
        document.getElementById('browser-url').value = q;
        searchWithPerplexity(q);
      }
    } else {
      const q = 'top news today';
      document.getElementById('browser-url').value = q;
      searchWithPerplexity(q);
    }
  });

  // Search button
  document.getElementById('browser-go').addEventListener('click', function() {
    const query = document.getElementById('browser-url').value.trim();
    if (query) {
      handleSearchOrNavigate(query);
    }
  });

  // Address bar - handle Enter key
  document.getElementById('browser-url').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      const query = this.value.trim();
      if (query) {
        handleSearchOrNavigate(query);
      }
    }
  });

  // iframe load events
  const iframe = document.getElementById('browser-iframe');
  if (iframe) {
    iframe.addEventListener('load', function() {
      hideLoading();
      updateNavigationButtons();
      console.log('BROWSER: Page loaded');
    });

    iframe.addEventListener('error', function(e) {
      hideLoading();
      console.error('BROWSER: Failed to load page');
    });

    iframe.addEventListener('load', function() {
      hideLoading();
      updateNavigationButtons();
      console.log('BROWSER: Page loaded');
    });
  }
}

/**
 * Handle search or navigation based on input
 */
function handleSearchOrNavigate(input) {
  // Check if input looks like a URL
  if (isUrl(input)) {
    // Direct URL navigation
    navigateTo(input);
  } else {
    // Search with Perplexity
    searchWithPerplexity(input);
  }
}

/**
 * Check if input looks like a URL
 */
function isUrl(input) {
  try {
    // Check if it's a valid URL
    new URL(input.startsWith('http') ? input : 'https://' + input);
    return true;
  } catch (e) {
    // Check if it looks like a domain (contains dots and no spaces)
    return input.includes('.') && !input.includes(' ');
  }
}

/**
 * Search for location-based news (5 top stories)
 */
function searchLocationNews(location) {
  if (!location) {
    searchWithPerplexity('top 5 news stories today');
    return;
  }
  
  // Create query for location-based news
  const query = `top 5 news stories for ${location}`;
  console.log('BROWSER: Searching location news for:', location);
  document.getElementById('browser-url').value = location;
  searchWithPerplexity(query);
}

/**
 * Update news based on map center coordinates
 * Called automatically when map center changes
 */
function updateFromMap(lat, lng) {
  console.log('BROWSER: Updating from map center:', lat, lng);
  
  // Wait for weather to geocode the location first (since it's called from map too)
  // Then get the geocoded address and use it for news
  setTimeout(() => {
    if (window.WeatherContainer && typeof window.WeatherContainer.getCurrentLocation === 'function') {
      const location = window.WeatherContainer.getCurrentLocation();
      if (location) {
        searchLocationNews(location);
      } else {
        // If weather hasn't geocoded yet, wait a bit more
        setTimeout(() => {
          const loc = window.WeatherContainer.getCurrentLocation();
          if (loc) {
            searchLocationNews(loc);
          }
        }, 500);
      }
    }
  }, 600); // Wait for weather geocoding to complete
}

/**
 * Search with Perplexity
 */
async function searchWithPerplexity(query) {
  console.log('BROWSER: Searching with Perplexity:', query);
  
  showLoading();
  currentQuery = query;
  currentMode = 'search';
  
  try {
    // Call Perplexity API (using existing AI module)
    const aiResponse = await AI.getAIResponse(query);
    
    // Handle both old format (string) and new format (object with content and citations)
    const response = typeof aiResponse === 'string' ? aiResponse : aiResponse.content;
    const citations = typeof aiResponse === 'object' && aiResponse.citations ? aiResponse.citations : [];
    
    // Parse response and extract search results
    const results = parsePerplexityResponse(response, citations);
    searchResults = results;
    
    // Display search results
    displaySearchResults(results);
    hideLoading();
    
    // Add to history
    addToHistory(`search:${query}`);
    
  } catch (error) {
    console.error('BROWSER: Search failed:', error);
    hideLoading();
    showError('Search failed. Please try again.');
  }
}

/**
 * Parse Perplexity response to extract search results
 */
function parsePerplexityResponse(response, citations = []) {
  // Extract information from Perplexity's response and create useful results
  const results = [];
  
  // Build citation map: citation number -> URL
  const citationMap = {};
  if (Array.isArray(citations)) {
    citations.forEach((citation, index) => {
      // Citations might be URLs directly, or objects with url property
      const url = typeof citation === 'string' ? citation : (citation.url || citation.href || '');
      if (url) {
        citationMap[index + 1] = url; // [1] -> index 0, [2] -> index 1, etc.
      }
    });
  }
  
  // Also try to extract citations from response text (if they appear at the end)
  const citationMatches = response.match(/\[(\d+)\]:\s*(https?:\/\/[^\s\)]+)/g);
  if (citationMatches) {
    citationMatches.forEach(match => {
      const numMatch = match.match(/\[(\d+)\]:/);
      const urlMatch = match.match(/https?:\/\/[^\s\)]+/);
      if (numMatch && urlMatch) {
        citationMap[parseInt(numMatch[1])] = urlMatch[0];
      }
    });
  }
  
  // Split response into sections and create results
  const sections = response.split('\n\n').filter(section => section.trim().length > 0);
  
  sections.forEach((section, index) => {
    if (section.trim().length > 50) { // Only include substantial sections
      const lines = section.split('\n');
      
      // Extract citation numbers from the original line before cleaning
      const originalLine = lines[0];
      const citationNumbers = [];
      const citationMatches = originalLine.match(/\[(\d+)\]/g);
      if (citationMatches) {
        citationMatches.forEach(match => {
          const num = parseInt(match.replace(/[\[\]]/g, ''));
          if (num) citationNumbers.push(num);
        });
      }
      
      // Get the first available citation URL
      let sourceUrl = null;
      for (const num of citationNumbers) {
        if (citationMap[num]) {
          sourceUrl = citationMap[num];
          break;
        }
      }
      
      // Clean title: remove markdown bold (**), citation numbers ([1], [2][4], etc.)
      let title = lines[0]
        .replace(/\*\*/g, '') // Remove all **
        .replace(/\[\d+\]/g, '') // Remove [1], [2], etc. (multiple passes handle [2][4])
        .replace(/\[\d+\]/g, '') // Second pass for nested citations
        .trim();
      
      // Clean snippet: take text after the dash (if present) and limit length
      let snippet = lines.slice(1).join(' ').trim();
      if (!snippet && lines.length > 0) {
        // If no separate snippet, extract from title line after the dash
        const dashIndex = lines[0].indexOf(' - ');
        if (dashIndex > -1) {
          snippet = lines[0].substring(dashIndex + 3);
        }
      }
      
      // Remove markdown from snippet too
      snippet = snippet
        .replace(/\*\*/g, '')
        .replace(/\[\d+\]/g, '') // Remove citation numbers
        .replace(/\[\d+\]/g, '') // Second pass for nested citations
        .trim();
      
      // Limit snippet to 120 characters
      if (snippet.length > 120) {
        snippet = snippet.substring(0, 120).trim() + '...';
      }
      
      // Use source URL if available, otherwise fallback to Google search
      const resultUrl = sourceUrl || `https://www.google.com/search?q=${encodeURIComponent(currentQuery + ' ' + title.substring(0, 30))}`;
      
      // Create a result that opens in new tab since iframe has restrictions
      results.push({
        title: title || `Search Result ${index + 1}`,
        url: resultUrl,
        snippet: snippet,
        isExternal: true,
        citationNumber: citationNumbers[0] || null
      });
    }
  });
  
  // If no good sections found, create a general search result
  if (results.length === 0) {
    results.push({
      title: `Search Results for "${currentQuery}"`,
      url: `https://www.google.com/search?q=${encodeURIComponent(currentQuery)}`,
      snippet: "Click to search on Google for more detailed results.",
      isExternal: true
    });
  }
  
  return results;
}

/**
 * Display search results in Google-style format
 */
function displaySearchResults(results) {
  const searchContainer = document.getElementById('search-results');
  const iframe = document.getElementById('browser-iframe');
  
  if (!searchContainer || !iframe) return;
  
  // Hide iframe, show search results
  iframe.style.display = 'none';
  searchContainer.style.display = 'block';
  
  // Generate HTML for search results
  const resultsHtml = results.map((result, index) => {
    // Extract domain from URL for display, or show a generic label
    let urlDisplay = 'Search result';
    if (!result.url.includes('google.com/search')) {
      try {
        const urlObj = new URL(result.url);
        urlDisplay = urlObj.hostname.replace('www.', '');
      } catch (e) {
        urlDisplay = 'Search result';
      }
    }
    
    // Escape HTML in title and snippet for safety
    const escapeHtml = (str) => {
      return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
    };
    
    const safeUrl = escapeHtml(result.url);
    const safeTitle = escapeHtml(result.title);
    const safeSnippet = escapeHtml(result.snippet);
    const safeUrlDisplay = escapeHtml(urlDisplay);
    
    return `
    <div class="search-result" data-url="${safeUrl}">
      <h3 class="result-title">
        <a href="${safeUrl}" target="_blank" onclick="handleResultClick('${safeUrl}', ${result.isExternal}); return false;">${safeTitle}</a>
      </h3>
      <div class="result-url">
        <a href="${safeUrl}" target="_blank" onclick="handleResultClick('${safeUrl}', ${result.isExternal}); return false;">${safeUrlDisplay}</a>
      </div>
      <div class="result-snippet">${safeSnippet}</div>
    </div>
    `;
  }).join('');
  
  searchContainer.innerHTML = `
    <div class="search-header">
      <div class="search-info">About ${results.length} results for "${currentQuery}"</div>
    </div>
    <div class="results-list">
      ${resultsHtml}
    </div>
  `;
  
  console.log('BROWSER: Displayed search results');
}

/**
 * Handle search result clicks
 */
function handleResultClick(url, isExternal) {
  console.log('BROWSER: Handling result click:', url, 'External:', isExternal);
  
  if (isExternal) {
    // Open in new tab for external links
    window.open(url, '_blank');
  } else {
    // Try to open in iframe
    openSearchResult(url);
  }
}

/**
 * Open a search result in the iframe
 */
function openSearchResult(url) {
  console.log('BROWSER: Opening search result:', url);
  
  // Switch to website mode
  currentMode = 'website';
  
  // Hide search results, show iframe
  const searchContainer = document.getElementById('search-results');
  const iframe = document.getElementById('browser-iframe');
  
  if (searchContainer && iframe) {
    searchContainer.style.display = 'none';
    iframe.style.display = 'block';
    
    // Navigate to the URL
    navigateTo(url);
  }
}

/**
 * Navigate to a URL
 */
function navigateTo(url) {
  if (!url) return;
  
  // Ensure URL has protocol
  if (!url.startsWith('http://') && !url.startsWith('https://')) {
    if (url.includes('.') && !url.includes(' ')) {
      url = 'https://' + url;
    } else {
      // Treat as search
      searchWithPerplexity(url);
      return;
    }
  }

  currentUrl = url;
  currentMode = 'website';
  
  const iframe = document.getElementById('browser-iframe');
  if (iframe) {
    showLoading();
    iframe.src = url;
    document.getElementById('browser-url').value = url;
    addToHistory(url);
  }
  
  console.log('BROWSER: Navigating to', url);
}


/**
 * Navigate to URL (with validation)
 */
function navigateToUrl(url) {
  try {
    // Basic URL validation
    new URL(url.startsWith('http') ? url : 'https://' + url);
    navigateTo(url);
  } catch (e) {
    // If URL is invalid, treat as search
    navigateTo(url);
  }
}

/**
 * Go back in history
 */
function goBack() {
  if (historyIndex > 0) {
    historyIndex--;
    const historyItem = historyStack[historyIndex];
    
    if (historyItem.startsWith('search:')) {
      // Go back to search results
      const query = historyItem.replace('search:', '');
      currentQuery = query;
      currentMode = 'search';
      displaySearchResults(searchResults);
      document.getElementById('browser-url').value = query;
    } else {
      // Go back to website
      currentUrl = historyItem;
      currentMode = 'website';
      const iframe = document.getElementById('browser-iframe');
      const searchContainer = document.getElementById('search-results');
      
      if (iframe && searchContainer) {
        showLoading();
        iframe.src = historyItem;
        iframe.style.display = 'block';
        searchContainer.style.display = 'none';
        document.getElementById('browser-url').value = historyItem;
      }
    }
    
    updateNavigationButtons();
    console.log('BROWSER: Going back to', historyItem);
  }
}

/**
 * Go forward in history
 */
function goForward() {
  if (historyIndex < historyStack.length - 1) {
    historyIndex++;
    const historyItem = historyStack[historyIndex];
    
    if (historyItem.startsWith('search:')) {
      // Go forward to search results
      const query = historyItem.replace('search:', '');
      currentQuery = query;
      currentMode = 'search';
      displaySearchResults(searchResults);
      document.getElementById('browser-url').value = query;
    } else {
      // Go forward to website
      currentUrl = historyItem;
      currentMode = 'website';
      const iframe = document.getElementById('browser-iframe');
      const searchContainer = document.getElementById('search-results');
      
      if (iframe && searchContainer) {
        showLoading();
        iframe.src = historyItem;
        iframe.style.display = 'block';
        searchContainer.style.display = 'none';
        document.getElementById('browser-url').value = historyItem;
      }
    }
    
    updateNavigationButtons();
    console.log('BROWSER: Going forward to', historyItem);
  }
}

/**
 * Refresh current page
 */
function refreshPage() {
  const iframe = document.getElementById('browser-iframe');
  if (iframe) {
    showLoading();
    iframe.src = iframe.src; // Reload iframe
    console.log('BROWSER: Refreshing page');
  }
}

/**
 * Add URL to history
 */
function addToHistory(url) {
  // Remove any forward history if we're not at the end
  if (historyIndex < historyStack.length - 1) {
    historyStack = historyStack.slice(0, historyIndex + 1);
  }
  
  historyStack.push(url);
  historyIndex = historyStack.length - 1;
  
  // Limit history size
  if (historyStack.length > 50) {
    historyStack.shift();
    historyIndex--;
  }
  
  updateNavigationButtons();
}

/**
 * Update navigation button states
 */
function updateNavigationButtons() {
  const backBtn = document.getElementById('browser-back');
  const forwardBtn = document.getElementById('browser-forward');
  
  if (backBtn) {
    backBtn.disabled = historyIndex <= 0;
  }
  
  if (forwardBtn) {
    forwardBtn.disabled = historyIndex >= historyStack.length - 1;
  }
}

/**
 * Show loading indicator
 */
function showLoading() {
  const loading = document.getElementById('browser-loading');
  if (loading) {
    loading.style.display = 'flex';
  }
}

/**
 * Hide loading indicator
 */
function hideLoading() {
  const loading = document.getElementById('browser-loading');
  if (loading) {
    loading.style.display = 'none';
  }
}

/**
 * Show error message
 */
function showError(message) {
  console.error('BROWSER ERROR:', message);
  // For now, just log to console - you can add UI error display later
}


/**
 * Show browser
 */
function showBrowser() {
  if (!isBrowserInitialized) {
    initBrowserContainer();
    return;
  }
  
  // Ensure iframe is properly sized
  setTimeout(() => {
    const container = document.querySelector('.lego-container[data-position="left"]');
    if (container) {
      const iframe = document.getElementById('browser-iframe');
      if (iframe) {
        // Force iframe to refresh if needed
        if (iframe.src !== currentUrl) {
          iframe.src = currentUrl;
        }
      }
    }
  }, 100);
  
  console.log('BROWSER: Showing container');
}

/**
 * Hide browser
 */
function hideBrowser() {
  console.log('BROWSER: Hiding container');
}

// Export functions for use in main script
if (typeof window !== 'undefined') {
  window.BrowserContainer = {
    init: initBrowserContainer,
    show: showBrowser,
    hide: hideBrowser,
    navigateTo: navigateTo,
    searchWithPerplexity: searchWithPerplexity,
    searchLocationNews: searchLocationNews,
    updateFromMap: updateFromMap,
    openSearchResult: openSearchResult,
    handleResultClick: handleResultClick,
    getCurrentUrl: () => currentUrl,
    getCurrentMode: () => currentMode,
    isInitialized: () => isBrowserInitialized
  };
}