@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">Configuraciones del Frontend</h4>
                <div class="page-title-right">
                    <a href="{{ route('admin.front-settings.create') }}" class="btn btn-primary">
                    <i class="ri-add-line"></i> Nueva Configuración
                    </a>
                    <div class="btn-group">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="ri-download-line"></i> Exportar
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="{{ route('admin.front-settings.export', ['page_type' => $pageType]) }}">
                    Exportar {{ ucfirst($pageType) }}
                    </a>
                    <a class="dropdown-item" href="{{ route('admin.front-settings.export', ['page_type' => 'all']) }}">
                    Exportar Todo
                    </a>
                    </div>
                    </div>
                    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#importModal">
                    <i class="ri-upload-line"></i> Importar
                    </button>
                </div>
            </div>
        </div>
    </div>
        <div class="container-fluid">
            @include('admin.message')
            
            <!-- Tabs de tipos de página -->
            <div class="card">
                <div class="card-header p-2">
                    <ul class="nav nav-pills">
                        @foreach($pageTypes as $type)
                            <li class="nav-item">
                                <a class="nav-link {{ $pageType == $type ? 'active' : '' }}" 
                                   href="{{ route('admin.front-settings.index', ['page_type' => $type]) }}">
                                    {{ ucfirst($type) }}
                                    @if($type == 'error')
                                        <i class="ri-error-warning-line ms-1"></i>
                                    @elseif($type == 'home')
                                        <i class="ri-home-line ms-1"></i>
                                    @elseif($type == 'cart')
                                        <i class="ri-shopping-cart-2-line ms-1"></i>
                                    @elseif($type == 'checkout')
                                        <i class="ri-bank-card-line ms-1"></i>
                                    @endif
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                
                <div class="card-body">
                    <!-- Sub-tabs de secciones si existen -->
                    @if($sections->isNotEmpty())
                        @if($pageType == 'error')
                            <!-- Usar componente especial para tabs de error con orden predefinido -->
                            <x-error-tabs :currentSection="$section" :pageType="$pageType" />
                        @else
                            <!-- Tabs normales para otras páginas -->
                            <ul class="nav nav-tabs mb-3">
                                <li class="nav-item">
                                    <a class="nav-link {{ !$section ? 'active' : '' }}" 
                                       href="{{ route('admin.front-settings.index', ['page_type' => $pageType]) }}">
                                        Todas
                                    </a>
                                </li>
                                @foreach($sections as $sec)
                                    <li class="nav-item">
                                        <a class="nav-link {{ $section == $sec ? 'active' : '' }}" 
                                           href="{{ route('admin.front-settings.index', ['page_type' => $pageType, 'section' => $sec]) }}">
                                            {{ ucfirst($sec) }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    @endif
                    
                    <!-- Configuraciones agrupadas por sección -->
                    @forelse($groupedSettings as $sectionName => $settings)
                        <div class="section-group mb-4">
                            <h5 class="text-primary mb-3">
                                <i class="ri-settings-3-line"></i> {{ ucfirst($sectionName) }}
                                <a href="{{ route('admin.front-settings.edit', [$pageType, $sectionName]) }}" 
                                   class="btn btn-sm btn-info float-end">
                                    <i class="ri-pencil-line"></i> Editar Sección
                                </a>
                            </h5>
                            
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th width="25%">Etiqueta</th>
                                            <th width="35%">Valor Actual</th>
                                            <th width="15%">Tipo</th>
                                            <th width="10%">IA</th>
                                            <th width="10%">Estado</th>
                                            <th width="5%">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($settings as $setting)
                                            <tr>
                                                <td>
                                                    <strong>{{ $setting->label }}</strong>
                                                    <br>
                                                    <small class="text-muted">{{ $setting->key }}</small>
                                                    @if($setting->help_text)
                                                        <br>
                                                        <small class="text-info">
                                                            <i class="ri-information-line"></i> {{ $setting->help_text }}
                                                        </small>
                                                    @endif
                                                </td>
                                                <td>
                                                    @php
                                                        $currentValue = $setting->use_ai_value && $setting->ai_value ? $setting->ai_value : $setting->value;
                                                    @endphp
                                                    
                                                    @if($setting->field_type == 'boolean')
                                                        <span class="badge badge-{{ $currentValue == 'true' ? 'success' : 'secondary' }}">
                                                            {{ $currentValue == 'true' ? 'Activo' : 'Inactivo' }}
                                                        </span>
                                                    @elseif($setting->field_type == 'image')
                                                        @if($currentValue)
                                                            <img src="{{ asset($currentValue) }}" alt="" style="max-height: 50px;">
                                                        @else
                                                            <span class="text-muted">Sin imagen</span>
                                                        @endif
                                                    @elseif($setting->field_type == 'json')
                                                        <code>{{ Str::limit($currentValue, 50) }}</code>
                                                    @else
                                                        {{ Str::limit($currentValue, 60) }}
                                                    @endif
                                                </td>
                                                <td>
                                                    <span class="badge bg-secondary">{{ $setting->field_type }}</span>
                                                </td>
                                                <td>
                                                    @if($setting->ai_value)
                                                        <span class="badge badge-{{ $setting->use_ai_value ? 'success' : 'warning' }}">
                                                            <i class="ri-robot-line"></i> 
                                                            @if($setting->use_ai_value)
                                                                Usando IA
                                                            @else
                                                                IA disponible
                                                            @endif
                                                        </span>
                                                        @if($setting->ai_generated_at)
                                                            <br>
                                                            <small class="text-muted">
                                                                {{ $setting->ai_generated_at->diffForHumans() }}
                                                            </small>
                                                        @endif
                                                    @else
                                                        <button class="btn btn-xs btn-outline-primary generate-ai-btn" 
                                                                data-setting-id="{{ $setting->id }}"
                                                                data-setting-key="{{ $setting->key }}">
                                                            <i class="ri-magic-line"></i> Generar
                                                        </button>
                                                    @endif
                                                </td>
                                                <td>
                                                    <span class="badge badge-{{ $setting->is_active ? 'success' : 'danger' }}">
                                                        {{ $setting->is_active ? 'Activo' : 'Inactivo' }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <button class="btn btn-sm btn-danger" 
                                                            onclick="deleteRecord({{ $setting->id }})">
                                                        <i class="ri-delete-bin-line"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @empty
                        <div class="alert alert-info">
                            <i class="ri-information-line"></i> No hay configuraciones para esta página.
                            <a href="{{ route('admin.front-settings.create') }}" class="alert-link">Crear una nueva</a>
                        </div>
                    @endforelse
                    
                    <!-- Botón para generar todo con IA -->
                    @if($groupedSettings->isNotEmpty())
                        <div class="text-center mt-4">
                            @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>
                    @endif
                </div>
            </div>
        </div>
    

    <!-- Modal de Importación -->
    <div class="modal fade" id="importModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('admin.front-settings.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Importar Configuraciones</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label>Archivo JSON</label>
                            <input type="file" name="file" class="form-control" accept=".json" required>
                            <small class="text-muted">Selecciona un archivo JSON exportado previamente</small>
                        </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="ri-upload-line"></i> Importar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('customJs')
<script>
// Generar contenido con IA para un setting individual
$('.generate-ai-btn').click(function() {
    var btn = $(this);
    var settingId = btn.data('setting-id');
    var settingKey = btn.data('setting-key');
    
    btn.prop('disabled', true).html('<i class="ri-loader-line fa-spin"></i> Generando...');
    
    $.ajax({
        url: "{{ route('admin.front-settings.generate-ai') }}",
        type: 'POST',
        data: {
            setting_id: settingId,
            _token: "{{ csrf_token() }}"
        },
        success: function(response) {
            if (response.success) {
                Swal.fire('Éxito', 'Contenido generado exitosamente', 'success');
                setTimeout(() => location.reload(), 1500);
            } else {
                Swal.fire('Error', response.message || 'Error al generar contenido', 'error');
                btn.prop('disabled', false).html('<i class="ri-magic-line"></i> Generar');
            }
        },
        error: function(xhr) {
            Swal.fire('Error', 'Error al conectar con el servicio de IA', 'error');
            btn.prop('disabled', false).html('<i class="ri-magic-line"></i> Generar');
        }
    });
});

// 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 página?',
        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 que no tienen contenido IA
    $('.generate-ai-btn').each(function() {
        settingIds.push($(this).data('setting-id'));
    });
    
    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
});

// Eliminar configuración
function deleteRecord(id) {
    confirmDelete('¿Estás seguro de eliminar esta configuración?', function() {
        $.ajax({
            url: '{{ url("admin/front-settings") }}/' + id,
            type: 'DELETE',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                location.reload();
            },
            error: function(xhr) {
                Swal.fire('Error', 'Error al eliminar la configuración', 'error');
            }
        });
    });
}
</script>
@endsection