word/public/solvers.js

// Pattern Solver
class PatternSolver {
  static async solve(pattern) {
    try {
      const results = await PuzzleDatabase.getWordSuggestions(pattern);
      return results.map(item => ({
        word: item.word,
        clue: item.clue,
        confidence: this.calculateConfidence(pattern, item.word)
      }));
    } catch (error) {
      console.error('Pattern solving error:', error);
      return [];
    }
  }

  static calculateConfidence(pattern, word) {
    let matches = 0;
    let total = pattern.length;

    for (let i = 0; i < pattern.length; i++) {
      if (pattern[i] !== '_' && pattern[i] === word[i]) {
        matches++;
      }
    }

    return Math.round((matches / total) * 100);
  }
}

// Anagram Solver
class AnagramSolver {
  static async solve(letters) {
    try {
      const results = await PuzzleDatabase.getAnagramSolutions(letters);
      return results.map(item => ({
        word: item.word,
        clue: item.clue
      }));
    } catch (error) {
      console.error('Anagram solving error:', error);
      return [];
    }
  }
}

// Word Helper UI Controller
class WordHelperUI {
  constructor() {
    this.initializeEventListeners();
  }

  initializeEventListeners() {
    // Pattern solver
    const patternBtn = document.getElementById('patternSolveBtn');
    const patternInput = document.getElementById('patternInput');

    patternBtn.addEventListener('click', async () => {
      await this.handlePatternSolve();
    });

    patternInput.addEventListener('keypress', async (e) => {
      if (e.key === 'Enter') {
        await this.handlePatternSolve();
      }
    });

    // Anagram solver
    const anagramBtn = document.getElementById('anagramSolveBtn');
    const anagramInput = document.getElementById('anagramInput');

    anagramBtn.addEventListener('click', async () => {
      await this.handleAnagramSolve();
    });

    anagramInput.addEventListener('keypress', async (e) => {
      if (e.key === 'Enter') {
        await this.handleAnagramSolve();
      }
    });
  }

  async handlePatternSolve() {
    const input = document.getElementById('patternInput').value.trim().toUpperCase();
    const resultsDiv = document.getElementById('patternResults');

    if (!input || !input.includes('_')) {
      this.showError(resultsDiv, 'Voer een patroon in met onderstrepingstekens (_) voor onbekende letters.');
      return;
    }

    this.showLoading(resultsDiv);

    try {
      const solutions = await PatternSolver.solve(input);
      this.displayPatternResults(resultsDiv, solutions);
    } catch (error) {
      this.showError(resultsDiv, 'Er is een fout opgetreden bij het zoeken.');
    }
  }

  async handleAnagramSolve() {
    const input = document.getElementById('anagramInput').value.trim().toUpperCase();
    const resultsDiv = document.getElementById('anagramResults');

    if (!input || input.length < 3) {
      this.showError(resultsDiv, 'Voer minstens 3 letters in voor anagram zoeken.');
      return;
    }

    this.showLoading(resultsDiv);

    try {
      const solutions = await AnagramSolver.solve(input);
      this.displayAnagramResults(resultsDiv, solutions);
    } catch (error) {
      this.showError(resultsDiv, 'Er is een fout opgetreden bij het ontcijferen.');
    }
  }

  showLoading(container) {
    container.innerHTML = '<div class="loading"></div><span>Zoeken...</span>';
  }

  showError(container, message) {
    container.innerHTML = `<div style="color: #e53e3e; font-style: italic;">${message}</div>`;
  }

  displayPatternResults(container, results) {
    if (results.length === 0) {
      container.innerHTML = '<div style="color: #718096; font-style: italic;">Geen woorden gevonden.</div>';
      return;
    }

    const html = results.map(result => `
            <div class="solver-result" onclick="wordHelperUI.insertWord('${result.word}')">
                <strong>${result.word}</strong> - ${result.clue}
                <span style="float: right; color: #48bb78; font-size: 12px;">${result.confidence}%</span>
            </div>
        `).join('');

    container.innerHTML = html;
  }

  displayAnagramResults(container, results) {
    if (results.length === 0) {
      container.innerHTML = '<div style="color: #718096; font-style: italic;">Geen anagrammen gevonden.</div>';
      return;
    }

    const html = results.map(result => `
            <div class="solver-result" onclick="wordHelperUI.insertWord('${result.word}')">
                <strong>${result.word}</strong> - ${result.clue}
            </div>
        `).join('');

    container.innerHTML = html;
  }

  insertWord(word) {
    // This method can be enhanced to insert the word into the current active cell
    const activeCell = document.querySelector('.grid-cell.active input');
    if (activeCell) {
      activeCell.value = word[0];
      // Move to next cells automatically
      let currentInput = activeCell;
      for (let i = 1; i < word.length; i++) {
        const nextCell = currentCell.parentElement.nextElementSibling?.querySelector('input');
        if (nextCell) {
          nextCell.value = word[i];
          currentInput = nextCell;
        }
      }
    }
  }
}

// Initialize word helper
const wordHelperUI = new WordHelperUI();