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

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

{% block page_title %}Activity Log{% endblock %}
{% block page_description %}View and monitor all user and system activities{% endblock %}

{% block extra_css %}
<style>
    .activity-filters {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .activity-item {
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
    }
    
    .activity-item:hover {
        background-color: #f8f9fa;
        border-left-color: #007bff;
        transform: translateX(5px);
    }
    
    .activity-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        flex-shrink: 0;
    }
    
    .activity-success {
        border-left-color: #28a745;
    }
    
    .activity-failed {
        border-left-color: #dc3545;
    }
    
    .activity-security {
        border-left-color: #ffc107;
        background-color: rgba(255, 193, 7, 0.05);
    }
    
    .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);
    }
</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-list fa-2x mb-2"></i>
                <h4 class="mb-1">{{ total_activities|default:0 }}</h4>
                <small>Total Activities</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-check-circle fa-2x mb-2"></i>
                <h4 class="mb-1">{{ successful_activities|default:0 }}</h4>
                <small>Successful</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-exclamation-circle fa-2x mb-2"></i>
                <h4 class="mb-1">{{ failed_activities|default:0 }}</h4>
                <small>Failed</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-shield-alt fa-2x mb-2"></i>
                <h4 class="mb-1">{{ security_events|default:0 }}</h4>
                <small>Security Events</small>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="activity-filters">
    <form method="get" id="activity-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 activities...">
                </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>
                    {% for value, label in action_choices %}
                    <option value="{{ value }}" {% if request.GET.action == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label for="success" class="form-label">Status</label>
                <select class="form-select" id="success" name="success">
                    <option value="">All Status</option>
                    <option value="true" {% if request.GET.success == 'true' %}selected{% endif %}>Successful</option>
                    <option value="false" {% if request.GET.success == 'false' %}selected{% endif %}>Failed</option>
                </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="activity_type" class="form-label">Type</label>
                <select class="form-select" id="activity_type" name="activity_type">
                    <option value="">All Types</option>
                    {% for activity_type_option in activity_types %}
                    <option value="{{ activity_type_option.id }}" 
                            {% if request.GET.activity_type == activity_type_option.id|stringformat:'s' %}selected{% endif %}>
                        {{ activity_type_option.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label for="ip_address" class="form-label">IP Address</label>
                <input type="text" class="form-control" id="ip_address" name="ip_address" 
                       value="{{ request.GET.ip_address }}" placeholder="IP Address">
            </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:activity_list' %}" 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>Activities ({{ 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="exportActivities('csv')">
                <i class="fas fa-file-csv me-1"></i>Export CSV
            </button>
            <button type="button" class="btn btn-outline-primary" onclick="exportActivities('excel')">
                <i class="fas fa-file-excel me-1"></i>Export Excel
            </button>
            <button type="button" class="btn btn-outline-primary" onclick="exportActivities('pdf')">
                <i class="fas fa-file-pdf me-1"></i>Export PDF
            </button>
        </div>
    </div>
</div>

<!-- Activities List -->
<div class="row">
    <div class="col-12">
        {% if activities %}
        <div class="activity-list">
            {% for activity in activities %}
            <div class="card activity-item mb-3 {% if not activity.success %}activity-failed{% elif activity.activity_type.is_security_related %}activity-security{% else %}activity-success{% endif %}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <div class="activity-icon {% if activity.success %}bg-success{% else %}bg-danger{% endif %} text-white">
                                {% if activity.action == 'login' %}
                                    <i class="fas fa-sign-in-alt"></i>
                                {% elif activity.action == 'logout' %}
                                    <i class="fas fa-sign-out-alt"></i>
                                {% elif activity.action == 'create' %}
                                    <i class="fas fa-plus"></i>
                                {% elif activity.action == 'update' %}
                                    <i class="fas fa-edit"></i>
                                {% elif activity.action == 'delete' %}
                                    <i class="fas fa-trash"></i>
                                {% elif activity.action == 'view' %}
                                    <i class="fas fa-eye"></i>
                                {% elif activity.action == 'security_event' %}
                                    <i class="fas fa-shield-alt"></i>
                                {% else %}
                                    <i class="fas fa-cog"></i>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col-md-8">
                                    <h6 class="mb-1">
                                        {{ activity.get_action_display }}
                                        {% if activity.content_object %}
                                        - {{ activity.get_related_object_display }}
                                        {% endif %}
                                    </h6>
                                    <p class="mb-1 text-muted">{{ activity.description }}</p>
                                    <small class="text-muted">
                                        <i class="fas fa-user me-1"></i>
                                        {{ activity.user.get_full_name|default:activity.user.email|default:'System' }}
                                        {% if activity.ip_address %}
                                        <span class="ms-2">
                                            <i class="fas fa-map-marker-alt me-1"></i>
                                            {{ activity.ip_address }}
                                        </span>
                                        {% endif %}
                                        <span class="ms-2">
                                            <i class="fas fa-clock me-1"></i>
                                            {{ activity.created_at|date:'M d, Y H:i' }}
                                        </span>
                                    </small>
                                </div>
                                <div class="col-md-4 text-end">
                                    <div class="mb-2">
                                        {% if activity.success %}
                                        <span class="badge bg-success">
                                            <i class="fas fa-check me-1"></i>Success
                                        </span>
                                        {% else %}
                                        <span class="badge bg-danger">
                                            <i class="fas fa-times me-1"></i>Failed
                                        </span>
                                        {% endif %}
                                        
                                        {% if activity.activity_type.is_security_related %}
                                        <span class="badge bg-warning text-dark ms-1">
                                            <i class="fas fa-shield-alt me-1"></i>Security
                                        </span>
                                        {% endif %}
                                    </div>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-primary" 
                                                onclick="viewActivityDetails({{ activity.id }})" 
                                                data-bs-toggle="tooltip" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        {% if activity.extra_data %}
                                        <button type="button" class="btn btn-outline-info" 
                                                onclick="viewActivityData({{ activity.id }})" 
                                                data-bs-toggle="tooltip" title="View Extra Data">
                                            <i class="fas fa-database"></i>
                                        </button>
                                        {% endif %}
                                        {% if activity.content_object %}
                                        <button type="button" class="btn btn-outline-secondary" 
                                                onclick="viewRelatedObject({{ activity.id }})" 
                                                data-bs-toggle="tooltip" title="View Related Object">
                                            <i class="fas fa-link"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            {% if not activity.success and activity.error_message %}
                            <div class="row mt-2">
                                <div class="col-12">
                                    <div class="alert alert-danger alert-sm mb-0">
                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                        <strong>Error:</strong> {{ activity.error_message }}
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
        <nav aria-label="Activity 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-history fa-4x text-muted mb-3"></i>
            <h4 class="text-muted">No Activities Found</h4>
            <p class="text-muted">No activities match your current filters.</p>
            <a href="{% url 'activities:activity_list' %}" class="btn btn-primary">
                <i class="fas fa-refresh me-1"></i>Clear Filters
            </a>
        </div>
        {% endif %}
    </div>
</div>

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

<!-- Activity Data Modal -->
<div class="modal fade" id="activityDataModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Activity Extra Data</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <pre id="activityDataContent" class="bg-light p-3 rounded"></pre>
            </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() {
        $('#activity-filter-form').submit();
    });
    
    // Auto-submit on select changes
    $('#action, #success, #user, #activity_type').change(function() {
        $('#activity-filter-form').submit();
    });
});

