const TemplatesPage = {
  async render() { return '<div class="loading"><i class="fas fa-spinner"></i></div>'; },

  async mount() {
    document.getElementById('page-title').textContent = '邮件模板';
    document.getElementById('page-actions').innerHTML = '';
    await this.load();
  },

  async load() {
    const ct = document.getElementById('page-content');
    try {
      const templates = await API.get('/settings/email-templates');
      ct.innerHTML = templates.map(t => `
        <div class="card"><div class="card-h"><span>${U.esc(t.name)}</span><code class="ts tm">${t.code}</code></div><div class="card-b">
          <div class="detail-row"><span class="lbl">主题</span><span class="val">${U.esc(t.subject)}</span></div>
          ${t.description ? `<div class="detail-row"><span class="lbl">说明</span><span class="val tm">${U.esc(t.description)}</span></div>` : ''}
          <div class="mt-2"><button class="btn btn-p btn-sm" onclick="TemplatesPage.edit('${U.escJs(t.code)}', '${U.escJs(t.name)}')"><i class="fas fa-edit"></i> 编辑模板</button></div>
        </div></div>
      `).join('');
    } catch (e) { ct.innerHTML = `<div class="alert alert-e">${e.message}</div>`; }
  },

  async edit(code, name) {
    try {
      const t = await API.get(`/settings/email-templates/${code}`);
      U.modal(`编辑: ${name}`, `
        <form id="et-form">
          <div class="form-group"><label>邮件主题</label><input id="et-subject" value="${U.esc(t.subject).replace(/"/g,'&quot;')}" required></div>
          <div class="form-group"><label>邮件正文 (HTML)</label><textarea id="et-body" rows="14" required>${U.esc(t.body).replace(/"/g,'&quot;')}</textarea></div>
          <div class="alert alert-i ts">可用变量: ${t.description?.match(/\{\{[^}]+\}\}/g)?.join(', ') || '{{site_name}}'}</div>
          <div class="modal-f"><button type="button" class="btn btn-o" onclick="App.closeModal()">取消</button><button type="submit" class="btn btn-p">保存</button></div>
        </form>
      `, '800px');
      document.getElementById('et-form').onsubmit = async e => {
        e.preventDefault();
        try {
          await API.put(`/settings/email-templates/${code}`, {
            subject: document.getElementById('et-subject').value,
            body: document.getElementById('et-body').value,
          });
          App.closeModal();
          this.load();
        } catch (ex) { alert(ex.message); }
      };
    } catch (e) { alert(e.message); }
  }
};