/**
 * SignHall AI Search & Q&A Page Logic
 * Natural language query processing with structured data retrieval
 */

import { injectLayout, renderExhibitCard } from './layout.js';
import { getAllExhibits } from './data.js';
import { generateAIAnswer, getSuggestedQueries } from './search.js';
import { CATEGORIES } from './config.js';

let allExhibits = [];

async function initAISearch() {
  injectLayout('search');
  allExhibits = await getAllExhibits();

  // Render suggestion chips
  const chips = getSuggestedQueries();
  const chipsContainer = document.getElementById('suggestion-chips');
  chipsContainer.innerHTML = chips.map(q =>
    `<span class="ai-chip" data-query="${escapeAttr(q)}">${escapeHtml(q)}</span>`
  ).join('');

  // Click on suggestion chips
  chipsContainer.querySelectorAll('.ai-chip').forEach(chip => {
    chip.addEventListener('click', () => {
      const query = chip.getAttribute('data-query');
      document.getElementById('ai-input').value = query;
      handleSearch(query);
    });
  });

  // Form submit
  document.getElementById('ai-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const query = document.getElementById('ai-input').value.trim();
    if (query) handleSearch(query);
  });

  // Auto-search if query is in URL
  const params = new URLSearchParams(window.location.search);
  const q = params.get('q');
  if (q) {
    document.getElementById('ai-input').value = q;
    handleSearch(q);
  }
}

async function handleSearch(query) {
  const answerArea = document.getElementById('ai-answer-area');

  // Show loading
  answerArea.innerHTML = `
    <div class="ai-result" style="text-align: center; padding: 40px;">
      <p style="color: var(--gray-400);">Searching structured exhibit data...</p>
    </div>
  `;

  try {
    const result = await generateAIAnswer(allExhibits, query);
    renderAIResult(query, result);
  } catch (err) {
    answerArea.innerHTML = `
      <div class="ai-result">
        <p style="color: #ef4444;">An error occurred while processing your query. Please try again.</p>
      </div>
    `;
    console.error('AI search error:', err);
  }
}

function renderAIResult(query, result) {
  const answerArea = document.getElementById('ai-answer-area');

  // Category badges
  const catBadges = result.detectedCategories.map(c => {
    const cat = CATEGORIES[c];
    return `<span class="cat-tag ${cat.color}">${c}</span>`;
  }).join('');

  // Format answer text (convert markdown-style bold to HTML)
  const formattedAnswer = escapeHtml(result.answer)
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\n\n/g, '</p><p>')
    .replace(/\n/g, '<br/>');

  // Exhibit cards
  const exhibitCards = result.exhibits.slice(0, 6).map(ex => renderExhibitCard(ex)).join('');

  answerArea.innerHTML = `
    <div class="ai-result">
      <div class="ai-result-header">
        ${catBadges}
        <span style="font-size: 0.8rem; color: var(--gray-400); margin-left: auto;">Query: "${escapeHtml(query)}"</span>
      </div>
      <div class="ai-answer"><p>${formattedAnswer}</p></div>
      ${result.exhibits.length > 0 ? `
        <h3 style="font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; color: var(--gray-700);">Matched Exhibits (${result.exhibits.length})</h3>
        <div class="ai-matched-exhibits" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;">
          ${exhibitCards}
        </div>
      ` : ''}
    </div>
  `;
}

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

function escapeAttr(text) {
  return text.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}

initAISearch();