@extends('layouts.app')

@section('title', 'Biblioteca de Templates')

@push('styles')
<style>
/* Template Library Styles */
.template-filters {
    background: var(--phoenix-gray-100);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.template-card {
    height: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.template-card.favorited {
    border-color: var(--phoenix-warning);
}

.template-category-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

.template-favorite-btn {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1;
    background: white;
    border: 1px solid var(--phoenix-gray-300);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-favorite-btn:hover {
    background: var(--phoenix-warning);
    border-color: var(--phoenix-warning);
    color: white;
}

.template-favorite-btn.active {
    background: var(--phoenix-warning);
    border-color: var(--phoenix-warning);
    color: white;
}

.template-content-preview {
    font-size: 0.875rem;
    color: var(--phoenix-gray-600);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 1rem;
}

.template-platforms {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.template-platform-icon {
    font-size: 1rem;
    opacity: 0.8;
}

.template-usage {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--phoenix-gray-500);
}

.template-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Search Box */
.template-search {
    position: relative;
}

.template-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--phoenix-gray-400);
}

.template-search input {
    padding-left: 2.5rem;
}

/* Empty State */
.templates-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--phoenix-gray-500);
}

.templates-empty i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

/* Loading State */
.templates-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

/* Preview Modal */
.template-preview-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--phoenix-gray-200);
    margin-bottom: 1rem;
}

