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');
  const assetGrid = document.getElementById('assetGrid');

  // Load history and assets on page load
  loadHistory();
  loadAssets();

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

    const formData = new FormData(form);
    const selectedAssets = Array.from(
      document.querySelectorAll('input[name="footerAssets"]:checked')
    ).map(cb => cb.value);

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

    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);
    }
  }

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

      if (result.success) {
        renderAssetGrid(result.assets);
      } else {
        assetGrid.innerHTML = '<p class="empty-message">Fehler beim Laden der Assets</p>';
      }
    } catch (error) {
      console.error('Error loading assets:', error);
      assetGrid.innerHTML = '<p class="empty-message">Fehler beim Laden der Assets</p>';
    }
  }

  // Render asset grid
  function renderAssetGrid(assets) {
    if (!assets || assets.length === 0) {
      assetGrid.innerHTML = '<p class="empty-message">Keine Assets verfügbar</p>';
      return;
    }

    assetGrid.innerHTML = assets.map(filename => {
      const name = filename.replace(/\.[^.]+$/, '');
      return `
        <label class="asset-item">
          <input type="checkbox" name="footerAssets" value="${filename}">
          <img src="/assets/${filename}" alt="${name}">
          <span class="asset-name">${name}</span>
        </label>
      `;
    }).join('');
  }

  // 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;
  }
});