<%- include('../partials/header') %>
<%- include('../partials/nav') %>

<main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="mb-2">
    <h1 class="text-3xl font-bold text-slate-900">✉️ Email</h1>
    <p class="text-sm text-slate-500 mt-1">Compose a message and choose which servers send it.</p>
  </div>

  <%- include('../partials/channel-tabs-email', { active: 'send' }) %>

  <% if (error) { %>
    <div class="mb-6 px-4 py-3 rounded-lg text-sm border bg-red-50 border-red-200 text-red-600"><%= error %></div>
  <% } %>
  <% if (message) { %>
    <div class="mb-6 px-4 py-3 rounded-lg text-sm border bg-emerald-50 border-emerald-200 text-emerald-700"><%= message %></div>
  <% } %>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <div class="lg:col-span-1">
      <div class="bg-white rounded-2xl border border-sky-100 shadow-sm p-6 sticky top-24">
        <h3 class="text-lg font-bold text-slate-900 mb-1">Audience</h3>
        <p class="text-sm text-slate-600 mb-4"><span class="font-bold text-brand-600"><%= recipientCount %></span> contact<%= recipientCount === 1 ? '' : 's' %> will receive this campaign.</p>
        <% if (recipientCount === 0) { %>
          <a href="/email/contacts" class="text-xs font-medium text-brand-600 hover:text-brand-700">Import contacts first →</a>
        <% } %>

        <h3 class="text-lg font-bold text-slate-900 mt-6 mb-1">Servers</h3>
        <% if (servers.length === 0) { %>
          <p class="text-xs text-slate-500 mb-2">No SMTP servers available to you yet.</p>
          <a href="/email/servers" class="block text-xs font-medium text-brand-600 hover:text-brand-700">Add your own server →</a>
          <a href="/requests" class="block text-xs font-medium text-brand-600 hover:text-brand-700 mt-1">Request a shared server →</a>
        <% } else { %>
          <p class="text-xs text-slate-500">Pick one or more below to spread this batch across them.</p>
          <a href="/requests" class="block text-xs font-medium text-brand-600 hover:text-brand-700 mt-2">Need more capacity? Request access →</a>
        <% } %>
      </div>
    </div>

    <div class="lg:col-span-2">
      <div class="bg-white rounded-2xl border border-sky-100 shadow-sm p-6">
        <h3 class="text-lg font-bold text-slate-900 mb-4">Compose Message</h3>

        <form action="/email/send" method="POST" class="space-y-5">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Subject</label>
            <input type="text" name="subject" value="<%= form.subject || '' %>" placeholder="Hi {{name}}, ..." class="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-lg shadow-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 text-sm">
          </div>

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Format</label>
            <div class="inline-flex rounded-lg border border-slate-300 overflow-hidden text-sm">
              <label class="px-4 py-1.5 cursor-pointer has-[:checked]:bg-brand-500 has-[:checked]:text-white">
                <input type="radio" name="format" value="text" class="sr-only" <%= form.format === 'html' ? '' : 'checked' %>> Plain text
              </label>
              <label class="px-4 py-1.5 cursor-pointer border-l border-slate-300 has-[:checked]:bg-brand-500 has-[:checked]:text-white">
                <input type="radio" name="format" value="html" class="sr-only" <%= form.format === 'html' ? 'checked' : '' %>> HTML
              </label>
            </div>
          </div>

          <div>
            <div class="flex items-center justify-between gap-3 flex-wrap">
              <label class="block text-sm font-medium text-slate-700">Message</label>
              <div class="flex items-center gap-2 text-xs">
                <label id="html-tools" class="px-3 py-1 rounded-lg border border-slate-300 text-slate-700 hover:border-brand-400 cursor-pointer">
                  📎 Attach .html file
                  <input type="file" id="html-file" accept=".html,.htm,text/html" class="sr-only">
                </label>
                <button type="button" id="preview-btn" class="px-3 py-1 rounded-lg bg-brand-500 text-white font-semibold hover:bg-brand-600">👁 Preview</button>
              </div>
            </div>
            <textarea id="message" name="message" required rows="10" placeholder="Hi {{name}}, write your campaign message here..." class="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-lg shadow-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 text-sm font-mono"><%= form.message || '' %></textarea>
            <p class="mt-2 text-xs text-slate-500">
              Personalize with placeholders — each is swapped for that contact's own value when sent:
              <% placeholders.forEach(function(p, i) { %><code class="bg-slate-100 px-1.5 py-0.5 rounded text-brand-600">{{<%= p %>}}</code><%= i < placeholders.length - 1 ? ' ' : '' %><% }) %>
              <% if (placeholders.length <= 2) { %> &middot; import a CSV with extra columns (e.g. <code class="bg-slate-100 px-1.5 py-0.5 rounded text-brand-600">company</code>) to unlock more.<% } %>
            </p>
            <p id="html-hint" class="mt-1 text-xs text-slate-500">In HTML mode, paste your template or attach an .html file. Use inline styles and absolute image URLs (https://…) so it renders in every inbox.</p>
          </div>

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Send using</label>
            <% if (servers.length === 0) { %>
              <p class="text-sm text-slate-400">Link an SMTP server on the Servers tab before sending.</p>
            <% } else { %>
              <div class="space-y-2">
                <% servers.forEach(s => { %>
                  <label class="flex items-center justify-between px-4 py-3 rounded-xl border border-slate-200 hover:border-brand-300 cursor-pointer transition">
                    <span class="flex items-center gap-3">
                      <input type="checkbox" name="server_ids" value="<%= s.id %>" class="rounded text-brand-500 focus:ring-brand-500">
                      <span>
                        <span class="block text-sm font-semibold text-slate-800"><%= s.label %></span>
                        <span class="block text-xs text-slate-500"><%= s.host %></span>
                      </span>
                    </span>
                    <span class="text-xs font-semibold <%= s.remaining_today > 0 ? 'text-emerald-600' : 'text-red-500' %>">
                      <%= s.remaining_today %> / <%= s.is_shared ? s.allocation.allocated_limit : s.daily_limit %> left today<% if (s.is_shared) { %> <span class="text-slate-400 font-normal">(your allocation)</span><% } %>
                    </span>
                  </label>
                <% }) %>
              </div>
            <% } %>
          </div>

          <button type="submit" <%= (servers.length === 0 || recipientCount === 0) ? 'disabled' : '' %> class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-brand-500 hover:bg-brand-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 transition disabled:opacity-40 disabled:cursor-not-allowed">
            🚀 Queue Campaign
          </button>
        </form>
      </div>
    </div>
  </div>
</main>


<dialog id="preview-dialog" class="rounded-2xl p-0 w-[min(56rem,94vw)] shadow-2xl backdrop:bg-black/50">
  <div class="flex items-center justify-between px-5 py-3 border-b border-slate-200">
    <div>
      <h3 class="text-base font-bold text-slate-900">Email preview</h3>
      <p class="text-xs text-slate-500">Shown with sample values (name “Jane Doe”). Real contacts get their own data.</p>
    </div>
    <button type="button" id="preview-close" class="text-slate-400 hover:text-slate-600 text-2xl leading-none" aria-label="Close preview">&times;</button>
  </div>
  <div class="px-5 py-3 border-b border-slate-100 bg-slate-50 text-sm">
    <span class="text-slate-400">Subject:</span> <span id="preview-subject" class="font-semibold text-slate-800"></span>
  </div>
  <div class="p-4 bg-slate-100">
    <iframe id="preview-frame" sandbox="" class="w-full h-[60vh] rounded-lg bg-white border border-slate-200"></iframe>
  </div>
</dialog>

<script>
  (function () {
    var radios = document.querySelectorAll('input[name="format"]');
    var tools = document.getElementById('html-tools');
    var hint = document.getElementById('html-hint');
    var msg = document.getElementById('message');
    var subject = document.querySelector('input[name="subject"]');
    var dialog = document.getElementById('preview-dialog');
    var frame = document.getElementById('preview-frame');

    function isHtml() { return document.querySelector('input[name="format"]:checked').value === 'html'; }
    function sync() {
      tools.style.display = isHtml() ? '' : 'none';
      hint.style.display = isHtml() ? '' : 'none';
    }
    radios.forEach(function (r) { r.addEventListener('change', sync); });
    sync();

    document.getElementById('html-file').addEventListener('change', function (e) {
      var file = e.target.files[0];
      if (!file) return;
      var reader = new FileReader();
      reader.onload = function () { msg.value = reader.result; };
      reader.readAsText(file);
    });

    // Fill {{placeholders}} with sample data so the preview reads like a real email.
    function fill(text, escape) {
      var samples = { name: 'Jane Doe', email: 'jane@example.com' };
      return text.replace(/\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g, function (m, key) {
        var v = samples[key] !== undefined ? samples[key] : '[' + key + ']';
        return escape ? v.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') : v;
      });
    }
    function escapeText(t) { return t.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }

    document.getElementById('preview-btn').addEventListener('click', function () {
      if (!msg.value.trim()) { msg.focus(); msg.classList.add('ring-2', 'ring-red-400'); setTimeout(function () { msg.classList.remove('ring-2', 'ring-red-400'); }, 1200); return; }
      document.getElementById('preview-subject').textContent = fill(subject.value || '(no subject)', false);
      if (isHtml()) {
        frame.srcdoc = fill(msg.value, true);
      } else {
        frame.srcdoc = '<pre style="font-family:system-ui,sans-serif;white-space:pre-wrap;margin:0;padding:24px;font-size:15px;line-height:1.6">' + escapeText(fill(msg.value, false)) + '</pre>';
      }
      dialog.showModal();
    });
    document.getElementById('preview-close').addEventListener('click', function () { dialog.close(); });
    dialog.addEventListener('click', function (e) { if (e.target === dialog) dialog.close(); });
  })();
</script>

<%- include('../partials/footer') %>
