breakpilot-pwa/backend/frontend/static/js/modules/cloze-module.js

/**
 * BreakPilot Studio - Cloze (Lückentext) Module
 *
 * Lückentext-Funktionalität mit Übersetzung:
 * - Generierung von Lückentexten aus Arbeitsblättern
 * - Mehrsprachige Übersetzungen (TR, AR, RU, UK, PL, EN)
 * - Interaktives Übungsmodul mit Auswertung
 * - Druckfunktion (mit/ohne Lösungen)
 *
 * Refactored: 2026-01-19
 */

import { t } from './i18n.js';
import { setStatus } from './api-helpers.js';

// State
let currentClozeData = null;
let clozeAnswers = {};

// DOM References
let clozePreview = null;
let clozeBadge = null;
let clozeLanguageSelect = null;
let clozeModal = null;
let clozeModalBody = null;
let clozeModalClose = null;
let btnClozeGenerate = null;
let btnClozeShow = null;
let btnClozePrint = null;

// Callbacks
let getEingangFilesCallback = null;
let getCurrentIndexCallback = null;

/**
 * Initialisiert das Cloze-Modul
 * @param {Object} options - Konfiguration
 */
export function initClozeModule(options = {}) {
  getEingangFilesCallback = options.getEingangFiles || (() => []);
  getCurrentIndexCallback = options.getCurrentIndex || (() => 0);

  // DOM References
  clozePreview = document.getElementById('cloze-preview') || options.previewEl;
  clozeBadge = document.getElementById('cloze-badge') || options.badgeEl;
  clozeLanguageSelect = document.getElementById('cloze-language') || options.languageSelectEl;
  clozeModal = document.getElementById('cloze-modal') || options.modalEl;
  clozeModalBody = document.getElementById('cloze-modal-body') || options.modalBodyEl;
  clozeModalClose = document.getElementById('cloze-modal-close') || options.modalCloseEl;
  btnClozeGenerate = document.getElementById('btn-cloze-generate') || options.generateBtn;
  btnClozeShow = document.getElementById('btn-cloze-show') || options.showBtn;
  btnClozePrint = document.getElementById('btn-cloze-print') || options.printBtn;

  // Event-Listener
  if (btnClozeGenerate) {
    btnClozeGenerate.addEventListener('click', generateClozeTexts);
  }

  if (btnClozeShow) {
    btnClozeShow.addEventListener('click', openClozeModal);
  }

  if (btnClozePrint) {
    btnClozePrint.addEventListener('click', openClozePrintDialog);
  }

  if (clozeModalClose) {
    clozeModalClose.addEventListener('click', closeClozeModal);
  }

  if (clozeModal) {
    clozeModal.addEventListener('click', (ev) => {
      if (ev.target === clozeModal) {
        closeClozeModal();
      }
    });
  }

  // Event für Datei-Wechsel
  window.addEventListener('fileSelected', () => {
    loadClozePreviewForCurrent();
  });
}

/**
 * Generiert Lückentexte für alle Arbeitsblätter
 */
export async function generateClozeTexts() {
  const targetLang = clozeLanguageSelect ? clozeLanguageSelect.value : 'tr';

  try {
    setStatus(t('cloze_generating') || 'Generiere Lückentexte …', t('ai_working') || 'Bitte warten, KI arbeitet.', 'busy');
    if (clozeBadge) clozeBadge.textContent = t('generating') || 'Generiert...';

    const resp = await fetch('/api/generate-cloze?target_language=' + targetLang, { method: 'POST' });
    if (!resp.ok) {
      throw new Error('HTTP ' + resp.status);
    }

    const result = await resp.json();
    if (result.status === 'OK' && result.generated.length > 0) {
      setStatus(t('cloze_generated') || 'Lückentexte generiert', result.generated.length + ' ' + (t('files_created') || 'Dateien erstellt'));
      if (clozeBadge) clozeBadge.textContent = t('ready') || 'Fertig';
      if (btnClozeShow) btnClozeShow.style.display = 'inline-block';
      if (btnClozePrint) btnClozePrint.style.display = 'inline-block';

      // Lade Vorschau für aktuelle Datei
      await loadClozePreviewForCurrent();
    } else if (result.errors && result.errors.length > 0) {
      setStatus(t('cloze_error') || 'Fehler bei Lückentext-Generierung', result.errors[0].error, 'error');
      if (clozeBadge) clozeBadge.textContent = t('error') || 'Fehler';
    } else {
      setStatus(t('no_cloze_generated') || 'Keine Lückentexte generiert', t('analysis_missing') || 'Möglicherweise fehlen Analyse-Daten.', 'error');
      if (clozeBadge) clozeBadge.textContent = t('ready') || 'Bereit';
    }
  } catch (e) {
    console.error('Lückentext-Generierung fehlgeschlagen:', e);
    setStatus(t('cloze_error') || 'Fehler bei Lückentext-Generierung', String(e), 'error');
    if (clozeBadge) clozeBadge.textContent = t('error') || 'Fehler';
  }
}

