{% extends "layout/base.html" %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h2 class="mb-0">Cove Accounts</h2>
  <div class="d-flex gap-2">
    {% if settings.cove_partner_id %}
    <form method="post" action="{{ url_for('main.settings_cove_run_now') }}" class="mb-0">
      <button type="submit" class="btn btn-sm btn-outline-primary">Run import now</button>
    </form>
    {% endif %}
    <a href="{{ url_for('main.settings', section='integrations') }}" class="btn btn-sm btn-outline-secondary">Cove settings</a>
  </div>
</div>

{% if settings.cove_last_import_at %}
<p class="text-muted small mb-3">Last import: {{ settings.cove_last_import_at|local_datetime }}</p>
{% else %}
<p class="text-muted small mb-3">No import has run yet. Click <strong>Run import now</strong> to fetch Cove accounts.</p>
{% endif %}

{# ── Unmatched accounts (need a job) ─────────────────────────────────────── #}
{% 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>Backup software</th>
        <th>Type</th>
        <th>Job name</th>
        <th>Computer</th>
        <th>Customer (Cove)</th>
        <th>Datasources</th>
        <th>Last status</th>
        <th>Last run</th>
        <th>First seen</th>
      </tr>
    </thead>
    <tbody>
      {% for acc in unmatched %}
      <tr class="cove-unmatched-row"
          style="cursor: pointer;"
          data-id="{{ acc.id }}"
          data-job-name="{{ acc.derived_job_name | e }}"
          data-backup-software="{{ acc.derived_backup_software | e }}"
          data-backup-type="{{ acc.derived_backup_type | e }}"
          data-cove-customer="{{ acc.customer_name | e if acc.customer_name else '' }}">
        <td>{{ acc.derived_backup_software }}</td>
        <td>{{ acc.derived_backup_type }}</td>
        <td>{{ acc.derived_job_name }}</td>
        <td class="text-muted small">{{ acc.computer_name or '—' }}</td>
        <td>{{ acc.customer_name or '—' }}</td>
        <td class="text-muted small">{{ acc.datasource_display }}</td>
        <td>
          {% if acc.last_status_code is not none %}
          <span class="badge bg-{{ STATUS_CLASS.get(acc.last_status_code, 'secondary') }}">
            {{ STATUS_LABELS.get(acc.last_status_code, acc.last_status_code) }}
          </span>
          {% else %}—{% endif %}
        </td>
        <td class="text-muted small">{{ acc.last_run_at|local_datetime if acc.last_run_at else '—' }}</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>
  {% if not settings.cove_last_import_at %}
  Run an import first to see Cove accounts here.
  {% else %}
  No unmatched Cove accounts.
  {% endif %}
</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>Backup software</th>
        <th>Type</th>
        <th>Job name</th>
        <th>Computer</th>
        <th>Customer (Cove)</th>
        <th>Datasources</th>
        <th>Last status</th>
        <th>Last run</th>
        <th>Linked job</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for acc in matched %}
      <tr>
        <td>{{ acc.derived_backup_software }}</td>
        <td>{{ acc.derived_backup_type }}</td>
        <td>{{ acc.derived_job_name }}</td>
        <td class="text-muted small">{{ acc.computer_name or '—' }}</td>
        <td>{{ acc.customer_name or '—' }}</td>
        <td class="text-muted small">{{ acc.datasource_display }}</td>
        <td>
          {% if acc.last_status_code is not none %}
          <span class="badge bg-{{ STATUS_CLASS.get(acc.last_status_code, 'secondary') }}">
            {{ STATUS_LABELS.get(acc.last_status_code, acc.last_status_code) }}
          </span>
          {% else %}—{% endif %}
        </td>
        <td class="text-muted small">{{ acc.last_run_at|local_datetime if acc.last_run_at else '—' }}</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.cove_account_unlink', cove_account_db_id=acc.id) }}"
                onsubmit="return confirm('Remove link between this Cove account and the job?');"
                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 Cove accounts found. Run an import first via the button above or via Settings → Integrations → Cove.
</div>
{% endif %}

{# ── Shared link/create modal ─────────────────────────────────────────────── #}
<div class="modal fade" id="coveLinkModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="coveLinkModalTitle">Link Cove 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" id="coveLinkTabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab"
                    data-bs-target="#coveCreateTab" type="button">Create new job</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab"
                    data-bs-target="#coveExistingTab" type="button">Link to existing</button>
          </li>
        </ul>

        <div class="tab-content">

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

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

              <dl class="row mb-3 dl-compact">
                <dt class="col-5">Job name</dt>
                <dd class="col-7" id="coveDisplayJobName"></dd>
                <dt class="col-5">Backup software</dt>
                <dd class="col-7" id="coveDisplayBackupSoftware"></dd>
                <dt class="col-5">Backup type</dt>
                <dd class="col-7" id="coveDisplayBackupType"></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="coveExistingTab">
            <form method="post" id="coveLinkExistingForm">
              <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>{# /tab-content #}
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var modalEl = document.getElementById('coveLinkModal');
  if (!modalEl) return;
  var modal = new bootstrap.Modal(modalEl);

  var customers = {{ customers | tojson | safe }};

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

  var linkUrlTpl = "{{ url_for('main.cove_account_link', cove_account_db_id=0) }}";

  document.querySelectorAll('tr.cove-unmatched-row').forEach(function (row) {
    row.addEventListener('click', function () {
      var id             = row.getAttribute('data-id');
      var jobName        = row.getAttribute('data-job-name') || '';
      var backupSoftware = row.getAttribute('data-backup-software') || '';
      var backupType     = row.getAttribute('data-backup-type') || '';
      var coveCustomer   = row.getAttribute('data-cove-customer') || '';
      var linkUrl        = linkUrlTpl.replace('0', id);

      document.getElementById('coveLinkModalTitle').textContent = jobName;
      document.getElementById('coveDisplayJobName').textContent        = jobName;
      document.getElementById('coveDisplayBackupSoftware').textContent = backupSoftware;
      document.getElementById('coveDisplayBackupType').textContent     = backupType;

      // Pre-fill customer if Cove's customer name matches an existing customer
      var customerInput  = document.getElementById('coveCustomerInput');
      var customerIdField = document.getElementById('coveCustomerId');
      if (customerInput)  customerInput.value  = '';
      if (customerIdField) customerIdField.value = '';
      if (coveCustomer && customerInput) {
        var matchedId = findCustomerIdByName(coveCustomer);
        if (matchedId) {
          customerInput.value   = coveCustomer;
          customerIdField.value = String(matchedId);
        } else {
          customerInput.value = coveCustomer;
        }
      }

      var createForm = document.getElementById('coveCreateForm');
      var linkForm   = document.getElementById('coveLinkExistingForm');

      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();
    });
  });
});
</script>

{% endblock %}