{% load i18n %}

<style>
  .cot-setup-table {
    table-layout: fixed;
    max-width: 900px;
  }
  .cot-setup-table th:nth-child(1),
  .cot-setup-table td:nth-child(1) {
    width: 28%;
  }
  .cot-setup-table th:nth-child(2),
  .cot-setup-table td:nth-child(2) {
    width: 22%;
    white-space: nowrap;
  }
  .cot-setup-table th:nth-child(3),
  .cot-setup-table td:nth-child(3) {
    width: 38%;
    max-width: 280px;
  }
  .cot-setup-table th:nth-child(4),
  .cot-setup-table td:nth-child(4) {
    width: 90px;
  }
  .cot-setup-table .cot-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nsm-cot-schema-yaml,
  #id_schema_yaml {
    white-space: pre;
    overflow-x: auto;
    overflow-wrap: normal;
    word-break: normal;
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
    min-height: 12rem;
    max-height: 28rem;
  }
  .nsm-schema-yaml-validity {
    font-size: 1.1rem;
    vertical-align: middle;
  }
</style>

<h5 class="d-flex align-items-center gap-2 mb-2 mt-2">
  <span class="badge text-bg-secondary">2</span>
  <i class="mdi mdi-cube-outline"></i>
  {% trans "Custom Object Schema" %}
</h5>
<div class="card mb-4">
  <div class="card-body">
    <div class="d-flex align-items-center gap-2 mb-3">
      {% if custom_objects_db_ready %}
        <span class="badge bg-success-subtle text-success border border-success-subtle">
          <i class="mdi mdi-check-circle me-1"></i>{% trans "Plugin ready" %}
        </span>
      {% elif custom_objects_plugin_loaded %}
        <span class="badge bg-warning-subtle text-warning border border-warning-subtle">
          <i class="mdi mdi-database-alert me-1"></i>{% trans "Migrations pending" %}
        </span>
      {% else %}
        <span class="badge bg-danger-subtle text-danger border border-danger-subtle">
          <i class="mdi mdi-alert me-1"></i>{% trans "Plugin not installed" %}
        </span>
      {% endif %}
      <span class="text-muted small">
        {% blocktrans %}<strong>netbox-custom-objects</strong> — portable schema with <code>comments.nsm_config</code> per type.{% endblocktrans %}
      </span>
    </div>

    {% if custom_objects_plugin_loaded and not custom_objects_db_ready %}
    <div class="alert alert-warning py-2 px-3 mb-3 small">
      {% trans "Run migrations before importing types:" %}
      <code class="ms-1">migrate netbox_custom_objects</code>
    </div>
    {% endif %}

    <h6 class="text-muted text-uppercase small fw-semibold mb-3 mt-2">{% trans "Schema" %}</h6>
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active"
                id="cot-schema-define-tab"
                data-bs-toggle="tab"
                data-bs-target="#cot-schema-define"
                type="button"
                role="tab"
                aria-controls="cot-schema-define"
                aria-selected="true">
          {% trans "YAML" %}
          <span id="nsm-schema-yaml-validity"
                class="nsm-schema-yaml-validity ms-1"
                aria-live="polite"></span>
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link"
                id="cot-schema-preview-tab"
                data-bs-toggle="tab"
                data-bs-target="#cot-schema-preview"
                type="button"
                role="tab"
                aria-controls="cot-schema-preview"
                aria-selected="false">
          {% trans "Preview" %}
        </button>
      </li>
    </ul>
    <div class="tab-content border border-top-0 rounded-bottom p-3 mb-3">
      <div class="tab-pane fade show active"
           id="cot-schema-define"
           role="tabpanel"
           aria-labelledby="cot-schema-define-tab">
        <textarea id="id_schema_yaml"
                  name="schema_yaml"
                  form="nsm-import-custom-objects-form"
                  class="form-control font-monospace nsm-cot-schema-yaml"
                  rows="18"
                  aria-label="{% trans 'Custom Object Schema YAML' %}">{{ cot_schema_yaml }}</textarea>
      </div>
      <div class="tab-pane fade"
           id="cot-schema-preview"
           role="tabpanel"
           aria-labelledby="cot-schema-preview-tab">
        {% for type in cot_schema_preview %}
        <div class="{% if not forloop.first %}mt-4{% endif %}">
          <h6 class="fw-semibold mb-1">
            <code>{{ type.slug }}</code>
            <span class="text-muted fw-normal">— {{ type.label }}</span>
          </h6>
          {% if type.description %}
          <p class="text-muted small mb-2">{{ type.description }}</p>
          {% endif %}
          {% if type.nsm_config_preview %}
          <div class="mb-2">
            <div class="text-muted small text-uppercase fw-semibold mb-1">{% trans "Rule View" %}</div>
            <table class="table table-sm table-borderless mb-2">
              <tbody>
                {% for row in type.nsm_config_preview %}
                <tr>
                  <th class="text-muted" style="width:40%">{{ row.label }}</th>
                  <td>{% if row.mono %}<code>{{ row.value }}</code>{% else %}{{ row.value }}{% endif %}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% endif %}
          <div class="table-responsive">
            <table class="table table-sm table-striped mb-0">
              <thead>
                <tr>
                  <th>{% trans "Column" %}</th>
                  <th>{% trans "Type" %}</th>
                  <th>{% trans "Required" %}</th>
                </tr>
              </thead>
              <tbody>
                {% for field in type.fields %}
                <tr>
                  <td>{{ field.label }}</td>
                  <td><code>{{ field.type }}</code></td>
                  <td>
                    {% if field.required %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}
                  </td>
                </tr>
                {% empty %}
                <tr>
                  <td colspan="3" class="text-muted">{% trans "No columns defined." %}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
        {% empty %}
        <p class="text-muted mb-0">{% trans "No types defined." %}</p>
        {% endfor %}
      </div>
    </div>

    <form id="nsm-import-custom-objects-form" method="post" class="m-0 mb-3">
      {% csrf_token %}
      <input type="hidden" name="action" value="import_all_custom_objects">
      <button type="submit" class="btn btn-primary"
              {% if not can_import_cots %}disabled{% endif %}
              title="{% if not custom_objects_plugin_loaded %}{% trans 'Install netbox-custom-objects first' %}{% elif not custom_objects_db_ready %}{% trans 'Run migrations first' %}{% elif all_cots_ok %}{% trans 'All types already present' %}{% endif %}">
        <i class="mdi mdi-plus-circle-multiple me-1"></i>{% trans "Add all Custom Objects" %}
      </button>
    </form>
    <p class="text-muted small mb-4">
      {% trans "Imports Custom Object Types and writes nsm_config into each type's comments field." %}
    </p>

    <h6 class="text-muted text-uppercase small fw-semibold mb-3 mt-2">{% trans "Custom Object Groups" %}</h6>
    {% for group in cot_setup_groups %}
    <h6 class="fw-semibold mb-1{% if not forloop.first %} mt-4{% endif %}">{{ group.label }}</h6>
    <p class="text-muted small mb-2">{{ group.description }}</p>
    <table class="table table-sm table-borderless mb-0 cot-setup-table">
      <thead class="table-active">
        <tr>
          <th>{% trans "Slug" %}</th>
          <th>{% trans "Label" %}</th>
          <th>{% trans "Description" %}</th>
          <th class="text-center">{% trans "Status" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for entry in group.entries %}
        <tr>
          <td><code>{{ entry.slug }}</code></td>
          <td>{{ entry.label }}</td>
          <td class="text-muted small cot-desc" title="{{ entry.description }}">{{ entry.description }}</td>
          <td class="text-center">
            {% if entry.cot %}
              <span class="badge bg-success-subtle text-success border border-success-subtle">
                <i class="mdi mdi-check"></i> {% trans "present" %}
              </span>
            {% else %}
              <span class="badge bg-danger-subtle text-danger border border-danger-subtle">
                <i class="mdi mdi-close"></i> {% trans "missing" %}
              </span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endfor %}

    {% if all_cots_ok and all_tcs_ok %}
    <div class="text-success small mt-3">
      <i class="mdi mdi-check-all me-1"></i>{% trans "Section 2 complete." %}
    </div>
    {% endif %}
  </div>
