@extends('admin.admin')

@section('content')
    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="content">

            <!-- Page Header -->
            <div class="d-md-flex d-block align-items-center justify-content-between border-bottom pb-3">
                <div class="my-auto mb-2">
                    <h3 class="page-title mb-1">{{ __('AI Settings') }}</h3>
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="javascript:void(0);">{{ __('Settings') }}</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('AI Settings') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <!-- /Page Header -->

            <div class="row">
                @include('admin.partials.general_settings_side_menu')
                <div class="col-xxl-10 col-xl-9">
                    <div class="flex-fill ps-1">
                        <div class="d-flex align-items-center justify-content-between flex-wrap mb-3">
                        </div>
                        <div class="d-md-flex d-block">
                            <div class="flex-fill">
                                <div class="row">
                                    <!-- ChatGPT Settings -->
                                    <div class="col-xxl-6 col-xl-6">
                                        <form id="chatgptForm">
                                            <div class="card">
                                                <div class="card-header d-flex align-items-center justify-content-between border-0 mb-3 pb-0">
                                                    <div class="skeleton label-skeleton label-loader"></div>
                                                    <div class="d-flex align-items-center d-none real-label">
                                                        <span class="avatar avatar-lg p-2 rounded bg-gray flex-shrink-0 me-2">
                                                            <img src="/assets/img/icons/chatgpt-logo.jpg" alt="ChatGPT">
                                                        </span>
                                                        <h6>{{ __('ChatGPT') }}</h6>
                                                    </div>
                                                    <div class="status-toggle modal-status d-none real-label">
                                                        <input type="checkbox" name="chatgpt_status" id="chatgpt_status" class="check">
                                                        <label for="chatgpt_status" class="checktoggle"></label>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0">
                                                    <div class="skeleton input-skeleton input-loader"></div>
                                                    <p class="d-none real-input">{{ __('Configure OpenAI ChatGPT API settings for AI-powered content generation') }}</p>
                                                </div>
                                                <div class="card-footer d-flex justify-content-between align-items-center">
                                                    <div class="modal-body">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="mb-3">
                                                                    <input type="text" name="group_id" id="group_id" value="17" hidden>
                                                                    <div class="skeleton label-skeleton label-loader"></div>
                                                                    <label class="form-label d-none real-label">
                                                                        {{ __('API Key') }} <span class="text-danger">*</span>
                                                                    </label>
                                                                    <div class="skeleton input-skeleton input-loader"></div>
                                                                    <div class="input-group">
                                                                        <input type="password" name="chatgpt_api_key" id="chatgpt_api_key" 
                                                                               class="form-control d-none real-input" 
                                                                               placeholder="{{ __('Enter ChatGPT API Key') }}">
                                                                        <button class="btn btn-outline-secondary" type="button" id="toggleChatGPTKey" title="Show/Hide API Key">
                                                                            <i class="ti ti-eye" id="chatgptEyeIcon"></i>
                                                                        </button>
                                                                    </div>
                                                                    <div class="invalid-feedback" id="chatgpt_api_key_error"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            @if (isset($permission))
                                                                @if (hasPermission($permission, 'General Settings', 'edit'))
                                                                    <div class="skeleton label-skeleton label-loader"></div>
                                                                    <button type="submit" class="btn btn-primary chatgpt_setting_btn d-none real-label">
                                                                        {{ __('Update') }}
                                                                    </button>
                                                                @endif
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>

                                    <!-- Gemini Settings -->
                                    <div class="col-xxl-6 col-xl-6">
                                        <form id="geminiForm">
                                            <div class="card">
                                                <div class="card-header d-flex align-items-center justify-content-between border-0 mb-3 pb-0">
                                                    <div class="skeleton label-skeleton label-loader"></div>
                                                    <div class="d-flex align-items-center d-none real-label">
                                                        <span class="avatar avatar-lg p-2 rounded bg-gray flex-shrink-0 me-2">
                                                            <img src="/assets/img/icons/gemini-logo.png" alt="Gemini">
                                                        </span>
                                                        <h6>{{ __('Google Gemini') }}</h6>
                                                    </div>
                                                    <div class="status-toggle modal-status d-none real-label">
                                                        <input type="checkbox" name="gemini_status" id="gemini_status" class="check">
                                                        <label for="gemini_status" class="checktoggle"></label>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0">
                                                    <div class="skeleton input-skeleton input-loader"></div>
                                                    <p class="d-none real-input">{{ __('Configure Google Gemini API settings for AI-powered content generation') }}</p>
                                                </div>
                                                <div class="card-footer d-flex justify-content-between align-items-center">
                                                    <div class="modal-body">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="mb-3">
                                                                    <input type="text" name="group_id" id="group_id" value="17" hidden>
                                                                    <div class="skeleton label-skeleton label-loader"></div>
                                                                    <label class="form-label d-none real-label">
                                                                        {{ __('API Key') }} <span class="text-danger">*</span>
                                                                    </label>
                                                                    <div class="skeleton input-skeleton input-loader"></div>
                                                                    <div class="input-group">
                                                                        <input type="password" name="gemini_api_key" id="gemini_api_key" 
                                                                               class="form-control d-none real-input" 
                                                                               placeholder="{{ __('Enter Gemini API Key') }}">
                                                                        <button class="btn btn-outline-secondary" type="button" id="toggleGeminiKey" title="Show/Hide API Key">
                                                                            <i class="ti ti-eye" id="geminiEyeIcon"></i>
                                                                        </button>
                                                                    </div>
                                                                    <div class="invalid-feedback" id="gemini_api_key_error"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            @if (isset($permission))
                                                                @if (hasPermission($permission, 'General Settings', 'edit'))
                                                                    <div class="skeleton label-skeleton label-loader"></div>
                                                                    <button type="submit" class="btn btn-primary gemini_setting_btn d-none real-label">
                                                                        {{ __('Update') }}
                                                                    </button>
                                                                @endif
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>

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

        </div>
    </div>