/**
 * Lädt Cloze-Vorschau für die aktuelle Datei
 */
export async function loadClozePreviewForCurrent() {
  const eingangFiles = getEingangFilesCallback();
  const currentIndex = getCurrentIndexCallback();

  if (!eingangFiles.length) {
    if (clozePreview) clozePreview.innerHTML = '<div style="font-size:11px;color:var(--bp-text-muted);">' + (t('no_worksheets') || 'Keine Arbeitsblätter vorhanden.') + '</div>';
    return;
  }

  const currentFile = eingangFiles[currentIndex];
  if (!currentFile) return;

  try {
    const resp = await fetch('/api/cloze-data/' + encodeURIComponent(currentFile));
    const result = await resp.json();

    if (result.status === 'OK' && result.data) {
      currentClozeData = result.data;
      renderClozePreview(result.data);
      if (btnClozeShow) btnClozeShow.style.display = 'inline-block';
      if (btnClozePrint) btnClozePrint.style.display = 'inline-block';
    } else {
      if (clozePreview) clozePreview.innerHTML = '<div style="font-size:11px;color:var(--bp-text-muted);">' + (t('no_cloze_for_worksheet') || 'Noch keine Lückentexte für dieses Arbeitsblatt generiert.') + '</div>';
      currentClozeData = null;
      if (btnClozeShow) btnClozeShow.style.display = 'none';
      if (btnClozePrint) btnClozePrint.style.display = 'none';
    }
  } catch (e) {
    console.error('Fehler beim Laden der Lückentext-Daten:', e);
    if (clozePreview) clozePreview.innerHTML = '';
  }
}

/**
 * Rendert die Cloze-Vorschau
 * @param {Object} clozeData - Cloze-Daten
 */
function renderClozePreview(clozeData) {
  if (!clozePreview) return;
  if (!clozeData || !clozeData.cloze_items || clozeData.cloze_items.length === 0) {
    clozePreview.innerHTML = '<div style="font-size:11px;color:var(--bp-text-muted);">' + (t('no_cloze_texts') || 'Keine Lückentexte vorhanden.') + '</div>';
    return;
  }

  const items = clozeData.cloze_items;
  const metadata = clozeData.metadata || {};

  let html = '';

  // Statistiken
  html += '<div class="cloze-stats">';
  if (metadata.subject) {
    html += '<div><strong>' + (t('subject') || 'Fach') + ':</strong> ' + escapeHtml(metadata.subject) + '</div>';
  }
  if (metadata.grade_level) {
    html += '<div><strong>' + (t('grade') || 'Stufe') + ':</strong> ' + escapeHtml(metadata.grade_level) + '</div>';
  }
  html += '<div><strong>' + (t('sentences') || 'Sätze') + ':</strong> ' + items.length + '</div>';
  if (metadata.total_gaps) {
    html += '<div><strong>' + (t('gaps') || 'Lücken') + ':</strong> ' + metadata.total_gaps + '</div>';
  }
  html += '</div>';

  // Zeige erste 2 Sätze als Vorschau
  const previewItems = items.slice(0, 2);
  previewItems.forEach((item, idx) => {
    html += '<div class="cloze-item">';
    html += '<div class="cloze-sentence">' + (idx + 1) + '. ' + item.sentence_with_gaps.replace(/___/g, '<span class="cloze-gap">___</span>') + '</div>';

    // Übersetzung anzeigen
    if (item.translation && item.translation.full_sentence) {
      html += '<div class="cloze-translation">';
      html += '<div class="cloze-translation-label">' + (item.translation.language_name || t('translation') || 'Übersetzung') + ':</div>';
      html += escapeHtml(item.translation.full_sentence);
      html += '</div>';
    }
    html += '</div>';
  });

  if (items.length > 2) {
    html += '<div style="font-size:11px;color:var(--bp-text-muted);text-align:center;margin-top:8px;">+ ' + (items.length - 2) + ' ' + (t('more_sentences') || 'weitere Sätze') + '</div>';
  }

  clozePreview.innerHTML = html;
}