</div>

<script>
(function () {
  const schemaInput = document.getElementById("id_schema_yaml");
  const validityEl = document.getElementById("nsm-schema-yaml-validity");
  const validateUrl = "{% url 'plugins:netbox_nsm:setup_schema_validate' %}";
  if (!schemaInput || !validityEl) {
    return;
  }

  let validateTimer = null;
  let validateRequestId = 0;

  function setValidity(valid, message) {
    if (valid === null) {
      validityEl.textContent = "";
      validityEl.className = "nsm-schema-yaml-validity ms-1";
      return;
    }
    validityEl.textContent = valid ? "✓" : "✗";
    validityEl.title = message || "";
    validityEl.className = "nsm-schema-yaml-validity ms-1 " + (valid ? "text-success" : "text-danger");
  }

  function validateSchemaYaml() {
    const requestId = ++validateRequestId;
    const body = new URLSearchParams();
    body.set("schema_yaml", schemaInput.value);
    body.set("csrfmiddlewaretoken", document.querySelector("[name=csrfmiddlewaretoken]").value);

    fetch(validateUrl, {
      method: "POST",
      headers: {"Content-Type": "application/x-www-form-urlencoded"},
      body: body.toString(),
      credentials: "same-origin",
    })
      .then(function (response) {
        return response.json().then(function (data) {
          return {ok: response.ok, data: data};
        });
      })
      .then(function (result) {
        if (requestId !== validateRequestId) {
          return;
        }
        if (result.ok && result.data.valid) {
          setValidity(true, "{% trans 'Schema valid' %}");
        } else {
          setValidity(false, result.data.error || "{% trans 'Schema invalid' %}");
        }
      })
      .catch(function () {
        if (requestId !== validateRequestId) {
          return;
        }
        setValidity(false, "{% trans 'Validation request failed.' %}");
      });
  }

  function scheduleValidation() {
    if (validateTimer) {
      clearTimeout(validateTimer);
    }
    validateTimer = setTimeout(validateSchemaYaml, 350);
  }

  schemaInput.addEventListener("input", scheduleValidation);
  scheduleValidation();
})();
</script>