{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Activity Logs" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Activity Logs" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Review important actions recorded for your hosting account." %}</div>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "System" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "Activity Logs" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Recent Activity" %}</span>
    </nav>
    <div class="eenos-card">
        <div class="mb-3">
            <div class="eenos-panel-title">{% translate "Recent Activity" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Search your account activity and inspect individual event details." %}</div>
        </div>
        <table id="auditActivityTable" class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>{% translate "Time" %}</th>
                    <th>{% translate "Activity" %}</th>
                    <th>{% translate "Actor" %}</th>
                    <th>{% translate "Category" %}</th>
                    <th>{% translate "Status" %}</th>
                    <th class="text-end">{% translate "Action" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="modal fade" id="auditDetailsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5">{% translate "Activity Details" %}</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="fw-semibold mb-3" id="auditDetailSummary"></div>
                    <div class="row g-3" id="auditDetailGrid"></div>
                    <div id="auditMetadataWrap" class="mt-4 d-none">
                        <div class="small fw-semibold mb-2">{% translate "Additional Details" %}</div>
                        <pre class="eenos-code-view mb-0" id="auditDetailMetadata"></pre>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% translate "Close" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
        $(function () {
            const escapeHtml = value => $('<div>').text(value == null ? '' : value).html();
            const detailsModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('auditDetailsModal'));
            const relativeDate = value => {
                if (!value) return '—';
                const date = new Date(value);
                if (Number.isNaN(date.getTime())) return value;
                const seconds = Math.round((date - Date.now()) / 1000);
                const absolute = Math.abs(seconds);
                const units = [[31536000, 'year'], [2592000, 'month'], [604800, 'week'], [86400, 'day'], [3600, 'hour'], [60, 'minute']];
                for (const [size, unit] of units) {
                    if (absolute >= size) return new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' }).format(Math.round(seconds / size), unit);
                }
                return new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' }).format(seconds, 'second');
            };
            const exactDate = value => {
                const date = new Date(value);
                return Number.isNaN(date.getTime()) ? value : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'medium' }).format(date);
            };
            const table = $('#auditActivityTable').DataTable({
                responsive: { details: { renderer: DataTable.Responsive.renderer.listHiddenNodes() } },
                processing: true,
                pageLength: 25,
                lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "{% translate 'All' %}"]],
                ajax: { url: "{% url 'audit_activity_data' %}", dataSrc: 'data' },
                order: [[0, 'desc']],
                columns: [
                    { data: 'created_at', responsivePriority: 2, width: '210px', className: 'text-nowrap align-middle', render: (data, type) => type === 'display' ? '<div><div class="fw-semibold" title="' + escapeHtml(data) + '">' + escapeHtml(exactDate(data)) + '</div><div class="small text-muted">' + escapeHtml(relativeDate(data)) + '</div></div>' : data },
                    { data: 'summary', responsivePriority: 1, render: (data, type, row) => type === 'display' ? '<div class="fw-semibold">' + escapeHtml(data) + '</div><div class="small text-muted">' + escapeHtml(String(row.action || '').replaceAll('.', ' · ').replaceAll('_', ' ')) + '</div>' : data },
                    { data: 'actor', responsivePriority: 4, render: (data, type) => type === 'display' ? escapeHtml(data || '—') : data },
                    { data: 'category', responsivePriority: 5, render: (data, type) => type === 'display' ? '<span class="badge eenos-badge-neutral text-capitalize">' + escapeHtml(data) + '</span>' : data },
                    { data: 'status', responsivePriority: 3, className: 'text-nowrap', render: (data, type) => {
                        if (type !== 'display') return data;
                        const state = { success: ['text-success', 'circle-check', "{% translate 'Success' %}"], failed: ['text-danger', 'circle-x', "{% translate 'Failed' %}"], warning: ['text-warning', 'triangle-alert', "{% translate 'Warning' %}"] }[data] || ['text-muted', 'circle-help', data];
                        return '<span class="eenos-status ' + state[0] + ' d-inline-flex align-items-center gap-2"><i data-lucide="' + state[1] + '"></i><span>' + escapeHtml(state[2]) + '</span></span>';
                    } },
                    { data: null, orderable: false, searchable: false, width: '60px', responsivePriority: 1, className: 'text-end', render: (data, type, row) => type !== 'display' ? '' : '<div class="eenos-dt-actions d-flex justify-content-end"><button type="button" class="btn btn-sm btn-outline-secondary view-audit" data-id="' + escapeHtml(row.event_id) + '" title="{% translate "View details" %}" aria-label="{% translate "View details" %}"><i data-lucide="eye"></i></button></div>' }
                ],
                language: {
                    processing: '{% translate "Loading..." %}',
                    emptyTable: "{% translate 'No account activity has been recorded yet.' %}",
                    zeroRecords: "{% translate 'No matching activity was found.' %}",
                    search: "{% translate 'Search:' %}",
                    lengthMenu: "{% translate 'Show' %} _MENU_",
                    info: "{% translate 'Showing _START_ to _END_ of _TOTAL_ events' %}"
                },
                drawCallback: function () { if (typeof lucide !== 'undefined') lucide.createIcons(); }
            });
            table.on('responsive-display', () => { if (typeof lucide !== 'undefined') lucide.createIcons(); });
            $(document).on('click', '.view-audit', function (event) {
                event.stopPropagation();
                const row = table.rows().data().toArray().find(item => item.event_id === $(this).data('id'));
                if (!row) return;
                $('#auditDetailSummary').text(row.summary);
                const fields = [
                    ["{% translate 'Time' %}", exactDate(row.created_at)], ["{% translate 'Actor' %}", row.actor || '—'],
                    ["{% translate 'IP address' %}", row.actor_ip || '—'], ["{% translate 'Category' %}", row.category || '—'],
                    ["{% translate 'Action' %}", row.action || '—'], ["{% translate 'Status' %}", row.status || '—'],
                    ["{% translate 'Resource' %}", (row.resource_type || '—') + (row.resource_id ? ' · ' + row.resource_id : '')],
                    ["{% translate 'Event ID' %}", row.event_id], ["{% translate 'Request ID' %}", row.request_id || '—']
                ];
                $('#auditDetailGrid').html(fields.map(([label, value]) => '<div class="col-12 col-md-6"><div class="small text-muted">' + escapeHtml(label) + '</div><div class="fw-semibold text-break">' + escapeHtml(value) + '</div></div>').join(''));
                const hasMetadata = row.metadata && Object.keys(row.metadata).length;
                $('#auditMetadataWrap').toggleClass('d-none', !hasMetadata);
                $('#auditDetailMetadata').text(hasMetadata ? JSON.stringify(row.metadata, null, 2) : '');
                detailsModal.show();
            });
        });
    </script>
{% endblock %}