{% extends '_admin/layout/base.html' %}

{% block content %}
<main class="app-main py-4">
  <div class="container-fluid px-3 px-md-4">

    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4">
      <div>
        <h1 class="h3 mb-1">{{ translate('system_logs') }}</h1>
        <p class="text-muted mb-0">
          {{ translate('recent_application_events_and_diagnostic_messages') }}
        </p>
      </div>

      <div class="mt-3 mt-md-0">
        <a
          href="{{ admin_interface.url_for('_AdminController.dashboard') }}"
          class="btn btn-primary"
        >
          <i class="bi bi-arrow-clockwise me-1"></i>
          {{ translate('refresh') }}
        </a>
      </div>
    </div>

    <div class="card content-card shadow-sm">
      <div class="card-header bg-white d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
        <div>
          <h2 class="h5 mb-0">{{ translate('latest_log_messages') }}</h2>
          <small class="text-muted">
            {{ translate('showing_x_of_y_log_messages').format(shown=log_entries|length, total=logs_total) }}
          </small>
        </div>

        <form
          method="get"
          action="{{ admin_interface.url_for('_AdminController.dashboard') }}"
          class="d-flex gap-2"
        >
          <input type="hidden" name="page" value="1">
          <input type="hidden" name="count" value="{{ logs_count }}">
          <input type="hidden" name="order_by" value="{{ logs_order_by }}">

          <div class="input-group input-group-sm" style="max-width: 280px;">
            <span class="input-group-text">
              <i class="bi bi-search"></i>
            </span>
            <input
              type="search"
              name="query"
              class="form-control"
              placeholder="{{ translate('search_logs') }}"
              aria-label="{{ translate('search_logs') }}"
              value="{{ logs_query }}"
            >
          </div>

          <button type="submit" class="btn btn-sm btn-outline-secondary">
            {{ translate('search') }}
          </button>
        </form>
      </div>

      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, page=1, count=logs_count, order_by='-time' if logs_order_by == 'time' else 'time') }}"
                  >
                    {{ translate('time') }}
                    {% if logs_order_by == 'time' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-time' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, page=1, count=logs_count, order_by='-level' if logs_order_by == 'level' else 'level') }}"
                  >
                    {{ translate('level') }}
                    {% if logs_order_by == 'level' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-level' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, page=1, count=logs_count, order_by='-logger_name' if logs_order_by == 'logger_name' else 'logger_name') }}"
                  >
                    {{ translate('logger') }}
                    {% if logs_order_by == 'logger_name' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-logger_name' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, page=1, count=logs_count, order_by='-name' if logs_order_by == 'name' else 'name') }}"
                  >
                    {{ translate('module') }}
                    {% if logs_order_by == 'name' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-name' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, page=1, count=logs_count, order_by='-file' if logs_order_by == 'file' else 'file') }}"
                  >
                    {{ translate('file') }}
                    {% if logs_order_by == 'file' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-file' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, page=1, count=logs_count, order_by='-line' if logs_order_by == 'line' else 'line') }}"
                  >
                    {{ translate('line') }}
                    {% if logs_order_by == 'line' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-line' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, page=1, count=logs_count, order_by='-function' if logs_order_by == 'function' else 'function') }}"
                  >
                    {{ translate('function') }}
                    {% if logs_order_by == 'function' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-function' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>

                <th scope="col">
                  <a
                    class="text-decoration-none text-dark"
                    href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, page=1, count=logs_count, order_by='-message' if logs_order_by == 'message' else 'message') }}"
                  >
                    {{ translate('message') }}
                    {% if logs_order_by == 'message' %}
                      <i class="bi bi-sort-up ms-1"></i>
                    {% elif logs_order_by == '-message' %}
                      <i class="bi bi-sort-down ms-1"></i>
                    {% endif %}
                  </a>
                </th>
                <th>
                  {{ translate('view') }}
                </th>
              </tr>
            </thead>

            <tbody>
              {% for log in log_entries %}
                <tr>
                  <td class="text-muted log-meta log-time">
                    {{ log.time }}
                  </td>

                  <td>
                    {% if log.level == 'ERROR' or log.level == 'CRITICAL' %}
                      <span class="badge text-bg-danger log-level">{{ log.level }}</span>
                    {% elif log.level == 'WARNING' or log.level == 'WARN' %}
                      <span class="badge text-bg-warning log-level">{{ log.level }}</span>
                    {% elif log.level == 'DEBUG' %}
                      <span class="badge text-bg-primary log-level">{{ log.level }}</span>
                    {% elif log.level == 'INFO' %}
                      <span class="badge text-bg-success log-level">{{ log.level }}</span>
                    {% else %}
                      <span class="badge text-bg-secondary log-level">{{ log.level }}</span>
                    {% endif %}
                  </td>

                  <td class="log-meta log-logger-name">
                    {{ log.logger_name }}
                  </td>

                  <td class="log-meta log-name">
                    <code>{{ log.name }}</code>
                  </td>

                  <td class="log-meta log-file">
                    {{ log.file }}
                  </td>

                  <td class="text-muted log-line">
                    {{ log.line }}
                  </td>

                  <td class="log-meta log-function">
                    <code>{{ log.function }}</code>
                  </td>

                  <td class="log-message" data-message="{{ log.message|e }}">
                    {{ log.message|default('', true)|string|truncate(70) }}
                  </td>
                  <td>
                    <button type="button" onclick="openLogDialog(event)" class="btn btn-sm" title="{{ translate('view_log') }}" aria-label="{{ translate('view_log') }}">
                      <i class="bi bi-card-text"></i>
                    </button>
                  </td>
                </tr>
              {% else %}
                <tr>
                  <td colspan="9" class="text-center text-muted py-4">
                    <i class="bi bi-inbox me-1"></i>
                    {{ translate('no_log_messages_available') }}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

      <div class="card-footer bg-white d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
        <div class="d-flex align-items-center gap-2">
          <span class="text-muted small">
            {{ translate('page_x_of_y').format(page=logs_page, pages=logs_total_pages) }}
          </span>

          <form
            method="get"
            action="{{ admin_interface.url_for('_AdminController.dashboard') }}"
            class="d-flex align-items-center gap-2"
          >
            <input type="hidden" name="query" value="{{ logs_query }}">
            <input type="hidden" name="page" value="1">
            <input type="hidden" name="order_by" value="{{ logs_order_by }}">

            <label for="logs-count" class="text-muted small mb-0">
              {{ translate('per_page') }}
            </label>

            <select
              id="logs-count"
              name="count"
              class="form-select form-select-sm"
              style="width: auto;"
              onchange="this.form.submit()"
            >
              <option value="10" {% if logs_count == 10 %}selected{% endif %}>10</option>
              <option value="25" {% if logs_count == 25 %}selected{% endif %}>25</option>
              <option value="50" {% if logs_count == 50 %}selected{% endif %}>50</option>
              <option value="100" {% if logs_count == 100 %}selected{% endif %}>100</option>
            </select>
          </form>
        </div>

        <nav aria-label="{{ translate('log_table_pagination') }}">
          <ul class="pagination pagination-sm mb-0">

            <li class="page-item {% if logs_page <= 1 %}disabled{% endif %}">
              <a
                class="page-link"
                href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, page=logs_page - 1, count=logs_count, order_by=logs_order_by) }}"
              >
                {{ translate('previous') }}
              </a>
            </li>

            {% for page_number in range(1, logs_total_pages + 1) %}
              <li class="page-item {% if page_number == logs_page %}active{% endif %}">
                <a
                  class="page-link"
                  href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, page=page_number, count=logs_count, order_by=logs_order_by) }}"
                >
                  {{ page_number }}
                </a>
              </li>
            {% endfor %}

            <li class="page-item {% if logs_page >= logs_total_pages %}disabled{% endif %}">
              <a
                class="page-link"
                href="{{ admin_interface.url_for('_AdminController.dashboard', query=logs_query, page=logs_page + 1, count=logs_count, order_by=logs_order_by) }}"
              >
                {{ translate('next') }}
              </a>
            </li>

          </ul>
        </nav>
      </div>
    </div>

  </div>
