@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.nav-tabs .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid transparent;
    background: none;
    color: #6c757d;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    color: #495057;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 1.5rem;
    background: #fff;
}

.tab-icon {
    margin-right: 0.5rem;
}

.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.help-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.form-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
    margin-top: 2rem;
    background: #f8f9fa;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}

.seo-card {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1.5rem;
    background: #f8f9fa;
    margin-bottom: 1.5rem;
}

.seo-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-right: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.character-counter {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: right;
    margin-top: 0.25rem;
}

.character-counter.warning {
    color: #856404;
}

.character-counter.danger {
    color: #721c24;
}

.seo-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
}

.seo-preview-title {
    color: #1a0dab;
    font-size: 1.125rem;
    text-decoration: underline;
    margin-bottom: 0.25rem;
}

.seo-preview-url {
    color: #006621;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.seo-preview-description {
    color: #545454;
    font-size: 0.875rem;
    line-height: 1.4;
}
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Configuración SEO</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="{{ route('settings.seo.update') }}" method="POST" enctype="multipart/form-data">                
            @csrf
            @method('PUT')

            <div class="card">
                <div class="card-body p-0">
                    
                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="seoTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="general-seo-tab" data-bs-toggle="tab" data-bs-target="#general-seo" 
                                    type="button" role="tab" aria-controls="general-seo" aria-selected="true">
                                <i class="ri-search-line tab-icon"></i>
                                SEO General
                            </button>
                        </li>
                        <!-- Tabs preparados para futuras expansiones -->
                        <!--
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="structured-data-tab" data-bs-toggle="tab" data-bs-target="#structured-data" 
                                    type="button" role="tab" aria-controls="structured-data" aria-selected="false">
                                <i class="ri-code-line tab-icon"></i>
                                Datos Estructurados
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="sitemap-tab" data-bs-toggle="tab" data-bs-target="#sitemap" 
                                    type="button" role="tab" aria-controls="sitemap" aria-selected="false">
                                <i class="ri-organization-chart tab-icon"></i>
                                Sitemap
                            </button>
                        </li>
                        -->
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="seoTabContent">
                        
                        <!-- SEO General -->
                        <div class="tab-pane fade show active" id="general-seo" role="tabpanel" aria-labelledby="general-seo-tab">
                            <div class="seo-card">
                                <div class="d-flex align-items-center mb-4">
                                    <div class="seo-icon">
                                        <i class="ri-search-line"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">Optimización para Motores de Búsqueda</h5>
                                        <p class="text-muted mb-0">Configura los metadatos principales para mejorar el posicionamiento en buscadores</p>
                                    </div>
                                </div>

                                <h6 class="form-section-title">
                                    <i class="ri-price-tag-lines text-primary"></i>
                                    Metadatos Principales
                                </h6>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="meta_title" class="form-label">Meta Título <span class="text-danger">*</span>
                                                @if(aiIntegrationEnabled())
                                                <button type="button" class="btn btn-success btn-sm ms-2" onclick="openAiWriter('meta_title')">
                                                    <i class="ri-brain-line"></i> AI Writer
                                                </button>
                                                @endif
                                            </label>
                                            <input type="text" name="meta_title" id="meta_title" class="form-control @error('meta_title') is-invalid @enderror" 
                                                   value="{{ old('meta_title', $settings->meta_title ?? '') }}" 
                                                   placeholder="Ej: Tienda Online - Los Mejores Productos"
                                                   maxlength="60">
                                            <div class="character-counter" id="title-counter">0/60 caracteres</div>
                                            <small class="help-text">
                                                <i class="ri-information-line"></i>
                                                Título que aparece en los resultados de búsqueda. Máximo 60 caracteres recomendados.
                                            </small>
                                            @error('meta_title')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="meta_keywords" class="form-label">Meta Palabras Clave
                                                @if(aiIntegrationEnabled())
                                                <button type="button" class="btn btn-success btn-sm ms-2" onclick="openAiWriter('meta_keywords')">
                                                    <i class="ri-brain-line"></i> AI Writer
                                                </button>
                                                @endif
                                            </label>
                                            <input type="text" name="meta_keywords" id="meta_keywords" class="form-control @error('meta_keywords') is-invalid @enderror" 
                                                   value="{{ old('meta_keywords', $settings->meta_keywords ?? '') }}" 
                                                   placeholder="tienda online, productos, comprar, ofertas">
                                            <small class="help-text">
                                                <i class="ri-price-tag-lines"></i>
                                                Palabras clave separadas por comas que describen tu sitio web.
                                            </small>
                                            @error('meta_keywords')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="meta_description" class="form-label">Meta Descripción <span class="text-danger">*</span>
                                                @if(aiIntegrationEnabled())
                                                <button type="button" class="btn btn-success btn-sm ms-2" onclick="openAiWriter('meta_description')">
                                                    <i class="ri-brain-line"></i> AI Writer
                                                </button>
                                                @endif
                                            </label>
                                            <textarea name="meta_description" id="meta_description" class="form-control @error('meta_description') is-invalid @enderror" 
                                                      rows="3" placeholder="Descripción breve y atractiva de tu tienda online que aparecerá en los resultados de búsqueda..."
                                                      maxlength="160">{{ old('meta_description', $settings->meta_description ?? '') }}</textarea>
                                            <div class="character-counter" id="description-counter">0/160 caracteres</div>
                                            <small class="help-text">
                                                <i class="ri-align-left"></i>
                                                Descripción que aparece en los resultados de búsqueda. Máximo 160 caracteres recomendados.
                                            </small>
                                            @error('meta_description')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Vista previa de SEO -->
                                <div class="seo-preview">
                                    <h6 class="mb-3">
                                        <i class="ri-google-fill text-warning"></i>
                                        Vista Previa en Google
                                    </h6>
                                    <div class="seo-preview-title" id="preview-title">
                                        {{ $settings->meta_title ?? 'Tu título aparecerá aquí' }}
                                    </div>
                                    <div class="seo-preview-url">
                                        {{ $settings->site_url ?? config('app.url') ?? request()->getSchemeAndHttpHost() }}
                                    </div>
                                    <div class="seo-preview-description" id="preview-description">
                                        {{ $settings->meta_description ?? 'Tu descripción aparecerá aquí...' }}
                                    </div>
                                </div>
                                
                                <div class="alert alert-info mt-3">
                                    <i class="ri-lightbulb-line"></i>
                                    <strong>Consejos SEO:</strong> 
                                    <ul class="mb-0 mt-2">
                                        <li>Usa palabras clave relevantes en el título y descripción</li>
                                        <li>Mantén el título entre 50-60 caracteres para evitar cortes</li>
                                        <li>La descripción debe ser atractiva y describir claramente tu negocio</li>
                                        <li>Evita repetir las mismas palabras clave muchas veces</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Form Actions -->
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="ri-save-line me-2"></i>Actualizar Configuración SEO
                        </button>
                        <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary btn-lg ms-3">
                            <i class="ri-close-line me-2"></i>Cancelar
                        </a>
                    </div>

                </div>
            </div>

        </form>


