<%- 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">Manage your Telegram audience and send campaigns via bot.</p>
  </div>

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

  <% if (typeof message !== 'undefined' && message) { %>
    <div class="mb-6 bg-emerald-50 border border-emerald-200 text-emerald-700 px-4 py-3 rounded-lg text-sm"><%= message %></div>
  <% } %>
  <% if (typeof error !== 'undefined' && error) { %>
    <div class="mb-6 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg text-sm"><%= error %></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">Import Contacts</h3>
        <p class="text-xs text-slate-500 mb-1">CSV headers: <code class="bg-slate-100 px-1.5 py-0.5 rounded text-brand-600">name,telegram_id</code></p>
        <a href="/telegram/contacts/sample" class="inline-flex items-center gap-1 text-xs font-medium text-brand-600 hover:text-brand-700 mb-4">⬇ Download sample CSV</a>

        <form action="/telegram/contacts/import" method="POST" enctype="multipart/form-data" class="space-y-4">
          <div class="border-2 border-dashed border-sky-200 hover:border-brand-400 bg-brand-50/30 hover:bg-brand-50/60 rounded-xl p-6 text-center transition cursor-pointer relative">
            <input type="file" name="csv" accept=".csv" required class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" id="csv-input" onchange="document.getElementById('file-name').textContent = this.files[0]?.name || ''">
            <div class="w-10 h-10 bg-brand-100 text-brand-600 rounded-full flex items-center justify-center mx-auto mb-2 text-lg">📁</div>
            <p class="text-xs font-medium text-slate-700">Click to choose CSV file</p>
            <p id="file-name" class="text-xs font-semibold text-brand-600 mt-2 truncate"></p>
          </div>
          <button type="submit" class="w-full py-2.5 px-4 text-sm font-semibold text-white bg-brand-500 hover:bg-brand-600 rounded-xl shadow-sm transition">Upload & Save Contacts</button>
        </form>
      </div>
    </div>

    <div class="lg:col-span-2">
      <div class="bg-white rounded-2xl border border-sky-100 shadow-sm overflow-hidden">
        <div class="p-6 border-b border-sky-100 flex justify-between items-center">
          <div>
            <h3 class="text-lg font-bold text-slate-900">Telegram Audience</h3>
            <p class="text-xs text-slate-500 mt-0.5">Total: <span class="font-bold text-brand-600"><%= contacts.length %></span></p>
          </div>
          <div class="flex items-center gap-2">
            <% if (contacts.length > 0) { %>
              <form action="/telegram/contacts/delete-all" method="POST" onsubmit="return confirm('Delete the ENTIRE list (' + <%= contacts.length %> + ' contacts)? This cannot be undone. Messages still queued for them will be marked failed.');">
                <button type="submit" class="px-3 py-2 text-sm font-semibold text-red-600 border border-red-200 hover:bg-red-50 rounded-xl transition">🗑 Delete entire list</button>
              </form>
            <% } %>
            <a href="/telegram/send" class="px-4 py-2 text-sm font-semibold text-white bg-brand-500 hover:bg-brand-600 rounded-xl shadow-sm transition">🚀 Send Campaign</a>
          </div>
        </div>

        <% if (contacts.length === 0) { %>
          <div class="p-12 text-center text-slate-400">
            <p class="text-4xl mb-2">📋</p>
            <p class="text-sm">No Telegram contacts imported yet. Upload a CSV to get started.</p>
          </div>
        <% } else { %>
          <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
              <thead>
                <tr class="bg-slate-50 text-xs font-semibold text-slate-500 border-b border-sky-100">
                  <th class="py-3 px-4">Name</th>
                  <th class="py-3 px-4">Telegram ID</th>
                  <th class="py-3 px-4"></th>
                </tr>
              </thead>
              <tbody class="divide-y divide-sky-50 text-sm">
                <% contacts.forEach(c => { %>
                  <tr class="hover:bg-brand-50/30 transition">
                    <td class="py-3 px-4 font-medium text-slate-800"><%= c.name || '-' %></td>
                    <td class="py-3 px-4 text-slate-600"><%= c.telegram_id %></td>
                    <td class="py-3 px-4 text-right">
                      <div class="flex items-center justify-end gap-3">
                        <button type="button" class="edit-contact text-xs font-medium text-brand-600 hover:text-brand-700" data-id="<%= c.id %>" data-name="<%= c.name || '' %>" data-value="<%= c.telegram_id %>">Edit</button>
                        <form action="/telegram/contacts/<%= c.id %>/delete" method="POST" onsubmit="return confirm('Remove this contact?');">
                          <button type="submit" class="text-xs font-medium text-red-500 hover:text-red-600">Remove</button>
                        </form>
                      </div>
                    </td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        <% } %>
      </div>
    </div>
  </div>
</main>

<%- include('../partials/contact-edit-modal', { channel: 'telegram', field: 'telegram_id', fieldLabel: 'Telegram ID', hasExtra: false }) %>

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