@extends('admin.layouts.app')

@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 Configuraciones - {{ ucfirst($pageType) }} @if($section) / {{ ucfirst($section) }} @endif</h4>
                <div class="page-title-right">
                    <a href="{{ route('admin.front-settings.index', ['page_type' => $pageType]) }}" class="btn btn-primary">
                    <i class="ri-arrow-left-line"></i> Volver
                    </a>
                </div>
            </div>
        </div>
    </div>
            @include('admin.message')
            
            <form action="{{ route('admin.front-settings.update', [$pageType, $section]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                
                <div class="card">
                    <div class="card-body">
                        @if($section == 'seo')
                            @include('admin.front-settings.components.seo-helper')
                        @endif
                        
                        @foreach($settings as $setting)
                            <div class="mb-3 border-bottom pb-3 mb-3">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label for="setting_{{ $setting->id }}">
                                            {{ $setting->label }}
                                            @if($setting->help_text)
                                                <small class="text-muted">- {{ $setting->help_text }}</small>
                                            @endif
                                        </label>
                                        
                                        @if($setting->ai_value)
                                            <div class="alert alert-info py-2 mb-2">
                                                <i class="ri-robot-line"></i> Contenido generado por IA disponible
                                                <div class="custom-control custom-switch float-end">
                                                    <input type="checkbox" 
                                                           class="custom-control-input" 
                                                           id="use_ai_{{ $setting->id }}"
                                                           name="settings[{{ $setting->id }}][use_ai_value]"
                                                           value="1"
                                                           {{ $setting->use_ai_value ? 'checked' : '' }}
                                                           onchange="toggleAiContent({{ $setting->id }})">
                                                    <label class="custom-control-label" for="use_ai_{{ $setting->id }}">
                                                        Usar contenido IA
                                                    </label>
                                                </div>
                                            </div>
                                            
                                            <!-- Mostrar contenido IA para comparación -->
                                            <div id="ai_content_{{ $setting->id }}" class="ai-content-preview mb-2" 
                                                 style="{{ $setting->use_ai_value ? '' : 'display:none;' }}">
                                                <small class="text-muted">Contenido generado por IA:</small>
                                                @if($setting->field_type == 'json')
                                                    <pre class="bg-light p-2">{{ json_encode(json_decode($setting->ai_value), JSON_PRETTY_PRINT) }}</pre>
                                                @elseif($setting->field_type == 'textarea' || $setting->field_type == 'editor')
                                                    <div class="bg-light p-2">{{ $setting->ai_value }}</div>
                                                @else
                                                    <code class="bg-light p-1">{{ $setting->ai_value }}</code>
                                                @endif
                                            </div>
                                        @endif
                                        
                                        <!-- Campo de edición según el tipo -->
                                        @if($setting->field_type == 'text')
                                            <input type="text" 
                                                   class="form-control" 
                                                   id="setting_{{ $setting->id }}"
                                                   name="settings[{{ $setting->id }}][value]"
                                                   value="{{ old('settings.'.$setting->id.'.value', $setting->value) }}"
                                                   {{ $setting->use_ai_value ? 'disabled' : '' }}>
                                                   
                                        @elseif($setting->field_type == 'textarea')
                                            <textarea class="form-control" 
                                                      id="setting_{{ $setting->id }}"
                                                      name="settings[{{ $setting->id }}][value]"
                                                      rows="3"
                                                      {{ $setting->use_ai_value ? 'disabled' : '' }}>{{ old('settings.'.$setting->id.'.value', $setting->value) }}</textarea>
                                                      
                                        @elseif($setting->field_type == 'editor')
                                            <textarea class="form-control summernote" 
                                                      id="setting_{{ $setting->id }}"
                                                      name="settings[{{ $setting->id }}][value]"
                                                      {{ $setting->use_ai_value ? 'disabled' : '' }}>{{ old('settings.'.$setting->id.'.value', $setting->value) }}</textarea>
                                                      
                                        @elseif($setting->field_type == 'boolean')
                                            <select class="form-select" 
                                                    id="setting_{{ $setting->id }}"
                                                    name="settings[{{ $setting->id }}][value]"
                                                    {{ $setting->use_ai_value ? 'disabled' : '' }}>
                                                <option value="true" {{ $setting->value == 'true' ? 'selected' : '' }}>Activo</option>
                                                <option value="false" {{ $setting->value == 'false' ? 'selected' : '' }}>Inactivo</option>
                                            </select>
                                            
                                        @elseif($setting->field_type == 'number')
                                            <input type="number" 
                                                   class="form-control" 
                                                   id="setting_{{ $setting->id }}"
                                                   name="settings[{{ $setting->id }}][value]"
                                                   value="{{ old('settings.'.$setting->id.'.value', $setting->value) }}"
                                                   {{ $setting->use_ai_value ? 'disabled' : '' }}>
                                                   
                                        @elseif($setting->field_type == 'image')
                                            <input type="hidden" name="settings[{{ $setting->id }}][image_id]" id="image_id_{{ $setting->id }}" value="">
                                            <div id="image_{{ $setting->id }}" class="dropzone dz-clickable">
                                                <div class="dz-message needsclick">
                                                    <br>Suelta los archivos aquí o haz clic para subirlos.<br><br>
                                                </div>
                                            </div>
                                            @if($setting->value)
                                                <div class="mt-2">
                                                    <label>Imagen actual:</label>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('uploads/front-settings/' . $setting->value) }}" alt="Preview" class="img-thumbnail me-3" style="max-height: 100px;">
                                                        <div class="custom-control custom-checkbox">
                                                            <input type="checkbox" 
                                                                   class="custom-control-input" 
                                                                   id="remove_image_{{ $setting->id }}"
                                                                   name="settings[{{ $setting->id }}][remove_image]"
                                                                   value="1">
                                                            <label class="custom-control-label" for="remove_image_{{ $setting->id }}">
                                                                Eliminar imagen
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                            
                                        @elseif($setting->field_type == 'json')
                                            <textarea class="form-control json-editor" 
                                                      id="setting_{{ $setting->id }}"
                                                      name="settings[{{ $setting->id }}][value]"
                                                      rows="8"
                                                      {{ $setting->use_ai_value ? 'disabled' : '' }}>{{ old('settings.'.$setting->id.'.value', $setting->value) }}</textarea>
                                            <small class="text-muted">Formato JSON. Ejemplo: [{"key": "value"}]</small>
                                        @endif
                                        
                                        <!-- Estado activo/inactivo -->
                                        <div class="custom-control custom-switch mt-2">
                                            <input type="checkbox" 
                                                   class="custom-control-input" 
                                                   id="active_{{ $setting->id }}"
                                                   name="settings[{{ $setting->id }}][is_active]"
                                                   value="1"
                                                   {{ $setting->is_active ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="active_{{ $setting->id }}">
                                                Configuración activa
                                            </label>
                                        </div>
                                        
                                        <small class="text-muted d-block mt-1">
                                            <i class="ri-key-line"></i> Key: <code>{{ $setting->key }}</code>
                                        </small>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="ri-save-line"></i> Guardar Cambios
                        </button>
                        
                        @if(aiIntegrationEnabled())
                        <button type="button" class="btn btn-sm btn-success" onclick="generateAllWithAi()">
                            <i class="ri-robot-line"></i> Generar Todo con IA
                        </button>
                        @endif
                    </div>
                </div>
            </form>
    
@endsection

@section('customJs')
<script>
// Inicializar Summernote para editores
$(document).ready(function() {
    $('.summernote').summernote({
        height: 200,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ]
    });
    
    // Formatear JSON
    $('.json-editor').each(function() {
        try {
            var json = JSON.parse($(this).val());
            $(this).val(JSON.stringify(json, null, 2));
        } catch(e) {
            // Si no es JSON válido, dejar como está
        }
    });
    
    // Inicializar Dropzone para cada campo de imagen
    Dropzone.autoDiscover = false;
    
    @foreach($settings as $setting)
        @if($setting->field_type == 'image')
        $("#image_{{ $setting->id }}").dropzone({
            init: function() {
                this.on('addedfile', function(file) {
                    if (this.files.length > 1) {
                        this.removeFile(this.files[0]);
                    }
                });
                
                // Si hay imagen existente, mostrarla en dropzone
                @if($setting->value)
                var mockFile = { 
                    name: "{{ $setting->value }}", 
                    size: 12345,
                    accepted: true
                };
                this.emit("addedfile", mockFile);
                this.emit("thumbnail", mockFile, "{{ asset('uploads/front-settings/' . $setting->value) }}");
                this.emit("complete", mockFile);
                this.files.push(mockFile);
                @endif
            },
            url: "{{ route('temp-images.create') }}",
            maxFiles: 1,
            paramName: 'image',
            addRemoveLinks: true,
            acceptedFiles: "image/jpeg,image/png,image/gif,image/webp",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(file, response) {
                $("#image_id_{{ $setting->id }}").val(response.image_id);
                // Desmarcar checkbox de eliminar si estaba marcado
                $("#remove_image_{{ $setting->id }}").prop('checked', false);
            },
            removedfile: function(file) {
                // Si es el archivo mock (imagen existente), solo quitarlo visualmente
                if (file.accepted === true && !file.upload) {
                    // Marcar para eliminar la imagen existente
                    $("#remove_image_{{ $setting->id }}").prop('checked', true);
                }
                // Limpiar el campo oculto de image_id
                $("#image_id_{{ $setting->id }}").val('');
                
                var _ref;
                return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
            }
        });
        @endif
    @endforeach
});

// Toggle contenido IA
function toggleAiContent(settingId) {
    var useAi = $('#use_ai_' + settingId).is(':checked');
    var field = $('#setting_' + settingId);
    var aiContent = $('#ai_content_' + settingId);
    
    if (useAi) {
        field.prop('disabled', true);
        aiContent.show();
    } else {
        field.prop('disabled', false);
        aiContent.hide();
    }
}

// Generar todo con IA
$('#generateAllAI').click(function() {
    var btn = $(this);
    
    Swal.fire({
        title: '¿Estás seguro?',
        text: '¿Generar contenido con IA para todas las configuraciones de esta sección?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sí, generar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (!result.isConfirmed) {
            return;
        }
    
    var settingIds = [];
    
    // Recolectar IDs de settings
    @foreach($settings as $setting)
        @if(!$setting->ai_value)
            settingIds.push({{ $setting->id }});
        @endif
    @endforeach
    
    if (settingIds.length === 0) {
        Swal.fire('Información', 'Todas las configuraciones ya tienen contenido generado por IA', 'info');
        return;
    }
    
    btn.prop('disabled', true).html('<i class="ri-loader-line fa-spin"></i> Generando contenido...');
    
    $.ajax({
        url: "{{ route('admin.front-settings.generate-bulk-ai') }}",
        type: 'POST',
        data: {
            page_type: "{{ $pageType }}",
            section: "{{ $section }}",
            setting_ids: settingIds,
            _token: "{{ csrf_token() }}"
        },
        success: function(response) {
            if (response.success) {
                Swal.fire('Éxito', response.message, 'success');
                
                if (response.errors && response.errors.length > 0) {
                    response.errors.forEach(function(error) {
                        Swal.fire('Advertencia', error, 'warning');
                    });
                }
                
                setTimeout(() => location.reload(), 2000);
            } else {
                Swal.fire('Error', response.message || 'Error al generar contenido', 'error');
                btn.prop('disabled', false).html('<i class="ri-robot-line"></i> Generar Todo con IA');
            }
        },
        error: function(xhr) {
            Swal.fire('Error', 'Error al conectar con el servicio de IA', 'error');
            btn.prop('disabled', false).html('<i class="ri-robot-line"></i> Generar Todo con IA');
        }
    });
    }); // Cierre del then() de SweetAlert2
});
</script>
@endsection