@endsection

@section('customJs')
<script>
// AI Writer functionality - Debe estar fuera de document.ready para ser accesible globalmente
let currentAiField = '';

function openAiWriter(field) {
    currentAiField = field;
    $('#aiWriterModal').modal('show');
    
    // Set appropriate title and placeholder based on field
    if (field === 'meta_title') {
        $('#aiFieldTitle').text('Meta Título SEO');
        $('#aiPrompt').attr('placeholder', 'Ej: Tienda online de productos de calidad con envío gratis');
    } else if (field === 'meta_description') {
        $('#aiFieldTitle').text('Meta Descripción SEO');
        $('#aiPrompt').attr('placeholder', 'Ej: Encuentra los mejores productos, ofertas exclusivas y envío gratis en compras superiores a $50');
    } else if (field === 'meta_keywords') {
        $('#aiFieldTitle').text('Palabras Clave SEO');
        $('#aiPrompt').attr('placeholder', 'Ej: tienda online, productos calidad, ofertas, envío gratis');
    }
}

$(document).ready(function() {
    // Contador de caracteres para título
    function updateTitleCounter() {
        const title = $('#meta_title').val();
        const counter = $('#title-counter');
        const length = title.length;
        
        counter.text(length + '/60 caracteres');
        
        if (length > 60) {
            counter.removeClass('warning').addClass('danger');
        } else if (length > 50) {
            counter.removeClass('danger').addClass('warning');
        } else {
            counter.removeClass('warning danger');
        }
        
        // Actualizar vista previa
        $('#preview-title').text(title || 'Tu título aparecerá aquí');
    }
    
    // Contador de caracteres para descripción
    function updateDescriptionCounter() {
        const description = $('#meta_description').val();
        const counter = $('#description-counter');
        const length = description.length;
        
        counter.text(length + '/160 caracteres');
        
        if (length > 160) {
            counter.removeClass('warning').addClass('danger');
        } else if (length > 140) {
            counter.removeClass('danger').addClass('warning');
        } else {
            counter.removeClass('warning danger');
        }
        
        // Actualizar vista previa
        $('#preview-description').text(description || 'Tu descripción aparecerá aquí...');
    }
    
    // Eventos
    $('#meta_title').on('input', updateTitleCounter);
    $('#meta_description').on('input', updateDescriptionCounter);
    
    // Inicializar contadores
    updateTitleCounter();
    updateDescriptionCounter();
    
    $('#generateAiContent').click(function() {
        const siteName = '{{ $settings->app_name ?? "Tienda Online" }}';
        const prompt = $('#aiPrompt').val().trim();
        
        if (!prompt) {
            Swal.fire('Error', 'Por favor, ingrese información sobre lo que desea generar', 'error');
            return;
        }
        
        const button = $(this);
        const originalText = button.html();
        
        // Show loading
        button.prop('disabled', true).html('<i class="ri-loader-line fa-spin"></i> Generando...');
        $('#aiPreviewArea').hide();
        
        $.ajax({
            url: '{{ route("settings.generateAiSeo") }}',
            type: 'POST',
            data: {
                field: currentAiField,
                site_name: siteName,
                prompt: prompt,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                button.prop('disabled', false).html(originalText);
                
                if (response.status) {
                    // Show preview
                    $('#aiGeneratedContent').text(response.content);
                    $('#aiPreviewArea').show();
                    $('#applyAiContent').show();
                } else {
                    Swal.fire('Error', response.message || 'Error al generar contenido', 'error');
                }
            },
            error: function(xhr) {
                button.prop('disabled', false).html(originalText);
                
                let errorMessage = 'Error al conectar con el servicio de IA';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                
                Swal.fire('Error', errorMessage, 'error');
            }
        });
    });
    
    $('#applyAiContent').click(function() {
        const content = $('#aiGeneratedContent').text();
        
        if (content) {
            // Apply to the appropriate field
            if (currentAiField === 'meta_description') {
                $('#' + currentAiField).val(content);
                updateDescriptionCounter();
            } else {
                $('#' + currentAiField).val(content);
                if (currentAiField === 'meta_title') {
                    updateTitleCounter();
                }
            }
            
            // Close modal
            $('#aiWriterModal').modal('hide');
            
            // Show success message
            Swal.fire({
                icon: 'success',
                title: 'Contenido Aplicado',
                text: 'El contenido generado por IA ha sido aplicado correctamente',
                showConfirmButton: false,
                timer: 2000
            });
        }
    });
    
    // Reset modal when closed
    $('#aiWriterModal').on('hidden.bs.modal', function() {
        $('#aiPrompt').val('');
        $('#aiPreviewArea').hide();
        $('#applyAiContent').hide();
        $('#aiGeneratedContent').text('');
        currentAiField = '';
    });
});
</script>

