{% extends "base.html" %}

{% block titulo %}Histórico do Produto - {{ produto.nome }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2><i class="fas fa-history"></i> Histórico do Produto</h2>
                <a href="{{ url_for('editar_produto', id=produto.id) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Voltar ao Produto
                </a>
            </div>
        </div>
    </div>

    <!-- Card com informações do produto -->
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">{{ produto.nome }}</h5>
            <div class="row">
                <div class="col-md-3">
                    <small class="text-muted">Código:</small><br>
                    <strong>{{ produto.codigo_produto or 'N/A' }}</strong>
                </div>
                <div class="col-md-3">
                    <small class="text-muted">Tipo:</small><br>
                    <strong>{{ produto.tipo }}</strong>
                </div>
                <div class="col-md-3">
                    <small class="text-muted">Criado em:</small><br>
                    <strong>{{ produto.data_criacao.strftime('%d/%m/%Y %H:%M') if produto.data_criacao else 'N/A' }}</strong>
                </div>
                <div class="col-md-3">
                    <small class="text-muted">Última atualização:</small><br>
                    <strong>{{ produto.data_atualizacao.strftime('%d/%m/%Y %H:%M') if produto.data_atualizacao else 'N/A' }}</strong>
                </div>
            </div>
            <div class="row mt-2">
                {% set evento_criacao = (historico | selectattr('acao', 'equalto', 'criacao') | list | first) if historico else none %}
                {% set criador_fallback = ((evento_criacao.usuario.username or evento_criacao.usuario.email or ('Usuário #' ~ evento_criacao.usuario.id)) if evento_criacao and evento_criacao.usuario else none) %}
                {% set atualizador_fallback = ((historico[0].usuario.username or historico[0].usuario.email or ('Usuário #' ~ historico[0].usuario.id)) if historico and historico[0].usuario else none) %}
                <div class="col-md-6">
                    <small class="text-muted">Criado por:</small><br>
                    <strong>{{ criador_exibicao or criador_fallback or 'N/A' }}</strong>
                </div>
                <div class="col-md-6">
                    <small class="text-muted">Última atualização por:</small><br>
                    <strong>{{ atualizador_exibicao or atualizador_fallback or 'N/A' }}</strong>
                </div>
            </div>
        </div>
    </div>

    <!-- Timeline do histórico -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-clock"></i> Linha do Tempo de Alterações</h5>
            <small class="text-muted">Total de {{ historico|length }} evento(s) registrado(s)</small>
        </div>
        <div class="card-body">
            {% if historico %}
            <div class="timeline">
                {% for evento in historico %}
                <div class="timeline-item mb-4">
                    <div class="row">
                        <div class="col-md-2 text-end">
                            <small class="text-muted">
                                {{ evento.data_hora.strftime('%d/%m/%Y') }}<br>
                                {{ evento.data_hora.strftime('%H:%M:%S') }}
                            </small>
                        </div>
                        <div class="col-md-1 text-center">
                            <div class="timeline-badge 
                                {% if evento.acao == 'criacao' %}bg-success
                                {% elif evento.acao == 'edicao' %}bg-primary
                                {% elif evento.acao == 'exclusao' %}bg-danger
                                {% else %}bg-secondary{% endif %}">
                                <i class="fas 
                                    {% if evento.acao == 'criacao' %}fa-plus
                                    {% elif evento.acao == 'edicao' %}fa-edit
                                    {% elif evento.acao == 'exclusao' %}fa-trash
                                    {% else %}fa-info{% endif %}"></i>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="card">
                                <div class="card-header bg-light">
                                    <strong>
                                        {% if evento.acao == 'criacao' %}
                                            <i class="fas fa-plus-circle text-success"></i> Produto Criado
                                        {% elif evento.acao == 'edicao' %}
                                            <i class="fas fa-edit text-primary"></i> Produto Editado
                                        {% elif evento.acao == 'exclusao' %}
                                            <i class="fas fa-trash text-danger"></i> Produto Excluído
                                        {% else %}
                                            <i class="fas fa-info-circle text-secondary"></i> {{ evento.acao|title }}
                                        {% endif %}
                                    </strong>
                                    {% if evento.usuario %}
                                    <span class="badge bg-secondary float-end">
                                        <i class="fas fa-user"></i> {{ evento.usuario.username or evento.usuario.email or ('Usuário #' ~ evento.usuario.id) }}
                                    </span>
                                    {% endif %}
                                </div>
                                <div class="card-body">
                                    {% if evento.observacao %}
                                    <p class="mb-2"><i class="fas fa-comment"></i> {{ evento.observacao }}</p>
                                    {% endif %}

                                    {% if evento.campos_alterados %}
                                    <div class="mb-2">
                                        <strong>Campos alterados:</strong>
                                        <div class="d-flex flex-wrap gap-1 mt-1">
                                            {% for campo in evento.get_campos_alterados_lista() %}
                                            <span class="badge bg-info">{{ campo }}</span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if evento.acao == 'edicao' and evento.dados_antes and evento.dados_depois %}
                                    <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" 
                                            data-bs-target="#detalhes-{{ evento.id }}" aria-expanded="false">
                                        <i class="fas fa-eye"></i> Ver Detalhes das Alterações
                                    </button>
                                    <div class="collapse mt-2" id="detalhes-{{ evento.id }}">
                                        <div class="table-responsive">
                                            <table class="table table-sm table-bordered">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th width="30%">Campo</th>
                                                        <th width="35%">Valor Anterior</th>
                                                        <th width="35%">Novo Valor</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% set dados_antes = evento.get_dados_antes() %}
                                                    {% set dados_depois = evento.get_dados_depois() %}
                                                    {% for campo in evento.get_campos_alterados_lista() %}
                                                    <tr>
                                                        <td><strong>{{ campo }}</strong></td>
                                                        <td class="text-danger">
                                                            {{ dados_antes.get(campo, 'N/A') }}
                                                        </td>
                                                        <td class="text-success">
                                                            {{ dados_depois.get(campo, 'N/A') }}
                                                        </td>
                                                    </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    {% elif evento.acao == 'criacao' and evento.dados_depois %}
                                    <button class="btn btn-sm btn-outline-success" type="button" data-bs-toggle="collapse" 
                                            data-bs-target="#detalhes-{{ evento.id }}" aria-expanded="false">
                                        <i class="fas fa-eye"></i> Ver Dados Iniciais
                                    </button>
                                    <div class="collapse mt-2" id="detalhes-{{ evento.id }}">
                                        <div class="table-responsive">
                                            <table class="table table-sm table-bordered">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th width="40%">Campo</th>
                                                        <th width="60%">Valor</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% set dados = evento.get_dados_depois() %}
                                                    {% for campo, valor in dados.items() %}
                                                    <tr>
                                                        <td><strong>{{ campo }}</strong></td>
                                                        <td>{{ valor }}</td>
                                                    </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    {% endif %}

                                    <!-- Informações técnicas -->
                                    <div class="mt-2">
                                        <small class="text-muted">
                                            {% if evento.ip_address %}
                                            <i class="fas fa-network-wired"></i> IP: {{ evento.ip_address }} &nbsp;
                                            {% endif %}
                                            {% if evento.user_agent %}
                                            <i class="fas fa-desktop"></i> {{ evento.user_agent[:80] }}
                                            {% endif %}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> Nenhum histórico de alterações registrado para este produto.
            </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
.timeline {
    position: relative;
}

.timeline-item {
    position: relative;
}

.timeline-badge {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    text-align: center;
    position: relative;
    top: 16px;
    margin: 0 auto;
    border-radius: 50%;
    color: white;
}

.timeline-item:not(:last-child) .timeline-badge::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    background: #dee2e6;
    top: 50px;
    left: 24px;
}

.gap-1 {
    gap: 0.25rem;
}
</style>
{% endblock %}