<%- 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">

  <!-- Page Header -->
  <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 pb-6 border-b border-sky-100">
    <div>
      <h1 class="text-3xl font-bold text-slate-900">Launch Campaign</h1>
      <p class="text-sm text-slate-500 mt-1">Send a bulk message to your imported audience across any channel.</p>
    </div>
    <div class="mt-4 md:mt-0">
      <a href="/dashboard" class="inline-flex items-center px-4 py-2 text-sm font-semibold text-slate-700 bg-white border border-slate-200 hover:bg-slate-50 rounded-xl shadow-sm transition">
        ← Back to Dashboard
      </a>
    </div>
  </div>

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

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left: Channel access reference -->
    <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">Your Channels</h3>
        <p class="text-xs text-slate-500 mb-4">Only channels enabled by your admin can be used to send.</p>
        <div class="space-y-2">
          <div class="flex items-center justify-between px-3 py-2 rounded-lg <%= user.email_access ? 'bg-emerald-50 border border-emerald-200' : 'bg-slate-50 border border-slate-200' %>">
            <span class="text-sm font-medium text-slate-700">✉️ Email</span>
            <span class="text-xs font-semibold <%= user.email_access ? 'text-emerald-700' : 'text-slate-400' %>"><%= user.email_access ? 'Enabled' : 'Disabled' %></span>
          </div>
          <div class="flex items-center justify-between px-3 py-2 rounded-lg <%= user.sms_access ? 'bg-emerald-50 border border-emerald-200' : 'bg-slate-50 border border-slate-200' %>">
            <span class="text-sm font-medium text-slate-700">💬 SMS</span>
            <span class="text-xs font-semibold <%= user.sms_access ? 'text-emerald-700' : 'text-slate-400' %>"><%= user.sms_access ? 'Enabled' : 'Disabled' %></span>
          </div>
          <div class="flex items-center justify-between px-3 py-2 rounded-lg <%= user.whatsapp_access ? 'bg-emerald-50 border border-emerald-200' : 'bg-slate-50 border border-slate-200' %>">
            <span class="text-sm font-medium text-slate-700">📱 WhatsApp</span>
            <span class="text-xs font-semibold <%= user.whatsapp_access ? 'text-emerald-700' : 'text-slate-400' %>"><%= user.whatsapp_access ? 'Enabled' : 'Disabled' %></span>
          </div>
          <div class="flex items-center justify-between px-3 py-2 rounded-lg <%= user.telegram_access ? 'bg-emerald-50 border border-emerald-200' : 'bg-slate-50 border border-slate-200' %>">
            <span class="text-sm font-medium text-slate-700">✈️ Telegram</span>
            <span class="text-xs font-semibold <%= user.telegram_access ? 'text-emerald-700' : 'text-slate-400' %>"><%= user.telegram_access ? 'Enabled' : 'Disabled' %></span>
          </div>
        </div>
        <p class="text-xs text-slate-400 mt-4">Messages go out to every contact in your audience that has a value in the matching field (email / phone / telegram_id).</p>
      </div>
    </div>

    <!-- Right: Compose form -->
    <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="/send-campaign" method="POST" class="space-y-5" id="campaign-form">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Channel</label>
            <select name="channel" id="channel-select" required class="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 text-sm">
              <option value="email" <%= !user.email_access ? 'disabled' : '' %>>✉️ Email <%= !user.email_access ? '(disabled)' : '' %></option>
              <option value="sms" <%= !user.sms_access ? 'disabled' : '' %>>💬 SMS <%= !user.sms_access ? '(disabled)' : '' %></option>
              <option value="whatsapp" <%= !user.whatsapp_access ? 'disabled' : '' %>>📱 WhatsApp <%= !user.whatsapp_access ? '(disabled)' : '' %></option>
              <option value="telegram" <%= !user.telegram_access ? 'disabled' : '' %>>✈️ Telegram <%= !user.telegram_access ? '(disabled)' : '' %></option>
            </select>
          </div>

          <div id="subject-field">
            <label class="block text-sm font-medium text-slate-700 mb-1">Subject <span class="text-slate-400 font-normal">(email only)</span></label>
            <input type="text" name="subject" placeholder="Your campaign subject line" 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-1">Message</label>
            <textarea name="message" required rows="6" placeholder="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"></textarea>
          </div>

          <button type="submit" 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">
            🚀 Send Campaign
          </button>
        </form>
      </div>
    </div>

  </div>
</main>

<script>
  const channelSelect = document.getElementById('channel-select');
  const subjectField = document.getElementById('subject-field');
  function toggleSubject() {
    subjectField.style.display = channelSelect.value === 'email' ? 'block' : 'none';
  }
  channelSelect.addEventListener('change', toggleSubject);
  toggleSubject();
</script>

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