</main>

<dialog id="log-dialog" class="log-dialog border-0 rounded-4 p-0 shadow-lg">
  <div class="log-dialog-content">
    <div class="log-dialog-header d-flex justify-content-between align-items-start gap-3">
      <div>
        <h2 class="h5 mb-1">
          <i class="bi bi-card-text me-1"></i>
          {{ translate('log_details') }}
        </h2>
        <p class="text-muted small mb-0">
          {{ translate('full_diagnostic_log_entry') }}
        </p>
      </div>

      <button
        type="button"
        class="btn-close"
        aria-label="{{ translate('close') }}"
        onclick="closeLogDialog()"
      ></button>
    </div>

    <div id="log-dialog-body" class="log-dialog-body">
      <!-- Filled by JS -->
    </div>

    <div class="log-dialog-footer d-flex justify-content-end">
      <button
        type="button"
        class="btn btn-sm btn-secondary"
        onclick="closeLogDialog()"
      >
        {{ translate('close') }}
      </button>
    </div>
  </div>
</dialog>
{% endblock %}

{% block js %}
<style>
  .log-dialog {
    width: min(900px, calc(100vw - 2rem));
    max-height: min(720px, calc(100vh - 2rem));
    overflow: hidden;
  }

  .log-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
  }

  .log-dialog-content {
    background: #fff;
    display: flex;
    flex-direction: column;
    max-height: min(720px, calc(100vh - 2rem));
  }

  .log-dialog-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
    background: #f8f9fa;
  }

  .log-dialog-body {
    padding: 1.25rem;
    overflow: auto;
  }

  .log-dialog-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.075);
    background: #f8f9fa;
  }

  .log-detail-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.65rem 1rem;
    margin-bottom: 1.25rem;
  }

  .log-detail-label {
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .log-detail-value {
    min-width: 0;
    word-break: break-word;
  }

  .log-full-message {
    white-space: pre-wrap;
    word-break: break-word;
    background: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.075);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
  }

  @media (max-width: 576px) {
    .log-detail-grid {
      grid-template-columns: 1fr;
      gap: 0.25rem;
    }

    .log-detail-label {
      margin-top: 0.5rem;
    }
  }
