@props(['cliente', 'showActions' => true])

<div class="card" id="redesSociaisCard">
    <div class="card-header border-bottom border-300 bg-body">
        <div class="row align-items-center">
            <div class="col">
                <h6 class="mb-0">
                    <span class="fa-solid fa-share-alt me-2"></span>
                    Redes Sociais
                </h6>
            </div>
            @if($showActions)
            <div class="col-auto">
                <button class="btn btn-sm btn-phoenix-primary" type="button" onclick="adicionarRedeSocial()">
                    <span class="fa-solid fa-plus me-1"></span>Adicionar
                </button>
            </div>
            @endif
        </div>
    </div>
    <div class="card-body p-0">
        <!-- Loading State -->
        <div id="redesSociaisLoading" class="text-center py-4">
            <div class="spinner-border spinner-border-sm text-primary" role="status">
                <span class="visually-hidden">Carregando...</span>
            </div>
            <p class="mt-2 mb-0 fs-10 text-body-tertiary">Carregando redes sociais...</p>
        </div>

        <!-- Empty State -->
        <div id="redesSociaisEmpty" class="text-center py-4" style="display: none;">
            <span class="fa-regular fa-share-nodes fa-2x text-300 mb-3"></span>
            <h6 class="text-body-emphasis">Nenhuma rede social cadastrada</h6>
            <p class="fs-10 text-body-tertiary mb-0">
                @if($showActions)
                    Clique em "Adicionar" para cadastrar a primeira rede social do cliente.
                @else
                    Este cliente ainda não possui redes sociais cadastradas.
                @endif
            </p>
        </div>

        <!-- Lista de Redes Sociais -->
        <div id="redesSociaisList" style="display: none;">
            <div class="table-responsive">
                <table class="table table-sm table-hover mb-0">
                    <thead class="bg-body-tertiary">
                        <tr>
                            @if($showActions)
                            <th width="30" class="text-center">
                                <span class="fa-solid fa-arrows-alt-v" title="Arrastar para reordenar"></span>
                            </th>
                            @endif
                            <th>Plataforma</th>
                            <th>Username</th>
                            <th>URL</th>
                            <th width="80" class="text-center">Status</th>
                            @if($showActions)
                            <th width="100" class="text-center">Ações</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody id="redesSociaisTableBody">
                        <!-- Conteúdo será inserido via JavaScript -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@if($showActions)
