{% extends 'base.html' %}

{% block title %}CapeSync - Configuração{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2><i class="fas fa-cloud-upload-alt text-primary"></i> Configurar CapeSync</h2>
                    <p class="text-muted mb-0">Configure a sincronização em nuvem para backup automático</p>
                </div>
                <a href="{{ url_for('capesync_dashboard') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left"></i> Voltar
                </a>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-cog"></i> Configurações de Sincronização</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ url_for('capesync_configurar') }}">
                        <!-- Status -->
                        <div class="mb-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="sync_ativo" name="sync_ativo"
                                    {{ 'checked' if empresa.sync_ativo else '' }}>
                                <label class="form-check-label fw-bold" for="sync_ativo">
                                    <i class="fas fa-power-off"></i> Sincronização Ativa
                                </label>
                            </div>
                            <small class="text-muted">Ative para iniciar o backup automático em nuvem</small>
                        </div>

                        <hr>

                        <!-- URL do Servidor -->
                        <div class="mb-3">
                            <label for="sync_url" class="form-label">
                                <i class="fas fa-server"></i> Servidor CapeSync
                            </label>
                            <input type="url" class="form-control" id="sync_url" name="sync_url"
                                value="{{ empresa.sync_url or 'http://177.136.229.58' }}"
                                placeholder="https://sync.capesystem.com.br">
                            <small class="text-muted">URL do servidor de sincronização</small>
                        </div>

                        <!-- Loja ID -->
                        <div class="mb-3">
                            <label for="sync_loja_id" class="form-label">
                                <i class="fas fa-store"></i> ID da Loja
                            </label>
                            <input type="text" class="form-control font-monospace" id="sync_loja_id" name="sync_loja_id"
                                value="{{ empresa.sync_loja_id or '' }}"
                                placeholder="Ex: LOJA01, MATRIZ, FILIAL-SP">
                            <small class="text-muted">ID da sua loja no servidor CapeSync (definido ao cadastrar a loja)</small>
                        </div>

                        <!-- API Key -->
                        <div class="mb-3">
                            <label for="sync_api_key" class="form-label">
                                <i class="fas fa-key"></i> Chave de API
                            </label>
                            <div class="input-group">
                                <input type="password" class="form-control font-monospace" id="sync_api_key" name="sync_api_key"
                                    value="{{ empresa.sync_api_key or '' }}"
                                    placeholder="Sua chave secreta de API">
                                <button class="btn btn-outline-secondary" type="button" onclick="toggleApiKey()">
                                    <i class="fas fa-eye" id="eye-icon"></i>
                                </button>
                            </div>
                            <small class="text-muted">Chave secreta para autenticação com o servidor</small>
                        </div>

                        <!-- Intervalo -->
                        <div class="mb-4">
                            <label for="sync_intervalo" class="form-label">
                                <i class="fas fa-clock"></i> Intervalo de Sincronização
                            </label>
                            <div class="input-group" style="max-width: 200px;">
                                <input type="number" class="form-control" id="sync_intervalo" name="sync_intervalo"
                                    value="{{ empresa.sync_intervalo or 1 }}" min="1" max="60">
                                <span class="input-group-text">minuto(s)</span>
                            </div>
                            <small class="text-muted">Intervalo entre cada ciclo de sincronização (1-60 minutos)</small>
                        </div>

                        <hr>

                        <!-- Cadastros compartilhados -->
                        <div class="mb-4">
                            <label class="form-label fw-bold">
                                <i class="fas fa-share-alt"></i> Cadastros para compartilhar entre lojas
                            </label>
                            <div class="row g-2">
                                {% for chave, titulo in cadastros_compartilhados_disponiveis %}
                                <div class="col-md-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox"
                                            id="cad_{{ chave }}" name="cadastros_compartilhados" value="{{ chave }}"
                                            {{ 'checked' if chave in cadastros_compartilhados_ativos else '' }}>
                                        <label class="form-check-label" for="cad_{{ chave }}">
                                            {{ titulo }}
                                        </label>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            <small class="text-muted d-block mt-2">
                                Desmarque os cadastros que não devem ser compartilhados via CapeSync neste servidor.
                            </small>
                        </div>

                        <hr>

                        <!-- Produto: Comanda Digital -->
                        <div class="mb-4">
                            <label class="form-label fw-bold">
                                <i class="fas fa-qrcode"></i> Produto: Comanda Digital (QR público)
                            </label>
                            <input type="hidden" name="comanda_digital_controlador" value="1">

                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" id="comanda_digital_grupo_habilitado"
                                    name="comanda_digital_grupo_habilitado"
                                    {{ 'checked' if grupo_comanda_habilitado else '' }}>
                                <label class="form-check-label fw-semibold" for="comanda_digital_grupo_habilitado">
                                    Autorizar Comanda Digital para o grupo
                                </label>
                            </div>

                            <div class="alert alert-light border small mb-3">
                                Sequência de liberação (mesmo padrão do CapeCeo):
                                <strong>1) grupo autorizado</strong> → <strong>2) loja habilitada</strong> → <strong>3) token QR válido</strong>.
                            </div>

                            {% if lojas_comanda_digital and lojas_comanda_digital|length > 0 %}
                            <div class="border rounded p-3" id="bloco-lojas-comanda">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <strong>Lojas do grupo {{ grupo_sync_atual or '(não identificado)' }}</strong>
                                    <div class="btn-group btn-group-sm" role="group" aria-label="Ações rápidas">
                                        <button type="button" class="btn btn-outline-success" id="btn-marcar-lojas" onclick="selecionarTodasLojasComanda(true)">Marcar todas</button>
                                        <button type="button" class="btn btn-outline-secondary" id="btn-desmarcar-lojas" onclick="selecionarTodasLojasComanda(false)">Desmarcar todas</button>
                                    </div>
                                </div>

                                <div id="alerta-grupo-bloqueado" class="alert alert-warning small py-2 mb-2" style="display: none;">
                                    Grupo bloqueado: a seleção por loja fica somente leitura até autorizar o grupo.
                                </div>

                                <div class="row g-2">
                                    {% for loja in lojas_comanda_digital %}
                                    <div class="col-md-6">
                                        <div class="form-check border rounded p-2 h-100">
                                            <input class="form-check-input loja-comanda-checkbox" type="checkbox"
                                                id="comanda_loja_{{ loja.id }}" name="comanda_digital_empresas" value="{{ loja.id }}"
                                                {{ 'checked' if loja.habilitada else '' }}>
                                            <label class="form-check-label" for="comanda_loja_{{ loja.id }}">
                                                <strong>{{ loja.nome }}</strong>
                                                <div class="small text-muted">
                                                    ID loja: {{ loja.sync_loja_id or 'não informado' }}
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            {% else %}
                            <div class="alert alert-warning small mb-0">
                                Nenhuma loja encontrada para controle da comanda digital.
                            </div>
                            {% endif %}
                        </div>

                        <hr>

                        <!-- Info Box -->
                        <div class="alert alert-info mb-4">
                            <h6><i class="fas fa-info-circle"></i> Sobre o CapeSync</h6>
                            <p class="mb-2 small">
                                O CapeSync mantém uma cópia de segurança dos seus dados na nuvem:
                            </p>
                            <ul class="small mb-0">
                                <li>Produtos, clientes e fornecedores</li>
                                <li>Vendas e notas fiscais</li>
                                <li>Movimentações de estoque</li>
                                <li>Contas a pagar e receber</li>
                            </ul>
                        </div>

                        <!-- Botões -->
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Salvar Configurações
                            </button>
                            <a href="{{ url_for('capesync_dashboard') }}" class="btn btn-outline-secondary">
                                Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Como obter credenciais -->
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-white">
                    <h6 class="mb-0"><i class="fas fa-question-circle text-info"></i> Como obter as credenciais?</h6>
                </div>
                <div class="card-body">
                    <ol class="mb-0">
                        <li>Acesse o painel administrativo CapeSync: <a href="http://177.136.229.58/admin" target="_blank">177.136.229.58/admin</a></li>
                        <li>Faça login com suas credenciais de administrador</li>
                        <li>Acesse "Empresas / Lojas" e localize sua empresa</li>
                        <li>Copie o <strong>ID da Loja</strong> e a <strong>Chave de API</strong></li>
                        <li>Cole os valores nos campos acima e salve</li>
                    </ol>
                </div>
            </div>

            <!-- Manutenção / Carga Total -->
            <div class="card border-warning shadow-sm mt-4">
                <div class="card-header bg-warning text-dark">
                    <h6 class="mb-0"><i class="fas fa-tools"></i> Manutenção e Diagnóstico</h6>
                </div>
                <div class="card-body">
                    <h6 class="card-title">Forçar Carga Total</h6>
                    <p class="card-text small text-muted">
                        Utilize esta opção caso perceba que produtos ou pessoas não foram sincronizados corretamente (ex: ao instalar em um computador novo).
                        Isso irá resetar o histórico e pedir ao servidor todos os cadastros novamente.
                    </p>
                    <button type="button" class="btn btn-outline-dark" onclick="confirmarCargaTotal(event)" {{ 'disabled' if not has_endpoint('capesync_btn_carga_total') }}>
                        <i class="fas fa-cloud-download-alt"></i> Baixar Tudo (Produtos e Pessoas)
                    </button>
                    {% if not has_endpoint('capesync_btn_carga_total') %}
                    <div class="small text-muted mt-2">
                        A ação de carga total não está disponível neste runtime.
                    </div>
                    {% endif %}
                    
                    <hr>
                    
                    <!-- Botão para forçar envio (Upload) - Futuro -->
                    <!-- <h6 class="card-title">Forçar Envio Total</h6> ... -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const CAPESYNC_CARGA_TOTAL_URL = {{ safe_url_for('capesync_btn_carga_total', fallback='')|tojson }};