/**
 * Öffnet das Cloze-Modal
 */
export function openClozeModal() {
  if (!currentClozeData || !currentClozeData.cloze_items) {
    alert(t('no_cloze_texts') || 'Keine Lückentexte vorhanden. Bitte zuerst generieren.');
    return;
  }

  clozeAnswers = {}; // Reset Antworten
  renderClozeModal(currentClozeData);
  if (clozeModal) clozeModal.classList.remove('hidden');
}

/**
 * Schließt das Cloze-Modal
 */
export function closeClozeModal() {
  if (clozeModal) clozeModal.classList.add('hidden');
}

/**
 * Rendert den Modal-Inhalt
 * @param {Object} clozeData - Cloze-Daten
 */
function renderClozeModal(clozeData) {
  if (!clozeModalBody) return;

  const items = clozeData.cloze_items;
  const metadata = clozeData.metadata || {};

  let html = '';

  // Header
  html += '<div class="cloze-stats" style="margin-bottom:16px;">';
  if (metadata.source_title) {
    html += '<div><strong>' + (t('worksheet') || 'Arbeitsblatt') + ':</strong> ' + escapeHtml(metadata.source_title) + '</div>';
  }
  if (metadata.total_gaps) {
    html += '<div><strong>' + (t('total_gaps') || 'Lücken gesamt') + ':</strong> ' + metadata.total_gaps + '</div>';
  }
  html += '</div>';

  html += '<div style="font-size:12px;color:var(--bp-text-muted);margin-bottom:12px;">' + (t('cloze_instruction') || 'Fülle die Lücken aus und klicke auf "Prüfen".') + '</div>';

  // Alle Sätze mit Eingabefeldern
  items.forEach((item, idx) => {
    html += '<div class="cloze-item" data-cid="' + item.id + '">';

    // Satz mit Eingabefeldern statt ___
    let sentenceHtml = item.sentence_with_gaps;
    const gaps = item.gaps || [];

    // Ersetze ___ durch Eingabefelder
    let gapIndex = 0;
    sentenceHtml = sentenceHtml.replace(/___/g, () => {
      const gap = gaps[gapIndex] || { id: 'g' + gapIndex, word: '' };
      const inputId = item.id + '_' + gap.id;
      gapIndex++;
      return '<input type="text" class="cloze-gap-input" data-cid="' + item.id + '" data-gid="' + gap.id + '" data-answer="' + escapeHtml(gap.word) + '" id="input_' + inputId + '" autocomplete="off">';
    });

    html += '<div class="cloze-sentence">' + (idx + 1) + '. ' + sentenceHtml + '</div>';

    // Übersetzung als Hilfe
    if (item.translation && item.translation.sentence_with_gaps) {
      html += '<div class="cloze-translation">';
      html += '<div class="cloze-translation-label">' + (item.translation.language_name || t('translation') || 'Übersetzung') + ' (' + (t('with_gaps') || 'mit Lücken') + '):</div>';
      html += escapeHtml(item.translation.sentence_with_gaps);
      html += '</div>';
    }

    html += '</div>';
  });

  // Buttons
  html += '<div style="margin-top:16px;text-align:center;display:flex;gap:8px;justify-content:center;">';
  html += '<button class="btn btn-primary" id="btn-cloze-check">' + (t('check') || 'Prüfen') + '</button>';
  html += '<button class="btn btn-ghost" id="btn-cloze-show-answers">' + (t('show_answers') || 'Lösungen zeigen') + '</button>';
  html += '</div>';

  clozeModalBody.innerHTML = html;

  // Event-Listener für Prüfen-Button
  const btnCheck = document.getElementById('btn-cloze-check');
  if (btnCheck) {
    btnCheck.addEventListener('click', checkClozeAnswers);
  }

  // Event-Listener für Lösungen zeigen
  const btnShowAnswers = document.getElementById('btn-cloze-show-answers');
  if (btnShowAnswers) {
    btnShowAnswers.addEventListener('click', showClozeAnswers);
  }

  // Enter-Taste zum Prüfen
  clozeModalBody.querySelectorAll('.cloze-gap-input').forEach(input => {
    input.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        checkClozeAnswers();
      }
    });
  });
}