<!-- Modal de Adicionar/Editar Rede Social -->
<div class="modal fade" id="redeSocialModal" tabindex="-1" aria-labelledby="redeSocialModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="redeSocialModalLabel">Adicionar Rede Social</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <form id="redeSocialForm" novalidate>
                <div class="modal-body">
                    <div class="row g-3">
                        <!-- Plataforma -->
                        <div class="col-md-6">
                            <label class="form-label" for="modalPlataforma">
                                Plataforma <span class="text-danger">*</span>
                            </label>
                            <select class="form-select" id="modalPlataforma" name="plataforma" required>
                                <option value="">Selecione uma plataforma...</option>
                            </select>
                            <div class="invalid-feedback" id="modalPlataforma-error"></div>
                        </div>

                        <!-- Username -->
                        <div class="col-md-6">
                            <label class="form-label" for="modalUsername">
                                Username <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text" id="modalUsernamePrefix">@</span>
                                <input class="form-control" id="modalUsername" name="username" type="text" 
                                       placeholder="username" required>
                            </div>
                            <div class="invalid-feedback" id="modalUsername-error"></div>
                        </div>

                        <!-- URL Gerada (Preview) -->
                        <div class="col-12">
                            <label class="form-label">URL Completa</label>
                            <div class="input-group">
                                <input class="form-control bg-body-secondary" id="modalUrlPreview" type="text" 
                                       readonly placeholder="A URL será gerada automaticamente...">
                                <button class="btn btn-phoenix-secondary" type="button" onclick="copiarUrl()" disabled id="modalUrlCopy">
                                    <span class="fa-solid fa-copy"></span>
                                </button>
                            </div>
                        </div>

                        <!-- Observações -->
                        <div class="col-12">
                            <label class="form-label" for="modalObservacoes">Observações</label>
                            <textarea class="form-control" id="modalObservacoes" name="observacoes" rows="3" 
                                      placeholder="Observações sobre esta rede social (opcional)..."></textarea>
                        </div>

                        <!-- Status Ativo -->
                        <div class="col-12">
                            <div class="form-check form-switch">
                                <input class="form-check-input" id="modalAtivo" name="ativo" type="checkbox" checked>
                                <label class="form-check-label fw-semibold text-body-emphasis" for="modalAtivo">
                                    Rede Social Ativa
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
                    <button class="btn btn-primary" type="submit" id="modalSubmitBtn">
                        <span id="modalSubmitText">Salvar Rede Social</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('🚀 Iniciando componente de redes sociais...');
    
    // Variáveis
    const clienteId = {{ $cliente->id }};
    const showActions = {{ $showActions ? 'true' : 'false' }};
    
    // Elementos DOM
    const loadingState = document.getElementById('redesSociaisLoading');
    const emptyState = document.getElementById('redesSociaisEmpty');
    const listContainer = document.getElementById('redesSociaisList');
    const tableBody = document.getElementById('redesSociaisTableBody');
    
    // Elementos do Modal
    const form = document.getElementById('redeSocialForm');
    const plataformaSelect = document.getElementById('modalPlataforma');
    const usernameInput = document.getElementById('modalUsername');
    const urlPreview = document.getElementById('modalUrlPreview');
    const usernamePrefix = document.getElementById('modalUsernamePrefix');
    const submitBtn = document.getElementById('modalSubmitBtn');
    const submitText = document.getElementById('modalSubmitText');
    
    // State
    let redesSociais = [];
    let platforms = {};
    let platformsData = {};
    let isSubmitting = false;
    
    // Inicializar
    console.log('Cliente ID:', clienteId);
    carregarRedesSociais();
    setupEventListeners();
    
    function setupEventListeners() {
        if (!showActions) return;
        
        // Event listeners do formulário
        if (form) {
            form.addEventListener('submit', handleFormSubmit);
        }
        
        if (plataformaSelect) {
            plataformaSelect.addEventListener('change', handlePlataformaChange);
        }
        
        if (usernameInput) {
            usernameInput.addEventListener('input', handleUsernameInput);
        }
    }
    
    async function carregarRedesSociais() {
        console.log('🔄 Carregando redes sociais...');
        
        try {
            const response = await fetch(`/clientes/${clienteId}/redes-sociais`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });
            
            console.log('📡 Response status:', response.status);
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            
            const data = await response.json();
            console.log('📦 Data received:', data);
            
            if (data.success) {
                redesSociais = data.data || [];
                platforms = data.platforms || {};
                console.log('✅ Redes sociais carregadas:', redesSociais.length);
                renderRedesSociais();
                popularPlataformas();
            } else {
                throw new Error(data.message || 'Erro desconhecido');
            }
            
        } catch (error) {
            console.error('❌ Erro ao carregar redes sociais:', error);
            hideLoading();
            showError('Erro ao carregar redes sociais: ' + error.message);
        }
    }
    
    function renderRedesSociais() {
        console.log('🎨 Renderizando', redesSociais.length, 'redes sociais...');
        hideLoading();
        
        if (redesSociais.length === 0) {
            showEmptyState();
            return;
        }
        
        hideEmptyState();
        showList();
        
        const html = redesSociais.map(rede => `
            <tr>
                ${showActions ? '<td class="text-center"><i class="fa-solid fa-grip-vertical text-300"></i></td>' : ''}
                <td>
                    <div class="d-flex align-items-center">
                        <i class="${getPlatformIcon(rede.plataforma)} me-2"></i>
                        <span>${rede.plataforma_nome || rede.plataforma}</span>
                    </div>
                </td>
                <td>@${rede.username}</td>
                <td>
                    <a href="${rede.url_completa}" target="_blank" class="text-decoration-none">
                        ${rede.url_completa}
                        <i class="fa-solid fa-external-link-alt ms-1 fs-10"></i>
                    </a>
                </td>
                <td class="text-center">
                    ${rede.ativo ? 
                        '<span class="badge badge-phoenix badge-phoenix-success">Ativa</span>' : 
                        '<span class="badge badge-phoenix badge-phoenix-secondary">Inativa</span>'
                    }
                </td>
                ${showActions ? `
                <td class="text-center">
                    <button class="btn btn-sm btn-phoenix-danger" onclick="excluirRede(${rede.id})">
                        <i class="fa-solid fa-trash"></i>
                    </button>
                </td>
                ` : ''}
            </tr>
        `).join('');
        
        tableBody.innerHTML = html;
        console.log('✅ Redes sociais renderizadas com sucesso!');
    }
    
    function popularPlataformas() {
        if (!showActions || !plataformaSelect) return;
        
        // Limpar opções existentes
        while (plataformaSelect.children.length > 1) {
            plataformaSelect.removeChild(plataformaSelect.lastChild);
        }
        
        // Mapear plataformas com URLs base
        platformsData = {
            'instagram': { name: 'Instagram', baseUrl: 'https://instagram.com/', prefix: '@' },
            'facebook': { name: 'Facebook', baseUrl: 'https://facebook.com/', prefix: '@' },
            'twitter': { name: 'Twitter (X)', baseUrl: 'https://twitter.com/', prefix: '@' },
            'linkedin': { name: 'LinkedIn', baseUrl: 'https://linkedin.com/in/', prefix: '' },
            'youtube': { name: 'YouTube', baseUrl: 'https://youtube.com/@', prefix: '@' },
            'tiktok': { name: 'TikTok', baseUrl: 'https://tiktok.com/@', prefix: '@' },
            'whatsapp': { name: 'WhatsApp', baseUrl: 'https://wa.me/', prefix: '+' },
            'telegram': { name: 'Telegram', baseUrl: 'https://t.me/', prefix: '@' },
            'pinterest': { name: 'Pinterest', baseUrl: 'https://pinterest.com/', prefix: '' },
            'snapchat': { name: 'Snapchat', baseUrl: 'https://snapchat.com/add/', prefix: '' }
        };
        
        // Adicionar opções
        Object.entries(platforms).forEach(([value, label]) => {
            const option = document.createElement('option');
            option.value = value;
            option.textContent = label;
            plataformaSelect.appendChild(option);
        });
        
        console.log('✅ Plataformas populadas:', Object.keys(platforms).length);
    }
    
    function handlePlataformaChange() {
        const plataforma = plataformaSelect.value;
        console.log('🔄 Plataforma selecionada:', plataforma);
        
        if (plataforma && platformsData[plataforma]) {
            const platformData = platformsData[plataforma];
            if (usernamePrefix) {
                usernamePrefix.textContent = platformData.prefix || '@';
            }
            updateUrlPreview();
        }
    }
    
    function handleUsernameInput() {
        updateUrlPreview();
    }
    
    function updateUrlPreview() {
        const plataforma = plataformaSelect.value;
        const username = usernameInput.value.trim();
        
        if (plataforma && username && platformsData[plataforma]) {
            const platformData = platformsData[plataforma];
            const cleanUsername = username.replace(/^[@+]/, ''); // Remove @ ou + do início
            const url = platformData.baseUrl + cleanUsername;
            
            if (urlPreview) {
                urlPreview.value = url;
            }
            
            const copyBtn = document.getElementById('modalUrlCopy');
            if (copyBtn) {
                copyBtn.disabled = false;
            }
            
            console.log('🔗 URL gerada:', url);
        } else {
            if (urlPreview) {
                urlPreview.value = '';
            }
            const copyBtn = document.getElementById('modalUrlCopy');
            if (copyBtn) {
                copyBtn.disabled = true;
            }
        }
    }
    
    async function handleFormSubmit(e) {
        e.preventDefault();
        
        if (isSubmitting) return;
        
        console.log('📤 Enviando formulário...');
        
        const formData = new FormData(form);
        const data = Object.fromEntries(formData);
        
        console.log('📋 Dados do formulário:', data);
        
        // Validação básica
        if (!data.plataforma || !data.username) {
            alert('Por favor, preencha todos os campos obrigatórios.');
            return;
        }
        
        setSubmitting(true);
        
        try {
            const response = await fetch(`/clientes/${clienteId}/redes-sociais`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify(data)
            });
            
            const result = await response.json();
            console.log('📨 Resposta do servidor:', result);
            
            if (result.success) {
                console.log('✅ Rede social salva com sucesso!');
                
                // Fechar modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('redeSocialModal'));
                if (modal) {
                    modal.hide();
                }
                
                // Limpar formulário
                form.reset();
                if (urlPreview) urlPreview.value = '';
                
                // Recarregar lista
                carregarRedesSociais();
                
                // Mostrar sucesso
                alert('Rede social adicionada com sucesso!');
                
            } else {
                throw new Error(result.message || 'Erro ao salvar rede social');
            }
            
        } catch (error) {
            console.error('❌ Erro ao salvar:', error);
            alert('Erro ao salvar rede social: ' + error.message);
        } finally {
            setSubmitting(false);
        }
    }
    
    function setSubmitting(submitting) {
        isSubmitting = submitting;
        
        if (submitBtn) {
            submitBtn.disabled = submitting;
        }
        
        if (submitText) {
            submitText.textContent = submitting ? 'Salvando...' : 'Salvar Rede Social';
        }
    }
    
    function getPlatformIcon(plataforma) {
        const icons = {
            'instagram': 'fab fa-instagram',
            'facebook': 'fab fa-facebook-f',
            'twitter': 'fab fa-twitter',
            'linkedin': 'fab fa-linkedin-in',
            'youtube': 'fab fa-youtube',
            'tiktok': 'fab fa-tiktok',
            'whatsapp': 'fab fa-whatsapp',
            'telegram': 'fab fa-telegram-plane',
            'pinterest': 'fab fa-pinterest-p',
            'snapchat': 'fab fa-snapchat-ghost'
        };
        return icons[plataforma] || 'fa-solid fa-share-alt';
    }
    
    function showLoading() {
        if (loadingState) loadingState.style.display = 'block';
        if (emptyState) emptyState.style.display = 'none';
        if (listContainer) listContainer.style.display = 'none';
    }
    
    function hideLoading() {
        if (loadingState) loadingState.style.display = 'none';
    }
    
    function showEmptyState() {
        if (emptyState) emptyState.style.display = 'block';
        if (listContainer) listContainer.style.display = 'none';
    }
    
    function hideEmptyState() {
        if (emptyState) emptyState.style.display = 'none';
    }
    
    function showList() {
        if (listContainer) listContainer.style.display = 'block';
    }
    
    function showError(message) {
        console.error('Error:', message);
        hideLoading();
        // Mostrar erro na interface
        if (emptyState) {
            emptyState.innerHTML = `
                <div class="text-center py-4">
                    <i class="fa-solid fa-exclamation-triangle fa-2x text-danger mb-3"></i>
                    <h6 class="text-danger">Erro ao carregar redes sociais</h6>
                    <p class="fs-10 text-body-tertiary">${message}</p>
                    <button class="btn btn-sm btn-phoenix-primary" onclick="location.reload()">
                        <i class="fa-solid fa-refresh me-1"></i>Tentar Novamente
                    </button>
                </div>
            `;
            emptyState.style.display = 'block';
        }
    }
    
    // Funções globais
    window.adicionarRedeSocial = function() {
        console.log('➕ Abrindo modal para adicionar rede social...');
        const modal = document.getElementById('redeSocialModal');
        if (modal) {
            // Limpar formulário
            if (form) form.reset();
            if (urlPreview) urlPreview.value = '';
            
            new bootstrap.Modal(modal).show();
        }
    };
    
    window.excluirRede = async function(id) {
        console.log('🗑️ Solicitando exclusão da rede social ID:', id);
        
        if (!confirm('Tem certeza que deseja excluir esta rede social?')) {
            return;
        }
        
        try {
            const response = await fetch(`/clientes/${clienteId}/redes-sociais/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            
            const result = await response.json();
            
            if (result.success) {
                console.log('✅ Rede social excluída com sucesso!');
                carregarRedesSociais();
                alert('Rede social excluída com sucesso!');
            } else {
                throw new Error(result.message || 'Erro ao excluir rede social');
            }
            
        } catch (error) {
            console.error('❌ Erro ao excluir:', error);
            alert('Erro ao excluir rede social: ' + error.message);
        }
    };
    
    window.copiarUrl = function() {
        const urlInput = document.getElementById('modalUrlPreview');
        if (urlInput && urlInput.value) {
            navigator.clipboard.writeText(urlInput.value).then(() => {
                console.log('✅ URL copiada!');
                alert('URL copiada para a área de transferência!');
            });
        }
    };
    
    console.log('✅ Componente de redes sociais inicializado com todas as funcionalidades!');
});
</script>
@endpush