function confirmarCargaTotal(event) {
    if (!CAPESYNC_CARGA_TOTAL_URL) {
        alert('A ação de carga total não está disponível neste runtime.');
        return;
    }

    if (confirm('ATENÇÃO: A carga total pode demorar alguns minutos dependendo da quantidade de dados.\n\nDeseja realmente iniciar o download de TODOS os produtos e clientes agora?')) {
        // Mostra loading
        const btn = event && event.target ? event.target.closest('button') : null;
        if (btn) {
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processando...';
            btn.disabled = true;
        }
        
        window.location.href = CAPESYNC_CARGA_TOTAL_URL;
    }
}

function toggleApiKey() {
    const input = document.getElementById('sync_api_key');
    const icon = document.getElementById('eye-icon');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'fas fa-eye-slash';
    } else {
        input.type = 'password';
        icon.className = 'fas fa-eye';
    }
}

function selecionarTodasLojasComanda(marcar) {
    const checkboxes = document.querySelectorAll('.loja-comanda-checkbox');
    checkboxes.forEach(cb => {
        cb.checked = !!marcar;
    });
}

function atualizarEstadoLojasComanda() {
    const chkGrupo = document.getElementById('comanda_digital_grupo_habilitado');
    const bloqueado = chkGrupo ? !chkGrupo.checked : false;
    const checkboxes = document.querySelectorAll('.loja-comanda-checkbox');
    const btnMarcar = document.getElementById('btn-marcar-lojas');
    const btnDesmarcar = document.getElementById('btn-desmarcar-lojas');
    const alerta = document.getElementById('alerta-grupo-bloqueado');
    const bloco = document.getElementById('bloco-lojas-comanda');

    checkboxes.forEach(cb => {
        cb.disabled = bloqueado;
    });

    if (btnMarcar) btnMarcar.disabled = bloqueado;
    if (btnDesmarcar) btnDesmarcar.disabled = bloqueado;
    if (alerta) alerta.style.display = bloqueado ? 'block' : 'none';
    if (bloco) bloco.classList.toggle('opacity-75', bloqueado);
}

document.addEventListener('DOMContentLoaded', function() {
    const chkGrupo = document.getElementById('comanda_digital_grupo_habilitado');
    if (chkGrupo) {
        chkGrupo.addEventListener('change', atualizarEstadoLojasComanda);
    }
    atualizarEstadoLojasComanda();
});
</script>
{% endblock %}