const SettingsPage = {
  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 = '';
    try {
      const settings = await API.get('/settings/settings');
      const ct = document.getElementById('page-content');
      ct.innerHTML = `
        <div class="card"><div class="card-h">站点设置</div><div class="card-b">
          <form id="site-form">
            <div class="grid-2"><div class="form-group"><label>站点名称</label><input id="s-name" value="${U.esc(settings.site_name?.value||'')}"></div>
            <div class="form-group"><label>站点地址</label><input id="s-url" value="${U.esc(settings.site_url?.value||'')}"></div></div>
            <div class="grid-2"><div class="form-group"><label>页尾版权</label><input id="s-copyright" value="${U.esc(settings.copyright?.value||'')}" placeholder="&copy; 2024 MC举报系统"></div>
            <div class="form-group"><label>ICP备案号</label><input id="s-icp" value="${U.esc(settings.icp?.value||'')}" placeholder="沪ICP备XXXXXXXX号"></div></div>
            <button type="submit" class="btn btn-p btn-sm"><i class="fas fa-save"></i> 保存站点设置</button>
          </form>
        </div></div>

        <div class="card"><div class="card-h">SMTP 邮件设置</div><div class="card-b">
          <form id="smtp-form">
            <div class="grid-2"><div class="form-group"><label>SMTP服务器</label><input id="s-host" value="${U.esc(settings.smtp_host?.value||'')}"></div>
            <div class="form-group"><label>端口</label><input id="s-port" value="${U.esc(settings.smtp_port?.value||'587')}"></div></div>
            <div class="grid-2"><div class="form-group"><label>用户名</label><input id="s-user" value="${U.esc(settings.smtp_user?.value||'')}"></div>
            <div class="form-group"><label>密码</label><input type="password" id="s-pass" value="${U.esc(settings.smtp_pass?.value||'')}"></div></div>
            <div class="grid-2"><div class="form-group"><label>发件地址</label><input id="s-from" value="${U.esc(settings.smtp_from?.value||'')}"></div>
            <div class="form-group"><label>加密方式</label><select id="s-secure"><option value="0" ${settings.smtp_secure?.value!=='1'?'selected':''}>STARTTLS (587)</option><option value="1" ${settings.smtp_secure?.value==='1'?'selected':''}>SSL/TLS (465)</option></select></div></div>
            <button type="submit" class="btn btn-p btn-sm"><i class="fas fa-save"></i> 保存SMTP设置</button>
          </form>
        </div></div>
      `;

      document.getElementById('site-form').onsubmit = async e => {
        e.preventDefault();
        try {
          await API.put('/settings/settings', {
            site_name: {value: document.getElementById('s-name').value, label:'站点名称'},
            site_url: {value: document.getElementById('s-url').value, label:'站点地址'},
            copyright: {value: document.getElementById('s-copyright').value, label:'页尾版权'},
            icp: {value: document.getElementById('s-icp').value, label:'ICP备案号'},
          });
          alert('已保存');
        } catch (ex) { alert(ex.message); }
      };

      document.getElementById('smtp-form').onsubmit = async e => {
        e.preventDefault();
        try {
          await API.put('/settings/settings', {
            smtp_host: {value: document.getElementById('s-host').value, label:'SMTP服务器'},
            smtp_port: {value: document.getElementById('s-port').value, label:'SMTP端口'},
            smtp_secure: {value: document.getElementById('s-secure').value, label:'SSL'},
            smtp_user: {value: document.getElementById('s-user').value, label:'SMTP用户名'},
            smtp_pass: {value: document.getElementById('s-pass').value, label:'SMTP密码'},
            smtp_from: {value: document.getElementById('s-from').value, label:'发件地址'},
          });
          alert('已保存');
        } catch (ex) { alert(ex.message); }
      };
    } catch (e) {
      document.getElementById('page-content').innerHTML = `<div class="alert alert-e">${e.message}</div>`;
    }
  }
};