<?php
/**
 * @var $input
 * @var $smiles
 */

?>
<div class="wysibb-editor-container">
    <script>
        // WYSIBB Editor Configuration
        document.addEventListener('DOMContentLoaded', function() {
            const wysibbSettings = {
                buttons: "bold,italic,underline,strike,|,smilebox,link,code,quote,video,fontcolor,|,removeFormat",
                smileList: <?= json_encode($smiles) ?>,
                // Modern theme settings
                theme: 'modern',
                // Additional modern features
                pastePlainText: true,
                autoLinks: true,
                imageUpload: false,
                // Styling improvements
                styles: {
                    toolbar: 'bg-gray-50 border border-gray-300 rounded-t-lg p-2',
                    button: 'text-gray-600 hover:text-gray-900 hover:bg-gray-200 rounded px-2 py-1 transition-colors duration-200',
                    activeButton: 'text-blue-600 bg-blue-50 border border-blue-200',
                    textarea: 'bg-white border border-gray-300 rounded-b-lg p-4 text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-h-32 resize-y'
                }
            };

            const wysibbInput = '#<?= $input ?>';
            
            // Initialize WYSIBB editor
            function initWysibb() {
                if (typeof $.wysibb === 'function' && $(wysibbInput).length) {
                    $(wysibbInput).wysibb(wysibbSettings);
                    
                    // Remove required attribute after initialization
                    setTimeout(() => {
                        const element = document.getElementById("<?= $input ?>");
                        if (element) {
                            element.removeAttribute("required");
                        }
                    }, 100);
                } else {
                    // Retry initialization if WYSIBB not loaded yet
                    setTimeout(initWysibb, 100);
                }
            }

            // Start initialization
            initWysibb();

            // Custom styling for the editor
            const style = document.createElement('style');
            style.textContent = `
                .wysibb {
                    border-radius: 0.5rem;
                    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
                }
                
                .wysibb-toolbar {
                    background: #f9fafb !important;
                    border-bottom: 1px solid #e5e7eb !important;
                    border-radius: 0.5rem 0.5rem 0 0 !important;
                    padding: 0.5rem !important;
                }
                
                .wysibb-toolbar .button {
                    color: #4b5563 !important;
                    border-radius: 0.375rem !important;
                    margin: 0 0.125rem !important;
                    transition: all 0.2s ease-in-out !important;
                }
                
                .wysibb-toolbar .button:hover {
                    color: #111827 !important;
                    background: #e5e7eb !important;
                }
                
                .wysibb-toolbar .button.active {
                    color: #2563eb !important;
                    background: #dbeafe !important;
                    border: 1px solid #93c5fd !important;
                }
                
                .wysibb-body {
                    background: white !important;
                    border: 1px solid #d1d5db !important;
                    border-top: none !important;
                    border-radius: 0 0 0.5rem 0.5rem !important;
                    min-height: 8rem !important;
                    padding: 1rem !important;
                    font-family: 'Roboto', sans-serif !important;
                    color: #111827 !important;
                    resize: vertical !important;
                }
                
                .wysibb-body:focus {
                    outline: none !important;
                    ring: 2px solid #3b82f6 !important;
                    border-color: #3b82f6 !important;
                }
                
                /* Smile box styling */
                .wysibb-smile-box {
                    background: white !important;
                    border: 1px solid #e5e7eb !important;
                    border-radius: 0.5rem !important;
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
                    padding: 0.5rem !important;
                    max-width: 300px !important;
                }
                
                .wysibb-smile-box img {
                    border-radius: 0.25rem !important;
                    transition: transform 0.2s ease-in-out !important;
                }
                
                .wysibb-smile-box img:hover {
                    transform: scale(1.1) !important;
                    background: #f3f4f6 !important;
                }
                
                /* Responsive improvements */
                @media (max-width: 640px) {
                    .wysibb-toolbar {
                        padding: 0.25rem !important;
                    }
                    
                    .wysibb-toolbar .button {
                        padding: 0.25rem 0.5rem !important;
                        font-size: 0.875rem !important;
                    }
                    
                    .wysibb-body {
                        padding: 0.75rem !important;
                        min-height: 6rem !important;
                    }
                }
            `;
            document.head.appendChild(style);
        });

        // Fallback for older browsers
        if (typeof jQuery === 'undefined') {
            console.warn('jQuery is not loaded. WYSIBB editor requires jQuery.');
        }
    </script>

    <!-- Loading state -->
    <div id="<?= $input ?>-loading" class="hidden">
        <div class="flex items-center justify-center p-8 bg-gray-50 rounded-lg border border-gray-200">
            <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
            <span class="ml-2 text-gray-600">Loading editor...</span>
        </div>
    </div>

    <!-- Error state -->
    <div id="<?= $input ?>-error" class="hidden">
        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
            <div class="flex items-center">
                <svg class="w-5 h-5 text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="text-red-800 text-sm">Editor failed to load. Please refresh the page.</span>
            </div>
        </div>
    </div>
</div>