{% extends "layout/base.html" %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h2 class="mb-0">Cloud Connect Accounts</h2>
  <form method="post" action="{{ url_for('main.cloud_connect_scan_inbox') }}">
    <button type="submit" class="btn btn-sm btn-outline-secondary">Scan inbox mails</button>
  </form>
</div>

{# ── Unmatched accounts ─────────────────────────────────────────────────── #}
{% if unmatched %}
<h4 class="mb-2">Unmatched <span class="badge bg-warning text-dark">{{ unmatched|length }}</span></h4>
<p class="text-muted small mb-3">Click a row to create a new job or link to an existing one.</p>

<div class="table-responsive mb-4">
  <table class="table table-sm table-hover align-middle">
    <thead class="table-light">
      <tr>
        <th>User</th>
        <th>Section</th>
        <th>Repository</th>
        <th>Used / Quota</th>
        <th>Free</th>
        <th>Last active</th>
        <th>Status</th>
        <th>First seen</th>
      </tr>
    </thead>
    <tbody>
      {% for acc in unmatched %}
      <tr class="cc-unmatched-row"
          style="cursor: pointer;"
          data-id="{{ acc.id }}"
          data-user="{{ acc.user | e }}"
          data-section="{{ acc.section | e }}"
          data-backup-type="{{ acc.derived_backup_type | e }}"
          data-job-name="{{ acc.derived_job_name | e }}">
        <td class="fw-semibold">{{ acc.user }}</td>
        <td><span class="badge bg-secondary">{{ acc.section }}</span></td>
        <td class="text-muted small">{{ acc.repo_name or '—' }}<br><span class="text-muted" style="font-size:11px;">{{ acc.repo_type or '' }}</span></td>
        <td class="text-muted small">{{ acc.used_space or '—' }} / {{ acc.total_quota or '—' }}</td>
        <td class="text-muted small">{{ acc.free_space or '—' }}</td>
        <td class="text-muted small">{{ acc.last_active_raw or '—' }}</td>
        <td>
          {% if acc.last_status == 'Failed' %}
            <span class="badge bg-danger">Failed</span>
          {% elif acc.last_status == 'Warning' %}
            <span class="badge bg-warning text-dark">Warning</span>
          {% else %}
            <span class="badge bg-success">Success</span>
          {% endif %}
        </td>
        <td class="text-muted small">{{ acc.first_seen_at|local_datetime }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="alert alert-success mb-4">
  <strong>All accounts matched.</strong> No unmatched Cloud Connect accounts.
</div>
{% endif %}

{# ── Matched accounts ───────────────────────────────────────────────────── #}
{% if matched %}
<h4 class="mb-2">Linked <span class="badge bg-success">{{ matched|length }}</span></h4>
<div class="table-responsive">
  <table class="table table-sm table-hover align-middle">
    <thead class="table-light">
      <tr>
        <th>User</th>
        <th>Section</th>
        <th>Repository</th>
        <th>Used / Quota</th>
        <th>Free</th>
        <th>Last active</th>
        <th>Status</th>
        <th>Linked job</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for acc in matched %}
      <tr>
        <td class="fw-semibold">{{ acc.user }}</td>
        <td><span class="badge bg-secondary">{{ acc.section }}</span></td>
        <td class="text-muted small">{{ acc.repo_name or '—' }}<br><span style="font-size:11px;">{{ acc.repo_type or '' }}</span></td>
        <td class="text-muted small">{{ acc.used_space or '—' }} / {{ acc.total_quota or '—' }}</td>
        <td class="text-muted small">{{ acc.free_space or '—' }}</td>
        <td class="text-muted small">{{ acc.last_active_raw or '—' }}</td>
        <td>
          {% if acc.last_status == 'Failed' %}
            <span class="badge bg-danger">Failed</span>
          {% elif acc.last_status == 'Warning' %}
            <span class="badge bg-warning text-dark">Warning</span>
          {% else %}
            <span class="badge bg-success">Success</span>
          {% endif %}
        </td>
        <td>
          {% if acc.job %}
          <a href="{{ url_for('main.job_detail', job_id=acc.job.id) }}">
            {{ acc.job.customer.name ~ ' – ' if acc.job.customer else '' }}{{ acc.job.job_name }}
          </a>
          {% else %}—{% endif %}
        </td>
        <td>
          <form method="post"
                action="{{ url_for('main.cloud_connect_account_unlink', cc_account_db_id=acc.id) }}"
                onsubmit="return confirm('Remove link for {{ acc.user | e }} ({{ acc.section | e }})?');"
                class="mb-0">
            <button type="submit" class="btn btn-sm btn-outline-secondary">Unlink</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

{% if not unmatched and not matched %}
<div class="alert alert-info">
  No Cloud Connect accounts found yet. They appear here automatically after the first daily report email is imported.
</div>
{% endif %}

{# ── Shared link/create modal ───────────────────────────────────────────── #}
<div class="modal fade" id="ccLinkModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ccLinkModalTitle">Link account</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs mb-3" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab"
                    data-bs-target="#ccTabCreate" type="button">
              Create new job
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab"
                    data-bs-target="#ccTabExisting" type="button">
              Link to existing job
            </button>
          </li>
        </ul>

        <div class="tab-content">
          {# Tab 1: Create new job #}
          <div class="tab-pane fade show active" id="ccTabCreate">
            <form id="ccCreateForm" method="post" action="">
              <input type="hidden" name="action" value="create" />
              <input type="hidden" id="ccCustomerId" name="customer_id" />

              <div class="mb-3">
                <label class="form-label">Customer <span class="text-danger">*</span></label>
                <input type="text" id="ccCustomerInput" class="form-control"
                       list="ccCustomerList" placeholder="Select customer…"
                       autocomplete="off" />
                <datalist id="ccCustomerList">
                  {% for c in customers %}
                  <option value="{{ c.name | e }}"></option>
                  {% endfor %}
                </datalist>
              </div>

              <dl class="row mb-3">
                <dt class="col-5">Backup software</dt>
                <dd class="col-7">Veeam</dd>
                <dt class="col-5">Backup type</dt>
                <dd class="col-7" id="ccDisplayBackupType"></dd>
                <dt class="col-5">Job name</dt>
                <dd class="col-7" id="ccDisplayJobName"></dd>
              </dl>

              <div class="d-flex justify-content-end gap-2">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Create job &amp; link</button>
              </div>
            </form>
          </div>

          {# Tab 2: Link to existing job #}
          <div class="tab-pane fade" id="ccTabExisting">
            <form id="ccLinkExistingForm" method="post" action="">
              <input type="hidden" name="action" value="link" />
              <div class="mb-3">
                <label class="form-label">Job <span class="text-danger">*</span></label>
                <select class="form-select" name="job_id" required>
                  <option value="">Select job…</option>
                  {% for j in jobs %}
                  <option value="{{ j.id }}">
                    {{ j.customer.name ~ ' – ' if j.customer else '' }}{{ j.backup_software }} / {{ j.job_name }}
                  </option>
                  {% endfor %}
                </select>
              </div>
              <div class="d-flex justify-content-end gap-2">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Link to job</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  var customers = {{ customers | tojson | safe }};

  function findCustomerIdByName(name) {
    for (var i = 0; i < customers.length; i++) {
      if (customers[i].name === name) return customers[i].id;
    }
    return null;
  }

  function attachHandlers() {
    var rows = document.querySelectorAll('.cc-unmatched-row');
    var modalEl = document.getElementById('ccLinkModal');
    if (!modalEl) return;
    var modal = new bootstrap.Modal(modalEl);

    var linkUrlTpl = "{{ url_for('main.cloud_connect_account_link', cc_account_db_id=0) }}";

    rows.forEach(function (row) {
      row.addEventListener('click', function () {
        var id          = row.getAttribute('data-id');
        var user        = row.getAttribute('data-user');
        var section     = row.getAttribute('data-section');
        var backupType  = row.getAttribute('data-backup-type');
        var jobName     = row.getAttribute('data-job-name') || user;
        var linkUrl     = linkUrlTpl.replace('0', id);

        document.getElementById('ccLinkModalTitle').textContent = user + ' (' + section + ')';
        document.getElementById('ccDisplayBackupType').textContent = backupType;
        document.getElementById('ccDisplayJobName').textContent = jobName;

        var customerInput  = document.getElementById('ccCustomerInput');
        var customerIdField = document.getElementById('ccCustomerId');
        if (customerInput)   customerInput.value  = '';
        if (customerIdField) customerIdField.value = '';

        var createForm = document.getElementById('ccCreateForm');
        var linkForm   = document.getElementById('ccLinkExistingForm');

        if (createForm) {
          createForm.action = linkUrl;
          createForm.onsubmit = function (ev) {
            var cid = findCustomerIdByName(customerInput ? customerInput.value : '');
            if (!cid) {
              ev.preventDefault();
              alert('Please select an existing customer name from the list.');
              return false;
            }
            if (customerIdField) customerIdField.value = String(cid);
          };
        }
        if (linkForm) linkForm.action = linkUrl;

        modal.show();
      });
    });
  }

  document.addEventListener('DOMContentLoaded', attachHandlers);
})();
</script>

{% endblock %}