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

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

{% block page_title %}Activity Details{% endblock %}
{% block page_description %}Detailed view of activity record{% endblock %}

{% block extra_css %}
<style>
    .activity-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .activity-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-right: 1.5rem;
        flex-shrink: 0;
    }
    
    .info-card {
        border: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border-radius: 10px;
        transition: transform 0.3s ease;
    }
    
    .info-card:hover {
        transform: translateY(-5px);
    }
    
    .info-label {
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }
    
    .info-value {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .timeline-item {
        border-left: 3px solid #e9ecef;
        padding-left: 1.5rem;
        margin-bottom: 1.5rem;
        position: relative;
    }
    
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -6px;
        top: 0;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #007bff;
    }
    
    .json-viewer {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 5px;
        padding: 1rem;
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
        max-height: 400px;
        overflow-y: auto;
    }
    
    .security-alert {
        background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%);
        color: white;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<!-- Activity Header -->
<div class="activity-header">
    <div class="row align-items-center">
        <div class="col-auto">
            <div class="activity-icon bg-white text-primary">
                {% 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">
            <h2 class="mb-1">{{ activity.get_action_display }}</h2>
            <p class="mb-0 opacity-75">{{ activity.description }}</p>
        </div>
        <div class="col-auto">
            {% if activity.success %}
            <span class="badge bg-success fs-6">
                <i class="fas fa-check me-1"></i>Success
            </span>
            {% else %}
            <span class="badge bg-danger fs-6">
                <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 fs-6 ms-2">
                <i class="fas fa-shield-alt me-1"></i>Security
            </span>
            {% endif %}
        </div>
    </div>
</div>

<!-- Security Alert -->
{% if activity.activity_type.is_security_related %}
<div class="security-alert">
    <div class="row align-items-center">
        <div class="col-auto">
            <i class="fas fa-exclamation-triangle fa-2x"></i>
        </div>
        <div class="col">
            <h5 class="mb-1">Security-Related Activity</h5>
            <p class="mb-0">This activity has been flagged as security-related and requires attention.</p>
        </div>
    </div>
</div>
{% endif %}

<!-- Error Alert -->
{% if not activity.success and activity.error_message %}
<div class="alert alert-danger" role="alert">
    <div class="row align-items-center">
        <div class="col-auto">
            <i class="fas fa-exclamation-circle fa-2x"></i>
        </div>
        <div class="col">
            <h5 class="alert-heading mb-1">Error Occurred</h5>
            <p class="mb-0">{{ activity.error_message }}</p>
        </div>
    </div>
</div>
{% endif %}

<!-- Main Information -->
<div class="row mb-4">
    <!-- Basic Information -->
    <div class="col-md-6 mb-4">
        <div class="card info-card h-100">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>Basic Information
                </h5>
            </div>
            <div class="card-body">
                <div class="info-label">Activity Type</div>
                <div class="info-value">
                    <span class="badge bg-secondary">{{ activity.activity_type.name }}</span>
                </div>
                
                <div class="info-label">Action</div>
                <div class="info-value">{{ activity.get_action_display }}</div>
                
                <div class="info-label">Status</div>
                <div class="info-value">
                    {% if activity.success %}
                    <span class="text-success">
                        <i class="fas fa-check-circle me-1"></i>Successful
                    </span>
                    {% else %}
                    <span class="text-danger">
                        <i class="fas fa-times-circle me-1"></i>Failed
                    </span>
                    {% endif %}
                </div>
                
                <div class="info-label">Created At</div>
                <div class="info-value">
                    <i class="fas fa-clock me-1"></i>
                    {{ activity.created_at|date:'F d, Y H:i:s' }}
                    <small class="text-muted">({{ activity.created_at|timesince }} ago)</small>
                </div>
                
                {% if activity.updated_at != activity.created_at %}
                <div class="info-label">Updated At</div>
                <div class="info-value">
                    <i class="fas fa-edit me-1"></i>
                    {{ activity.updated_at|date:'F d, Y H:i:s' }}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- User & Session Information -->
    <div class="col-md-6 mb-4">
        <div class="card info-card h-100">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">
                    <i class="fas fa-user me-2"></i>User & Session
                </h5>
            </div>
            <div class="card-body">
                <div class="info-label">User</div>
                <div class="info-value">
                    {% if activity.user %}
                    <div class="d-flex align-items-center">
                        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2" 
                             style="width: 40px; height: 40px;">
                            {{ activity.user.get_full_name|default:activity.user.email|first|upper }}
                        </div>
                        <div>
                            <div class="fw-bold">{{ activity.user.get_full_name|default:activity.user.email }}</div>
                            {% if activity.user.get_full_name %}
                            <small class="text-muted">{{ activity.user.email }}</small>
                            {% endif %}
                        </div>
                    </div>
                    {% else %}
                    <span class="text-muted">
                        <i class="fas fa-robot me-1"></i>System
                    </span>
                    {% endif %}
                </div>
                
                <div class="info-label">IP Address</div>
                <div class="info-value">
                    {% if activity.ip_address %}
                    <code>{{ activity.ip_address }}</code>
                    <button class="btn btn-sm btn-outline-secondary ms-2" 
                            onclick="lookupIP('{{ activity.ip_address }}')" 
                            data-bs-toggle="tooltip" title="Lookup IP">
                        <i class="fas fa-search"></i>
                    </button>
                    {% else %}
                    <span class="text-muted">Not recorded</span>
                    {% endif %}
                </div>
                
                <div class="info-label">User Agent</div>
                <div class="info-value">
                    {% if activity.user_agent %}
                    <small class="text-muted">{{ activity.user_agent|truncatechars:100 }}</small>
                    {% if activity.user_agent|length > 100 %}
                    <button class="btn btn-sm btn-outline-secondary ms-2" 
                            onclick="showFullUserAgent()" 
                            data-bs-toggle="tooltip" title="Show Full User Agent">
                        <i class="fas fa-expand"></i>
                    </button>
                    {% endif %}
                    {% else %}
                    <span class="text-muted">Not recorded</span>
                    {% endif %}
                </div>
                
                <div class="info-label">Session Key</div>
                <div class="info-value">
                    {% if activity.session_key %}
                    <code>{{ activity.session_key|truncatechars:20 }}...</code>
                    {% else %}
                    <span class="text-muted">Not recorded</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Related Object Information -->
{% if activity.content_object %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card info-card">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0">
                    <i class="fas fa-link me-2"></i>Related Object
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="info-label">Object Type</div>
                        <div class="info-value">
                            <span class="badge bg-info">{{ activity.content_type.model|title }}</span>
                        </div>
                        
                        <div class="info-label">Object ID</div>
                        <div class="info-value">
                            <code>{{ activity.object_id }}</code>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-label">Object Representation</div>
                        <div class="info-value">
                            {{ activity.get_related_object_display }}
                        </div>
                        
                        <div class="mt-3">
                            <button class="btn btn-outline-primary" onclick="viewRelatedObject()">
                                <i class="fas fa-external-link-alt me-1"></i>View Object
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Extra Data -->
{% if activity.extra_data %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card info-card">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="fas fa-database me-2"></i>Extra Data
                </h5>
            </div>
            <div class="card-body">
                <div class="json-viewer" id="extraDataViewer">
                    <pre>{{ activity.extra_data|pprint }}</pre>
                </div>
                <div class="mt-3">
                    <button class="btn btn-outline-secondary" onclick="copyExtraData()">
                        <i class="fas fa-copy me-1"></i>Copy Data
                    </button>
                    <button class="btn btn-outline-primary" onclick="downloadExtraData()">
                        <i class="fas fa-download me-1"></i>Download JSON
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Activity Timeline -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card info-card">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-history me-2"></i>Related Activities
                </h5>
            </div>
            <div class="card-body">
                {% if related_activities %}
                <div class="timeline">
                    {% for related_activity in related_activities %}
                    <div class="timeline-item">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">
                                    {{ related_activity.get_action_display }}
                                    {% if related_activity.id == activity.id %}
                                    <span class="badge bg-primary ms-2">Current</span>
                                    {% endif %}
                                </h6>
                                <p class="mb-1 text-muted">{{ related_activity.description }}</p>
                                <small class="text-muted">
                                    <i class="fas fa-clock me-1"></i>
                                    {{ related_activity.created_at|date:'M d, Y H:i' }}
                                </small>
                            </div>
                            <div>
                                {% if related_activity.success %}
                                <span class="badge bg-success">Success</span>
                                {% else %}
                                <span class="badge bg-danger">Failed</span>
                                {% endif %}
                                {% if related_activity.id != activity.id %}
                                <a href="{% url 'activities:activity_detail' related_activity.id %}" 
                                   class="btn btn-sm btn-outline-primary ms-2">
                                    <i class="fas fa-eye"></i>
                                </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-3">
                    <i class="fas fa-history fa-2x text-muted mb-2"></i>
                    <p class="text-muted mb-0">No related activities found.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Action Buttons -->
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <a href="{% url 'activities:activity_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-1"></i>Back to List
                </a>
            </div>
            <div>
                <button class="btn btn-outline-primary" onclick="exportActivity()">
                    <i class="fas fa-download me-1"></i>Export
                </button>
                <button class="btn btn-outline-info" onclick="shareActivity()">
                    <i class="fas fa-share me-1"></i>Share
                </button>
                {% if perms.activities.delete_activity %}
                <button class="btn btn-outline-danger" onclick="deleteActivity()">
                    <i class="fas fa-trash me-1"></i>Delete
                </button>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- User Agent Modal -->
<div class="modal fade" id="userAgentModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Full User Agent</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="bg-light p-3 rounded">
                    <code>{{ activity.user_agent }}</code>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- IP Lookup Modal -->
<div class="modal fade" id="ipLookupModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">IP Address Lookup</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="ipLookupContent">
                <!-- Content loaded via AJAX -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(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);
    });
});

