@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;
    padding: 0.75rem 1rem;
}

.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;
}

.card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

/* Estilos para SEO con IA */
.ai-generated-content {
    background: #f8f9ff;
    border: 1px solid #e3e1fc;
    border-radius: 0.375rem;
    padding: 0.75rem;
    color: #495057;
    font-size: 0.9rem;
    line-height: 1.5;
    min-height: 45px;
}

.ai-generated-content.long-content {
    max-height: 150px;
    overflow-y: auto;
}

.character-counter {
    font-size: 0.75rem;
    color: #6c757d;
}

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

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

.ai-seo-section {
    min-height: 300px;
}

.badge-sm {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

/* Loading spinner para generación IA */
.ai-loading {
    display: none;
    text-align: center;
    padding: 2rem;
}

.ai-loading .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* FORZAR VISIBILIDAD DE CONTENIDO AI - EMERGENCIA */
div.ai-generated-content {
    background-color: #f8f9ff !important;
    border: 2px solid #e3e1fc !important;
    border-radius: 0.375rem !important;
    padding: 15px !important;
    color: #000000 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    min-height: 50px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-weight: normal !important;
    text-decoration: none !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* FORZAR VISIBILIDAD CONTENIDO LARGO */
div.ai-generated-content.long-content {
    max-height: 200px !important;
    overflow-y: auto !important;
    background-color: #f8f9ff !important;
    color: #000000 !important;
    display: block !important;
    visibility: visible !important;
}
</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">Editar Página</h4>
            <div class="page-title-right">
                <a href="{{ route('pages.index') }}" class="btn btn-primary">
                <i class="ri-arrow-left-line"></i> Volver
                </a>
                <a href="/{{ $page->slug }}" target="_blank" class="btn btn-info ms-2">
                <i class="ri-external-link-line"></i> Ver Página
                </a>
            </div>
        </div>
    </div>
</div>
        <form action="" method="post" id="pageForm" name="pageForm">
            
            <div class="card">
                <div class="card-body p-0">
                    
                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="pageTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" 
                                    type="button" role="tab" aria-controls="basic" aria-selected="true">
                                <i class="ri-information-line tab-icon"></i>
                                Información Básica
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" 
                                    type="button" role="tab" aria-controls="content" aria-selected="false">
                                <i class="ri-file-text-line tab-icon"></i>
                                Contenido
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="seo-tab" data-bs-toggle="tab" data-bs-target="#seo" 
                                    type="button" role="tab" aria-controls="seo" aria-selected="false">
                                <i class="ri-search-line tab-icon"></i>
                                SEO
                                @if($page->ai_generated_at)
                                <span class="badge bg-success badge-sm ms-1">IA</span>
                                @endif
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="pageTabContent">
                        
                        <!-- Tab 1: Información Básica -->
                        <div class="tab-pane fade show active" id="basic" role="tabpanel" aria-labelledby="basic-tab">
                            <h5 class="form-section-title">
                                <i class="ri-file-text-line text-primary"></i>
                                Información Principal de la Página
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Identificación</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Nombre de la Página *</label>
                                                <input type="text" name="name" id="name" class="form-control" 
                                                       placeholder="Ej: Acerca de Nosotros, Contacto, Términos"
                                                       value="{{ $page->name }}">
                                                <p class="error"></p>
                                                <small class="help-text">
                                                    Este nombre aparecerá en el menú y como título de la página
                                                </small>
                                            </div>

                                            <div class="mb-3">
                                                <label for="slug" class="form-label">URL/Slug *</label>
                                                <input type="text" readonly name="slug" id="slug" class="form-control" 
                                                       placeholder="Se genera automáticamente"
                                                       value="{{ $page->slug }}">
                                                <p class="error"></p>
                                                <small class="help-text">
                                                    URL amigable que se generará automáticamente. Ej: /acerca-de-nosotros
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Información de la Página</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="alert alert-info">
                                                <i class="ri-information-line"></i>
                                                <strong>URL actual:</strong><br>
                                                <a href="/{{ $page->slug }}" target="_blank" class="text-white">
                                                    {{ url('/') }}/{{ $page->slug }}
                                                </a>
                                            </div>
                                            <div class="alert alert-light">
                                                <h6><strong>Estadísticas:</strong></h6>
                                                <ul class="mb-0 small">
                                                    <li><strong>Creada:</strong> {{ \Carbon\Carbon::parse($page->created_at)->format('d/m/Y H:i') }}</li>
                                                    <li><strong>Última actualización:</strong> {{ \Carbon\Carbon::parse($page->updated_at)->format('d/m/Y H:i') }}</li>
                                                    <li><strong>ID:</strong> {{ $page->id }}</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 2: Contenido -->
                        <div class="tab-pane fade" id="content" role="tabpanel" aria-labelledby="content-tab">
                            <h5 class="form-section-title">
                                <i class="ri-pencil-line text-info"></i>
                                Contenido de la Página
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header d-flex justify-content-between align-items-center">
                                            <h3 class="card-title">Editor de Contenido</h3>
                                            <button type="button" class="btn btn-sm btn-info" id="aiWriterButton">
                                                <i class="ri-robot-line"></i> AI Writer
                                            </button>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="content" class="form-label">Contenido Principal</label>
                                                <textarea name="content" id="page_content" cols="30" rows="15" class="summernote" 
                                                          placeholder="Escriba aquí el contenido principal de la página...">{!! $page->content !!}</textarea>
                                                <small class="help-text">
                                                    Use el editor para formatear el texto, agregar imágenes, enlaces y otros elementos
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 3: SEO -->
                        <div class="tab-pane fade" id="seo" role="tabpanel" aria-labelledby="seo-tab">

                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="form-section-title mb-0">
                                    <i class="ri-search-line text-success"></i>
                                    Optimización para Motores de Búsqueda
                                </h5>
                                <button type="button" id="generateAiSeo" class="btn btn-success btn-sm">
                                    <i class="ri-brain-line me-1"></i>
                                    Generar SEO con IA
                                </button>
                            </div>
                        
                        <!-- SEO Manual Section -->
                        <div class="mb-4">
                            <h6 class="text-primary">
                                <i class="ri-pencil-line me-1"></i>
                                Campos SEO Manuales
                            </h6>
                            <div class="row">
                                <!-- Meta Título -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="meta_title">Meta Título</label>
                                        <input type="text" name="meta_title" id="meta_title" class="form-control" 
                                               placeholder="Ejemplo: Acerca de Nosotros - Nuestra Historia" 
                                               value="{{ old('meta_title', $page->meta_title) }}" maxlength="60">
                                        <div class="d-flex justify-content-between">
                                            <small class="form-text text-muted">
                                                Este título aparecerá en los resultados de búsqueda.
                                            </small>
                                            <small class="character-counter" id="title-counter">0/60 caracteres</small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Meta Palabras Clave -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="meta_keywords">Meta Palabras Clave</label>
                                        <input type="text" name="meta_keywords" id="meta_keywords" class="form-control" 
                                               placeholder="Ejemplo: página web, información, contacto" 
                                               value="{{ old('meta_keywords', $page->meta_keywords) }}">
                                        <small class="form-text text-muted">
                                            Palabras clave separadas por comas, que describen el contenido de la página.
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Meta Descripción -->
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="meta_description">Meta Descripción</label>
                                        <textarea name="meta_description" id="meta_description" class="form-control" rows="3" 
                                                  placeholder="Ejemplo: Conoce más sobre nosotros, nuestra historia y nuestros valores." 
                                                  maxlength="160">{{ old('meta_description', $page->meta_description) }}</textarea>
                                        <div class="d-flex justify-content-between">
                                            <small class="form-text text-muted">
                                                Esta descripción aparecerá en los resultados de búsqueda.
                                            </small>
                                            <small class="character-counter" id="description-counter">0/160 caracteres</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- SEO con IA Section -->
                        <div class="card">
                            <div class="card-header bg-light">
                                <h6 class="mb-0">
                                    <i class="ri-brain-line text-success me-2"></i>
                                    Generación de SEO con Inteligencia Artificial
                                    @if($page->ai_generated_at)
                                    <span class="badge bg-success ms-2">Generado</span>
                                    @endif
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="ai-seo-section">
                                    
                                    @if($page->ai_generated_at)
                                    <!-- Contenido generado por IA -->
                                    <div class="alert alert-success">
                                        <i class="ri-checkbox-circle-line me-2"></i>
                                        <strong>SEO generado con IA</strong> - 
                                        Última generación: {{ $page->ai_generated_at->format('d/m/Y H:i') }}
                                        @if($page->ai_model_used)
                                        <br><small>Modelo usado: {{ $page->ai_model_used }}</small>
                                        @endif
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label>Meta Título generado por IA</label>
                                                <div class="ai-generated-content" style="background: #f8f9ff !important; border: 2px solid #e3e1fc !important; padding: 15px !important; color: #000000 !important; display: block !important; visibility: visible !important; opacity: 1 !important; font-size: 14px !important;">{{ $page->ai_meta_title }}</div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label>Alt Text para imagen</label>
                                                <div class="ai-generated-content" style="background: #f8f9ff !important; border: 2px solid #e3e1fc !important; padding: 15px !important; color: #000000 !important; display: block !important; visibility: visible !important; opacity: 1 !important; font-size: 14px !important;">{{ $page->ai_alt_text }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label>Meta Descripción generada por IA</label>
                                                <div class="ai-generated-content" style="background: #f8f9ff !important; border: 2px solid #e3e1fc !important; padding: 15px !important; color: #000000 !important; display: block !important; visibility: visible !important; opacity: 1 !important; font-size: 14px !important;">{{ $page->ai_meta_description }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label>Descripción de página para SEO</label>
                                                <div class="ai-generated-content long-content" style="background: #f8f9ff !important; border: 2px solid #e3e1fc !important; padding: 15px !important; color: #000000 !important; display: block !important; visibility: visible !important; opacity: 1 !important; font-size: 14px !important; max-height: 200px !important; overflow-y: auto !important;">{{ $page->ai_description }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label>Palabras clave sugeridas</label>
                                                <div class="ai-generated-content" style="background: #f8f9ff !important; border: 2px solid #e3e1fc !important; padding: 15px !important; color: #000000 !important; display: block !important; visibility: visible !important; opacity: 1 !important; font-size: 14px !important;">{{ $page->ai_keywords }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="d-flex justify-content-between align-items-center flex-wrap">
                                                <div class="mb-2">
                                                    <button type="button" class="btn btn-primary" id="applyAiSeo">
                                                        <i class="ri-file-copy-line me-1"></i>
                                                        Copiar a campos SEO manuales
                                                    </button>
                                                </div>
                                                <div class="form-check">
                                                    <input type="checkbox" name="ai_seo_enabled" id="ai_seo_enabled" class="form-check-input" 
                                                           {{ $page->ai_seo_enabled ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="ai_seo_enabled">
                                                        <strong>Usar SEO generado por IA en el frontend</strong>
                                                        <br><small class="text-muted">Cuando esté activado, se mostrará el contenido IA en lugar del manual</small>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    @else
                                    <!-- Sin contenido IA aún -->
                                    <div class="text-center py-4">
                                        <i class="ri-brain-line ri-3x text-muted mb-3"></i>
                                        <h5>No hay contenido SEO generado por IA</h5>
                                        <p class="text-muted">Haz clic en "Generar SEO con IA" para crear contenido optimizado automáticamente.</p>
                                        <button type="button" id="generateAiSeoHere" class="btn btn-success">
                                            <i class="ri-brain-line me-2"></i>
                                            Generar SEO con IA
                                        </button>
                                    </div>
                                    @endif

                                </div>
                            </div>
                        </div>
                        </div>

                    </div>

                    <!-- Actions -->
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="ri-save-line"></i> Actualizar Página
                                </button>
                                <a href="{{ route('pages.index') }}" class="btn btn-outline-secondary btn-lg ms-3">
                                    <i class="ri-close-line"></i> Cancelar
                                </a>
                                <a href="/{{ $page->slug }}" target="_blank" class="btn btn-info btn-lg ms-3">
                                    <i class="ri-external-link-line"></i> Ver Página
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </form>


<!-- AI Writer Modal -->
@if(aiIntegrationEnabled())
<div class="modal fade" id="aiWriterModal" tabindex="-1" role="dialog" aria-labelledby="aiWriterModalLabel">
    <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-robot-line"></i> AI Writer - Generar Contenido
                </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> 
                    Ingrese un título para generar automáticamente el contenido completo de la página con IA.
                </div>
                
                <div class="mb-3">
                    <label for="aiPageTitle">Título de la Página</label>
                    <input type="text" id="aiPageTitle" class="form-control" 
                           placeholder="Ej: Acerca de Nosotros, Política de Privacidad, Términos y Condiciones">
                    <small class="text-muted">
                        El título debe ser descriptivo y claro sobre el contenido que desea generar
                    </small>
                </div>
                
                <div id="aiGenerationProgress" class="mt-3" style="display: none;">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Generando...</span>
                        </div>
                        <p class="mt-2">Generando contenido con IA, por favor espere...</p>
                    </div>
                </div>
                
                <div id="aiGeneratedContent" style="display: none;">
                    <h6 class="mt-3">Contenido Generado:</h6>
                    <div class="border p-3 rounded bg-light">
                        <h5 id="generatedTitle" class="mb-3"></h5>
                        <div id="generatedContent"></div>
                    </div>
                    
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label><strong>Meta Título:</strong></label>
                                <div id="generatedMetaTitle" class="text-muted"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label><strong>Palabras Clave:</strong></label>
                                <div id="generatedKeywords" class="text-muted"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label><strong>Meta Descripción:</strong></label>
                        <div id="generatedMetaDescription" class="text-muted"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="generateAiContent">
                    <i class="ri-magic-line"></i> Generar
                </button>
                <button type="button" class="btn btn-success" id="applyAiContent" style="display: none;">
                    <i class="ri-check-line"></i> Aplicar Contenido
                </button>
            </div>
        </div>
    </div>
</div>

@endif
@endsection

@section('customJs')
<script>
$(document).ready(function() {
    $("#pageForm").submit(function(event){
    event.preventDefault();
    var element = $(this);
    $("button[type=submit]").prop('disabled', true);
    
    // Force sync Summernote content to textarea before serializing
    var summernoteContent = $('#page_content').summernote('code');
    $('#page_content').val(summernoteContent);
    
    // Now serialize the form normally
    var formData = element.serializeArray();
    
    $.ajax({
        url: '{{ route("pages.update", $page->id) }}',
        type: 'put',
        data: formData,
        dataType: 'json',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response){
            $("button[type=submit]").prop('disabled', false);
            
            if (response["status"] == true) {
                Swal.fire(
                    '¡Éxito!',
                    response.message,
                    'success'
                ).then(() => {
                    window.location.href = "{{ route('pages.index')}}";
                });

                // Clear errors
                $(".error").removeClass('invalid-feedback').html("");
                $("input[type='text'], textarea").removeClass('is-invalid');

            } else {
                if (response["notFound"] == true) {
                    Swal.fire(
                        'Error',
                        'Página no encontrada.',
                        'error'
                    ).then(() => {
                        window.location.href = "{{ route('pages.index')}}";
                    });
                    return;
                }

                var errors = response['errors'];

                // Clear previous errors
                $(".error").removeClass('invalid-feedback').html("");
                $("input[type='text'], textarea").removeClass('is-invalid');

                // Show new errors
                $.each(errors, function(key, value){
                    $(`#${key}`).addClass('is-invalid')
                    .siblings('.error')
                    .addClass('invalid-feedback')
                    .html(value);
                });

                Swal.fire(
                    'Error de Validación',
                    'Por favor, revise los campos marcados en rojo.',
                    'error'
                );
            }

        }, 
        error: function(jqXHR, exception){
            $("button[type=submit]").prop('disabled', false);
            Swal.fire(
                'Error',
                'Hubo un error al procesar la solicitud.',
                'error'
            );
        }
    });
});

$("#name").change(function(){
    element = $(this);
    $("button[type=submit]").prop('disabled', true);
    
    $.ajax({
        url: '{{ route("getSlug") }}',
        type: 'get',
        data: {title: element.val()},
        dataType: 'json',
        success: function(response){
            $("button[type=submit]").prop('disabled', false);
            if(response["status"] == true) {
                $("#slug").val(response["slug"]);
            }
        },
        error: function() {
            $("button[type=submit]").prop('disabled', false);
        }
    });
});

// AI Writer functionality
let aiGeneratedData = null;

$('#aiWriterButton').click(function() {
    // Get the current name value and set it in the modal
    const currentName = $('#name').val();
    if (currentName) {
        $('#aiPageTitle').val(currentName);
    }
    $('#aiWriterModal').modal('show');
});

$('#generateAiContent').click(function() {
    const title = $('#aiPageTitle').val().trim();
    
    if (!title) {
        Swal.fire('Error', 'Por favor ingrese un título para la página', 'error');
        return;
    }
    
    // Show progress
    $('#aiGenerationProgress').show();
    $('#aiGeneratedContent').hide();
    $('#generateAiContent').prop('disabled', true);
    $('#applyAiContent').hide();
    
    $.ajax({
        url: '{{ route("pages.generateAiContent") }}',
        type: 'POST',
        data: {
            prompt: title,
            field: 'all', // Generate all fields
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#aiGenerationProgress').hide();
            $('#generateAiContent').prop('disabled', false);
            
            if (response.status) {
                aiGeneratedData = response.content;
                
                // Display generated content
                $('#generatedTitle').text(aiGeneratedData.name || title);
                $('#generatedContent').html(aiGeneratedData.content || '');
                // Remove SEO fields as AI Writer is only for content
                $('#generatedMetaTitle').parent().hide();
                $('#generatedKeywords').parent().hide();
                $('#generatedMetaDescription').parent().hide();
                
                $('#aiGeneratedContent').show();
                $('#applyAiContent').show();
            } else {
                Swal.fire('Error', response.message || 'Error al generar contenido', 'error');
            }
        },
        error: function(xhr) {
            $('#aiGenerationProgress').hide();
            $('#generateAiContent').prop('disabled', false);
            
            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() {
    if (!aiGeneratedData) return;
    
    // Apply generated content to form fields
    if (aiGeneratedData.name) {
        $('#name').val(aiGeneratedData.name).trigger('change');
    }
    
    if (aiGeneratedData.content) {
        $('#page_content').summernote('code', aiGeneratedData.content);
    }
    
    // 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() {
    $('#aiPageTitle').val('');
    $('#aiGenerationProgress').hide();
    $('#aiGeneratedContent').hide();
    $('#applyAiContent').hide();
    $('#generateAiContent').prop('disabled', false);
    aiGeneratedData = null;
});

// Initialize Summernote with proper sync
$(document).ready(function() {
    // Ensure Summernote syncs on blur
    $('#page_content').on('summernote.blur', function() {
        var content = $(this).summernote('code');
        $(this).val(content);
    });
    
    // Also sync on any change
    $('#page_content').on('summernote.change', function(we, contents, $editable) {
        $(this).val(contents);
    });
});


// Character counters for SEO fields
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');
    }
}

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');
    }
}

// Initialize counters
$('#meta_title').on('input', updateTitleCounter);
$('#meta_description').on('input', updateDescriptionCounter);
updateTitleCounter();
updateDescriptionCounter();

// AI SEO Generation
function generateAiSeo() {
    const generateBtn = $('#generateAiSeo, #generateAiSeoHere');

    // Show loading state
    generateBtn.prop('disabled', true).html('<i class="ri-loader-line fa-spin me-1"></i>Generando...');

    // Show extended loading message if it takes too long
    let retryMessageTimeout = setTimeout(() => {
        generateBtn.html('<i class="ri-loader-line fa-spin me-1"></i>Generando... (reintentando con modelos alternativos)');
    }, 5000);

    $.ajax({
        url: '{{ route("pages.generateAiSeo", $page->id) }}',
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.success) {
                // Check if fallback was used
                let title = '¡Éxito!';
                let text = response.message || 'Contenido SEO generado exitosamente';
                let icon = 'success';
                
                if (response.model_used && response.model_used === 'fallback/local') {
                    title = 'Contenido Generado';
                    icon = 'warning';
                }
                
                Swal.fire({
                    icon: icon,
                    title: title,
                    text: text,
                    timer: 3000,
                    showConfirmButton: false
                });
                
                // Reload page to show generated content - stay on SEO tab
                setTimeout(() => {
                    window.location.href = window.location.href.split('#')[0] + '#seo';
                    window.location.reload();
                }, 3000);
            } else {
                throw new Error(response.message || 'Error desconocido');
            }
        },
        error: function(xhr, status, error) {
            console.error('Error generating AI SEO:', xhr.responseText);
            let errorMessage = 'Error al generar contenido SEO';
            let footerMessage = '';
            
            if (xhr.status === 419) {
                errorMessage = 'Sesión expirada. Por favor, refresque la página e intente nuevamente.';
                footerMessage = 'Recargando página...';
                setTimeout(() => {
                    window.location.reload();
                }, 3000);
            } else if (xhr.responseJSON && xhr.responseJSON.message) {
                // Mostrar el mensaje real de la API
                errorMessage = xhr.responseJSON.message;
                
                // Determinar footer según el tipo de error
                if (errorMessage.includes('quota') || errorMessage.includes('billing')) {
                    footerMessage = 'Verifique su plan y límites de uso en el proveedor de IA';
                } else if (errorMessage.includes('model') && errorMessage.includes('not found')) {
                    footerMessage = 'El modelo especificado no está disponible en su plan';
                } else if (errorMessage.includes('API key')) {
                    footerMessage = 'Verifique su API key en Integraciones > IA';
                } else {
                    footerMessage = 'Error del proveedor de IA: ' + (xhr.responseJSON.type || 'Desconocido');
                }
            } else if (xhr.status === 400) {
                errorMessage = 'Servicio de IA no disponible. Verifique la configuración en Integraciones > IA.';
                footerMessage = 'Error de configuración';
            } else if (xhr.status === 500) {
                errorMessage = 'Error interno del servidor. Verifique la API key de IA.';
                footerMessage = 'Error del servidor';
            }
            
            Swal.fire({
                icon: 'error',
                title: 'Error de IA',
                html: '<p>' + errorMessage + '</p>',
                footer: footerMessage,
                width: 600,
                confirmButtonText: 'Entendido'
            });
        },
        complete: function() {
            clearTimeout(retryMessageTimeout);
            generateBtn.prop('disabled', false).html('<i class="ri-brain-line me-1"></i>Generar SEO con IA');
        }
    });
}

// Apply AI SEO to manual fields
function applyAiSeoToManual() {
    const aiMetaTitle = @json($page->ai_meta_title ?? '');
    const aiMetaDescription = @json($page->ai_meta_description ?? '');
    const aiKeywords = @json($page->ai_keywords ?? '');
    
    console.log('AI Data:', { aiMetaTitle, aiMetaDescription, aiKeywords }); // Debug
    
    if (aiMetaTitle) {
        $('#meta_title').val(aiMetaTitle);
        updateTitleCounter();
    }
    
    if (aiMetaDescription) {
        $('#meta_description').val(aiMetaDescription);
        updateDescriptionCounter();
    }
    
    if (aiKeywords) {
        $('#meta_keywords').val(aiKeywords);
    }
    
    // Verificar si realmente se copiaron
    const copiedTitle = $('#meta_title').val();
    const copiedDescription = $('#meta_description').val();
    const copiedKeywords = $('#meta_keywords').val();
    
    console.log('Copied values:', { copiedTitle, copiedDescription, copiedKeywords }); // Debug
    
    if (aiMetaTitle || aiMetaDescription || aiKeywords) {
        Swal.fire({
            icon: 'success',
            title: 'Copiado',
            text: 'Contenido de IA copiado a los campos SEO manuales',
            timer: 1500,
            showConfirmButton: false
        });
    } else {
        Swal.fire({
            icon: 'warning',
            title: 'Sin contenido',
            text: 'No hay contenido de IA para copiar. Genera el SEO primero.',
            timer: 2000,
            showConfirmButton: false
        });
    }
}

// Event handlers
$(document).on('click', '#generateAiSeo, #generateAiSeoHere', generateAiSeo);
$(document).on('click', '#applyAiSeo', applyAiSeoToManual);

// Keep SEO tab active if hash is present or after AI application
$(document).ready(function() {
    if (window.location.hash === '#seo') {
        $('#seo-tab').tab('show');
    }
});

}); // End of main document.ready
</script>
@endsection