{% extends 'activities/base.html' %}
{% load static %}

{% block title %}Audit Log - Ad-tlas{% endblock %}

{% block page_title %}Audit Log{% endblock %}
{% block page_description %}Detailed audit trail with before/after states and change tracking{% endblock %}

{% block extra_css %}
<style>
    .audit-filters {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .audit-item {
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
        margin-bottom: 1rem;
    }
    
    .audit-item:hover {
        background-color: #f8f9fa;
        border-left-color: #007bff;
        transform: translateX(5px);
    }
    
    .audit-create {
        border-left-color: #28a745;
    }
    
    .audit-update {
        border-left-color: #ffc107;
    }
    
    .audit-delete {
        border-left-color: #dc3545;
    }
    
    .change-diff {
        background: #f8f9fa;
        border-radius: 5px;
        padding: 1rem;
        margin-top: 1rem;
    }
    
    .diff-added {
        background-color: #d4edda;
        color: #155724;
        padding: 2px 4px;
        border-radius: 3px;
    }
    
    .diff-removed {
        background-color: #f8d7da;
        color: #721c24;
        padding: 2px 4px;
        border-radius: 3px;
        text-decoration: line-through;
    }
    
    .diff-unchanged {
        color: #6c757d;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }
    
    .stats-card:hover {
        transform: translateY(-5px);
    }
    
    .json-viewer {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 5px;
        padding: 0.75rem;
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
        max-height: 200px;
        overflow-y: auto;
    }
    
    .change-summary {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: white;
        border-radius: 5px;
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-md-3 mb-3">
        <div class="card stats-card h-100">
            <div class="card-body text-center">
                <i class="fas fa-clipboard-list fa-2x mb-2"></i>
                <h4 class="mb-1">{{ total_audits|default:0 }}</h4>
                <small>Total Audits</small>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card stats-card h-100" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">
            <div class="card-body text-center">
                <i class="fas fa-plus-circle fa-2x mb-2"></i>
                <h4 class="mb-1">{{ create_audits|default:0 }}</h4>
                <small>Created</small>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card stats-card h-100" style="background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);">
            <div class="card-body text-center">
                <i class="fas fa-edit fa-2x mb-2"></i>
                <h4 class="mb-1">{{ update_audits|default:0 }}</h4>
                <small>Updated</small>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card stats-card h-100" style="background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);">
            <div class="card-body text-center">
                <i class="fas fa-trash fa-2x mb-2"></i>
                <h4 class="mb-1">{{ delete_audits|default:0 }}</h4>
                <small>Deleted</small>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="audit-filters">
    <form method="get" id="audit-filter-form">
        <div class="row g-3">
            <div class="col-md-3">
                <label for="search" class="form-label">Search</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ request.GET.search }}" placeholder="Search audit logs...">
                </div>
            </div>
            <div class="col-md-2">
                <label for="action" class="form-label">Action</label>
                <select class="form-select" id="action" name="action">
                    <option value="">All Actions</option>
                    <option value="create" {% if request.GET.action == 'create' %}selected{% endif %}>Create</option>
                    <option value="update" {% if request.GET.action == 'update' %}selected{% endif %}>Update</option>
                    <option value="delete" {% if request.GET.action == 'delete' %}selected{% endif %}>Delete</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="model" class="form-label">Model</label>
                <select class="form-select" id="model" name="model">
                    <option value="">All Models</option>
                    {% for model_option in models %}
                    <option value="{{ model_option }}" {% if request.GET.model == model_option %}selected{% endif %}>{{ model_option|title }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label for="user" class="form-label">User</label>
                <select class="form-select" id="user" name="user">
                    <option value="">All Users</option>
                    {% for user_option in users %}
                    <option value="{{ user_option.id }}" {% if request.GET.user == user_option.id|stringformat:'s' %}selected{% endif %}>
                        {{ user_option.get_full_name|default:user_option.email }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label for="date_from" class="form-label">Date From</label>
                <input type="date" class="form-control" id="date_from" name="date_from" 
                       value="{{ request.GET.date_from }}">
            </div>
            <div class="col-md-1">
                <label class="form-label">&nbsp;</label>
                <div class="d-grid">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-filter"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-2">
                <label for="date_to" class="form-label">Date To</label>
                <input type="date" class="form-control" id="date_to" name="date_to" 
                       value="{{ request.GET.date_to }}">
            </div>
            <div class="col-md-2">
                <label for="object_id" class="form-label">Object ID</label>
                <input type="text" class="form-control" id="object_id" name="object_id" 
                       value="{{ request.GET.object_id }}" placeholder="Object ID">
            </div>
            <div class="col-md-4">
                <label class="form-label">Quick Filters</label>
                <div class="btn-group" role="group">
                    <input type="radio" class="btn-check" name="quick_filter" id="today" value="today" 
                           {% if request.GET.quick_filter == 'today' %}checked{% endif %}>
                    <label class="btn btn-outline-secondary" for="today">Today</label>
                    
                    <input type="radio" class="btn-check" name="quick_filter" id="week" value="week" 
                           {% if request.GET.quick_filter == 'week' %}checked{% endif %}>
                    <label class="btn btn-outline-secondary" for="week">This Week</label>
                    
                    <input type="radio" class="btn-check" name="quick_filter" id="month" value="month" 
                           {% if request.GET.quick_filter == 'month' %}checked{% endif %}>
                    <label class="btn btn-outline-secondary" for="month">This Month</label>
                </div>
            </div>
            <div class="col-md-2">
                <label class="form-label">&nbsp;</label>
                <div class="d-grid">
                    <a href="{% url 'activities:audit_log' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-1"></i>Clear
                    </a>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Export Options -->
<div class="row mb-3">
    <div class="col-md-6">
        <h5>Audit Logs ({{ page_obj.paginator.count }} total)</h5>
    </div>
    <div class="col-md-6 text-end">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-primary" onclick="exportAudits('csv')">
                <i class="fas fa-file-csv me-1"></i>Export CSV
            </button>
            <button type="button" class="btn btn-outline-primary" onclick="exportAudits('excel')">
                <i class="fas fa-file-excel me-1"></i>Export Excel
            </button>
            <button type="button" class="btn btn-outline-primary" onclick="exportAudits('pdf')">
                <i class="fas fa-file-pdf me-1"></i>Export PDF
            </button>
        </div>
    </div>
</div>

<!-- Audit Logs List -->
<div class="row">
    <div class="col-12">
        {% if audit_logs %}
        <div class="audit-list">
            {% for audit in audit_logs %}
            <div class="card audit-item audit-{{ audit.action }}">
                <div class="card-body">
                    <div class="row align-items-start">
                        <div class="col-auto">
                            <div class="text-center">
                                {% if audit.action == 'create' %}
                                <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center" 
                                     style="width: 40px; height: 40px;">
                                    <i class="fas fa-plus"></i>
                                </div>
                                {% elif audit.action == 'update' %}
                                <div class="bg-warning text-dark rounded-circle d-flex align-items-center justify-content-center" 
                                     style="width: 40px; height: 40px;">
                                    <i class="fas fa-edit"></i>
                                </div>
                                {% elif audit.action == 'delete' %}
                                <div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center" 
                                     style="width: 40px; height: 40px;">
                                    <i class="fas fa-trash"></i>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col-md-8">
                                    <h6 class="mb-1">
                                        {{ audit.get_action_display|title }} {{ audit.content_type.model|title }}
                                        <span class="badge bg-secondary ms-2">ID: {{ audit.object_id }}</span>
                                    </h6>
                                    <p class="mb-1 text-muted">{{ audit.object_repr|default:'Object representation not available' }}</p>
                                    <small class="text-muted">
                                        <i class="fas fa-user me-1"></i>
                                        {{ audit.user.get_full_name|default:audit.user.email|default:'System' }}
                                        <span class="ms-2">
                                            <i class="fas fa-clock me-1"></i>
                                            {{ audit.timestamp|date:'M d, Y H:i' }}
                                        </span>
                                        {% if audit.changes %}
                                        <span class="ms-2">
                                            <i class="fas fa-exchange-alt me-1"></i>
                                            {{ audit.changes|length }} change{{ audit.changes|length|pluralize }}
                                        </span>
                                        {% endif %}
                                    </small>
                                </div>
                                <div class="col-md-4 text-end">
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-primary" 
                                                onclick="viewAuditDetails({{ audit.id }})" 
                                                data-bs-toggle="tooltip" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        {% if audit.changes %}
                                        <button type="button" class="btn btn-outline-info" 
                                                onclick="viewChanges({{ audit.id }})" 
                                                data-bs-toggle="tooltip" title="View Changes">
                                            <i class="fas fa-exchange-alt"></i>
                                        </button>
                                        {% endif %}
                                        {% if audit.before_state or audit.after_state %}
                                        <button type="button" class="btn btn-outline-warning" 
                                                onclick="compareStates({{ audit.id }})" 
                                                data-bs-toggle="tooltip" title="Compare States">
                                            <i class="fas fa-code-branch"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Change Summary -->
                            {% if audit.changes %}
                            <div class="change-summary mt-2">
                                <small>
                                    <i class="fas fa-info-circle me-1"></i>
                                    <strong>Changes:</strong>
                                    {% for field, change in audit.changes.items|slice:":3" %}
                                    <span class="badge bg-light text-dark ms-1">{{ field }}</span>
                                    {% endfor %}
                                    {% if audit.changes|length > 3 %}
                                    <span class="badge bg-light text-dark ms-1">+{{ audit.changes|length|add:"-3" }} more</span>
                                    {% endif %}
                                </small>
                            </div>
                            {% endif %}
                            
                            <!-- Quick Change Preview -->
                            {% if audit.action == 'update' and audit.changes %}
                            <div class="change-diff mt-2">
                                {% for field, change in audit.changes.items|slice:":2" %}
                                <div class="mb-1">
                                    <strong>{{ field|title }}:</strong>
                                    {% if change.old %}
                                    <span class="diff-removed">{{ change.old|truncatechars:50 }}</span>
                                    {% endif %}
                                    {% if change.new %}
                                    <span class="diff-added">{{ change.new|truncatechars:50 }}</span>
                                    {% endif %}
                                </div>
                                {% endfor %}
                                {% if audit.changes|length > 2 %}
                                <small class="text-muted">... and {{ audit.changes|length|add:"-2" }} more changes</small>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
        <nav aria-label="Audit pagination">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page=1">
                        <i class="fas fa-angle-double-left"></i>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}">
                        <i class="fas fa-angle-left"></i>
                    </a>
                </li>
                {% endif %}
                
                {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                <li class="page-item active">
                    <span class="page-link">{{ num }}</span>
                </li>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <li class="page-item">
                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ num }}">{{ num }}</a>
                </li>
                {% endif %}
                {% endfor %}
                
                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}">
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.paginator.num_pages }}">
                        <i class="fas fa-angle-double-right"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
        
        {% else %}
        <!-- Empty State -->
        <div class="text-center py-5">
            <i class="fas fa-clipboard-list fa-4x text-muted mb-3"></i>
            <h4 class="text-muted">No Audit Logs Found</h4>
            <p class="text-muted">No audit logs match your current filters.</p>
            <a href="{% url 'activities:audit_log' %}" class="btn btn-primary">
                <i class="fas fa-refresh me-1"></i>Clear Filters
            </a>
        </div>
        {% endif %}
    </div>
