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

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

.integration-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%);
}

.environment-badge {
    background: #e8f5e8;
    color: #2e7d32;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.config-group {
    border-left: 3px solid #667eea;
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

.ai-provider-card {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: white;
    transition: all 0.2s;
}

.ai-provider-card:hover {
    border-color: #667eea;
    box-shadow: 0 2px 4px rgba(102,126,234,0.1);
}

.ai-provider-logo {
    width: 30px;
    height: 30px;
    margin-right: 0.75rem;
}

.feature-toggle-section {
    background: #f8f9ff;
    border: 1px solid #e3e1fc;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1.5rem;
}

.feature-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Eye toggle button styles */
.input-group .toggle-visibility {
    border-left: 0;
}

.credential-field {
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}
</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">Integración de Inteligencia Artificial</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="{{ route('integrations.ai.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="aiTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="general-ai-tab" data-bs-toggle="tab" data-bs-target="#general-ai"
                                    type="button" role="tab" aria-controls="general-ai" aria-selected="true">
                                <i class="ri-brain-line tab-icon"></i>
                                Configuración General
                            </button>
                        </li>
                        <!-- Tabs preparados para futuras expansiones -->
                        <!--
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="content-generation-tab" data-bs-toggle="tab" data-bs-target="#content-generation"
                                    type="button" role="tab" aria-controls="content-generation" aria-selected="false">
                                <i class="ri-file-text-line tab-icon"></i>
                                Generación de Contenido
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="ai-analytics-tab" data-bs-toggle="tab" data-bs-target="#ai-analytics"
                                    type="button" role="tab" aria-controls="ai-analytics" aria-selected="false">
                                <i class="ri-line-chart-line tab-icon"></i>
                                Análisis de IA
                            </button>
                        </li>
                        -->
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="aiTabContent">

                        <!-- Configuración General de AI -->
                        <div class="tab-pane fade show active" id="general-ai" role="tabpanel" aria-labelledby="general-ai-tab">

                            <!-- ============================================ -->
                            <!-- ENABLE/DISABLE TOGGLE -->
                            <!-- ============================================ -->
                            <div class="alert alert-light border">
                                <h6 class="form-section-title mb-3">
                                    <i class="ri-shut-down-line text-primary"></i>
                                    Estado de la Integración
                                </h6>

                                <div class="btn-group btn-group-toggle" data-bs-toggle="buttons">
                                    <label class="btn btn-outline-success {{ old('ai_enabled', $integrationSettings->ai_enabled ?? false) ? 'active' : '' }}">
                                        <input type="radio" name="ai_enabled" value="1" id="ai_enabled_yes" {{ old('ai_enabled', $integrationSettings->ai_enabled ?? false) ? 'checked' : '' }}>
                                        <i class="ri-checkbox-circle-line"></i> Habilitar
                                    </label>
                                    <label class="btn btn-outline-danger {{ old('ai_enabled', $integrationSettings->ai_enabled ?? false) ? '' : 'active' }}">
                                        <input type="radio" name="ai_enabled" value="0" id="ai_enabled_no" {{ old('ai_enabled', $integrationSettings->ai_enabled ?? false) ? '' : 'checked' }}>
                                        <i class="ri-close-circle-line"></i> Deshabilitar
                                    </label>
                                </div>

                                <small class="help-text d-block mt-2">
                                    <i class="ri-information-line"></i>
                                    Habilita o deshabilita completamente las funcionalidades de Inteligencia Artificial.
                                </small>
                            </div>

                            <!-- ============================================ -->
                            <!-- CONFIGURACIÓN (solo visible si está habilitado) -->
                            <!-- ============================================ -->
                            <div class="ai-configuration-content">
                                <div class="integration-card">
                                    <div class="d-flex align-items-center mb-4">
                                        <div class="integration-icon">
                                            <i class="ri-brain-line"></i>
                                        </div>
                                        <div>
                                            <h5 class="mb-1">Inteligencia Artificial - Generación de Contenido</h5>
                                            <p class="text-muted mb-0">Configura servicios de IA para generar automáticamente contenido de productos y páginas</p>
                                            <span class="environment-badge mt-2 d-inline-block">
                                                <i class="ri-robot-line"></i> IA Avanzada
                                            </span>
                                        </div>
                                    </div>

                                    <h6 class="form-section-title">
                                        <i class="ri-key-line text-primary"></i>
                                        Credenciales de API
                                    </h6>

                                    <div class="config-group">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label for="ai_provider" class="form-label">
                                                        Proveedor de IA
                                                        <span class="text-danger" id="ai_provider_required">*</span>
                                                    </label>
                                                    <select name="ai_provider" id="ai_provider" class="form-select @error('ai_provider') is-invalid @enderror">
                                                        <option value="openai" {{ old('ai_provider', $siteSettings->ai_provider ?? 'openai') == 'openai' ? 'selected' : '' }}>OpenAI (GPT)</option>
                                                        <option value="anthropic" {{ old('ai_provider', $siteSettings->ai_provider ?? '') == 'anthropic' ? 'selected' : '' }}>Anthropic (Claude)</option>
                                                        <option value="google" {{ old('ai_provider', $siteSettings->ai_provider ?? '') == 'google' ? 'selected' : '' }}>Google (Gemini)</option>
                                                        <option value="cohere" {{ old('ai_provider', $siteSettings->ai_provider ?? '') == 'cohere' ? 'selected' : '' }}>Cohere</option>
                                                        <option value="huggingface" {{ old('ai_provider', $siteSettings->ai_provider ?? '') == 'huggingface' ? 'selected' : '' }}>Hugging Face</option>
                                                    </select>
                                                    <small class="help-text">
                                                        <i class="ri-robot-line"></i>
                                                        Seleccione el proveedor de IA que desea usar
                                                    </small>
                                                    @error('ai_provider')
                                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="ai_api_key" class="form-label">
                                                        API Key
                                                        <span class="text-danger" id="ai_api_key_required">*</span>
                                                    </label>
                                                    <div class="input-group">
                                                        <input type="password" name="ai_api_key" id="ai_api_key"
                                                               class="form-control credential-field @error('ai_api_key') is-invalid @enderror"
                                                               value="{{ old('ai_api_key', $siteSettings->ai_api_key ?? '') }}"
                                                               placeholder="sk-••••••••••••••••••••••••••••••••">
                                                        <button type="button" class="btn btn-outline-secondary toggle-visibility" data-bs-target="ai_api_key">
                                                            <i class="ri-eye-line"></i>
                                                        </button>
                                                    </div>
                                                    <small class="help-text" id="api-key-help">
                                                        <i class="ri-key-line"></i>
                                                        <span id="api-key-format">Formato: sk-xxxxxxx...</span>
                                                    </small>
                                                    @error('ai_api_key')
                                                        <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="ai_api_secret" class="form-label">
                                                        API Secret
                                                        <small class="text-muted">(Opcional)</small>
                                                    </label>
                                                    <div class="input-group">
                                                        <input type="password" name="ai_api_secret" id="ai_api_secret"
                                                               class="form-control credential-field @error('ai_api_secret') is-invalid @enderror"
                                                               value="{{ old('ai_api_secret', $siteSettings->ai_api_secret ?? '') }}"
                                                               placeholder="secret_••••••••••••••••••••••••••••••••">
                                                        <button type="button" class="btn btn-outline-secondary toggle-visibility" data-bs-target="ai_api_secret">
                                                            <i class="ri-eye-line"></i>
                                                        </button>
                                                    </div>
                                                    <small class="help-text">
                                                        <i class="ri-spy-line"></i>
                                                        Solo si su proveedor lo requiere
                                                    </small>
                                                    @error('ai_api_secret')
                                                        <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label for="ai_model" class="form-label">Modelo de IA</label>
                                                    <select name="ai_model" id="ai_model" class="form-select @error('ai_model') is-invalid @enderror">
                                                        <!-- Las opciones se cargarán dinámicamente con JavaScript -->
                                                    </select>
                                                    <small class="help-text" id="model-help">
                                                        <i class="ri-cpu-line"></i>
                                                        <span id="model-suggestions">Seleccione el modelo que desea usar</span>
                                                    </small>
                                                    @error('ai_model')
                                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Proveedores de IA -->
                                    <h6 class="form-section-title">
                                        <i class="ri-server-line text-info"></i>
                                        Proveedores de IA Recomendados
                                    </h6>

                                    <div class="row mb-4">
                                        <div class="col-md-4">
                                            <div class="ai-provider-card">
                                                <div class="d-flex align-items-center">
                                                    <div style="background: #10a37f; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 0.75rem;">
                                                        <i class="ri-brain-line"></i>
                                                    </div>
                                                    <div>
                                                        <strong>OpenAI</strong>
                                                        <small class="d-block text-muted">GPT-4, GPT-3.5 Turbo</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="ai-provider-card">
                                                <div class="d-flex align-items-center">
                                                    <div style="background: #ff6b35; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 0.75rem;">
                                                        <i class="ri-robot-line"></i>
                                                    </div>
                                                    <div>
                                                        <strong>Anthropic</strong>
                                                        <small class="d-block text-muted">Claude 3, Claude 2</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="ai-provider-card">
                                                <div class="d-flex align-items-center">
                                                    <div style="background: #4285f4; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 0.75rem;">
                                                        <i class="ri-google-fill"></i>
                                                    </div>
                                                    <div>
                                                        <strong>Google AI</strong>
                                                        <small class="d-block text-muted">Gemini, PaLM</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Funcionalidades de IA -->
                                    <div class="feature-toggle-section">
                                        <h6 class="form-section-title">
                                            <i class="ri-toggle-line text-success"></i>
                                            Funcionalidades de IA
                                        </h6>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="feature-card">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div>
                                                            <h6 class="mb-1">
                                                                <i class="ri-shopping-cart-2-line text-primary"></i>
                                                                Descripciones de Productos
                                                            </h6>
                                                            <small class="text-muted">Genera descripciones automáticas para productos</small>
                                                        </div>
                                                        <div>
                                                            <select name="enable_product_description_ai" class="form-select form-select-sm @error('enable_product_description_ai') is-invalid @enderror">
                                                                <option value="1" {{ old('enable_product_description_ai', $integrationSettings->enable_product_description_ai) == 1 ? 'selected' : '' }}>Habilitado</option>
                                                                <option value="0" {{ old('enable_product_description_ai', $integrationSettings->enable_product_description_ai) == 0 ? 'selected' : '' }}>Deshabilitado</option>
                                                            </select>
                                                            @error('enable_product_description_ai')
                                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="feature-card">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div>
                                                            <h6 class="mb-1">
                                                                <i class="ri-file-text-line text-info"></i>
                                                                Contenido de Páginas
                                                            </h6>
                                                            <small class="text-muted">Genera contenido automático para páginas web</small>
                                                        </div>
                                                        <div>
                                                            <select name="enable_pages_ai" class="form-select form-select-sm @error('enable_pages_ai') is-invalid @enderror">
                                                                <option value="1" {{ old('enable_pages_ai', $integrationSettings->enable_pages_ai) == 1 ? 'selected' : '' }}>Habilitado</option>
                                                                <option value="0" {{ old('enable_pages_ai', $integrationSettings->enable_pages_ai) == 0 ? 'selected' : '' }}>Deshabilitado</option>
                                                            </select>
                                                            @error('enable_pages_ai')
                                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="alert alert-info mt-3">
                                        <i class="ri-information-line"></i>
                                        <strong>¿Cómo obtener credenciales de IA?</strong>
                                        <div class="row mt-2">
                                            <div class="col-md-4">
                                                <strong>OpenAI:</strong>
                                                <ol class="mb-0 mt-1">
                                                    <li>Ve a <a href="https://platform.openai.com" target="_blank">OpenAI Platform</a></li>
                                                    <li>Crea una cuenta o inicia sesión</li>
                                                    <li>Ve a "API Keys" en tu perfil</li>
                                                    <li>Genera una nueva API Key</li>
                                                </ol>
                                            </div>
                                            <div class="col-md-4">
                                                <strong>Anthropic:</strong>
                                                <ol class="mb-0 mt-1">
                                                    <li>Ve a <a href="https://console.anthropic.com" target="_blank">Anthropic Console</a></li>
                                                    <li>Regístrate para acceso a la API</li>
                                                    <li>Genera tu API Key</li>
                                                    <li>Configura límites de uso</li>
                                                </ol>
                                            </div>
                                            <div class="col-md-4">
                                                <strong>Google AI:</strong>
                                                <ol class="mb-0 mt-1">
                                                    <li>Ve a <a href="https://makersuite.google.com" target="_blank">Google AI Studio</a></li>
                                                    <li>Crea un proyecto</li>
                                                    <li>Habilita las APIs necesarias</li>
                                                    <li>Genera credenciales de API</li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="alert alert-success mt-3">
                                        <i class="ri-magic-line"></i>
                                        <strong>Beneficios de la IA en tu tienda:</strong>
                                        <ul class="mb-0 mt-2">
                                            <li><strong>Ahorro de tiempo:</strong> Genera contenido automáticamente</li>
                                            <li><strong>Consistencia:</strong> Mantén un tono y estilo uniformes</li>
                                            <li><strong>SEO optimizado:</strong> Contenido optimizado para motores de búsqueda</li>
                                            <li><strong>Multiidioma:</strong> Genera contenido en diferentes idiomas</li>
                                            <li><strong>Personalización:</strong> Adapta el contenido a tu marca</li>
                                            <li><strong>Escalabilidad:</strong> Maneja grandes volúmenes de productos</li>
                                        </ul>
                                    </div>

                                    <div class="alert alert-warning mt-3">
                                        <i class="ri-error-warning-line"></i>
                                        <strong>Consideraciones importantes:</strong>
                                        <ul class="mb-0 mt-2">
                                            <li>Revisa siempre el contenido generado antes de publicar</li>
                                            <li>Los servicios de IA pueden tener costos asociados por uso</li>
                                            <li>Mantén tus API keys seguras y no las compartas</li>
                                            <li>Configura límites de uso para controlar costos</li>
                                            <li>El contenido generado debe cumplir con tus políticas de marca</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                    <!-- Form Actions -->
                    <div class="form-actions">
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="ri-save-line me-2"></i>Actualizar Configuración de IA
                        </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

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // ============================================
    // ENABLE/DISABLE TOGGLE
    // ============================================
    const enabledYesRadio = document.getElementById('ai_enabled_yes');
    const enabledNoRadio = document.getElementById('ai_enabled_no');
    const configurationContent = document.querySelector('.ai-configuration-content');

    function toggleConfiguration() {
        const isEnabled = enabledYesRadio.checked;
        configurationContent.style.display = isEnabled ? 'block' : 'none';
    }

    enabledYesRadio.addEventListener('change', toggleConfiguration);
    enabledNoRadio.addEventListener('change', toggleConfiguration);
    toggleConfiguration(); // Initial call

    // ============================================
    // EYE TOGGLE (Mostrar/Ocultar Credenciales)
    // ============================================
    document.querySelectorAll('.toggle-visibility').forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const input = document.getElementById(targetId);
            const icon = this.querySelector('i');

            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });

    // ============================================
    // PROVIDER INFO MANAGEMENT
    // ============================================
    const providerSelect = document.getElementById('ai_provider');
    const apiKeyInput = document.getElementById('ai_api_key');
    const apiKeyFormat = document.getElementById('api-key-format');
    const modelInput = document.getElementById('ai_model');
    const modelSuggestions = document.getElementById('model-suggestions');

    const providerInfo = {
        openai: {
            keyFormat: 'Formato: sk-xxxxxxx...',
            keyPlaceholder: 'sk-••••••••••••••••••••••••••••••••',
            models: [
                { value: 'gpt-3.5-turbo', name: 'GPT-3.5 Turbo (Recomendado)', recommended: true },
                { value: 'gpt-4', name: 'GPT-4 (Más potente)' },
                { value: 'gpt-4-turbo', name: 'GPT-4 Turbo' },
                { value: 'gpt-4o', name: 'GPT-4o (Más reciente)' },
                { value: 'gpt-4o-mini', name: 'GPT-4o Mini (Económico)' }
            ]
        },
        anthropic: {
            keyFormat: 'Formato: sk-ant-api03-xxxxxxx...',
            keyPlaceholder: 'sk-ant-api03-••••••••••••••••••••••••',
            models: [
                { value: 'claude-3-haiku-20240307', name: 'Claude 3 Haiku (Rápido)', recommended: true },
                { value: 'claude-3-sonnet-20240229', name: 'Claude 3 Sonnet (Balanceado)' },
                { value: 'claude-3-opus-20240229', name: 'Claude 3 Opus (Más potente)' },
                { value: 'claude-3-5-sonnet-20241022', name: 'Claude 3.5 Sonnet (Más reciente)' }
            ]
        },
        google: {
            keyFormat: 'Formato: AIzaSyxxxxxxx...',
            keyPlaceholder: 'AIzaSy••••••••••••••••••••••••••••••',
            models: [
                { value: 'gemini-2.5-pro', name: 'Gemini 2.5 Pro (Más potente y nuevo)', recommended: true },
                { value: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash (Más rápido)' },
                { value: 'gemini-2.0-flash-exp', name: 'Gemini 2.0 Flash Experimental' },
                { value: 'gemini-1.5-flash', name: 'Gemini 1.5 Flash (Estable)' },
                { value: 'gemini-1.5-flash-8b', name: 'Gemini 1.5 Flash 8B (Optimizado)' },
                { value: 'gemini-1.5-pro', name: 'Gemini 1.5 Pro' },
                { value: 'gemini-1.0-pro', name: 'Gemini 1.0 Pro (Legacy)' }
            ]
        },
        cohere: {
            keyFormat: 'Formato: xxxxxxx...',
            keyPlaceholder: '••••••••••••••••••••••••••••••••',
            models: [
                { value: 'command', name: 'Command (Recomendado)', recommended: true },
                { value: 'command-light', name: 'Command Light (Rápido)' },
                { value: 'command-nightly', name: 'Command Nightly (Experimental)' }
            ]
        },
        huggingface: {
            keyFormat: 'Formato: hf_xxxxxxx...',
            keyPlaceholder: 'hf_••••••••••••••••••••••••••••••••',
            models: [
                { value: 'mistralai/Mixtral-8x7B-Instruct-v0.1', name: 'Mixtral 8x7B (Recomendado)', recommended: true },
                { value: 'microsoft/DialoGPT-medium', name: 'DialoGPT Medium' },
                { value: 'facebook/blenderbot-400M-distill', name: 'BlenderBot 400M' }
            ]
        }
    };

    function updateProviderInfo() {
        const selected = providerSelect.value;
        const info = providerInfo[selected];

        if (info) {
            // Actualizar formato de API Key
            apiKeyFormat.textContent = info.keyFormat;
            apiKeyInput.placeholder = info.keyPlaceholder;

            // Limpiar y poblar select de modelos
            modelInput.innerHTML = '';

            // Agregar opción por defecto
            const defaultOption = document.createElement('option');
            defaultOption.value = '';
            defaultOption.textContent = 'Seleccionar modelo...';
            modelInput.appendChild(defaultOption);

            // Agregar modelos específicos del proveedor
            info.models.forEach(model => {
                const option = document.createElement('option');
                option.value = model.value;
                option.textContent = model.name;

                // Seleccionar el modelo recomendado por defecto
                if (model.recommended && !modelInput.value) {
                    option.selected = true;
                }

                modelInput.appendChild(option);
            });

            // Intentar mantener el valor actual si existe
            const currentModel = '{{ old("ai_model", $siteSettings->ai_model ?? "") }}';
            if (currentModel) {
                modelInput.value = currentModel;
            }

            // Actualizar texto de ayuda
            modelSuggestions.textContent = 'Seleccione el modelo que mejor se adapte a sus necesidades';
        }
    }

    providerSelect.addEventListener('change', updateProviderInfo);
    updateProviderInfo();
});
</script>
@endpush

@section('customJs')
@endsection