{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}


{% block title %}
<h2>{% translate "Data Revisions" %}</h2>
<small class="text-muted">{{ count }} {% translate "entries" %}</small>
<hr>
{% endblock %}


{% block content %}

{% if revisions %}
<div class="mb-3">
  <a href="?page={{ page|add:1 }}&size={{ size }}" class="btn btn-primary">
    {% translate "Next" %} <i class="fa fa-chevron-right"></i>
  </a>
</div>
<hr>

<table class="table table-striped table-hover small">
<thead class="thead-dark"><tr>
<th>{% translate "ID" %}</th>
<th>{% translate "Diff" %}</th>
<th>{% translate "Date" %}</th>
<th>{% translate "User" %}</th>
<th>{% translate "Action" %}</th>
<th>{% translate "Schema" %}</th>
<th>{% translate "Instance" %}</th>
<th>{% translate "Display Name" %}</th>
</tr>
</thead>
<tbody>
{% for revision in revisions %}
<tr class="cv-rev-row"
    data-date="{{ revision.date|date:'Y-m-d H:i:s' }}"
    data-schema="{{ revision.classname }}"
    data-keyname="{{ revision.keyname }}"
    data-displayname="{{ revision.displayname }}"
    data-action="{{ revision.action }}"
    data-username="{{ revision.username }}"
    data-diff="{{ revision.data_diff }}">
<td class="py-1 text-left">{{ revision.id }}</td>
<td class="py-1 text-center">{% if revision.data_diff %}<i class="fa fa-eye cv-rev-diff-icon"></i>{% endif %}</td>
<td class="py-1 px-1 mx-0">{{ revision.date|date:'Y-m-d H:i:s (D)' }}</td>
<td class="py-1 text-left">{{ revision.username }}</td>
<td class="py-1 text-left"><span class="badge cv-rev-badge-{{ revision.action }}">{{ revision.action }}</span></td>
<td class="py-1 text-left">{{ revision.classname }}</td>
<td class="py-1 text-left">{{ revision.keyname }}</td>
<td class="py-1 text-left">{{ revision.displayname|default:"" }}</td>
</tr>
{% endfor %}
</tbody>
</table>

{% else %}
<div class="alert alert-info">
  <p>{% translate "No more revision entries found." %}</p>
</div>
{% endif %}


<!-- Shared revision detail modal -->
<div class="modal fade" id="RevDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">
                    <span id="rev-modal-badge" class="badge"></span>
                    <span id="rev-modal-schema" class="ms-1"></span> :
                    <span id="rev-modal-keyname"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <table class="table table-sm mb-3">
                    <tbody>
                        <tr><td class="cv-rev-meta-key">{% translate "Date" %}</td><td id="rev-modal-date"></td></tr>
                        <tr><td class="cv-rev-meta-key">{% translate "Display name" %}</td><td id="rev-modal-displayname"></td></tr>
                        <tr><td class="cv-rev-meta-key">{% translate "User" %}</td><td id="rev-modal-username"></td></tr>
                    </tbody>
                </table>
                <div id="rev-modal-diff"></div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">
                    {% translate "Close" %}
                </button>
            </div>

        </div>
    </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function () {

    const modalEl = document.getElementById('RevDetailModal');
    const bsModal = new bootstrap.Modal(modalEl);

    document.querySelectorAll('.cv-rev-row').forEach(function (row) {
        row.addEventListener('click', function () {
            const action = row.dataset.action;

            document.getElementById('rev-modal-badge').textContent = action;
            document.getElementById('rev-modal-badge').className = 'badge cv-rev-badge-' + action;
            document.getElementById('rev-modal-schema').textContent = row.dataset.schema;
            document.getElementById('rev-modal-keyname').textContent = row.dataset.keyname;
            document.getElementById('rev-modal-date').textContent = row.dataset.date;
            document.getElementById('rev-modal-displayname').textContent = row.dataset.displayname;
            document.getElementById('rev-modal-username').textContent = row.dataset.username;

            const diffContainer = document.getElementById('rev-modal-diff');
            const diffStr = row.dataset.diff;
            if (diffStr) {
                try {
                    diffContainer.innerHTML = renderDiff(JSON.parse(diffStr));
                } catch (e) {
                    diffContainer.innerHTML = '<p class="text-muted small">Invalid diff data.</p>';
                }
            } else {
                diffContainer.innerHTML = '<p class="text-muted">{% translate "No changes recorded." %}</p>';
            }

            bsModal.show();
        });
    });

    function renderDiff(diff) {
        let rows = '';
        ['displayname', 'keyname', 'is_enabled'].forEach(function (key) {
            if (diff[key]) {
                rows += diffRow(key, String(diff[key].before), String(diff[key].after));
            }
        });
        if (diff.fields) {
            Object.entries(diff.fields).forEach(function ([fname, change]) {
                const before = Array.isArray(change.before) ? change.before.join(', ') : String(change.before);
                const after  = Array.isArray(change.after)  ? change.after.join(', ')  : String(change.after);
                rows += diffRow(fname, before, after);
            });
        }
        if (!rows) {
            return '<p class="text-muted">{% translate "No changes recorded." %}</p>';
        }
        return '<table class="table table-sm cv-rev-diff-table">'
             + '<thead><tr><th>{% translate "Field" %}</th>'
             + '<th class="cv-rev-before">{% translate "Before" %}</th>'
             + '<th class="cv-rev-after">{% translate "After" %}</th></tr></thead>'
             + '<tbody>' + rows + '</tbody></table>';
    }

    function diffRow(field, before, after) {
        return '<tr><td>' + esc(field) + '</td>'
             + '<td class="cv-rev-before">' + esc(before) + '</td>'
             + '<td class="cv-rev-after">'  + esc(after)  + '</td></tr>';
    }

    function esc(s) {
        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

});
</script>

{% endblock %}
