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

{% block title %}Licença · {{ licenca.cliente }} - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.licencas-page .lic-detalhe { border: none; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: hidden; }
.licencas-page .lic-header-pedra {
    background: linear-gradient(135deg, #5e3a8c, #4a2f75); color: #fff;
    display: flex; align-items: center; gap: .55rem; font-weight: 700; padding: .8rem 1.1rem;
}
.licencas-page .info-tile {
    background: #f8fafc; border: 1px solid #e8edf3; border-radius: 12px;
    padding: .75rem .9rem; height: 100%;
}
.licencas-page .info-tile .label { font-size: .68rem; font-weight: 700; color: #8a97a8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.licencas-page .info-tile .valor { font-size: .92rem; font-weight: 700; color: #212529; word-break: break-word; }
.licencas-page .tile-status { display: flex; align-items: center; }
.licencas-page .badge-status { border-radius: 999px; padding: .35rem .75rem; font-size: .76rem; font-weight: 700; }
.licencas-page .st-ativa { background: #e6f9f0; color: #1e7e34; }
.licencas-page .st-perm { background: #ece7fa; color: #5e3a8c; }
.licencas-page .st-vencida { background: #fdecee; color: #b02a37; }
.licencas-page .st-cancelada { background: #eef1f5; color: #6b7787; }
.licencas-page .lic-linha-machine {
    font-family: Consolas, monospace; font-size: .78rem;
    background: #eef2f7; border-radius: 8px; padding: .3rem .55rem;
    display: inline-block; word-break: break-all;
}

/* Ações */
.licencas-page .acao-btn {
    border-radius: 10px; font-weight: 600;
    min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle;
}
.licencas-page .btn-voltar-lila { background: #ece7fa; color: #5e3a8c; border: 1.5px solid #d8ccf0; font-weight: 600; border-radius: 9px; }
.licencas-page .btn-voltar-lila:hover { background: #ddd2f5; color: #45286e; }

/* Painel de renovação */
.licencas-page .painel-renova {
    background: #f6fbf7; border: 1px solid #d6ecdb; border-radius: 12px; padding: 1rem;
}
.licencas-page .painel-renova .form-control { border-radius: 8px; }

/* Timeline */
.licencas-page .timeline-item {
    background: #ffffff; border: 1px solid #e8edf3; border-radius: 12px;
    padding: .7rem .9rem; margin-left: 0; margin-bottom: .55rem;
    border-left: 4px solid #5e3a8c;
}
.licencas-page .timeline-item::before { content: none; }
</style>
{% endblock %}

{% block content %}
<div class="licencas-page">
    <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mb-4">
        <div class="page-heading">
            <i class="bi bi-key-fill"></i>
            <div>
                <h2 class="mb-0">{{ licenca.cliente }}</h2>
                <small>Licença #{{ licenca.id }} · Gerada por {{ licenca.criada_por.username|default:'-' }}</small>
            </div>
        </div>
        <a href="{% url 'licencas_home' %}" class="btn btn-voltar-lila"><i class="bi bi-arrow-left"></i> Voltar</a>
    </div>

    <!-- Dados da Licença -->
    <div class="card lic-detalhe mb-4">
        <div class="lic-header-pedra"><i class="bi bi-shield-lock"></i> Dados da Licença
            <span class="ms-auto badge bg-light text-dark" style="font-size:.72rem; color:#333 !important;">
                {% if licenca.status != 'ativa' %}Cancelada{% elif licenca.permanente %}Permanente{% elif licenca.vencida %}Vencida{% else %}Ativa{% endif %}
            </span>
        </div>
        <div class="card-body p-3">
            <div class="row g-2">
                <div class="col-md-4">
                    <div class="info-tile">
                        <div class="label">Cliente</div>
                        <div class="valor">{{ licenca.cliente }}</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="info-tile tile-status">
                        <div class="w-100">
                            <div class="label mb-2">Status atual</div>
                            {% if licenca.status != 'ativa' %}
                                <span class="badge-status st-cancelada">Cancelada</span>
                            {% elif licenca.permanente %}
                                <span class="badge-status st-perm"><i class="bi bi-infinity"></i> Permanente (sem expiração)</span>
                            {% elif licenca.vencida %}
                                <span class="badge-status st-vencida">Vencida em {{ licenca.validade|date:"d/m/Y" }}</span>
                            {% else %}
                                <span class="badge-status st-ativa">Ativa até {{ licenca.validade|date:"d/m/Y" }}</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="info-tile">
                        <div class="label">Ativada em</div>
                        <div class="valor">{{ licenca.data_ativacao|date:"d/m/Y" }} <small class="text-muted">às {{ licenca.data_ativacao|date:"H:i" }}</small></div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="info-tile">
                        <div class="label">Machine ID (vínculo da máquina)</div>
                        <span class="lic-linha-machine">{{ licenca.machine_id }}</span>
                    </div>
                </div>
                {% if licenca.observacao %}
                <div class="col-md-4">
                    <div class="info-tile">
                        <div class="label">Observação</div>
                        <div class="valor">{{ licenca.observacao }}</div>
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- Ações -->
            <div class="d-grid gap-2 mt-3">
                <div class="d-grid d-md-flex justify-content-md-center gap-2">
                    <a href="{% url 'licenca_baixar' licenca.pk %}" class="btn btn-success acao-btn px-4">
                        <i class="bi bi-download"></i> Baixar licenca.key
                    </a>
                    <button class="btn btn-primary acao-btn px-4" data-bs-toggle="collapse" data-bs-target="#painel-renovar">
                        <i class="bi bi-arrow-repeat"></i> Renovar
                    </button>
                    {% if licenca.status == 'ativa' %}
                    <form method="post" action="{% url 'licenca_cancelar' licenca.pk %}" onsubmit="return confirm('Cancelar esta licença no registro?');">
                        {% csrf_token %}
                        <button class="btn btn-danger acao-btn px-4"><i class="bi bi-slash-circle"></i> Cancelar</button>
                    </form>
                    {% else %}
                    <form method="post" action="{% url 'licenca_renovar' licenca.pk %}">
                        {% csrf_token %}
                        <input type="hidden" name="permanente" value="on">
                        <button class="btn btn-success acao-btn px-4"><i class="bi bi-arrow-counterclockwise"></i> Reativar (permanente)</button>
                    </form>
                    {% endif %}
                </div>
            </div>

            <!-- Painel de renovação -->
            <div class="collapse mt-3" id="painel-renovar">
                <div class="painel-renova">
                    <form method="post" action="{% url 'licenca_renovar' licenca.pk %}" class="row g-2 align-items-end">
                        {% csrf_token %}
                        <div class="col-md-3">
                            <label class="form-label mb-1"><strong>Nova validade</strong></label>
                            <input type="date" name="validade" class="form-control" value="{% if licenca.validade %}{{ licenca.validade|date:'Y-m-d' }}{% endif %}">
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch mt-2">
                                <input class="form-check-input" type="checkbox" name="permanente" id="ren-perm">
                                <label class="form-check-label small" for="ren-perm"><strong>Tornar permanente</strong> (limpa a validade)</label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-primary w-100"><i class="bi bi-check-lg"></i> Renovar</button>
                        </div>
                    </form>
                    <small class="text-muted d-block mt-2">
                        <i class="bi bi-info-circle"></i> Ao renovar, o histórico fica registrado abaixo. Baixe o novo arquivo .key para substituir o do cliente.
                    </small>
                </div>
            </div>
        </div>
    </div>

    <!-- Histórico de ativação e renovações -->
    <div class="card lic-detalhe">
        <div class="lic-header-pedra"><i class="bi bi-clock-history"></i> Histórico completo (ativações e renovações)
            <span class="ms-auto badge bg-light text-dark" style="font-size:.72rem; color:#333 !important;">
                {{ licenca.renovacoes|length }} renova(ç)ão(ões)
            </span>
        </div>
        <div class="card-body p-3">
            {% if licenca.renovacoes %}
                {% for ren in licenca.renovacoes %}
                <div class="timeline-item">
                    <div class="d-flex flex-wrap justify-content-between gap-2">
                        <div>
                            <i class="bi bi-arrow-repeat text-primary"></i>
                            <strong>Renovação</strong> feita em <strong>{{ ren.data|date:"d/m/Y" }}</strong> às {{ ren.data|date:"H:i" }}
                            <div class="small text-muted">Por: {{ ren.feita_por.username|default:'-' }}</div>
                        </div>
                        <div class="text-end">
                            <span class="badge bg-light text-dark border">Valeu até (antes): {{ ren.validade_anterior|date:"d/m/Y"|default:'—' }}</span>
                            <span class="badge bg-success-subtle text-success-emphasis border">Vale até (novo): {{ ren.validade_nova|date:"d/m/Y"|default:'— permanente —' }}</span>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
            <div class="text-center text-muted py-4">
                <i class="bi bi-check-circle d-block fs-2 mb-2"></i>Sem renovações registradas — esta licença é a geração original de ativação em {{ licenca.data_ativacao|date:"d/m/Y" }}.
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}