</style>

<script>
  function textFrom(row, selector) {
    return row.querySelector(selector)?.textContent.trim() || "";
  }

  function messageFrom(row) {
    return row.querySelector(".log-message")?.getAttribute("data-message") || "";
  }

  function escapeHtml(value) {
    return String(value)
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#039;");
  }

  function openLogDialog(event) {
    const btn = event.target.closest("button");
    const tableRow = btn.closest("tr");

    const log = {
      time: textFrom(tableRow, ".log-time"),
      level: textFrom(tableRow, ".log-level"),
      loggerName: textFrom(tableRow, ".log-logger-name"),
      name: textFrom(tableRow, ".log-name"),
      file: textFrom(tableRow, ".log-file"),
      line: textFrom(tableRow, ".log-line"),
      functionName: textFrom(tableRow, ".log-function"),
      message: messageFrom(tableRow)
    };

    const dialog = document.getElementById("log-dialog");
    const body = document.getElementById("log-dialog-body");

    body.innerHTML = `
      <div class="log-detail-grid">
        <div class="log-detail-label">{{ translate('time') }}</div>
        <div class="log-detail-value">${escapeHtml(log.time)}</div>

        <div class="log-detail-label">{{ translate('level') }}</div>
        <div class="log-detail-value">
          <span class="badge ${badgeClassForLevel(log.level)}">
            ${escapeHtml(log.level)}
          </span>
        </div>

        <div class="log-detail-label">{{ translate('logger') }}</div>
        <div class="log-detail-value">${escapeHtml(log.loggerName)}</div>

        <div class="log-detail-label">{{ translate('module') }}</div>
        <div class="log-detail-value">
          <code>${escapeHtml(log.name)}</code>
        </div>

        <div class="log-detail-label">{{ translate('file') }}</div>
        <div class="log-detail-value">${escapeHtml(log.file)}</div>

        <div class="log-detail-label">{{ translate('line') }}</div>
        <div class="log-detail-value">${escapeHtml(log.line)}</div>

        <div class="log-detail-label">{{ translate('function') }}</div>
        <div class="log-detail-value">
          <code>${escapeHtml(log.functionName)}</code>
        </div>
      </div>

      <div class="d-flex justify-content-between align-items-center gap-2 mb-2">
        <h3 class="h6 mb-0">{{ translate('message') }}</h3>

        <button
          type="button"
          id="copy-log-message-btn"
          class="btn btn-sm btn-outline-secondary"
          onclick="copyLogMessage()"
          title="{{ translate('copy_message_to_clipboard') }}"
          aria-label="{{ translate('copy_message_to_clipboard') }}"
        >
          <i class="bi bi-clipboard me-1"></i>
          {{ translate('copy') }}
        </button>
      </div>

      <pre id="log-full-message" class="log-full-message">${escapeHtml(log.message)}</pre>
    `;

    dialog.showModal();
  }

  function closeLogDialog() {
    const dialog = document.getElementById("log-dialog");
    const body = document.getElementById("log-dialog-body");

    body.innerHTML = "";

    if (dialog.open) {
      dialog.close();
    }
  }

  function badgeClassForLevel(level) {
    switch (level) {
      case "ERROR":
      case "CRITICAL":
        return "text-bg-danger";
      case "WARNING":
      case "WARN":
        return "text-bg-warning";
      case "DEBUG":
        return "text-bg-primary";
      case "INFO":
        return "text-bg-success";
      default:
        return "text-bg-secondary";
    }
  }

  document.addEventListener("DOMContentLoaded", function () {
    const dialog = document.getElementById("log-dialog");
    const body = document.getElementById("log-dialog-body");

    dialog.addEventListener("close", function () {
      body.innerHTML = "";
    });

    dialog.addEventListener("click", function (event) {
      if (event.target === dialog) {
        closeLogDialog();
      }
    });

    document.addEventListener("keydown", function (event) {
      if (event.key === "Escape" && dialog.open) {
        closeLogDialog();
      }
    });
  });

  async function copyLogMessage() {
    const messageElement = document.getElementById("log-full-message");
    const copyButton = document.getElementById("copy-log-message-btn");

    if (!messageElement || !copyButton) {
      return;
    }

    const message = messageElement.textContent || "";

    try {
      await navigator.clipboard.writeText(message);

      copyButton.innerHTML = `
        <i class="bi bi-check2 me-1"></i>
        Copied
      `;

      copyButton.classList.remove("btn-outline-secondary");
      copyButton.classList.add("btn-success");

      setTimeout(function () {
        copyButton.innerHTML = `
          <i class="bi bi-clipboard me-1"></i>
          Copy
        `;

        copyButton.classList.remove("btn-success");
        copyButton.classList.add("btn-outline-secondary");
      }, 1500);
    } catch (error) {
      copyButton.innerHTML = `
        <i class="bi bi-exclamation-triangle me-1"></i>
        Failed
      `;

      copyButton.classList.remove("btn-outline-secondary");
      copyButton.classList.add("btn-danger");

      setTimeout(function () {
        copyButton.innerHTML = `
          <i class="bi bi-clipboard me-1"></i>
          Copy
        `;

        copyButton.classList.remove("btn-danger");
        copyButton.classList.add("btn-outline-secondary");
      }, 1500);
    }
  }
</script>
{% endblock %}