<?php
$title = $title ?? 'Backup do Sistema';
?>

<div class="page-header" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;">
    <div>
        <h1>Backup do Sistema</h1>
        <p class="muted">Gere backups completos do sistema nos formatos JSON e CSV</p>
    </div>
</div>

<div id="alert-container"></div>

<div class="card" style="margin-bottom: 1.5rem;">
    <h2>Informações do Sistema</h2>
    <div id="backup-info" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
        <div>
            <strong>Carregando...</strong>
        </div>
    </div>
</div>

<div class="card">
    <h2>Gerar Backup</h2>
    <p class="muted" style="margin-bottom: 1.5rem;">Escolha o formato do backup que deseja gerar:</p>
    
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
        <div style="border: 2px solid #e5e7eb; border-radius: 8px; padding: 1.5rem;">
            <h3 style="margin-top: 0;">Backup JSON</h3>
            <p style="color: #666; margin-bottom: 1rem;">Backup completo em formato JSON, ideal para importação e restauração.</p>
            <ul style="margin-bottom: 1rem; padding-left: 1.5rem; color: #666;">
                <li>Formato legível</li>
                <li>Fácil de processar</li>
                <li>Ideal para restauração</li>
            </ul>
            <button class="btn" onclick="generateBackup('json')" id="btn-json">
                <span id="btn-json-text">Gerar Backup JSON</span>
            </button>
        </div>
        
        <div style="border: 2px solid #e5e7eb; border-radius: 8px; padding: 1.5rem;">
            <h3 style="margin-top: 0;">Backup CSV</h3>
            <p style="color: #666; margin-bottom: 1rem;">Backup completo em formato CSV, organizado em arquivos separados por tabela.</p>
            <ul style="margin-bottom: 1rem; padding-left: 1.5rem; color: #666;">
                <li>Múltiplos arquivos CSV</li>
                <li>Compactado em ZIP</li>
                <li>Ideal para análise</li>
            </ul>
            <button class="btn" onclick="generateBackup('csv')" id="btn-csv">
                <span id="btn-csv-text">Gerar Backup CSV</span>
            </button>
        </div>
    </div>
</div>

<div class="card" style="margin-top: 1.5rem;">
    <h3>Recomendações</h3>
    <ul style="color: #666;">
        <li>Faça backups regularmente para proteger seus dados</li>
        <li>Armazene os backups em local seguro e separado do servidor</li>
        <li>Teste a restauração dos backups periodicamente</li>
        <li>Backups grandes podem levar alguns minutos para serem gerados</li>
    </ul>
</div>

<script>
function setAlert(message, type = 'success') {
    const container = document.getElementById('alert-container');
    container.innerHTML = `<div class="alert alert-${type}">${message}</div>`;
    setTimeout(() => {
        container.innerHTML = '';
    }, 5000);
}

async function loadBackupInfo() {
    try {
        const response = await fetch('/api/settings/backup/info');
        const data = await response.json();
        
        if (data.error) {
            setAlert('Erro ao carregar informações', 'error');
            return;
        }
        
        const infoDiv = document.getElementById('backup-info');
        infoDiv.innerHTML = `
            <div>
                <strong style="display: block; margin-bottom: 0.5rem; color: #666;">Tenant ID</strong>
                <span style="font-size: 1.25rem; font-weight: 600;">${data.tenant_id}</span>
            </div>
            <div>
                <strong style="display: block; margin-bottom: 0.5rem; color: #666;">Tabelas</strong>
                <span style="font-size: 1.25rem; font-weight: 600;">${data.tables_count}</span>
            </div>
            <div>
                <strong style="display: block; margin-bottom: 0.5rem; color: #666;">Total de Registros</strong>
                <span style="font-size: 1.25rem; font-weight: 600;">${data.total_records.toLocaleString('pt-BR')}</span>
            </div>
        `;
    } catch (error) {
        console.error('Erro ao carregar informações:', error);
        setAlert('Erro ao carregar informações do sistema', 'error');
    }
}

async function generateBackup(format) {
    const btnId = `btn-${format}`;
    const btn = document.getElementById(btnId);
    const btnText = document.getElementById(`${btnId}-text`);
    
    if (btn.disabled) return;
    
    btn.disabled = true;
    btnText.textContent = 'Gerando...';
    
    try {
        const response = await fetch(`/api/settings/backup/${format}`);
        
        if (!response.ok) {
            const data = await response.json();
            throw new Error(data.error?.message || 'Erro ao gerar backup');
        }
        
        // Fazer download do arquivo
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = response.headers.get('Content-Disposition')?.split('filename=')[1]?.replace(/"/g, '') || `backup.${format === 'json' ? 'json' : 'zip'}`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
        
        setAlert('Backup gerado com sucesso!', 'success');
    } catch (error) {
        console.error('Erro ao gerar backup:', error);
        setAlert(error.message || 'Erro ao gerar backup', 'error');
    } finally {
        btn.disabled = false;
        btnText.textContent = format === 'json' ? 'Gerar Backup JSON' : 'Gerar Backup CSV';
    }
}

// Carregar informações ao carregar a página
document.addEventListener('DOMContentLoaded', loadBackupInfo);
</script>