.template-preview-meta {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.template-preview-meta-item {
    text-align: center;
}

.template-preview-meta-label {
    font-size: 0.75rem;
    color: var(--phoenix-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.template-preview-meta-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--phoenix-gray-900);
}

.template-preview-content {
    background: var(--phoenix-gray-100);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.template-preview-platforms {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.template-preview-platform {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid var(--phoenix-gray-200);
    border-radius: 0.375rem;
}
</style>
@endpush

@section('content')
<div class="row g-3 mb-4">
    <div class="col-auto">
        <h2 class="mb-0">Biblioteca de Templates</h2>
    </div>
    <div class="col-auto ms-auto">
        <button type="button" class="btn btn-phoenix-primary" data-bs-toggle="modal" data-bs-target="#createTemplateModal">
            <span class="fas fa-plus me-2"></span>Criar Template
        </button>
    </div>
</div>

<!-- Filters -->
<div class="template-filters">
    <form id="templateFilters">
        <div class="row g-3">
            <div class="col-md-4">
                <div class="template-search">
                    <i class="fas fa-search template-search-icon"></i>
                    <input type="text"
                           class="form-control"
                           id="searchTemplate"
                           name="search"
                           placeholder="Buscar por nome ou conteúdo..."
                           value="{{ request('search') }}">
                </div>
            </div>
            <div class="col-md-3">
                <select class="form-select" id="categoryFilter" name="category">
                    <option value="">Todas as categorias</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->value }}" {{ request('category') == $category->value ? 'selected' : '' }}>
                            {{ $category->label() }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select" id="clienteFilter" name="cliente_id">
                    <option value="">Todos os clientes</option>
                    <option value="global" {{ request('cliente_id') == 'global' ? 'selected' : '' }}>Templates Globais</option>
                    @foreach($clientes as $cliente)
                        <option value="{{ $cliente->id }}" {{ request('cliente_id') == $cliente->id ? 'selected' : '' }}>
                            {{ $cliente->nome }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="favoritesFilter" name="favorites"
                           {{ request('favorites') ? 'checked' : '' }}>
                    <label class="form-check-label" for="favoritesFilter">
                        <i class="fas fa-star text-warning"></i> Favoritos
                    </label>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Templates Grid -->
<div id="templatesContainer">
    @include('templates.partials.grid')
</div>

<!-- Load More -->
@if($templates->hasMorePages())
<div class="text-center mt-4">
    <button type="button" class="btn btn-phoenix-secondary" id="loadMoreBtn" data-page="2">
        <span class="spinner-border spinner-border-sm me-2 d-none"></span>
        Carregar mais templates
    </button>
</div>
@endif

<!-- Preview Modal -->
<div class="modal fade" id="templatePreviewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Preview do Template</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="templatePreviewContent">
                <!-- Preview content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                <button type="button" class="btn btn-primary" id="applyTemplateBtn">
                    <i class="fas fa-check me-2"></i>Aplicar Template
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Create Template Modal -->
<div class="modal fade" id="createTemplateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Criar Novo Template</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="createTemplateForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nome do Template *</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Descrição</label>
                        <textarea class="form-control" name="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Categoria *</label>
                        <select class="form-select" name="category" required>
                            <option value="">Selecione...</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->value }}">{{ $category->label() }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Cliente</label>
                        <select class="form-select" name="cliente_id">
                            <option value="">Template Global</option>
                            @foreach($clientes as $cliente)
                                <option value="{{ $cliente->id }}">{{ $cliente->nome }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Criar Template
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Template Modal -->
<div class="modal fade" id="editTemplateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar Template</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editTemplateForm">
                <input type="hidden" name="template_id" id="editTemplateId">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nome do Template *</label>
                        <input type="text" class="form-control" name="name" id="editTemplateName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Descrição</label>
                        <textarea class="form-control" name="description" id="editTemplateDescription" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Categoria *</label>
                        <select class="form-select" name="category" id="editTemplateCategory" required>
                            @foreach($categories as $category)
                                <option value="{{ $category->value }}">{{ $category->label() }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Salvar Alterações
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let currentTemplateId = null;
    let filterTimeout;

    // Filter handling
    const filterInputs = document.querySelectorAll('#templateFilters input, #templateFilters select');
    filterInputs.forEach(input => {
        input.addEventListener('change', function() {
            clearTimeout(filterTimeout);
            filterTimeout = setTimeout(() => {
                loadTemplates(1);
            }, 300);
        });
    });

    // Search with debounce
    document.getElementById('searchTemplate').addEventListener('input', function() {
        clearTimeout(filterTimeout);
        filterTimeout = setTimeout(() => {
            loadTemplates(1);
        }, 500);
    });

    // Load templates
    async function loadTemplates(page = 1) {
        const formData = new FormData(document.getElementById('templateFilters'));
        const params = new URLSearchParams(formData);
        params.append('page', page);

        // Show loading
        if (page === 1) {
            document.getElementById('templatesContainer').innerHTML = `
                <div class="templates-loading">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Carregando...</span>
                    </div>
                </div>
            `;
        }

        try {
            const response = await fetch(`{{ route('templates.index') }}?${params}`, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            });
            const data = await response.json();

            if (page === 1) {
                document.getElementById('templatesContainer').innerHTML = data.html;
            } else {
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = data.html;
                const newItems = tempDiv.querySelector('.row').innerHTML;
                document.querySelector('#templatesContainer .row').insertAdjacentHTML('beforeend', newItems);
            }

            // Update load more button
            const loadMoreBtn = document.getElementById('loadMoreBtn');
            if (loadMoreBtn) {
                if (data.hasMore) {
                    loadMoreBtn.dataset.page = page + 1;
                    loadMoreBtn.style.display = 'block';
                } else {
                    loadMoreBtn.style.display = 'none';
                }
            }

            // Reinitialize event listeners
            initializeTemplateCards();

        } catch (error) {
            console.error('Error loading templates:', error);
            showAlert('error', 'Erro ao carregar templates');
        }
    }

    // Load more
    const loadMoreBtn = document.getElementById('loadMoreBtn');
    if (loadMoreBtn) {
        loadMoreBtn.addEventListener('click', function() {
            const page = parseInt(this.dataset.page);
            const spinner = this.querySelector('.spinner-border');

            spinner.classList.remove('d-none');
            this.disabled = true;

            loadTemplates(page).finally(() => {
                spinner.classList.add('d-none');
                this.disabled = false;
            });
        });
    }

    // Initialize template cards
    function initializeTemplateCards() {
        // Preview
        document.querySelectorAll('.template-preview-btn').forEach(btn => {
            btn.addEventListener('click', async function() {
                const templateId = this.dataset.templateId;
                await showTemplatePreview(templateId);
            });
        });

        // Favorite
        document.querySelectorAll('.template-favorite-btn').forEach(btn => {
            btn.addEventListener('click', async function(e) {
                e.stopPropagation();
                const templateId = this.dataset.templateId;
                await toggleFavorite(templateId, this);
            });
        });

        // Edit
        document.querySelectorAll('.template-edit-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const templateId = this.dataset.templateId;
                const name = this.dataset.templateName;
                const description = this.dataset.templateDescription;
                const category = this.dataset.templateCategory;

                openEditModal(templateId, name, description, category);
            });
        });

        // Delete
        document.querySelectorAll('.template-delete-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const templateId = this.dataset.templateId;
                const templateName = this.dataset.templateName;

                confirmDelete(templateId, templateName);
            });
        });
    }

    // Show template preview
    async function showTemplatePreview(templateId) {
        const modal = new bootstrap.Modal(document.getElementById('templatePreviewModal'));
        const content = document.getElementById('templatePreviewContent');

        currentTemplateId = templateId;
        content.innerHTML = '<div class="text-center"><div class="spinner-border"></div></div>';
        modal.show();

        try {
            const response = await fetch(`/templates/${templateId}`);
            const data = await response.json();

            content.innerHTML = data.preview;

        } catch (error) {
            console.error('Error loading preview:', error);
            content.innerHTML = '<div class="alert alert-danger">Erro ao carregar preview</div>';
        }
    }

    // Toggle favorite
    async function toggleFavorite(templateId, button) {
        try {
            const response = await fetch(`/templates/${templateId}/favorite`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json'
                }
            });

            const data = await response.json();

            if (data.success) {
                button.classList.toggle('active', data.favorited);

                // Update card
                const card = button.closest('.template-card');
                if (card) {
                    card.classList.toggle('favorited', data.favorited);
                }

                // If favorites filter is active, reload
                if (document.getElementById('favoritesFilter').checked) {
                    loadTemplates(1);
                }
            }

        } catch (error) {
            console.error('Error toggling favorite:', error);
            showAlert('error', 'Erro ao favoritar template');
        }
    }

    // Open edit modal
    function openEditModal(templateId, name, description, category) {
        document.getElementById('editTemplateId').value = templateId;
        document.getElementById('editTemplateName').value = name;
        document.getElementById('editTemplateDescription').value = description || '';
        document.getElementById('editTemplateCategory').value = category;

        const modal = new bootstrap.Modal(document.getElementById('editTemplateModal'));
        modal.show();
    }

    // Confirm delete
    function confirmDelete(templateId, templateName) {
        if (confirm(`Tem certeza que deseja excluir o template "${templateName}"?`)) {
            deleteTemplate(templateId);
        }
    }

    // Delete template
    async function deleteTemplate(templateId) {
        try {
            const response = await fetch(`/templates/${templateId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            });

            const data = await response.json();

            if (data.success) {
                showAlert('success', data.message);
                loadTemplates(1);
            }

        } catch (error) {
            console.error('Error deleting template:', error);
            showAlert('error', 'Erro ao excluir template');
        }
    }

    // Apply template
    document.getElementById('applyTemplateBtn').addEventListener('click', function() {
        if (currentTemplateId) {
            // Redirect to create post with template
            window.location.href = `{{ route('posts.wizard.create') }}?template_id=${currentTemplateId}`;
        }
    });

    // Create template form
    document.getElementById('createTemplateForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const data = Object.fromEntries(formData);

        // For now, we'll create a basic structure
        data.structure = {
            retranca: '',
            content: '',
            hashtags: '',
            tipo_conteudo: 'feed',
            platforms: ['instagram']
        };

        try {
            const response = await fetch('{{ route('templates.store') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.success) {
                showAlert('success', result.message);
                bootstrap.Modal.getInstance(document.getElementById('createTemplateModal')).hide();
                this.reset();
                loadTemplates(1);
            }

        } catch (error) {
            console.error('Error creating template:', error);
            showAlert('error', 'Erro ao criar template');
        }
    });

    // Edit template form
    document.getElementById('editTemplateForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const templateId = document.getElementById('editTemplateId').value;
        const formData = new FormData(this);
        const data = Object.fromEntries(formData);

        try {
            const response = await fetch(`/templates/${templateId}`, {
                method: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.success) {
                showAlert('success', result.message);
                bootstrap.Modal.getInstance(document.getElementById('editTemplateModal')).hide();
                loadTemplates(1);
            }

        } catch (error) {
            console.error('Error updating template:', error);
            showAlert('error', 'Erro ao atualizar template');
        }
    });

    // Alert helper
    function showAlert(type, message) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type === 'error' ? 'danger' : type} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x mt-3`;
        alertDiv.style.zIndex = '9999';
        alertDiv.innerHTML = `
            <span class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></span>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;

        document.body.appendChild(alertDiv);

        setTimeout(() => {
            alertDiv.remove();
        }, 5000);
    }

    // Initialize on load
    initializeTemplateCards();
});
</script>
@endpush