import { app } from '../router.js';
import { showToast } from '../api.js';

export async function renderSettings() {
  app.innerHTML = `
    <div class="page-header">
      <h2>Settings</h2>
    </div>

    <div class="settings-section">
      <h3 class="settings-section-title">Data Retention</h3>
      <p class="settings-section-desc">Delete events older than the specified number of days. This runs automatically every 24 hours. Currently configured via <code>RETENTION_DAYS</code> environment variable (default: 30 days).</p>
      <div class="settings-row">
        <label class="settings-label" for="retention-days">Purge events older than</label>
        <div class="settings-input-group">
          <input type="number" id="retention-days" class="settings-input" min="1" max="365" value="30">
          <span class="settings-input-suffix">days</span>
          <button class="settings-btn" id="run-retention-btn" type="button">Run Now</button>
        </div>
      </div>
      <div id="retention-result" class="settings-result"></div>
    </div>
  `;

  document.getElementById('run-retention-btn')?.addEventListener('click', async () => {
    const days = parseInt(document.getElementById('retention-days').value, 10);
    if (!days || days < 1) { showToast('Enter a valid number of days', 'error'); return; }
    const btn = document.getElementById('run-retention-btn');
    btn.disabled = true;
    btn.textContent = 'Running…';
    try {
      const resp = await fetch('/api/v1/admin/retention', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ days }),
      });
      const data = await resp.json();
      if (!resp.ok) throw new Error(data.error || 'Request failed');
      const result = document.getElementById('retention-result');
      if (result) result.innerHTML = `<span class="settings-result-ok">Deleted ${data.deleted} events older than ${new Date(data.cutoff).toLocaleDateString()}.</span>`;
      showToast(`Deleted ${data.deleted} events`, 'success');
    } catch (e) {
      showToast('Retention failed: ' + e.message, 'error');
    } finally {
      btn.disabled = false;
      btn.textContent = 'Run Now';
    }
  });
}