{% extends 'baseadmin.html.twig' %}
{% import "_modules/bsmacros.html.twig" as bs %}

{% block title %}{{ parent() }} - Admin Logs{% endblock %}

{% block breadcrumb %}
    {{ parent() }}
    <li class="breadcrumb-item active">Logs</li>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h5 class="mb-0">Admin Logs</h5>
</div>

<span {{ filtering ? bs.tooltip('You must clear the filters to close this panel.', 'top') : '' }}>
  <button class="btn btn-sm btn-secondary {{ filtering ? 'disabled' }} mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#log-filters" aria-expanded="true" aria-controls="log-filters">
    <i class="fas fa-filter"></i> Filters
  </button>
</span>
{% if filtering %}
<a class="btn btn-sm btn-danger mb-3" href="{{ path('admin.logs') }}">Clear Filters</a>
{% endif %}
<div class="card mb-4 collapse {% if filtering %}show{% endif %}" id="log-filters">
  <div class="card-body">
    <form method="get" class="p-3">
      <input type="hidden" name="_filter" value="1">
      <div class="row g-3 align-items-end mb-3">
        <div class="col">
          <label for="filter-dateFrom" class="form-label">Date From</label>
          <input type="date" id="filter-dateFrom" name="dateFrom" class="form-control" value="{% if dateFrom %}{{ dateFrom|date('Y-m-d') }}{% endif %}">
        </div>
        <div class="col">
          <label for="filter-dateTo" class="form-label">Date To <span class="text-muted" {{ bs.tooltip('This will only show logs up until the start of the selected date. If you want to include logs of that day, set it to the next day after.', 'top') }}><i class="fas fa-info-circle"></i></span></label>
          <input type="date" id="filter-dateTo" name="dateTo" class="form-control" value="{% if dateTo %}{{ dateTo|date('Y-m-d') }}{% endif %}">
        </div>
      </div>
      <div class="row g-3 align-items-end">
        <div class="col">
          <label for="filter-admin" class="form-label">Admin</label>
          <select id="filter-admin" name="admin" class="form-select">
            <option value="" {% if selectedAdmin is empty %}selected{% endif %}></option>
            {% for admin in admins %}
              <option value="{{ admin }}" {% if admin == selectedAdmin %}selected{% endif %}>{{ admin }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col">
          <label for="filter-route" class="form-label">Route</label>
          <select id="filter-route" name="routeName" class="form-select">
            <option value="" {% if selectedRoute is empty %}selected{% endif %}></option>
            {% for routeName in routeNames %}
              <option value="{{ routeName }}" {% if routeName == selectedRoute %}selected{% endif %}>{{ routeName }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col">
          <label for="filter-methods" class="form-label">Methods</label>
          <select id="filter-methods" name="method" class="form-select">
            <option value="" {% if selectedMethod is empty %}selected{% endif %}></option>
            {% for method in methodsList %}
              <option value="{{ method }}" {% if method == selectedMethod %}selected{% endif %}>{{ method }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col">
          <button type="submit" class="btn btn-primary w-100">Filter</button>
        </div>
      </div>
    </form>
  </div>
</div>


<div class="card mb-4" id="log-table">
  <div class="card-body p-0">
    <table class="table table-hover mb-0">
      <thead class="table-responsive">
        <tr>
          <th>ID</th>
          <th>Admin</th>
          <th>Request</th>
          <th>Status</th>
          <th class="text-end">Date</th>
        </tr>
      </thead>
      <tbody>
        {% for log in logs %}
          <tr>
            <td>
              <a href="#" class="text-decoration-none"
                data-tarin-route="{{ path('admin.logs.show.json', {id: log.id}) }}"
                data-tarin-display="modal"
                data-tarin-target="logModal"
                data-tarin-title="Log #{{ log.id }}"
              >
                {{ log.id }}
                <sup><i class="fas fa-eye"></i></sup>
              </a>
            </td>
            <td>
              {{ log.admin.name }}
              <small>({{ log.admin.email }})</small>
            </td>
            <td>
              <div class="badge bg-dark border rounded shadow">
                {{ log.method }} {{ log.route }}
              </div>
              <ul class="list-unstyled m-0">
                <li>
                  {# <b>↪</b> #}
                  <i class="fas fa-arrow-turn-right"></i>
                  <small>{{ log.routeName }}</small>
                </li>
              </ul>
            </td>
            {% if log.statusCode >= 200 and log.statusCode < 300 %}
              <td>
              <div class="badge bg-success rounded shadow">
                {{ log.statusCode }}
                <i class="fas fa-fw fa-check"></i>
              </div>
              </td>
            {% elseif log.statusCode >= 400 and log.statusCode < 600 %}
              <td>
                <div class="badge bg-danger rounded shadow">
                  {{ log.statusCode }}
                  <i class="fas fa-fw fa-times"></i>
                </div>
                {% if log.error %}
                  <div class="badge bg-danger rounded shadow">
                    {{ log.error|exception_type }}
                  </div>
                {% endif %}
              </td>
            {% else %}
              <td>
                <div class="badge bg-warning rounded shadow">
                  {{ log.statusCode }}
                  <i class="fas fa-fw fa-question"></i>
                </div>
              </td>
            {% endif %}
            <td class="text-end">{{ log.createdAt|date_tz }}</td>
          </tr>
        {% else %}
          <tr><td colspan="6" class="text-center py-3">No logs found.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% if totalPages > 1 %}
  <div class="card-footer d-flex justify-content-between align-items-center">
    <div class="fs-6">
      <div class="d-flex flex-column">
        <span class="badge bg-dark border rounded shadow ms-1">{{ (observation.duration * 1000)|number_format(2) }} ms | {{ (observation.peakMemory / 1024 / 1024)|number_format(2) }} MB</span>
        <span>Showing {{ (currentPage - 1) * limit + 1 }} to {{ currentPage * limit }} of {{ total }} logs.</span>
      </div>
    </div>
    <nav aria-label="Log pagination">
      <ul class="pagination pagination-sm justify-content-center mb-0">
        <li class="page-item {% if currentPage == 1 %}disabled{% endif %}"><a class="page-link" href="{{ path('admin.logs', {page: currentPage-1, admin: selectedAdmin, route: selectedRoute, method: selectedMethod}) }}">Previous</a></li>
        {% if totalPages > 10 %}
          <li class="page-item {% if 1 == currentPage %}active{% endif %}"><a class="page-link" href="{{ path('admin.logs', {page: 1, admin: selectedAdmin, route: selectedRoute, method: selectedMethod}) }}">1</a></li>
          <li class="page-item disabled">
            <span class="page-link">...</span>
          </li>
          <li class="page-item {% if currentPage == totalPages %}disabled{% endif %}"><a class="page-link" href="{{ path('admin.logs', {page: totalPages, admin: selectedAdmin, route: selectedRoute, method: selectedMethod}) }}">{{ totalPages }}</a></li>
        {% else %}
          {% for p in 1..totalPages %}
            <li class="page-item {% if p == currentPage %}active{% endif %}"><a class="page-link" href="{{ path('admin.logs', {page: p, admin: selectedAdmin, route: selectedRoute, method: selectedMethod}) }}">{{ p }}</a></li>
          {% endfor %}
        {% endif %}
        <li class="page-item {% if currentPage == totalPages %}disabled{% endif %}"><a class="page-link" href="{{ path('admin.logs', {page: currentPage+1, admin: selectedAdmin, route: selectedRoute, method: selectedMethod}) }}">Next</a></li>
      </ul>
    </nav>
  </div>
  {% endif %}
</div>

<!-- Log Modal -->
<div class="modal fade" id="logModal" tabindex="-1" aria-labelledby="logModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="--bs-modal-width: 800px;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="logModalLabel">Log</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="logModalBody">
        <table class="table table-bordered mb-4">
          <tbody>
            <tr>
              <th>ID</th>
              <td id="logId"></td>
            </tr>
            <tr>
              <th>Admin</th>
              <td id="logAdmin"></td>
            </tr>
            <tr>
              <th>Method</th>
              <td id="logMethod"></td>
            </tr>
            <tr>
              <th>Path</th>
              <td id="logRoute"></td>
            </tr>
            <tr>
              <th>Matched Route</th>
              <td id="logRouteName"></td>
            </tr>
            <tr>
              <th>Status Code</th>
              <td id="logStatusCode"></td>
            </tr>
            <tr>
              <th>Date</th>
              <td id="logCreatedAt"></td>
            </tr>
          </tbody>
        </table>
        <div class="accordion" id="logAccordion">
          <div class="accordion-item" id="logRequestPayloadAccordion">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#logRequestPayloadBody" aria-expanded="true" aria-controls="logRequestPayloadBody">
                <div class="d-flex flex-column">
                  <h5>Request Payload</h5>
                  <small class="text-muted">Data sent from the client to the server.</small>
                </div>
              </button>
            </h2>
            <div id="logRequestPayloadBody" class="accordion-collapse collapse" data-bs-parent="#logAccordion">
              <div class="accordion-body p-0">
                <div id="logRequestPayload" class="w-100" style="height: 250px;"></div>
              </div>
            </div>
          </div>
          <div class="accordion-item" id="logExceptionAccordion">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#logExceptionBody" aria-expanded="true" aria-controls="logExceptionBody">
                <div class="d-flex flex-column">
                  <h5>Exception <i class="fas fa-fw fa-exclamation-triangle text-danger"></i></h5>
                  <small class="text-muted">An exception was thrown. Here are the details.</small>
                </div>
              </button>
            </h2>
            <div id="logExceptionBody" class="accordion-collapse collapse" data-bs-parent="#logAccordion">
              <div class="accordion-body p-0" id="logException">
              </div>
            </div>
          </div>
          <div class="accordion-item" id="logResponsePayloadAccordion">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#logResponsePayloadBody" aria-expanded="true" aria-controls="logResponsePayloadBody">
                <div class="d-flex flex-column">
                  <h5>
                    Response Payload
                  </h5>
                  <small class="text-muted">The reply to the client from the server.</small>
                </div>
              </button>
            </h2>
            <div id="logResponsePayloadBody" class="accordion-collapse collapse" data-bs-parent="#logAccordion">
              <div class="accordion-body p-0">
                <div id="logResponsePayload" class="w-100" style="height: 250px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ parent() }}
<script>
  function elm(type, className, contents = []) {
    const el = document.createElement(type);
    el.className = className;
    if (Array.isArray(contents)) {
      contents.forEach(content => {
        el.appendChild(content);
      });
    } else {
      const text = document.createTextNode(contents);
      el.appendChild(text);
    }
    return el;
  }

  document.addEventListener('DOMContentLoaded', () => {    
    ace.require("ace/ext/language_tools");
    const logModal = new bootstrap.Modal(document.getElementById('logModal'));
    const logModalBody = document.getElementById('logModalBody');
    var requestPayloadViewer = ace.edit("logRequestPayload", {
        theme: "ace/theme/github_dark",
        mode: "ace/mode/json5",
    });
    requestPayloadViewer.setOptions({
      enableSnippets: true,
      enableLiveAutocompletion: true,
      readOnly: true,
    });

    var responsePayloadViewer = ace.edit("logResponsePayload", {
      theme: "ace/theme/github_dark",
      mode: "ace/mode/json5",
    });
    responsePayloadViewer.setOptions({
      enableSnippets: true,
      enableLiveAutocompletion: true,
      readOnly: true,
    });

    document.querySelectorAll('[data-tarin-display="modal"]').forEach(tarin => {
      tarin.addEventListener('click', () => {
        const route = tarin.getAttribute('data-tarin-route');
        const title = tarin.getAttribute('data-tarin-title');

        console.log(route, title)
        
        makeRequest({
          url: route,
          method: "GET"
        })
          .then(response => {
            console.log(response);
            const logId = response.data.id;
            const logAdmin = response.data.admin;
            const logMethod = response.data.method;
            const logRoute = response.data.route;
            const logRouteName = response.data.routeName;
            const logStatusCode = response.data.statusCode;
            const logCreatedAt = response.data.createdAt;
            const logRequestPayload = response.data.requestPayload;
            const logResponsePayload = response.data.responsePayload;
            const logException = response.data.error;

            document.getElementById('logId').textContent = logId;
            document.getElementById('logAdmin').textContent = logAdmin;
            document.getElementById('logMethod').textContent = logMethod;
            document.getElementById('logRoute').textContent = logRoute;
            document.getElementById('logRouteName').textContent = logRouteName;
            document.getElementById('logStatusCode').textContent = logStatusCode;
            document.getElementById('logCreatedAt').textContent = logCreatedAt;

            if (logException) {
              document.getElementById('logExceptionAccordion').classList.remove('d-none');
            }
            else {
              document.getElementById('logExceptionAccordion').classList.add('d-none');
            }

            // Request Payload
            var requestPayloadComment = "// This is a read-only view of the request payload.\n";
            requestPayloadViewer.setValue(requestPayloadComment + JSON.stringify(logRequestPayload, null, 2));

            // Response Payload
            var responsePayloadComment = "// This is a read-only view of the response payload. Non-JSON will not be properly formatted.\n";
            responsePayloadViewer.setValue(responsePayloadComment + JSON.stringify(logResponsePayload, null, 2));

            // Exception
            if (logException) {
              // error has: code, file, line, message, and trace (should be seperate from the table.)
              document.getElementById('logException').innerHTML = elm('div', 'w-100', [
                elm('table', 'table table-hover m-0', [
                  elm('tbody', '', [
                    elm('tr', '', [
                      elm('td', '', 'Type'),
                      elm('td', '', logException.type ?? 'Unknown')
                    ]),
                    elm('tr', '', [
                      elm('td', '', 'Code'),
                      elm('td', '', logException.code)
                    ]),
                    elm('tr', '', [
                      elm('td', '', 'File'),
                      elm('td', '', logException.file)
                    ]),
                    elm('tr', '', [
                      elm('td', '', 'Line'),
                      elm('td', '', logException.line)
                    ]),
                    elm('tr', '', [
                      elm('td', '', 'Message'),
                      elm('td', '', logException.message)
                    ]),
                  ])
                ]),
                elm('pre', 'w-100 p-2 m-0', logException.trace)
              ]).outerHTML;
            }

            logModalLabel.textContent = title;
            logModal.show();
          })
          .catch(error => {
            console.error('Error fetching log data:', error);
          });
      });
    });
  })
</script>
{% endblock %}