{% extends 'partials/base_modal.html' %}
{% load static %}

{% block title %}Ativação do Sistema{% endblock %}

{% block extra_css %}
<style>
    body { background: #fbfbfb; }
    .lic-card {
        background: #fff; border-radius: 16px; overflow: hidden;
        box-shadow: 0 6px 22px rgba(0,0,0,.08); max-width: 720px; margin: 18px auto 0;
    }
    .lic-topo { background: linear-gradient(135deg, #e0a800 0%, #cf9a08 100%); text-align: center; padding: 22px 16px; }
    .lic-topo .ciculo {
        display: inline-flex; align-items: center; justify-content: center;
        width: 60px; height: 60px; border-radius: 50%;
        background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); margin-bottom: 8px;
    }
    .lic-topo h4 { color: #fff; font-weight: 700; margin: 4px 0 2px; }
    .lic-topo .sub { color: rgba(255,255,255,.9); font-size: .9rem; }
    .rotulo { font-size: .78rem; font-weight: 700; color: #66788c; margin-bottom: 6px; }
    .lic-corpo { padding: 18px 20px 22px; }
    .caixa-mensagem { background: #fbfbfd; border: 1px solid #eef1f6; border-radius: 12px; padding: 14px; }
</style>
{% endblock %}

{% block content %}
<div class="lic-card">
    <div class="lic-topo">
        <div><span class="ciculo"><i class="bi bi-key-fill" style="font-size:1.6rem; color:#b26a00;"></i></span></div>
        <h4>Sistema Pendente de Ativação</h4>
        <div class="sub">Fale com o suporte para liberar o uso</div>
    </div>

    <div class="lic-corpo">
        <div class="caixa-mensagem">
            <div class="rotulo">CÓDIGO DE ATIVAÇÃO — copie e envie ao suporte</div>
            <textarea id="machine-id-box" readonly class="form-control text-center"
                style="font-family:Consolas,monospace; font-size:.75rem; background:#f5f7fa; height:90px;">{{ machine_id }}</textarea>
            <div class="d-flex flex-wrap gap-2 mt-2">
                <button type="button" class="btn btn-primary" id="btn-copiar-machine">
                    <i class="bi bi-clipboard-check"></i> Copiar código
                </button>
                {% if link_whatsapp %}
                <a href="{{ link_whatsapp }}" target="_blank" class="btn btn-success">
                    <i class="bi bi-whatsapp"></i> Enviar pelo WhatsApp
                </a>
                {% endif %}
            </div>
        </div>

        <hr>

        <div class="rotulo">RECEBEU A LICENÇA? Ative aqui</div>
        <form method="post"
              onsubmit="return enviarAtivacao(this)"
              data-url-rotas-livres="/licenca/validar/">
            <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
            <div class="d-flex gap-2 mb-2 flex-wrap">
                <label class="btn btn-outline-primary m-0" style="cursor: pointer;">
                    <i class="bi bi-folder2-open"></i> Selecionar o arquivo licenca.key
                    <input type="file" id="input-arquivo-licenca" accept=".key,.txt" hidden>
                </label>
                <small class="text-muted align-self-center">ou cole o texto abaixo</small>
            </div>
            <textarea name="licenca_conteudo" id="campo-licenca" class="form-control" rows="5"
                placeholder="O conteúdo do arquivo aparece aqui — ou cole direto..."
                style="font-family:Consolas,monospace; font-size:.72rem;"></textarea>
            <small class="text-muted d-block mt-1">
                <i class="bi bi-info-circle"></i>
                O suporte pode enviar o arquivo <code>licenca.key</code> pronto — basta selecioná-lo acima.
            </small>
            <button type="submit" class="btn btn-success mt-2 w-100">
                <i class="bi bi-unlock-fill"></i> Ativar Sistema
            </button>
        </form>
    </div>
</div>

<script>
document.getElementById('btn-copiar-machine')?.addEventListener('click', function () {
    const box = document.getElementById('machine-id-box');
    box.select();
    navigator.clipboard?.writeText(box.value);
    this.innerHTML = '<i class="bi bi-check-lg"></i> Copiado!';
    setTimeout(() => this.innerHTML = '<i class="bi bi-clipboard-check"></i> Copiar código', 2200);
});

// leitura direta do arquivo .key enviado pelo suporte
document.getElementById('input-arquivo-licenca')?.addEventListener('change', function () {
    const arquivo = this.files[0];
    if (!arquivo) return;
    const leitor = new FileReader();
    leitor.onload = function (e) {
        document.getElementById('campo-licenca').value = e.target.result;
    };
    leitor.readAsText(arquivo, 'utf-8');
});
document.querySelector('[data-url-rotas-livres]').addEventListener('submit', function (formulario) {
    const url = this.dataset.urlRotasLivres;
    const corpo = new FormData(this);
    fetch(url, { method: 'POST', body: corpo, credentials: 'same-origin' })
        .then(resp => resp.json())
        .then(dados => {
            if (dados.ok) {
                window.location = dados.url;
            } else {
                alert(dados.erro || 'Falha na ativação.');
            }
        })
        .catch(() => alert('Falha na conexão com o serviço de ativação.'));
});
</script>
{% endblock %}