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

<style>
.sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.sync-actions form {
  margin: 0;
}

.sync-btn {
  white-space: nowrap;
}

.stop-btn {
  border-color: #ef4444 !important;
  color: #b91c1c !important;
  background: #fff !important;
}

.stop-btn:hover {
  background: #fef2f2 !important;
}

.sync-status-line {
  margin-top: 5px;
}

.sync-resource {
  font-weight: 700;
}

.sync-running {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
}

.sync-done {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
}

.sync-error {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fee2e2;
  color: #991b1b;
}

.sync-idle {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
}
</style>

<div class="toolbar">
  <a
    class="btn primary"
    href="/stores/new"
  >
    + Adaugă magazin
  </a>

  <span class="small">
    Poți sincroniza separat Contacte,
    Produse sau Comenzi.
  </span>
</div>

<div class="card">
<table>
  <thead>
    <tr>
      <th>Magazin</th>
      <th>Domeniu</th>
      <th>Brevo List ID</th>
      <th>Sincronizare</th>
      <th>Activ</th>
      <th>Acțiuni</th>
    </tr>
  </thead>

  <tbody>
  <% stores.forEach(s => {
       const isRunning =
         s.sync_status === 'running';
  %>
    <tr>
      <td>
        <strong><%= s.name %></strong>
      </td>

      <td>
        <%= s.domain %>
      </td>

      <td>
        <%= s.brevo_list_id || '-' %>
      </td>

      <td>
        <% if (isRunning) { %>
          <span class="sync-running">
            Rulează
          </span>

          <div class="sync-status-line small">
            <span class="sync-resource">
              <%= s.sync_resource || '-' %>
            </span>

            <% if (s.sync_page_no) { %>
              · pagina <%= s.sync_page_no %>
            <% } %>

            <% if (
              s.sync_processed !== null &&
              s.sync_processed !== undefined
            ) { %>
              · <%= s.sync_processed %> salvate
            <% } %>
          </div>

          <div class="small">
            <%= s.sync_message || '' %>
          </div>
        <% } else if (
          s.sync_status === 'done'
        ) { %>
          <span class="sync-done">
            Gata
          </span>

          <div class="small">
            <%= s.sync_message || '' %>
          </div>
        <% } else if (
          s.sync_status === 'error'
        ) { %>
          <span class="sync-error">
            Eroare
          </span>

          <div class="small">
            <%= s.sync_message || '' %>
          </div>
        <% } else { %>
          <span class="sync-idle">
            Oprit / Nepornit
          </span>

          <div class="small">
            <%= s.sync_message || '' %>
          </div>
        <% } %>
      </td>

      <td>
        <%= s.active ? 'Da' : 'Nu' %>
      </td>

      <td>
        <div class="sync-actions">
          <a
            class="btn"
            href="/stores/<%= s.id %>/edit"
          >
            Editează
          </a>

          <% if (!isRunning) { %>
            <form
              method="post"
              action="/stores/<%= s.id %>/sync/contacts"
              onsubmit="return confirm('Pornești sincronizarea CONTACTELOR NOI?\nSe vor prelua doar înregistrările apărute după ultima sincronizare.\n\nOK = DA   Cancel = NU');"
            >
              <button
                class="btn sync-btn"
                type="submit"
              >
                Contacte
              </button>
            </form>

            <form
              method="post"
              action="/stores/<%= s.id %>/sync/products"
              onsubmit="return confirm('Pornești sincronizarea PRODUSELOR NOI?\nNu se va mai parcurge întreg catalogul.\n\nOK = DA   Cancel = NU');"
            >
              <button
                class="btn sync-btn"
                type="submit"
              >
                Produse
              </button>
            </form>

            <form
              method="post"
              action="/stores/<%= s.id %>/sync/orders"
              onsubmit="return confirm('Pornești sincronizarea COMENZILOR NOI?\nNu se va mai parcurge tot istoricul.\n\nOK = DA   Cancel = NU');"
            >
              <button
                class="btn sync-btn"
                type="submit"
              >
                Comenzi
              </button>
            </form>

            <form
              method="post"
              action="/stores/<%= s.id %>/sync/all"
              onsubmit="return confirm('Pornești sincronizarea incrementală pentru CONTACTE + PRODUSE + COMENZI?\nSe vor verifica doar datele noi de la ultima sincronizare.\n\nOK = DA   Cancel = NU');"
            >
              <button
                class="btn primary sync-btn"
                type="submit"
              >
                Tot
              </button>
            </form>
          <% } else { %>
            <% if (Number(s.sync_stop_requested || 0) === 1) { %>
              <button
                class="btn stop-btn"
                type="button"
                disabled
              >
                Oprire în curs...
              </button>
            <% } else { %>
              <form
                method="post"
                action="/stores/<%= s.id %>/stop"
                onsubmit="this.querySelector('button').textContent='Oprire în curs...';"
              >
                <button
                  class="btn stop-btn"
                  type="submit"
                >
                  ■ Oprește
                </button>
              </form>
            <% } %>
          <% } %>
        </div>
      </td>
    </tr>
  <% }) %>
  </tbody>
</table>
</div>

<script>
setTimeout(() => {
  const hasRunning =
    <%- JSON.stringify(
      stores.some(
        s => s.sync_status === 'running'
      )
    ) %>;

  if (hasRunning) {
    location.reload();
  }
}, 5000);
</script>

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