// Show full user agent
function showFullUserAgent() {
    $('#userAgentModal').modal('show');
}

// Lookup IP address
function lookupIP(ipAddress) {
    $('#ipLookupContent').html('<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Looking up IP...</div>');
    $('#ipLookupModal').modal('show');
    
    $.get(`/activities/api/ip-lookup/${ipAddress}/`, function(data) {
        let content = `
            <table class="table table-sm">
                <tr><td><strong>IP Address:</strong></td><td>${data.ip}</td></tr>
                <tr><td><strong>Country:</strong></td><td>${data.country || 'Unknown'}</td></tr>
                <tr><td><strong>Region:</strong></td><td>${data.region || 'Unknown'}</td></tr>
                <tr><td><strong>City:</strong></td><td>${data.city || 'Unknown'}</td></tr>
                <tr><td><strong>ISP:</strong></td><td>${data.isp || 'Unknown'}</td></tr>
                <tr><td><strong>Organization:</strong></td><td>${data.org || 'Unknown'}</td></tr>
            </table>
        `;
        $('#ipLookupContent').html(content);
    }).fail(function() {
        $('#ipLookupContent').html('<div class="alert alert-danger">Failed to lookup IP address.</div>');
    });
}

// View related object
function viewRelatedObject() {
    $.get(`/activities/api/activity/{{ activity.id }}/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.');
    });
}

// Copy extra data
function copyExtraData() {
    const extraData = {{ activity.extra_data|safe }};
    navigator.clipboard.writeText(JSON.stringify(extraData, null, 2)).then(function() {
        // Show success message
        const toast = new bootstrap.Toast(document.createElement('div'));
        toast._element.className = 'toast';
        toast._element.innerHTML = `
            <div class="toast-body">
                <i class="fas fa-check text-success me-2"></i>
                Extra data copied to clipboard!
            </div>
        `;
        document.body.appendChild(toast._element);
        toast.show();
        setTimeout(() => toast._element.remove(), 3000);
    }).catch(function() {
        alert('Failed to copy data to clipboard.');
    });
}

// Download extra data
function downloadExtraData() {
    const extraData = {{ activity.extra_data|safe }};
    const dataStr = JSON.stringify(extraData, null, 2);
    const dataBlob = new Blob([dataStr], {type: 'application/json'});
    const url = URL.createObjectURL(dataBlob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `activity_{{ activity.id }}_data.json`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Export activity
function exportActivity() {
    window.location.href = `/activities/api/activity/{{ activity.id }}/export/`;
}

// Share activity
function shareActivity() {
    const url = window.location.href;
    if (navigator.share) {
        navigator.share({
            title: 'Activity Details',
            text: '{{ activity.description }}',
            url: url
        });
    } else {
        navigator.clipboard.writeText(url).then(function() {
            alert('Activity URL copied to clipboard!');
        });
    }
}

// Delete activity
function deleteActivity() {
    if (confirm('Are you sure you want to delete this activity? This action cannot be undone.')) {
        $.ajax({
            url: `/activities/api/activity/{{ activity.id }}/`,
            type: 'DELETE',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function() {
                window.location.href = '{% url "activities:activity_list" %}';
            },
            error: function() {
                alert('Failed to delete activity.');
            }
        });
    }
}
</script>
{% endblock %}