{% extends "base.html" %}
{% from "components/ui.html" import page_header, breadcrumb_nav, badge %}

{% block title %}Audit Log Details - {{ config.APP_NAME }}{% endblock %}

{% block content %}
{% set breadcrumbs = [
    {'text': 'Audit Logs', 'url': url_for('audit_logs.list_audit_logs')},
    {'text': 'Details'}
] %}

{{ page_header(
    icon_class='fas fa-history',
    title_text='Audit Log Details',
    subtitle_text='Detailed information about this change',
    breadcrumbs=breadcrumbs
) }}

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Main Details -->
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
        <h2 class="text-xl font-semibold mb-4">{{ _('Change Information') }}</h2>
        <dl class="space-y-4">
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Timestamp</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
                    {{ audit_log.created_at|user_datetime }}
                </dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">User</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
                    {% if audit_log.user %}
                        {{ audit_log.user.display_name }} ({{ audit_log.user.username }})
                    {% else %}
                        <span class="text-gray-400">System</span>
                    {% endif %}
                </dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Action</dt>
                <dd class="mt-1">
                    {{ badge(audit_log.action, audit_log.get_color()) }}
                </dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Entity</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
                    <a href="{{ url_for('audit_logs.entity_history', entity_type=audit_log.entity_type, entity_id=audit_log.entity_id) }}" 
                       class="text-primary hover:underline">
                        {{ audit_log.entity_type }}#{{ audit_log.entity_id }}
                    </a>
                    {% if audit_log.entity_name %}
                    <br><span class="text-xs text-gray-500">{{ audit_log.entity_name }}</span>
                    {% endif %}
                </dd>
            </div>
            {% if audit_log.field_name %}
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Field</dt>
                <dd class="mt-1">
                    <code class="text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">{{ audit_log.field_name }}</code>
                </dd>
            </div>
            {% endif %}
            {% if audit_log.change_description %}
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Description</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
                    {{ audit_log.change_description }}
                </dd>
            </div>
            {% endif %}
            {% if audit_log.reason %}
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ _('Reason') }}</dt>
                <dd class="mt-1 text-sm text-amber-600 dark:text-amber-400">
                    <i class="fas fa-comment-alt mr-1"></i>{{ audit_log.reason }}
                </dd>
            </div>
            {% endif %}
            {% if audit_log.entity_type == 'TimeEntry' and audit_log.get_entity_metadata() %}
            {% set metadata = audit_log.get_entity_metadata() %}
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ _('Entity Context') }}</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
                    <div class="space-y-1">
                        {% if metadata.project_name %}
                        <div><i class="fas fa-project-diagram mr-1"></i><strong>{{ _('Project') }}:</strong> {{ metadata.project_name }}{% if metadata.project_id %} (ID: {{ metadata.project_id }}){% endif %}</div>
                        {% endif %}
                        {% if metadata.client_name %}
                        <div><i class="fas fa-building mr-1"></i><strong>{{ _('Client') }}:</strong> {{ metadata.client_name }}{% if metadata.client_id %} (ID: {{ metadata.client_id }}){% endif %}</div>
                        {% endif %}
                        {% if metadata.task_name %}
                        <div><i class="fas fa-tasks mr-1"></i><strong>{{ _('Task') }}:</strong> {{ metadata.task_name }}{% if metadata.task_id %} (ID: {{ metadata.task_id }}){% endif %}</div>
                        {% endif %}
                        {% if metadata.created_at %}
                        <div><i class="fas fa-calendar-plus mr-1"></i><strong>{{ _('TimeEntry Created') }}:</strong> 
                            {% if metadata.created_at is string %}
                                {{ metadata.created_at[:19]|replace('T', ' ') }}
                            {% else %}
                                {{ metadata.created_at|user_datetime }}
                            {% endif %}
                        </div>
                        {% endif %}
                        {% if metadata.user_name %}
                        <div><i class="fas fa-user mr-1"></i><strong>{{ _('Entry Owner') }}:</strong> {{ metadata.user_name }}{% if metadata.user_id %} (ID: {{ metadata.user_id }}){% endif %}</div>
                        {% endif %}
                    </div>
                </dd>
            </div>
            {% endif %}
        </dl>
    </div>
    
    <!-- Change Details -->
    {% if audit_log.field_name %}
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
        <h2 class="text-xl font-semibold mb-4">{{ _('Field Change Details') }}</h2>
        <div class="space-y-4">
            {% if audit_log.old_value %}
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Old Value</dt>
                <dd class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                    <pre class="text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words">{{ audit_log.get_old_value() }}</pre>
                </dd>
            </div>
            {% endif %}
            {% if audit_log.new_value %}
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">New Value</dt>
                <dd class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
                    <pre class="text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words">{{ audit_log.get_new_value() }}</pre>
                </dd>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
    
    <!-- Full Entity State -->
    {% if audit_log.get_full_old_state() or audit_log.get_full_new_state() %}
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm lg:col-span-2">
        <h2 class="text-xl font-semibold mb-4">{{ _('Full Entity State') }}</h2>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            {% if audit_log.get_full_old_state() %}
            <div>
                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">{{ _('Before Change') }}</h3>
                <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 max-h-96 overflow-y-auto">
                    {% set old_state = audit_log.get_full_old_state() %}
                    {% if old_state is mapping or old_state is iterable and old_state is not string %}
                        <pre class="text-xs text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words">{{ old_state|tojson(indent=2) }}</pre>
                    {% else %}
                        <pre class="text-xs text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words">{{ old_state }}</pre>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            {% if audit_log.get_full_new_state() %}
            <div>
                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">{{ _('After Change') }}</h3>
                <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 max-h-96 overflow-y-auto">
                    {% set new_state = audit_log.get_full_new_state() %}
                    {% if new_state is mapping or new_state is iterable and new_state is not string %}
                        <pre class="text-xs text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words">{{ new_state|tojson(indent=2) }}</pre>
                    {% else %}
                        <pre class="text-xs text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words">{{ new_state }}</pre>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
    
    <!-- Request Information -->
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm lg:col-span-2">
        <h2 class="text-xl font-semibold mb-4">{{ _('Request Information') }}</h2>
        <dl class="grid grid-cols-1 md:grid-cols-3 gap-4">
            {% if audit_log.ip_address %}
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">IP Address</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 font-mono">{{ audit_log.ip_address }}</dd>
            </div>
            {% endif %}
            {% if audit_log.request_path %}
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Request Path</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 font-mono">{{ audit_log.request_path }}</dd>
            </div>
            {% endif %}
            {% if audit_log.user_agent %}
            <div class="md:col-span-3">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">User Agent</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 break-words">{{ audit_log.user_agent }}</dd>
            </div>
            {% endif %}
        </dl>
    </div>
</div>

<div class="mt-6 flex flex-col sm:flex-row gap-4">
    <a href="{{ url_for('audit_logs.list_audit_logs') }}" 
       class="px-4 py-2 min-h-[44px] bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors inline-flex items-center justify-center">
        <i class="fas fa-arrow-left mr-2"></i>Back to List
    </a>
    <a href="{{ url_for('audit_logs.entity_history', entity_type=audit_log.entity_type, entity_id=audit_log.entity_id) }}" 
       class="px-4 py-2 min-h-[44px] bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors inline-flex items-center justify-center">
        <i class="fas fa-history mr-2"></i>View Entity History
    </a>
</div>
{% endblock %}