<%- 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">✈️ Telegram</h1>
    <p class="text-sm text-slate-500 mt-1">Compose a message and choose which bot(s) send it.</p>
  </div>

  <%- include('../partials/channel-tabs-telegram', { 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="/telegram/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">Bots</h3>
        <% if (bots.length === 0) { %>
          <p class="text-xs text-slate-500 mb-2">No bots available yet.</p>
          <a href="/telegram/bots" class="text-xs font-medium text-brand-600 hover:text-brand-700">Add a bot first →</a>
        <% } else { %>
          <p class="text-xs text-slate-500">Pick one or more below to spread this batch across them.</p>
        <% } %>
      </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="/telegram/send" method="POST" class="space-y-5">
          <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>

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Send using</label>
            <% if (bots.length === 0) { %>
              <p class="text-sm text-slate-400">Link a bot on the Bots tab, or <a href="/requests" class="text-brand-600 font-medium">request a shared one</a>, before sending.</p>
            <% } else { %>
              <div class="space-y-2">
                <% bots.forEach(b => { %>
                  <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="bot_ids" value="<%= b.id %>" class="rounded text-brand-500 focus:ring-brand-500">
                      <span>
                        <span class="block text-sm font-semibold text-slate-800">
                          <%= b.label %>
                          <% if (b.is_global) { %><span class="ml-1 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-brand-100 text-brand-700 rounded">Shared</span><% } %>
                        </span>
                      </span>
                    </span>
                    <span class="text-xs font-semibold <%= b.remaining_today > 0 ? 'text-emerald-600' : 'text-red-500' %>">
                      <%= !Number.isFinite(b.remaining_today) ? 'No daily cap' : `${b.remaining_today} / ${b.is_global ? b.allocation.allocated_limit : b.daily_limit} left today` %><% if (b.is_global) { %> <span class="text-slate-400 font-normal">(your allocation)</span><% } %>
                    </span>
                  </label>
                <% }) %>
              </div>
            <% } %>
          </div>

          <button type="submit" <%= (bots.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>

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