/**
 * Überprüft die Cloze-Antworten
 */
function checkClozeAnswers() {
  if (!clozeModalBody) return;

  let correct = 0;
  let total = 0;

  clozeModalBody.querySelectorAll('.cloze-gap-input').forEach(input => {
    const userAnswer = input.value.trim().toLowerCase();
    const correctAnswer = input.getAttribute('data-answer').toLowerCase();
    total++;

    // Entferne vorherige Klassen
    input.classList.remove('correct', 'incorrect');

    if (userAnswer === correctAnswer) {
      input.classList.add('correct');
      correct++;
    } else if (userAnswer !== '') {
      input.classList.add('incorrect');
    }
  });

  // Zeige Ergebnis
  let existingResult = clozeModalBody.querySelector('.cloze-result');
  if (existingResult) existingResult.remove();

  const percentage = Math.round(correct / total * 100);
  const resultHtml = '<div class="cloze-result" style="margin-top:16px;padding:12px;background:rgba(15,23,42,0.6);border-radius:8px;text-align:center;">' +
    '<div style="font-size:18px;font-weight:600;">' + correct + ' ' + (t('of') || 'von') + ' ' + total + ' ' + (t('correct_answers') || 'richtig') + '</div>' +
    '<div style="font-size:12px;color:var(--bp-text-muted);margin-top:4px;">' + percentage + '% ' + (t('percent_correct') || 'korrekt') + '</div>' +
    '</div>';

  const resultDiv = document.createElement('div');
  resultDiv.innerHTML = resultHtml;
  clozeModalBody.appendChild(resultDiv.firstChild);
}

/**
 * Zeigt alle Cloze-Lösungen
 */
function showClozeAnswers() {
  if (!clozeModalBody) return;

  clozeModalBody.querySelectorAll('.cloze-gap-input').forEach(input => {
    const correctAnswer = input.getAttribute('data-answer');
    input.value = correctAnswer;
    input.classList.remove('incorrect');
    input.classList.add('correct');
  });
}

/**
 * Öffnet den Druck-Dialog
 */
export function openClozePrintDialog() {
  if (!currentClozeData) {
    alert(t('no_cloze_texts') || 'Keine Lückentexte vorhanden.');
    return;
  }

  const eingangFiles = getEingangFilesCallback();
  const currentIndex = getCurrentIndexCallback();
  const currentFile = eingangFiles[currentIndex];

  const confirmMsg = (t('cloze_print_with_answers') || 'Mit Lösungen drucken?') +
    '\n\nOK = ' + (t('with_filled_gaps') || 'Mit ausgefüllten Lücken') +
    '\n' + (t('cancel') || 'Abbrechen') + ' = ' + (t('exercise_with_wordbank') || 'Übungsblatt mit Wortbank');

  const choice = confirm(confirmMsg);
  const url = '/api/print-cloze/' + encodeURIComponent(currentFile) + '?show_answers=' + choice;
  window.open(url, '_blank');
}

// === Getter und Setter ===

/**
 * Gibt die aktuellen Cloze-Daten zurück
 * @returns {Object|null}
 */
export function getClozeData() {
  return currentClozeData;
}

/**
 * Setzt die Cloze-Daten
 * @param {Object} data
 */
export function setClozeData(data) {
  currentClozeData = data;
  if (data) {
    renderClozePreview(data);
  }
}

/**
 * Gibt die aktuelle Zielsprache zurück
 * @returns {string}
 */
export function getTargetLanguage() {
  return clozeLanguageSelect ? clozeLanguageSelect.value : 'tr';
}

/**
 * Helper: HTML-Escape
 */
function escapeHtml(text) {
  if (!text) return '';
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}