{% load i18n %}
{% load static %}
{% load short_name %}

{# Historique des modifications de l'asset #}
<div class="card mb-3" id="asset-history-card">
    <div class="card-header bg-light">
        <h5 class="mb-2">{% translate "Historique des modifications" %}</h5>
        <ul class="nav nav-tabs card-header-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="history-table-tab" data-bs-toggle="tab" data-bs-target="#history-table-panel" type="button" role="tab">
                    <i class="bi bi-table me-1"></i>{% translate "Tableau" %}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="history-timeline-tab" data-bs-toggle="tab" data-bs-target="#history-timeline-panel" type="button" role="tab">
                    <i class="bi bi-clock-history me-1"></i>{% translate "Ligne du temps" %}
                </button>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content">
            {# Tableau de l'historique #}
            <div class="tab-pane fade show active" id="history-table-panel" role="tabpanel">
                <div id="history-loading" class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">{% translate "Chargement..." %}</span>
                    </div>
                </div>
                
                <div id="history-table-container" class="d-none">
                    <div class="table-responsive">
                        <table class="table table-hover table-sm" id="history-table">
                            <thead>
                                <tr>
                                    <th style="width: 15%;">{% translate "Date" %}</th>
                                    <th style="width: 15%;">{% translate "Utilisateur" %}</th>
                                    <th style="width: 20%;">{% translate "Champ" %}</th>
                                    <th style="width: 25%;">{% translate "Ancienne valeur" %}</th>
                                    <th style="width: 25%;">{% translate "Nouvelle valeur" %}</th>
                                </tr>
                            </thead>
                            <tbody id="history-table-body">
                                {# Rows will be populated by JavaScript #}
                            </tbody>
                        </table>
                    </div>
                    <div id="history-empty" class="alert alert-info d-none">
                        <i class="bi bi-info-circle me-2"></i>{% translate "Aucune modification enregistrée pour cet asset." %}
                    </div>
                </div>
                
                <div id="history-error" class="alert alert-danger d-none">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    <span id="history-error-message"></span>
                </div>
            </div>
            
            {# Timeline de l'historique #}
            <div class="tab-pane fade" id="history-timeline-panel" role="tabpanel">
                <div id="history-timeline-container">
                    <div id="history-timeline">
                        {# Timeline will be populated by JavaScript #}
                    </div>
                    <div id="history-timeline-empty" class="alert alert-info d-none">
                        <i class="bi bi-info-circle me-2"></i>{% translate "Aucune modification enregistrée pour cet asset." %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Timeline Styles */
.history-timeline {
    position: relative;
    padding-left: 30px;
    margin-top: 20px;
}

.history-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.history-timeline-item {
    position: relative;
    padding-bottom: 25px;
}

.history-timeline-item:last-child {
    padding-bottom: 0;
}

.history-timeline-marker {
    position: absolute;
    left: -24px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6;
}

.history-timeline-marker.create {
    background-color: #198754;
}

.history-timeline-marker.update {
    background-color: #0d6efd;
}

.history-timeline-marker.status_change {
    background-color: #ffc107;
}

.history-timeline-marker.delete {
    background-color: #dc3545;
}

.history-timeline-content {
    background: #f8f9fa;
    border-left: 3px solid #0d6efd;
    padding: 10px 15px;
    border-radius: 4px;
}

.history-timeline-content.create {
    border-left-color: #198754;
}

.history-timeline-content.status_change {
    border-left-color: #ffc107;
}

.history-timeline-date {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 5px;
}

.history-timeline-user {
    font-weight: 600;
    color: #495057;
}

.history-timeline-field {
    font-weight: 500;
    color: #0d6efd;
}

.history-timeline-change {
    margin-top: 8px;
    padding: 8px;
    background: white;
    border-radius: 4px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-timeline-old-value {
    color: #dc3545;
    /* text-decoration: line-through; */
    word-break: break-word;
    flex: 1;
}

.history-timeline-new-value {
    color: #198754;
    font-weight: 500;
    word-break: break-word;
    flex: 1;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const assetModel = '{{ asset_model }}';
    const assetId = {{ asset.id }};
    const historyUrl = `/assets/${assetModel}/${assetId}/history/`;
    const mobileView = {{ mobile_view|yesno:"true,false" }};
    
    const historyCard = document.getElementById('asset-history-card');
    
    // Load history data
    const locale = (('{{ LANGUAGE_CODE }}' || '').trim()) || (navigator.language || 'fr-FR');

    function formatDate(dateValue, options) {
        try {
            return new Date(dateValue).toLocaleDateString(locale, options);
        } catch (err) {
            // Fallback for invalid or unsupported language tag
            try { return new Date(dateValue).toLocaleDateString('fr-FR', options); } catch (_) {}
            return new Date(dateValue).toISOString();
        }
    }
    fetch(historyUrl, { credentials: 'same-origin' })
        .then(function(response) {
            if (!response.ok) {
                return response.text().then(function(errorText) {
                    var message = response.status === 401
                        ? "{% translate "Authentification requise" %}"
                        : response.status === 403
                            ? "{% translate "Vous n'avez pas accès à cet historique" %}"
                            : "{% translate "Erreur lors du chargement de l'historique" %}";
                    var details = (errorText || '').slice(0, 120);
                    throw new Error(message + " (" + response.status + ") - " + details);
                });
            }
            return response.json();
        })
        .then(data => {
            if (data && data.success) {
                // We only consider real modifications (exclude creation entries)
                const meaningfulHistory = (data.history || []).filter(entry => entry.field_name !== '__created__');
                
                // Hide entire block if no modifications
                if (meaningfulHistory.length === 0) {
                    historyCard.classList.add('d-none');
                    return;
                }
                
                if (!mobileView) {
                    populateHistoryTable(meaningfulHistory);
                }
                populateHistoryTimeline(data.history || []);
            } else {
                showHistoryError((data && data.error) || "{% translate "Erreur lors du chargement de l'historique" %}");
            }
        })
        .catch(error => {
            console.error('Error loading history:', error);
            showHistoryError("{% translate "Erreur lors du chargement de l'historique" %}");
        })
        .finally(() => {
            document.getElementById('history-loading').classList.add('d-none');
            if (!mobileView) {
                document.getElementById('history-table-container').classList.remove('d-none');
            }
            if (mobileView) {
                // On mobile: hide tabs and table, show timeline panel only
                const tabs = document.querySelector('.nav-tabs.card-header-tabs');
                if (tabs) { tabs.classList.add('d-none'); }
                const tablePanel = document.getElementById('history-table-panel');
                if (tablePanel) { tablePanel.classList.add('d-none'); }
                const timelinePanel = document.getElementById('history-timeline-panel');
                if (timelinePanel) { timelinePanel.classList.add('show', 'active'); }
            }
        });
    
    function populateHistoryTable(history) {
        const tbody = document.getElementById('history-table-body');
        tbody.innerHTML = '';
        
        history.forEach(entry => {
            const row = document.createElement('tr');
            
            // Format date
            const dateStr = formatDate(entry.timestamp, {
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });
            
            // Skip creation entries in table (they don't have meaningful old/new values)
            if (entry.field_name === '__created__') {
                return;
            }
            
            const userLabel = entry.user_short_name || entry.user;
            row.innerHTML = `
                <td class="text-muted small">${dateStr}</td>
                <td>
                    <span class="badge bg-secondary">${userLabel}</span>
                </td>
                <td>
                    <span class="badge bg-primary">${entry.field_display_name}</span>
                </td>
                <td class="text-muted">${entry.old_value_display}</td>
                <td class="fw-bold">${entry.new_value_display}</td>
            `;
            
            tbody.appendChild(row);
        });
    }
    
    function populateHistoryTimeline(history) {
        const container = document.getElementById('history-timeline');
        container.innerHTML = '';
        
        const timeline = document.createElement('div');
        timeline.className = 'history-timeline';
        
        history.forEach(entry => {
            const item = document.createElement('div');
            item.className = 'history-timeline-item';
            
            // Format date
            const dateStr = formatDate(entry.timestamp, {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });
            
            // Determine if this is a special event
            const isCreation = entry.field_name === '__created__';
            
            const userLabel = entry.user_short_name || entry.user;
            item.innerHTML = `
                <div class="history-timeline-marker ${entry.action_type}"></div>
                <div class="history-timeline-content ${entry.action_type}">
                    <div class="history-timeline-date">${dateStr}</div>
                    <div class="history-timeline-user">
                        <i class="bi bi-person me-1"></i>${userLabel}
                    </div>
                    ${isCreation ? `
                        <div class="mt-2">
                            <span class="badge bg-success">{% translate "Asset créé" %}</span>
                        </div>
                    ` : `
                        <div class="mt-2">
                            <span class="history-timeline-field">${entry.field_display_name}</span>
                            ${entry.action_type === 'status_change' ? 
                                '<span class="badge bg-warning ms-1">{% translate "Changement de statut" %}</span>' : ''}
                        </div>
                        <div class="history-timeline-change">
                            <span class="history-timeline-old-value">${entry.old_value_display}</span>
                            <i class="bi bi-arrow-right"></i>
                            <span class="history-timeline-new-value">${entry.new_value_display}</span>
                        </div>
                    `}
                </div>
            `;
            
            timeline.appendChild(item);
        });
        
        container.appendChild(timeline);
    }
    
    function showHistoryError(message) {
        document.getElementById('history-error-message').textContent = message;
        document.getElementById('history-error').classList.remove('d-none');
        document.getElementById('history-table-container').classList.add('d-none');
    }
});
</script>