@endsection

@push('styles')
<style>
/* Custom validation styles to match the example */
.form-control.is-invalid {
    border-color: #dc3545 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.invalid-feedback {
    display: block !important;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545 !important;
    font-weight: 500;
}

/* Required field indicator */
.text-danger {
    color: #dc3545 !important;
    font-weight: bold;
}

/* Enhanced form label styling */
.form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

/* Input field focus styling */
.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}


/* Card header styling */
.card-header h6 {
    margin: 0;
    font-weight: 600;
    color: #495057;
}

/* Form group spacing */
.mb-3 {
    margin-bottom: 1rem !important;
}

/* Button styling */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    font-weight: 500;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* Skeleton loader animation */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Input group styling for API key fields */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
    z-index: 2;
}

.input-group .form-control.is-invalid {
    z-index: 1;
}

.input-group .form-control.is-invalid + .btn {
    border-color: #dc3545;
}

/* Eye icon button styling */
.input-group .btn-outline-secondary {
    color: #6c757d;
    border-color: #ced4da;
    background-color: #fff;
    transition: all 0.15s ease-in-out;
}

.input-group .btn-outline-secondary:hover {
    color: #495057;
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.input-group .btn-outline-secondary:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

/* Eye icon styling */
.ti-eye, .ti-eye-off {
    font-size: 1.1rem;
    line-height: 1;
}

/* Input group with invalid state */
.input-group .form-control.is-invalid ~ .btn-outline-secondary {
    border-color: #dc3545;
    color: #dc3545;
}

.input-group .form-control.is-invalid ~ .btn-outline-secondary:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* Ensure error message appears below input group */
.input-group + .invalid-feedback {
    display: block !important;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545 !important;
    font-weight: 500;
}

</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Load AI settings on page load
    loadAISettings();

    function loadAISettings() {
        $.ajax({
            url: "/api/ai-settings/index",
            method: "GET",
            data: { group_id: 17 },
            success: function(response) {
                if (response.code === 200 && response.data.settings) {
                    response.data.settings.forEach(function(setting) {
                        const element = $('[name="' + setting.key + '"]');
                        
                        if (element.length) {
                            if (element.attr('type') === 'checkbox') {
                                const isChecked = setting.value === '1';
                                element.prop('checked', isChecked);
                                
                                // No status text to update for credential-style toggles
                            } else {
                                element.val(setting.value);
                            }
                        }
                    });
                    
                    // Show real content and hide skeletons
                    $('.skeleton').addClass('d-none');
                    $('.real-label, .real-input').removeClass('d-none');
                } else {
                    // Still show the form even if no settings
                    $('.skeleton').addClass('d-none');
                    $('.real-label, .real-input').removeClass('d-none');
                }
            },
            error: function(xhr, status, error) {
                
                // Still show the form even if API fails
                $('.skeleton').addClass('d-none');
                $('.real-label, .real-input').removeClass('d-none');
                
                toastr.error('Failed to load AI settings');
            }
        });
    }

    // Handle form submissions
    $('#chatgptForm, #geminiForm').on('submit', function(e) {
        e.preventDefault();
        
        const form = $(this);
        const formData = new FormData(this);
        
        // Clear all previous errors
        $('.invalid-feedback').text('');
        $('.is-invalid').removeClass('is-invalid');
        
        // Get form data for the current form only
        const allData = {};
        for (let [key, value] of formData.entries()) {
            allData[key] = value;
        }
        
        // Ensure status fields are always included (even if unchecked)
        if (form.attr('id') === 'chatgptForm' && !allData.hasOwnProperty('chatgpt_status')) {
            allData.chatgpt_status = '0';
        }
        if (form.attr('id') === 'geminiForm' && !allData.hasOwnProperty('gemini_status')) {
            allData.gemini_status = '0';
        }
        
        // Client-side validation
        let isValid = true;
        const errors = {};
        
        // Check if at least one provider is enabled and has API key
        const chatgptStatus = allData.chatgpt_status === '1';
        const geminiStatus = allData.gemini_status === '1';
        
        // Only validate API keys if the corresponding provider is enabled
        if (chatgptStatus) {
            const chatgptApiKey = allData.chatgpt_api_key || '';
            if (!chatgptApiKey || chatgptApiKey.trim() === '') {
                errors.chatgpt_api_key = 'ChatGPT API key is required when ChatGPT is enabled';
                $('#chatgpt_api_key').addClass('is-invalid');
                isValid = false;
            } else if (chatgptApiKey.trim().length < 10) {
                errors.chatgpt_api_key = 'ChatGPT API key appears to be invalid';
                $('#chatgpt_api_key').addClass('is-invalid');
                isValid = false;
            }
        }
        
        if (geminiStatus) {
            const geminiApiKey = allData.gemini_api_key || '';
            if (!geminiApiKey || geminiApiKey.trim() === '') {
                errors.gemini_api_key = 'Gemini API key is required when Gemini is enabled';
                $('#gemini_api_key').addClass('is-invalid');
                isValid = false;
            } else if (geminiApiKey.trim().length < 10) {
                errors.gemini_api_key = 'Gemini API key appears to be invalid';
                $('#gemini_api_key').addClass('is-invalid');
                isValid = false;
            }
        }
        
        // Allow both providers to be disabled - no validation error for this case
        // Only show error if trying to enable a provider without API key
        
        // Display validation errors
        if (!isValid) {
            Object.keys(errors).forEach(function(key) {
                $('#' + key + '_error').text(errors[key]);
            });
            
            if (errors.provider_required) {
                toastr.error(errors.provider_required);
            } else {
                toastr.error('Please fill in all required fields');
            }
            
            // Scroll to first error
            const firstError = $('.is-invalid').first();
            if (firstError.length) {
                firstError.focus();
            }
            return;
        }
        
        // Show loading state
        const submitBtn = form.find('button[type="submit"]');
        const originalText = submitBtn.text();
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
        
        // Add group_id if not present
        if (!allData.group_id) {
            allData.group_id = 17;
        }
        
        // Add CSRF token
        allData._token = $('meta[name="csrf-token"]').attr('content');
        
        // Make API call to update full AI settings
        $.ajax({
            url: "/api/ai-settings/update",
            method: "POST",
            data: allData,
            success: function(response) {
                if (response.status === 'success') {
                    toastr.success(response.message || 'AI settings updated successfully via API');
                    
                    // Reload settings to ensure UI is in sync
                    setTimeout(function() {
                        loadAISettings();
                    }, 1000);
                } else {
                    toastr.error(response.message || 'Failed to update AI settings via API');
                }
            },
            error: function(xhr) {
                let errorMessage = 'An error occurred while updating settings via API';
                
                if (xhr.responseJSON) {
                    if (xhr.responseJSON.errors) {
                        // Display server-side validation errors
                        const serverErrors = xhr.responseJSON.errors;
                        Object.keys(serverErrors).forEach(function(key) {
                            $('#' + key + '_error').text(serverErrors[key][0]);
                            $('#' + key).addClass('is-invalid');
                        });
                        errorMessage = 'Please fix the errors below';
                    } else if (xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                } else if (xhr.statusText) {
                    errorMessage = xhr.statusText;
                }
                
                toastr.error(errorMessage);
            },
            complete: function() {
                // Restore button state
                submitBtn.prop('disabled', false).text(originalText);
            }
        });
    });

    // Clear error messages on input
    $('input, select').on('input change', function() {
        $(this).removeClass('is-invalid');
        $(this).siblings('.invalid-feedback').text('');
    });

    // Toggle API key visibility for ChatGPT
    $('#toggleChatGPTKey').on('click', function() {
        const apiKeyField = $('#chatgpt_api_key');
        const eyeIcon = $('#chatgptEyeIcon');
        
        if (apiKeyField.attr('type') === 'password') {
            apiKeyField.attr('type', 'text');
            eyeIcon.removeClass('ti-eye').addClass('ti-eye-off');
            $(this).attr('title', 'Hide API Key');
        } else {
            apiKeyField.attr('type', 'password');
            eyeIcon.removeClass('ti-eye-off').addClass('ti-eye');
            $(this).attr('title', 'Show API Key');
        }
    });

    // Toggle API key visibility for Gemini
    $('#toggleGeminiKey').on('click', function() {
        const apiKeyField = $('#gemini_api_key');
        const eyeIcon = $('#geminiEyeIcon');
        
        if (apiKeyField.attr('type') === 'password') {
            apiKeyField.attr('type', 'text');
            eyeIcon.removeClass('ti-eye').addClass('ti-eye-off');
            $(this).attr('title', 'Hide API Key');
        } else {
            apiKeyField.attr('type', 'password');
            eyeIcon.removeClass('ti-eye-off').addClass('ti-eye');
            $(this).attr('title', 'Show API Key');
        }
    });

    // Add real-time validation feedback
    $('#chatgpt_status').on('change', function() {
        const isEnabled = $(this).is(':checked');
        const apiKeyField = $('#chatgpt_api_key');
        const geminiCheckbox = $('#gemini_status');
        
        // Update status immediately (no text for credential-style toggles)
        if (isEnabled) {
            // Disable Gemini when ChatGPT is enabled
            if (geminiCheckbox.is(':checked')) {
                // Show notification about switching
                toastr.info('Switching to ChatGPT - Gemini will be disabled', '', {
                    timeOut: 3000,
                    extendedTimeOut: 0,
                    closeButton: false,
                    progressBar: false
                });
            }
            
            geminiCheckbox.prop('checked', false);
            
            // Clear Gemini API key requirement and errors
            $('#gemini_api_key').prop('required', false).removeClass('is-invalid');
            $('#gemini_api_key_error').text('');
            
            // Add visual indicator that Gemini is disabled
            geminiCheckbox.closest('.card').addClass('provider-disabled');
        } else {
            // Enable Gemini when ChatGPT is disabled
            geminiCheckbox.prop('disabled', false);
            
            // Remove visual indicator
            geminiCheckbox.closest('.card').removeClass('provider-disabled');
        }
        
        // Make immediate AJAX call to update status with correct boolean value
        updateAIStatus('chatgpt_status', isEnabled);
        
        // Update API key requirement based on status
        if (isEnabled) {
            apiKeyField.prop('required', true);
            // Clear any previous validation errors for this field
            apiKeyField.removeClass('is-invalid');
            $('#chatgpt_api_key_error').text('');
        } else {
            apiKeyField.prop('required', false);
        }
    });

    $('#gemini_status').on('change', function() {
        const isEnabled = $(this).is(':checked');
        const apiKeyField = $('#gemini_api_key');
        const chatgptCheckbox = $('#chatgpt_status');
        
        // Update status immediately (no text for credential-style toggles)
        if (isEnabled) {
            // Disable ChatGPT when Gemini is enabled
            if (chatgptCheckbox.is(':checked')) {
                // Show notification about switching
                toastr.info('Switching to Gemini - ChatGPT will be disabled', '', {
                    timeOut: 3000,
                    extendedTimeOut: 0,
                    closeButton: false,
                    progressBar: false
                });
            }
            
            chatgptCheckbox.prop('checked', false);
            
            // Clear ChatGPT API key requirement and errors
            $('#chatgpt_api_key').prop('required', false).removeClass('is-invalid');
            $('#chatgpt_api_key_error').text('');
            
            // Add visual indicator that ChatGPT is disabled
            chatgptCheckbox.closest('.card').addClass('provider-disabled');
        } else {
            // Enable ChatGPT when Gemini is disabled
            chatgptCheckbox.prop('disabled', false);
            
            // Remove visual indicator
            chatgptCheckbox.closest('.card').removeClass('provider-disabled');
        }
        
        // Make immediate AJAX call to update status with correct boolean value
        updateAIStatus('gemini_status', isEnabled);
        
        // Update API key requirement based on status
        if (isEnabled) {
            apiKeyField.prop('required', true);
            // Clear any previous validation errors for this field
            apiKeyField.removeClass('is-invalid');
            $('#gemini_api_key_error').text('');
        } else {
            apiKeyField.prop('required', false);
        }
    });

    // Function to update AI status via AJAX
    function updateAIStatus(field, isEnabled) {
        const data = {
            [field]: isEnabled ? '1' : '0', // Convert boolean to 1/0
            'group_id': 17,
            '_token': $('meta[name="csrf-token"]').attr('content')
        };
        
        // Determine active provider based on current status
        const chatgptStatus = $('#chatgpt_status').is(':checked');
        const geminiStatus = $('#gemini_status').is(':checked');
        
        let activeProvider = null;
        if (geminiStatus) {
            activeProvider = 'gemini';
        } else if (chatgptStatus) {
            activeProvider = 'chatgpt';
        }
        
        // Only include active_ai_provider if there's an active provider
        if (activeProvider) {
            data['active_ai_provider'] = activeProvider;
        }
        
        $.ajax({
            url: "/api/ai-settings/update-status",
            method: "POST",
            data: data,
            success: function(response) {
                if (response.status === 'success') {
                    // Show subtle success notification
                    toastr.success('Status updated successfully', '', {
                        timeOut: 2000,
                        extendedTimeOut: 0,
                        closeButton: false,
                        progressBar: false
                    });
                }
            },
            error: function(xhr) {
                // Revert the toggle on error
                const checkbox = $('[name="' + field + '"]');
                checkbox.prop('checked', !checkbox.prop('checked'));
                
                toastr.error('Failed to update status');
            }
        });
    }

    // Add API key format validation on blur
    $('#chatgpt_api_key, #gemini_api_key').on('blur', function() {
        const value = $(this).val().trim();
        const fieldId = $(this).attr('id');
        
        if (value && value.length > 0) {
            // Basic API key format validation
            if (value.length < 10) {
                $(this).addClass('is-invalid');
                $('#' + fieldId + '_error').text('API key appears to be too short');
            } else if (!/^[a-zA-Z0-9\-_]+$/.test(value)) {
                $(this).addClass('is-invalid');
                $('#' + fieldId + '_error').text('API key contains invalid characters');
            } else {
                $(this).removeClass('is-invalid');
                $('#' + fieldId + '_error').text('');
            }
        }
    });
});
</script>
@endpush