<%- include('partials/header', { title: 'Contacts', heading: 'Contacts', active: '/contacts' }) %>

<div class="grid lg:grid-cols-3 gap-6">
  <!-- Add / import -->
  <div class="space-y-6">
    <div class="bg-white rounded-2xl shadow p-5">
      <h2 class="font-semibold mb-3">Add contact</h2>
      <div class="space-y-2 text-sm">
        <input id="c_name" placeholder="Name" class="w-full rounded-lg border border-slate-300 px-3 py-2" />
        <input id="c_phone" placeholder="Phone (e.g. 08123… or +62…)" class="w-full rounded-lg border border-slate-300 px-3 py-2" />
        <input id="c_group" placeholder="Group (optional)" class="w-full rounded-lg border border-slate-300 px-3 py-2" />
        <button onclick="addContact()" class="w-full bg-emerald-600 text-white rounded-lg py-2">Add</button>
      </div>
    </div>

    <div class="bg-white rounded-2xl shadow p-5">
      <h2 class="font-semibold mb-3">Import CSV / Excel</h2>
      <p class="text-xs text-slate-500 mb-2">Columns: <code>phone</code> (required), <code>name</code>, <code>group</code>, plus any extras used as <code>{variables}</code>.</p>
      <form id="importForm" enctype="multipart/form-data">
        <input type="file" name="file" accept=".csv,.xlsx,.xls" class="text-sm mb-2" required />
        <button class="w-full bg-sky-600 text-white rounded-lg py-2 text-sm">Upload &amp; import</button>
      </form>
      <p id="importResult" class="text-xs mt-2 text-slate-600"></p>
    </div>
  </div>

  <!-- List -->
  <div class="lg:col-span-2 bg-white rounded-2xl shadow p-5">
    <h2 class="font-semibold mb-3">All contacts (<%= contacts.length %>)</h2>
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="text-left text-slate-500 border-b">
          <tr><th class="py-2">Name</th><th>Phone</th><th>Group</th><th></th></tr>
        </thead>
        <tbody>
          <% contacts.forEach((c) => { %>
            <tr class="border-b last:border-0">
              <td class="py-2"><%= c.name || '—' %></td>
              <td><%= c.phone %></td>
              <td><%= c.group || '—' %></td>
              <td class="text-right"><button onclick="delContact(<%= c.id %>)" class="text-rose-500 hover:underline">Delete</button></td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
  async function addContact() {
    const body = {
      name: document.getElementById('c_name').value,
      phone: document.getElementById('c_phone').value,
      group: document.getElementById('c_group').value,
    };
    const r = await fetch('/contacts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
    if (r.ok) location.reload(); else alert((await r.json()).error || 'Failed');
  }
  async function delContact(id) {
    if (!confirm('Delete contact?')) return;
    await fetch(`/contacts/${id}`, { method: 'DELETE' });
    location.reload();
  }
  document.getElementById('importForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const res = await fetch('/contacts/import', { method: 'POST', body: new FormData(e.target) });
    const data = await res.json();
    document.getElementById('importResult').textContent =
      data.ok ? `Imported ${data.imported}, skipped ${data.skipped}.` : (data.error || 'Import failed');
    if (data.ok) setTimeout(() => location.reload(), 1200);
  });
</script>

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