<%- include('partials-header.ejs', { title: 'Gửi link mời', user: user }) %>

<%
  const formatDate = function(value) {
    if (!value) return '-';
    return new Date(value).toLocaleString('vi-VN');
  };
  const invitationFilters = typeof filters !== 'undefined' ? filters : {};
  const filterEmail = invitationFilters.email || '';
  const filterStatus = invitationFilters.status || '';
  const totalInvitationRecipients = typeof totalRecipients !== 'undefined' ? totalRecipients : recipients.length;
  const filterQueryParts = [];
  if (filterEmail) filterQueryParts.push(`email=${encodeURIComponent(filterEmail)}`);
  if (filterStatus) filterQueryParts.push(`status=${encodeURIComponent(filterStatus)}`);
  const currentFilterQuery = filterQueryParts.join('&');
  const invitationReturnTo = `/admin/invitations${currentFilterQuery ? `?${currentFilterQuery}` : ''}`;
%>

<section class="section">
  <div class="page-shell">
    <div class="d-flex align-items-end justify-content-between gap-3 mb-3 flex-wrap">
      <div>
        <h1 class="h3 mb-1">Gửi link mời</h1>
        <p class="muted mb-0">Import danh sách khách mời từ CSV và gửi email mời tham gia sự kiện theo từng đợt.</p>
      </div>
    </div>

    <% if (message) { %>
      <div class="alert alert-success"><%= message %></div>
    <% } %>
    <%- include('partials-error-modal.ejs') %>

    <div class="panel mb-3">
      <h2 class="h5 mb-2">Import danh sách email</h2>
      <p class="muted mb-3">File CSV cần có đúng header: <code>name,role,email</code>. Khi import, email mới sẽ được thêm; email đã có sẽ chỉ cập nhật tên và vai trò, trạng thái gửi email vẫn được giữ nguyên.</p>
      <form action="/admin/invitations/import" method="post" enctype="multipart/form-data" class="row g-3 align-items-end">
        <div class="col-lg-8">
          <label class="form-label" for="csvFile">File CSV</label>
          <input class="form-control" id="csvFile" name="csvFile" type="file" accept=".csv,text/csv" required>
        </div>
        <div class="col-lg-4">
          <button class="btn btn-brand w-100" type="submit">Import CSV</button>
        </div>
      </form>
    </div>

    <div class="panel mb-3" id="inviteJobPanel">
      <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
        <div>
          <h2 class="h5 mb-1">Tác vụ gửi email mời</h2>
          <p class="muted mb-0" id="inviteJobText">Sẵn sàng gửi email mời theo từng đợt, chỉ bỏ qua email đã gửi thành công.</p>
        </div>
        <div class="d-flex align-items-center gap-2">
          <span class="badge text-bg-secondary" id="inviteJobBadge">Đang chờ</span>
          <button
            class="btn btn-outline-secondary"
            id="sendInviteButton"
            type="button"
            <%= totalInvitationRecipients === 0 ? 'disabled' : '' %>
          >
            Gửi email mời
          </button>
        </div>
      </div>
      <div class="progress mt-3" role="progressbar" aria-label="Tiến độ gửi email mời">
        <div class="progress-bar bg-success" id="inviteJobProgress" style="width: 0%">0%</div>
      </div>
    </div>

    <div class="panel">
      <div class="d-flex align-items-center justify-content-between gap-3 mb-3 flex-wrap">
        <h2 class="h5 mb-0">Danh sách email mời</h2>
        <span class="muted"><%= recipients.length %>/<%= totalInvitationRecipients %> email</span>
      </div>

      <form action="/admin/invitations" method="get" class="row g-3 align-items-end mb-3">
        <div class="col-lg-6">
          <label class="form-label" for="filterEmail">Lọc theo email</label>
          <input class="form-control" id="filterEmail" name="email" value="<%= filterEmail %>" placeholder="name@example.com">
        </div>
        <div class="col-lg-4">
          <label class="form-label" for="filterStatus">Tình trạng gửi</label>
          <select class="form-select" id="filterStatus" name="status">
            <option value="" <%= !filterStatus ? 'selected' : '' %>>Tất cả</option>
            <option value="sent" <%= filterStatus === 'sent' ? 'selected' : '' %>>Gửi thành công</option>
            <option value="failed" <%= filterStatus === 'failed' ? 'selected' : '' %>>Gửi thất bại</option>
          </select>
        </div>
        <div class="col-lg-2 d-flex gap-2">
          <button class="btn btn-brand flex-fill" type="submit">Lọc</button>
          <a class="btn btn-outline-secondary flex-fill" href="/admin/invitations">Xóa</a>
        </div>
      </form>

      <div class="table-responsive">
        <table class="table align-middle mb-0">
          <thead>
            <tr>
              <th>Tên</th>
              <th>Vai trò</th>
              <th>Email</th>
              <th>Tình trạng gửi</th>
              <th>Lỗi gần nhất</th>
              <th>Thao tác</th>
            </tr>
          </thead>
          <tbody>
            <% if (recipients.length === 0) { %>
              <tr>
                <td colspan="6" class="text-center muted py-4">Chưa có dữ liệu phù hợp.</td>
              </tr>
            <% } %>
            <% recipients.forEach(function(item) { %>
              <tr>
                <td><strong><%= item.name %></strong></td>
                <td><%= item.role || '-' %></td>
                <td><%= item.email %></td>
                <td id="invitationStatus-<%= item.id %>">
                  <% if (item.inviteLastError) { %>
                    <span class="badge text-bg-danger">Gửi thất bại</span>
                  <% } else if (item.inviteSentAt) { %>
                    <span class="badge text-bg-success">Đã gửi</span>
                    <br>
                    <span class="muted"><%= formatDate(item.inviteSentAt) %></span>
                  <% } else { %>
                    <span class="badge text-bg-warning">Chưa gửi</span>
                  <% } %>
                </td>
                <td id="invitationError-<%= item.id %>"><%= item.inviteLastError || '-' %></td>
                <td id="invitationAction-<%= item.id %>">
                  <button class="btn btn-sm btn-outline-secondary retry-invitation-mail" type="button" data-id="<%= item.id %>">Gửi lại</button>
                </td>
              </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<script>
  const invitationReturnTo = <%- JSON.stringify(invitationReturnTo) %>;
  let reloadedAfterInviteJob = false;
  let inviteJobWasRunning = false;

  function formatInvitationDate(value) {
    if (!value) return '-';
    return new Date(value).toLocaleString('vi-VN');
  }

  function escapeInvitationHtml(value) {
    return String(value || '').replace(/[&<>"']/g, (character) => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;',
    })[character]);
  }

  function renderInvitationRowStatus(recipient) {
    const statusCell = document.getElementById(`invitationStatus-${recipient.id}`);
    const errorCell = document.getElementById(`invitationError-${recipient.id}`);
    const actionCell = document.getElementById(`invitationAction-${recipient.id}`);
    if (!statusCell || !errorCell || !actionCell) return;

    if (recipient.inviteLastError) {
      statusCell.innerHTML = '<span class="badge text-bg-danger">Gửi thất bại</span>';
      errorCell.textContent = recipient.inviteLastError;
      actionCell.innerHTML = `<button class="btn btn-sm btn-outline-secondary retry-invitation-mail" type="button" data-id="${recipient.id}">Gửi lại</button>`;
      return;
    }

    if (recipient.inviteSentAt) {
      statusCell.innerHTML = `<span class="badge text-bg-success">Đã gửi</span><br><span class="muted">${formatInvitationDate(recipient.inviteSentAt)}</span>`;
    } else {
      statusCell.innerHTML = '<span class="badge text-bg-warning">Chưa gửi</span>';
    }
    errorCell.textContent = '-';
    actionCell.innerHTML = `<button class="btn btn-sm btn-outline-secondary retry-invitation-mail" type="button" data-id="${recipient.id}">Gửi lại</button>`;
  }

  async function retryInvitationMail(recipientId, button) {
    if (!window.confirm('Gửi lại email mời cho người này?')) {
      return;
    }

    button.disabled = true;
    button.textContent = 'Đang gửi...';
    try {
      const response = await fetch(`/admin/invitations/${recipientId}/email`, {
        method: 'POST',
        headers: { Accept: 'application/json' },
      });
      const result = await response.json();
      if (!response.ok) {
        throw new Error(result.message || 'Không thể gửi lại email mời');
      }
      renderInvitationRowStatus(result.recipient);
      if (!result.sent) {
        alert(result.recipient?.inviteLastError || result.message || 'Không thể gửi lại email mời');
      }
    } catch (error) {
      alert(error instanceof Error ? error.message : 'Không thể gửi lại email mời');
      button.disabled = false;
      button.textContent = 'Gửi lại';
    }
  }

  function renderInviteJobStatus(status) {
    const text = document.getElementById('inviteJobText');
    const badge = document.getElementById('inviteJobBadge');
    const progress = document.getElementById('inviteJobProgress');
    const button = document.getElementById('sendInviteButton');
    if (!text || !badge || !progress || !button) return;

    const total = Number(status.total || 0);
    const processed = Number(status.processed || 0);
    const percent = total > 0 ? Math.round((processed / total) * 100) : 0;
    progress.style.width = `${percent}%`;
    progress.textContent = `${percent}%`;
    button.disabled = status.state === 'running' || <%= totalInvitationRecipients === 0 ? 'true' : 'false' %>;

    badge.className = 'badge';
    if (status.state === 'running') {
      inviteJobWasRunning = true;
      badge.classList.add('text-bg-warning');
      badge.textContent = 'Đang chạy';
    } else if (status.state === 'completed') {
      badge.classList.add('text-bg-success');
      badge.textContent = 'Hoàn tất';
    } else if (status.state === 'failed') {
      badge.classList.add('text-bg-danger');
      badge.textContent = 'Thất bại';
    } else {
      badge.classList.add('text-bg-secondary');
      badge.textContent = 'Đang chờ';
    }

    if (status.state === 'idle') {
      text.textContent = `Sẵn sàng gửi email mời theo từng đợt, chỉ bỏ qua email đã gửi thành công. Mỗi đợt: ${status.batchSize}, thời gian chờ: ${status.delayMs}ms.`;
      return;
    }

    text.textContent = `Đã xử lý ${processed}/${total}. Đã gửi ${status.sent || 0}, lỗi ${status.failed || 0}. Mỗi đợt: ${status.batchSize}, thời gian chờ: ${status.delayMs}ms.${status.lastError ? ` Lỗi gần nhất: ${status.lastError}` : ''}`;

    if ((status.state === 'completed' || status.state === 'failed') && inviteJobWasRunning && !reloadedAfterInviteJob && processed > 0) {
      reloadedAfterInviteJob = true;
      setTimeout(() => window.location.href = invitationReturnTo, 1200);
    }
  }

  async function loadInviteJobStatus() {
    const response = await fetch('/admin/email-jobs/invitations');
    if (response.ok) {
      renderInviteJobStatus(await response.json());
    }
  }

  async function startInviteJob() {
    const button = document.getElementById('sendInviteButton');
    if (!button) return;

    if (!window.confirm('Gửi email link mời cho toàn bộ danh sách? Tác vụ sẽ chạy theo từng đợt.')) {
      return;
    }

    button.disabled = true;
    try {
      const response = await fetch('/admin/email-jobs/invitations', {
        method: 'POST',
      });
      const result = await response.json();
      if (!response.ok) {
        throw new Error(result.message || 'Không thể bắt đầu tác vụ gửi email mời');
      }
      renderInviteJobStatus(result);
    } catch (error) {
      alert(error instanceof Error ? error.message : 'Không thể bắt đầu tác vụ gửi email mời');
      await loadInviteJobStatus();
    }
  }

  document.getElementById('sendInviteButton')?.addEventListener('click', startInviteJob);
  document.addEventListener('click', (event) => {
    const button = event.target.closest('.retry-invitation-mail');
    if (!button) return;
    retryInvitationMail(button.dataset.id, button);
  });
  loadInviteJobStatus();
  setInterval(loadInviteJobStatus, 5000);
</script>

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