</div>

<!-- Audit Details Modal -->
<div class="modal fade" id="auditDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Audit Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="auditDetailsContent">
                <!-- Content loaded via AJAX -->
            </div>
        </div>
    </div>
</div>

<!-- Changes Modal -->
<div class="modal fade" id="changesModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Field Changes</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="changesContent">
                <!-- Content loaded via AJAX -->
            </div>
        </div>
    </div>
</div>

<!-- State Comparison Modal -->
<div class="modal fade" id="stateComparisonModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">State Comparison</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="stateComparisonContent">
                <!-- Content loaded via AJAX -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Auto-submit form on filter changes
$(document).ready(function() {
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Auto-submit on quick filter change
    $('input[name="quick_filter"]').change(function() {
        $('#audit-filter-form').submit();
    });
    
    // Auto-submit on select changes
    $('#action, #model, #user').change(function() {
        $('#audit-filter-form').submit();
    });
});

// View audit details
function viewAuditDetails(auditId) {
    $.get(`/activities/api/audit/${auditId}/`, function(data) {
        let content = `
            <div class="row">
                <div class="col-md-6">
                    <h6>Basic Information</h6>
                    <table class="table table-sm">
                        <tr><td><strong>Action:</strong></td><td><span class="badge bg-${data.action === 'create' ? 'success' : data.action === 'update' ? 'warning' : 'danger'}">${data.action_display}</span></td></tr>
                        <tr><td><strong>Model:</strong></td><td>${data.content_type}</td></tr>
                        <tr><td><strong>Object ID:</strong></td><td>${data.object_id}</td></tr>
                        <tr><td><strong>User:</strong></td><td>${data.user || 'System'}</td></tr>
                        <tr><td><strong>Timestamp:</strong></td><td>${new Date(data.timestamp).toLocaleString()}</td></tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <h6>Object Representation</h6>
                    <p>${data.object_repr || 'Not available'}</p>
                    ${data.changes ? `<h6>Changes Summary</h6><p>${Object.keys(data.changes).length} field(s) changed</p>` : ''}
                </div>
            </div>
        `;
        $('#auditDetailsContent').html(content);
        $('#auditDetailsModal').modal('show');
    }).fail(function() {
        alert('Failed to load audit details.');
    });
}