<!-- AI Writer Modal -->
@if(aiIntegrationEnabled())
<div class="modal fade" id="aiWriterModal" tabindex="-1" role="dialog" aria-labelledby="aiWriterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="aiWriterModalLabel">
                    <i class="ri-brain-line text-success"></i> AI Writer - <span id="aiFieldTitle">Generar Contenido SEO</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="ri-information-line"></i> 
                    Describe brevemente qué información deseas incluir y la IA generará contenido SEO optimizado.
                </div>
                
                <div class="mb-3">
                    <label for="aiPrompt">¿Qué deseas generar?</label>
                    <textarea id="aiPrompt" class="form-control" rows="3" 
                              placeholder="Describe el tipo de contenido SEO que necesitas..."></textarea>
                    <small class="text-muted">
                        Sé específico para obtener mejores resultados. La IA considerará el contexto de tu tienda.
                    </small>
                </div>
                
                <!-- Preview Area -->
                <div id="aiPreviewArea" style="display: none;">
                    <hr>
                    <h6><i class="ri-eye-line"></i> Vista Previa del Contenido Generado</h6>
                    <div class="border p-3 rounded bg-light" id="aiGeneratedContent">
                        <!-- Generated content will appear here -->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="ri-close-line"></i> Cancelar
                </button>
                <button type="button" class="btn btn-success" id="generateAiContent">
                    <i class="ri-brain-line"></i> Generar Contenido
                </button>
                <button type="button" class="btn btn-primary" id="applyAiContent" style="display: none;">
                    <i class="ri-check-line"></i> Aplicar Contenido
                </button>
            </div>
        </div>
    </div>
</div>
@endif

@endsection