// ─── Domains Module ─────────────────────────────────────────────────
// Domains are only ever acquired as part of a hosting order (see the
// Checkout module in hosting.js) — this page manages domains already
// attached to an existing order (nameservers, registrar info).

const Domains = {
  async render(app) {
    const res = await app.api('domains');
    const domains = res.success && res.data ? res.data.items || [] : [];

    app.$content.innerHTML = `
      <div class="page-header">
        <h1>My Domains</h1>
        <a href="#hosting" data-nav="hosting" class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> Order Hosting + Domain</a>
      </div>
      <div class="card card-flat">
        <div class="table-wrap">
          <table>
            <thead>
              <tr><th>Domain</th><th>Status</th><th>Expiry</th><th></th></tr>
            </thead>
            <tbody>
              ${domains.length ? domains.map(d => `
                <tr>
                  <td><a href="http://${app.escape(d.domain)}" target="_blank">${app.escape(d.domain)}</a></td>
                  <td><span class="${d.status === 'Active' ? 'badge badge-active' : 'badge badge-pending'}">${d.status}</span></td>
                  <td>${d.exdate ? d.exdate.slice(0,10) : '-'}</td>
                  <td><button class="btn btn-sm btn-secondary" onclick="Domains.nsEditor(${d.id})">Nameservers</button></td>
                </tr>
              `).join('') : '<tr><td colspan="4" class="text-center">No domains found. Domains come bundled with a hosting order.</td></tr>'}
            </tbody>
          </table>
        </div>
      </div>
    `;
  },

  async nsEditor(oid) {
    const app = App;
    app.showLoading();
    const res = await app.api(`domains/info&oid=${oid}`);
    if (!res.success) { app.$content.innerHTML = '<div class="empty"><i class="fas fa-globe"></i><p>Domain not found</p></div>'; return; }
    const d = res.data;

    app.$content.innerHTML = `
      <div class="page-header">
        <h1>Nameservers — ${app.escape(d.domain)}</h1>
        <a href="#domains" data-nav="domains" class="btn btn-secondary btn-sm">Back</a>
      </div>
      <div class="card">
        <div class="card-body">
          <form id="ns-form">
            <div class="form-row">
              <div class="form-group">
                <label>Nameserver 1</label>
                <input type="text" name="ns1" class="form-control" value="${app.escape(d.ns1 || '')}" placeholder="ns1.example.com" required>
              </div>
              <div class="form-group">
                <label>Nameserver 2</label>
                <input type="text" name="ns2" class="form-control" value="${app.escape(d.ns2 || '')}" placeholder="ns2.example.com" required>
              </div>
            </div>
            <button type="submit" class="btn btn-primary">Save Changes</button>
          </form>
        </div>
      </div>
    `;
    document.getElementById('ns-form').onsubmit = async (e) => {
      e.preventDefault();
      const fd = new FormData(e.target);
      const data = { oid, ns1: fd.get('ns1'), ns2: fd.get('ns2') };
      const r = await app.api('domains/nameservers', 'POST', data);
      app.showMessage(r.message || (r.success ? 'Updated.' : 'Failed.'), r.success ? 'success' : 'danger');
    };
  }
};