// View changes
function viewChanges(auditId) {
    $.get(`/activities/api/audit/${auditId}/changes/`, function(data) {
        let content = '<div class="table-responsive"><table class="table table-striped"><thead><tr><th>Field</th><th>Old Value</th><th>New Value</th></tr></thead><tbody>';
        
        for (const [field, change] of Object.entries(data.changes)) {
            content += `
                <tr>
                    <td><strong>${field}</strong></td>
                    <td><span class="diff-removed">${change.old || 'N/A'}</span></td>
                    <td><span class="diff-added">${change.new || 'N/A'}</span></td>
                </tr>
            `;
        }
        
        content += '</tbody></table></div>';
        $('#changesContent').html(content);
        $('#changesModal').modal('show');
    }).fail(function() {
        alert('Failed to load changes.');
    });
}

// Compare states
function compareStates(auditId) {
    $.get(`/activities/api/audit/${auditId}/states/`, function(data) {
        let content = `
            <div class="row">
                <div class="col-md-6">
                    <h6>Before State</h6>
                    <div class="json-viewer">
                        <pre>${JSON.stringify(data.before_state || {}, null, 2)}</pre>
                    </div>
                </div>
                <div class="col-md-6">
                    <h6>After State</h6>
                    <div class="json-viewer">
                        <pre>${JSON.stringify(data.after_state || {}, null, 2)}</pre>
                    </div>
                </div>
            </div>
        `;
        $('#stateComparisonContent').html(content);
        $('#stateComparisonModal').modal('show');
    }).fail(function() {
        alert('Failed to load state comparison.');
    });
}

// Export audits
function exportAudits(format) {
    const params = new URLSearchParams(window.location.search);
    params.set('export', format);
    window.location.href = `{% url 'activities:audit_export' %}?${params.toString()}`;
}
</script>
{% endblock %}