{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Recent Activity" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Recent Activity" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Review administrative and system actions recorded across the server." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto"><button type="button"
                class="btn btn-outline-danger btn-sm text-nowrap"
                id="emptyAuditLog"><i data-lucide="trash-2"></i>{% translate "Empty Audit Log" %}</button></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>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="mb-3">
            <div class="eenos-panel-title">{% translate "Audit Events" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Search events, inspect details, or remove selected records." %}</div>
        </div>
        <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
            <button type="button"
                    class="btn btn-sm btn-outline-danger"
                    id="deleteSelectedAudits"
                    disabled><i data-lucide="trash-2"></i>{% translate "Delete Selected" %}</button>
        </div>
        <table id="auditActivityTable"
               class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox"
                               class="form-check-input mt-0 align-middle"
                               id="selectAllAudits"
                               aria-label="{% translate 'Select all audit events' %}">
                    </th>
                    <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>
    <form method="post" id="deleteAuditForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="event_ids" id="auditEventIds"><input type="hidden" name="delete_selected" value="yes">
    </form>
    <form method="post" id="emptyAuditForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="empty_audits" value="yes">
    </form>
    <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 "Audit Event 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 "Metadata" %}</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>
    <div class="modal fade"
         id="auditDeleteModal"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="auditDeleteTitle"></h2>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-notice eenos-notice-warning">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title" id="auditDeleteHeading"></div>
                            <div class="eenos-notice-text" id="auditDeleteText"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" class="btn btn-danger" id="confirmAuditDelete"><i data-lucide="trash-2"></i>{% translate "Delete" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){const esc=v=>$('<div>').text(v==null?'':v).html(),selected=new Set(),detailsModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('auditDetailsModal')),deleteModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('auditDeleteModal'));let deleteMode='selected';const humanize=value=>{if(!value)return'—';const date=new Date(value);if(Number.isNaN(date.getTime()))return value;const seconds=Math.round((date-Date.now())/1000),abs=Math.abs(seconds),steps=[[31536000,'year'],[2592000,'month'],[604800,'week'],[86400,'day'],[3600,'hour'],[60,'minute']];for(const [size,unit] of steps)if(abs>=size)return new Intl.RelativeTimeFormat(undefined,{numeric:'auto'}).format(Math.round(seconds/size),unit);return new Intl.RelativeTimeFormat(undefined,{numeric:'auto'}).format(seconds,'second')},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,language:{processing:'{% translate "Loading..." %}'},pageLength:25,ajax:{url:"{% url 'audit_activity_data' %}",dataSrc:'data'},order:[[1,'desc']],columns:[{data:'event_id',orderable:false,searchable:false,width:'60px',className:'text-nowrap align-middle',responsivePriority:1,render:(d,t)=>t==='display'?'<input type="checkbox" class="form-check-input audit-row-select mt-0 align-middle" value="'+esc(d)+'" aria-label="{% translate "Select audit event" %}">':''},{data:'created_at',responsivePriority:2,className:'text-nowrap',render:(d,t)=>t==='display'?'<div class="fw-semibold" title="'+esc(d)+'">'+esc(exactDate(d))+'</div><div class="small text-muted">'+esc(humanize(d))+'</div>':d},{data:'summary',responsivePriority:1,render:(d,t,r)=>t==='display'?'<div class="fw-semibold">'+esc(d)+'</div><div class="small text-muted text-capitalize">'+esc(String(r.action||'').replaceAll('_',' '))+'</div>':d},{data:'actor',responsivePriority:2,render:(d,t,r)=>t==='display'?'<div>'+esc(d)+'</div><div class="small text-muted text-uppercase">'+esc(r.panel)+'</div>':d},{data:'category',responsivePriority:5,render:(d,t)=>t==='display'?'<span class="badge eenos-badge-neutral text-capitalize">'+esc(d)+'</span>':d},{data:'status',responsivePriority:2,className:'text-nowrap',render:(d,t)=>{if(t!=='display')return d;const state={success:['text-success','circle-check','{% translate "Success" %}'],failed:['text-danger','circle-x','{% translate "Failed" %}'],warning:['text-warning','triangle-alert','{% translate "Warning" %}']}[d]||['text-muted','circle-help',d];return '<span class="eenos-status '+state[0]+' d-inline-flex align-items-center gap-2"><i data-lucide="'+state[1]+'"></i><span>'+esc(state[2])+'</span></span>'}},{data:null,orderable:false,searchable:false,width:'92px',responsivePriority:1,className:'text-end',render:(d,t,r)=>t!=='display'?'':'<div class="eenos-dt-actions d-flex justify-content-end gap-1"><button type="button" class="btn btn-sm btn-outline-secondary view-audit" data-id="'+esc(r.event_id)+'" title="{% translate "View details" %}" aria-label="{% translate "View details" %}"><i data-lucide="eye"></i></button><button type="button" class="btn btn-sm btn-outline-danger delete-audit" data-id="'+esc(r.event_id)+'" title="{% translate "Delete event" %}" aria-label="{% translate "Delete event" %}"><i data-lucide="trash-2"></i></button></div>'}],drawCallback:function(){if(typeof lucide!=='undefined')lucide.createIcons();$('.audit-row-select').each(function(){$(this).prop('checked',selected.has(this.value))});}});table.on('responsive-display',()=>lucide.createIcons());const updateSelection=()=>$('#deleteSelectedAudits').prop('disabled',!selected.size);$(document).on('change','.audit-row-select',function(){this.checked?selected.add(this.value):selected.delete(this.value);updateSelection();});$('#selectAllAudits').on('change',function(){const checked=this.checked;table.rows({search:'applied'}).data().each(row=>checked?selected.add(row.event_id):selected.delete(row.event_id));table.draw(false);updateSelection();});$(document).on('click','.view-audit',function(e){e.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" %}',new Intl.DateTimeFormat(undefined,{dateStyle:'medium',timeStyle:'long'}).format(new Date(row.created_at))],['{% translate "Actor" %}',row.actor],['{% translate "Actor type" %}',row.actor_type],['{% translate "IP address" %}',row.actor_ip||'—'],['{% translate "Category" %}',row.category],['{% translate "Action" %}',row.action],['{% translate "Status" %}',row.status],['{% translate "Panel" %}',row.panel],['{% translate "Scope" %}',row.scope_type+' · '+row.scope_id],['{% 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">'+esc(label)+'</div><div class="fw-semibold text-break">'+esc(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();});function confirmDelete(mode,ids){deleteMode=mode;$('#auditEventIds').val(ids||'');const empty=mode==='empty';$('#auditDeleteTitle').text(empty?"{% translate 'Empty Audit Log' %}":"{% translate 'Delete Audit Events' %}");$('#auditDeleteHeading').text(empty?"{% translate 'Delete every recorded event?' %}":"{% translate 'Delete selected event records?' %}");$('#auditDeleteText').text(empty?"{% translate 'This permanently removes the complete audit history and cannot be undone.' %}":"{% translate 'The selected audit records will be permanently removed.' %}");deleteModal.show();}$(document).on('click','.delete-audit',function(e){e.stopPropagation();confirmDelete('selected',$(this).data('id'));});$('#deleteSelectedAudits').on('click',()=>confirmDelete('selected',Array.from(selected).join(',')));$('#emptyAuditLog').on('click',()=>confirmDelete('empty',''));$('#confirmAuditDelete').on('click',()=>document.getElementById(deleteMode==='empty'?'emptyAuditForm':'deleteAuditForm').submit());});
    </script>
{% endblock %}