mail-service-embedded/public/script.js

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('mailForm');
  const status = document.getElementById('status');
  const submitBtn = document.getElementById('submitBtn');
  const historyList = document.getElementById('historyList');
  const clearHistoryBtn = document.getElementById('clearHistory');

  // Load history on page load
  loadHistory();

  // Form submission
  form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const formData = new FormData(form);
    const data = {
      to: formData.get('to'),
      cc: formData.get('cc') || undefined,
      subject: formData.get('subject'),
      body: formData.get('body'),
      isHtml: formData.get('format') === 'html'
    };

    submitBtn.disabled = true;
    submitBtn.textContent = 'Sende...';
    hideStatus();

    try {
      const response = await fetch('/api/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });

      const result = await response.json();

      if (result.success) {
        showStatus('E-Mail erfolgreich gesendet!', 'success');
        form.reset();
      } else {
        showStatus(result.error, 'error');
      }

      loadHistory();
    } catch (error) {
      showStatus('Netzwerkfehler: ' + error.message, 'error');
    } finally {
      submitBtn.disabled = false;
      submitBtn.textContent = 'Senden';
    }
  });

  // Clear history
  clearHistoryBtn.addEventListener('click', async () => {
    if (!confirm('Gesamte Historie löschen?')) return;

    try {
      const response = await fetch('/api/history', { method: 'DELETE' });
      const result = await response.json();

      if (result.success) {
        loadHistory();
      }
    } catch (error) {
      console.error('Error clearing history:', error);
    }
  });

  // Load history from server
  async function loadHistory() {
    try {
      const response = await fetch('/api/history');
      const result = await response.json();

      if (result.success) {
        renderHistory(result.history);
      }
    } catch (error) {
      console.error('Error loading history:', error);
    }
  }

  // Render history list
  function renderHistory(history) {
    if (!history || history.length === 0) {
      historyList.innerHTML = '<p class="empty-message">Keine E-Mails gesendet</p>';
      return;
    }

    historyList.innerHTML = history.map(item => `
      <div class="history-item ${item.status}">
        <div class="history-item-header">
          <span class="history-item-status">
            ${item.status === 'success' ? '✓ Erfolgreich' : '✗ Fehlgeschlagen'}
          </span>
          <button class="delete-btn" onclick="deleteHistoryItem(${item.id})" title="Löschen">✕</button>
        </div>
        <div class="history-item-date">${formatDate(item.created_at)}</div>
        <div class="history-item-to">An: ${escapeHtml(item.to_email)}${item.cc_email ? `, CC: ${escapeHtml(item.cc_email)}` : ''}</div>
        <div class="history-item-subject">Betreff: ${escapeHtml(item.subject)}</div>
        ${item.error_message ? `<div class="history-item-error">Fehler: ${escapeHtml(item.error_message)}</div>` : ''}
      </div>
    `).join('');
  }

  // Delete single history item
  window.deleteHistoryItem = async (id) => {
    try {
      const response = await fetch(`/api/history/${id}`, { method: 'DELETE' });
      const result = await response.json();

      if (result.success) {
        loadHistory();
      }
    } catch (error) {
      console.error('Error deleting item:', error);
    }
  };

  // Show status message
  function showStatus(message, type) {
    status.textContent = message;
    status.className = `status ${type}`;
  }

  // Hide status message
  function hideStatus() {
    status.className = 'status hidden';
  }

  // Format date
  function formatDate(dateStr) {
    const date = new Date(dateStr + 'Z');
    return date.toLocaleString('de-DE', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  }

  // Escape HTML to prevent XSS
  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
});