const app = document.getElementById('app');
const state = { user: null, domains: [], selectedDomain: null, mailboxes: [], audit: [], message: '', error: '' };

async function api(path, options = {}) {
  const res = await fetch(path, { credentials: 'include', headers: { 'Content-Type': 'application/json', ...(options.headers || {}) }, ...options });
  if (!res.ok) {
    const body = await res.json().catch(() => ({}));
    throw new Error(body.error || `HTTP ${res.status}`);
  }
  return res.json();
}

function bytes(n) {
  n = Number(n || 0);
  if (n <= 0) return '0 B';
  const u = ['B','KB','MB','GB','TB']; let i = 0;
  while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
  return `${n.toFixed(n >= 10 || i === 0 ? 0 : 1)} ${u[i]}`;
}

function esc(s) { return String(s ?? '').replace(/[&<>'"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[c])); }

async function init() {
  try { state.user = await api('/api/auth/me'); await loadDomains(true); }
  catch { state.user = null; }
  render();
}

async function loadDomains(resync = false) {
  state.domains = await api(`/api/domains${resync ? '?resync=true' : ''}`);
  if (!state.selectedDomain && state.domains.length) state.selectedDomain = state.domains[0].domain;
  if (state.selectedDomain) await loadMailboxes();
}

async function loadMailboxes() {
  state.mailboxes = await api(`/api/mailboxes?domain=${encodeURIComponent(state.selectedDomain)}`);
}

async function loadAudit() {
  state.audit = await api('/api/audit');
  renderAuditModal();
}

function render() {
  if (!state.user) return renderLogin();
  app.innerHTML = `
    <div class="header">
      <div><div class="brand">MailAdmin</div><div class="muted">${esc(state.user.email)} · ${esc(state.user.role)}</div></div>
      <div class="actions">
        <button class="secondary" id="auditBtn">Audit Log</button>
        <button class="secondary" id="resyncBtn">DMS Resync</button>
        <button class="ghost" id="logoutBtn">Logout</button>
      </div>
    </div>
    <div class="container">
      ${state.error ? `<div class="error">${esc(state.error)}</div>` : ''}
      ${state.message ? `<div class="success">${esc(state.message)}</div>` : ''}
      <div class="grid">
        <section class="card">
          <h2>Domains on this node</h2>
          <div class="muted" style="margin-bottom:12px">Domains are discovered dynamically from DMS accounts.</div>
          <div class="list">
            ${state.domains.map(d => `
              <div class="list-item ${d.domain === state.selectedDomain ? 'active' : ''}" data-domain="${esc(d.domain)}">
                <strong>${esc(d.domain)}</strong><br>
                <span class="muted">${d.active_mailboxes || 0} inboxes · ${bytes(d.used_bytes)}</span><br>
                <span class="pill">${esc(d.current_node)}</span> <span class="pill">${esc(d.status)}</span>
              </div>`).join('') || '<div class="muted">No domains found yet.</div>'}
          </div>
        </section>
        <section class="card">
          <div style="display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px">
            <div><h2 style="margin:0">${esc(state.selectedDomain || 'Mailboxes')}</h2><div class="muted">Create/delete mailboxes, reset passwords, edit rules.</div></div>
            <div class="actions"><button id="newMailboxBtn">New mailbox</button><button class="secondary" id="usageBtn">Scan usage</button></div>
          </div>
          <table class="table">
            <thead><tr><th>Email</th><th>Status</th><th>Usage</th><th>Updated</th><th>Actions</th></tr></thead>
            <tbody>
              ${state.mailboxes.map(m => `
                <tr>
                  <td><strong>${esc(m.email_address)}</strong><div class="muted">${esc(m.node_name)}</div></td>
                  <td><span class="pill">${esc(m.status)}</span></td>
                  <td>${bytes(m.used_bytes)}<div class="muted">${m.usage_scanned_at ? new Date(m.usage_scanned_at).toLocaleString() : 'not scanned'}</div></td>
                  <td class="muted">${new Date(m.updated_at).toLocaleString()}</td>
                  <td><div class="actions">
                    <button class="secondary" data-rules="${esc(m.email_address)}">Rules</button>
                    <button class="secondary" data-blocks="${esc(m.email_address)}">Blocklist</button>
                    <button class="secondary" data-password="${esc(m.email_address)}">Password</button>
                    <button class="danger" data-delete="${esc(m.email_address)}">Delete</button>
                  </div></td>
                </tr>`).join('') || '<tr><td colspan="5" class="muted">No mailboxes for this domain.</td></tr>'}
            </tbody>
          </table>
        </section>
      </div>
    </div>`;

  document.getElementById('logoutBtn').onclick = async () => { await api('/api/auth/logout', { method:'POST' }); state.user = null; render(); };
  document.getElementById('resyncBtn').onclick = guard(async () => { await api('/api/domains/resync', { method:'POST' }); await loadDomains(false); state.message = 'DMS sync completed.'; render(); });
  document.getElementById('auditBtn').onclick = guard(loadAudit);
  document.getElementById('newMailboxBtn').onclick = renderCreateMailboxModal;
  document.getElementById('usageBtn').onclick = guard(async () => { await api('/api/mailboxes/usage/rescan', { method:'POST', body: JSON.stringify({ domain: state.selectedDomain }) }); await loadMailboxes(); render(); });
  document.querySelectorAll('[data-domain]').forEach(el => el.onclick = guard(async () => { state.selectedDomain = el.dataset.domain; await loadMailboxes(); render(); }));
  document.querySelectorAll('[data-delete]').forEach(el => el.onclick = () => renderDeleteModal(el.dataset.delete));
  document.querySelectorAll('[data-password]').forEach(el => el.onclick = () => renderPasswordModal(el.dataset.password));
  document.querySelectorAll('[data-rules]').forEach(el => el.onclick = () => renderRulesModal(el.dataset.rules));
  document.querySelectorAll('[data-blocks]').forEach(el => el.onclick = () => renderBlocklistModal(el.dataset.blocks));
}

function renderLogin() {
  app.innerHTML = `<div class="login"><div class="card"><h2>MailAdmin Login</h2>${state.error ? `<div class="error">${esc(state.error)}</div>` : ''}<form id="loginForm"><label>Email<br><input name="email" type="email" required></label><br><br><label>Password<br><input name="password" type="password" required></label><br><br><button>Login</button></form></div></div>`;
  document.getElementById('loginForm').onsubmit = guard(async e => {
    e.preventDefault(); const f = new FormData(e.target);
    state.user = await api('/api/auth/login', { method:'POST', body: JSON.stringify({ email: f.get('email'), password: f.get('password') }) });
    await loadDomains(true); render();
  });
}

function modal(html) {
  const div = document.createElement('div');
  div.className = 'modal-backdrop';
  div.innerHTML = `<div class="card modal">${html}<div style="margin-top:14px"><button class="ghost" data-close>Close</button></div></div>`;
  document.body.appendChild(div);
  div.querySelector('[data-close]').onclick = () => div.remove();
  div.onclick = e => { if (e.target === div) div.remove(); };
  return div;
}

function renderCreateMailboxModal() {
  const d = modal(`<h2>New mailbox</h2><form id="createForm" class="form-grid"><label>Email<input name="email" type="email" value="@${esc(state.selectedDomain || '')}" required></label><label>Password<input name="password" type="password" minlength="8" required></label><div><button>Create</button></div></form>`);
  d.querySelector('#createForm').onsubmit = guard(async e => { e.preventDefault(); const f = new FormData(e.target); await api('/api/mailboxes', { method:'POST', body: JSON.stringify({ email:f.get('email'), password:f.get('password') }) }); d.remove(); await loadDomains(false); render(); });
}

function renderDeleteModal(email) {
  const d = modal(`<h2>Delete mailbox</h2><p>Delete <strong>${esc(email)}</strong> from DMS?</p><button class="danger" id="confirmDelete">Delete</button>`);
  d.querySelector('#confirmDelete').onclick = guard(async () => { await api(`/api/mailboxes/${encodeURIComponent(email)}`, { method:'DELETE' }); d.remove(); await loadMailboxes(); render(); });
}

function renderPasswordModal(email) {
  const d = modal(`<h2>Reset password</h2><form id="pwForm"><label>New password<input name="password" type="password" minlength="8" required></label><br><br><button>Update password</button></form>`);
  d.querySelector('#pwForm').onsubmit = guard(async e => { e.preventDefault(); const f = new FormData(e.target); await api(`/api/mailboxes/${encodeURIComponent(email)}/password`, { method:'POST', body: JSON.stringify({ password:f.get('password') }) }); d.remove(); state.message = `Password updated for ${email}.`; render(); });
}

async function renderRulesModal(email) {
  const rules = await api(`/api/mailboxes/${encodeURIComponent(email)}/rules`);
  const d = modal(`<h2>Rules for ${esc(email)}</h2><form id="rulesForm"><label><input type="checkbox" name="ooo_active" ${rules.ooo_active ? 'checked' : ''} style="width:auto"> Auto reply active</label><br><br><label>Auto reply message<textarea name="ooo_message">${esc(rules.ooo_message || '')}</textarea></label><br><br><label>Forwards, one email per line<textarea name="forwards">${esc((rules.forwards || []).join('\n'))}</textarea></label><br><br><button>Save rules</button></form>`);
  d.querySelector('#rulesForm').onsubmit = guard(async e => { e.preventDefault(); const f = new FormData(e.target); await api(`/api/mailboxes/${encodeURIComponent(email)}/rules`, { method:'PUT', body: JSON.stringify({ ooo_active: !!f.get('ooo_active'), ooo_message:f.get('ooo_message'), forwards:String(f.get('forwards')||'').split(/\n|,/).map(x=>x.trim()).filter(Boolean) }) }); d.remove(); });
}

async function renderBlocklistModal(email) {
  const block = await api(`/api/mailboxes/${encodeURIComponent(email)}/blocklist`);
  const d = modal(`<h2>Blocklist for ${esc(email)}</h2><form id="blockForm"><label>Patterns, one per line<br><span class="muted">Examples: spam@example.com, *@bad-domain.com</span><textarea name="blocked_patterns">${esc((block.blocked_patterns || []).join('\n'))}</textarea></label><br><br><button>Save blocklist</button></form>`);
  d.querySelector('#blockForm').onsubmit = guard(async e => { e.preventDefault(); const f = new FormData(e.target); await api(`/api/mailboxes/${encodeURIComponent(email)}/blocklist`, { method:'PUT', body: JSON.stringify({ blocked_patterns:String(f.get('blocked_patterns')||'').split('\n').map(x=>x.trim()).filter(Boolean) }) }); d.remove(); });
}

function renderAuditModal() {
  modal(`<h2>Audit Log</h2><table class="table"><thead><tr><th>Time</th><th>Actor</th><th>Action</th><th>Target</th></tr></thead><tbody>${state.audit.map(a => `<tr><td class="muted">${new Date(a.created_at).toLocaleString()}</td><td>${esc(a.actor_email)}</td><td>${esc(a.action)}</td><td>${esc(a.target_id)}</td></tr>`).join('')}</tbody></table>`);
}

function guard(fn) { return async function(...args) { try { state.error=''; state.message=''; await fn.apply(this,args); } catch(e) { state.error = e.message; render(); } }; }

init();