<?php
require __DIR__ . '/../../_layout.php';
?>

<div class="container">
    <h1>Domínios e Subdomínios</h1>

    <div class="card" style="margin-top: 2rem;">
        <h2>Adicionar Domínio</h2>
        <form id="dominio-form" style="margin-top: 1rem;">
            <div style="margin-bottom: 1rem;">
                <label>Tipo de Domínio *</label>
                <select id="tipo" name="tipo" required>
                    <option value="subdominio">Subdomínio (ex: loja.plataforma.com)</option>
                    <option value="proprio">Domínio Próprio (ex: loja.com.br)</option>
                </select>
            </div>

            <div style="margin-bottom: 1rem;">
                <label>Domínio *</label>
                <input type="text" id="dominio" name="dominio" required placeholder="exemplo.com.br ou loja.plataforma.com">
            </div>

            <div style="margin-bottom: 1rem;" id="subdominio-group" style="display: none;">
                <label>Subdomínio</label>
                <input type="text" id="subdominio" name="subdominio" placeholder="loja">
                <small>Deixe em branco para usar o ID do tenant</small>
            </div>

            <button type="submit" class="btn">Adicionar Domínio</button>
        </form>
    </div>

    <div class="card" style="margin-top: 2rem;">
        <h2>Domínios Configurados</h2>
        <div id="dominios-list" style="margin-top: 1rem;">
            <p>Carregando...</p>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', async () => {
    loadDominios();
    
    document.getElementById('tipo').addEventListener('change', (e) => {
        document.getElementById('subdominio-group').style.display = e.target.value === 'subdominio' ? 'block' : 'none';
    });
    
    document.getElementById('dominio-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const token = localStorage.getItem('auth_token') || getCookie('auth_token');
        const tenantId = getCookie('tenant_id') || 'default';
        
        const data = {
            tipo: document.getElementById('tipo').value,
            dominio: document.getElementById('dominio').value,
            subdominio: document.getElementById('subdominio').value || null
        };
        
        try {
            const res = await fetch('/api/ecommerce/dominios', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`,
                    'X-Tenant-Id': tenantId
                },
                body: JSON.stringify(data)
            });
            
            if (res.ok) {
                alert('Domínio adicionado com sucesso!');
                document.getElementById('dominio-form').reset();
                loadDominios();
            } else {
                const error = await res.json();
                alert('Erro: ' + (error.error?.message || 'Erro ao adicionar domínio'));
            }
        } catch (error) {
            console.error('Erro:', error);
            alert('Erro ao adicionar domínio');
        }
    });
});

async function loadDominios() {
    const token = localStorage.getItem('auth_token') || getCookie('auth_token');
    const tenantId = getCookie('tenant_id') || 'default';
    
    try {
        const res = await fetch('/api/ecommerce/dominios', {
            headers: {
                'Authorization': `Bearer ${token}`,
                'X-Tenant-Id': tenantId
            }
        });
        
        if (res.ok) {
            const { data } = await res.json();
            const list = document.getElementById('dominios-list');
            
            if (data.length === 0) {
                list.innerHTML = '<p>Nenhum domínio configurado.</p>';
                return;
            }
            
            list.innerHTML = `
                <table style="width: 100%; border-collapse: collapse;">
                    <thead>
                        <tr style="border-bottom: 2px solid #e5e7eb;">
                            <th style="text-align: left; padding: 0.5rem;">Domínio</th>
                            <th style="text-align: left; padding: 0.5rem;">Tipo</th>
                            <th style="text-align: left; padding: 0.5rem;">Status</th>
                            <th style="text-align: right; padding: 0.5rem;">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${data.map(d => `
                            <tr style="border-bottom: 1px solid #e5e7eb;">
                                <td style="padding: 0.5rem;">${d.dominio}</td>
                                <td style="padding: 0.5rem;">${d.tipo === 'proprio' ? 'Próprio' : 'Subdomínio'}</td>
                                <td style="padding: 0.5rem;">
                                    ${d.verified ? '<span style="color: #22c55e;">✓ Verificado</span>' : '<span style="color: #ef4444;">Não verificado</span>'}
                                </td>
                                <td style="padding: 0.5rem; text-align: right;">
                                    <button onclick="deleteDominio(${d.id})" style="color: #dc3545; background: none; border: none; cursor: pointer;">Remover</button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;
        }
    } catch (error) {
        console.error('Erro ao carregar domínios:', error);
        document.getElementById('dominios-list').innerHTML = '<p style="color: #dc3545;">Erro ao carregar domínios.</p>';
    }
}

async function deleteDominio(id) {
    if (!confirm('Deseja realmente remover este domínio?')) return;
    
    const token = localStorage.getItem('auth_token') || getCookie('auth_token');
    const tenantId = getCookie('tenant_id') || 'default';
    
    try {
        const res = await fetch(`/api/ecommerce/dominios/${id}`, {
            method: 'DELETE',
            headers: {
                'Authorization': `Bearer ${token}`,
                'X-Tenant-Id': tenantId
            }
        });
        
        if (res.ok) {
            alert('Domínio removido com sucesso!');
            loadDominios();
        } else {
            alert('Erro ao remover domínio');
        }
    } catch (error) {
        console.error('Erro:', error);
        alert('Erro ao remover domínio');
    }
}

function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}
</script>