// View activity details
function viewActivityDetails(activityId) {
    $.get(`/activities/api/activity/${activityId}/`, 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>${data.action_display}</td></tr>
                        <tr><td><strong>User:</strong></td><td>${data.user || 'System'}</td></tr>
                        <tr><td><strong>Status:</strong></td><td>
                            <span class="badge bg-${data.success ? 'success' : 'danger'}">
                                ${data.success ? 'Success' : 'Failed'}
                            </span>
                        </td></tr>
                        <tr><td><strong>IP Address:</strong></td><td>${data.ip_address || 'N/A'}</td></tr>
                        <tr><td><strong>Created:</strong></td><td>${new Date(data.created_at).toLocaleString()}</td></tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <h6>Description</h6>
                    <p>${data.description}</p>
                    ${data.error_message ? `<h6>Error Message</h6><div class="alert alert-danger">${data.error_message}</div>` : ''}
                </div>
            </div>
            ${data.related_object ? `<hr><h6>Related Object</h6><p>${data.related_object}</p>` : ''}
        `;
        $('#activityDetailsContent').html(content);
        $('#activityDetailsModal').modal('show');
    }).fail(function() {
        alert('Failed to load activity details.');
    });
}

// View activity extra data
function viewActivityData(activityId) {
    $.get(`/activities/api/activity/${activityId}/data/`, function(data) {
        $('#activityDataContent').text(JSON.stringify(data, null, 2));
        $('#activityDataModal').modal('show');
    }).fail(function() {
        alert('Failed to load activity data.');
    });
}

// View related object
function viewRelatedObject(activityId) {
    $.get(`/activities/api/activity/${activityId}/related/`, function(data) {
        if (data.url) {
            window.open(data.url, '_blank');
        } else {
            alert('No URL available for related object.');
        }
    }).fail(function() {
        alert('Failed to load related object information.');
    });
}

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