@php
    $variables = \App\Models\Flows\Variables::availableVariables();
@endphp
<label for="">
    Texto o Caption:
</label>
<div class="row">
    <div class="col">
            <div class="clearfix">
                <div class="float-end">
                    <select id="formatSelector" class="form-select form-select-sm" style="width: auto;">
                        <option value="" selected>Formato</option>
                        <option value="bold">Negrita (Ctrl+B)</option>
                        <option value="italic">Cursiva (Ctrl+I)</option>
                        <option value="strikethrough">Tachado (Ctrl+S)</option>
                        <option value="monospace">Monoespaciado (Ctrl+M)</option>
                        <option value="blockquote">Cita (Ctrl+Q)</option>
                        <option value="ul">Lista con viñetas (Ctrl+U)</option>
                        <option value="ol">Lista numerada (Ctrl+O)</option>
                    </select>
                </div>
            </div>
            <textarea id="editor" class="form-control" name="text" rows="4" placeholder="Escribe tu texto aquí..." data-limit="1024">{{$value}}</textarea>
            <div class="clearfix">
                <div class="float-end">
                    <div class="char-count" id="charCount">1024 caracteres restantes</div>
                </div>
                <div class="float-start">
                    <select id="variableSelector" class="form-select">
                        <option value="" selected>Insertar variable...</option>
                        @foreach($variables as $variable)
                            <option value="{{$variable}}">{{$variable}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
    </div>
    <div class="col">
        <div class="chat-messages" id="chatMessages"></div>
    </div>
</div>
@push('css')
    <style>
        #editor{
            border-radius:5px 0px 5px 0px;
        }
        #variableSelector{
            border-top:0;
            border-radius: 0px 0px 5px 5px;
        }
        #formatSelector{
            border-bottom:0;
            border-radius: 5px 5px 0px 0px;
        }
        .chat-messages {
            padding: 15px;
            height: 200px;
            overflow-y: auto;
            background-color: #e5ddd5;
            border-top: 1px solid #ddd;
        }
        .message {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            display: inline-block;
            max-width: 100%;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .message.received {
            background-color: #fff;
            align-self: flex-start;
        }
        .formatted-text {
            font-family: inherit;
            font-size: 1rem;
        }
        .formatted-text strong {
            font-weight: bold;
        }
        .formatted-text em {
            font-style: italic;
        }
        .formatted-text del {
            text-decoration: line-through;
        }
        .formatted-text code {
            font-family: monospace;
            background-color: #f1f1f1;
            padding: 2px 4px;
            border-radius: 4px;
        }
        .formatted-text pre {
            background-color: #f1f1f1;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
        }
        .formatted-text ul, .formatted-text ol {
            margin: 0;
            padding-left: 20px;
        }
        .formatted-text blockquote {
            margin: 0;
            padding-left: 10px;
            border-left: 3px solid #ddd;
            color: #555;
        }
        .char-count {
            font-size: 0.9rem;
            color: #555;
            text-align: right;
            margin-top: 5px;
        }
        .message-button-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .message-button {
            display: inline-block;
            background-color: #ffffff;
            color: #128C7E; /* Color verde de WhatsApp */
            padding: 10px 20px;
            border-radius: 5px;
            border: 1px solid #128C7E;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background-color 0.2s, color 0.2s;
        }
        .message-button:hover {
            background-color: #e5ddd5;
            color: #075E54;
        }
        .message-button:active {
            background-color: #f0f0f0;
        }
    </style>
@endpush
@push('js')
    <script>
        const editor = document.getElementById('editor');
        const chatMessages = document.getElementById('chatMessages');
        const charCount = document.getElementById('charCount');
        const charLimit = parseInt(editor.dataset.limit) || 1024;
        const variableSelector = document.getElementById('variableSelector');
        const formatSelector = document.getElementById('formatSelector');

        editor.addEventListener('input', updateMessage);
        editor.addEventListener('input', updateCharCount);
        editor.addEventListener('keydown', handleShortcuts);
        formatSelector.addEventListener('change', applyFormat);
        variableSelector.addEventListener('change', insertVariable);

        function updateMessage() {
            const formattedText = formatBBCode(editor.value);
            renderPreview(formattedText);
        }

        function updateCharCount() {
            const remainingChars = charLimit - editor.value.length;
            charCount.textContent = `${remainingChars} caracteres restantes`;
            if (remainingChars < 0) {
                editor.value = editor.value.substring(0, charLimit);
            }
        }

        function handleShortcuts(event) {
            if (event.ctrlKey || event.metaKey) {
                switch (event.key) {
                    case 'b':
                        event.preventDefault();
                        applyTextFormat('bold');
                        break;
                    case 'i':
                        event.preventDefault();
                        applyTextFormat('italic');
                        break;
                    case 's':
                        event.preventDefault();
                        applyTextFormat('strikethrough');
                        break;
                    case 'm':
                        event.preventDefault();
                        applyTextFormat('monospace');
                        break;
                    case 'q':
                        event.preventDefault();
                        applyTextFormat('blockquote');
                        break;
                    case 'u':
                        event.preventDefault();
                        applyTextFormat('ul');
                        break;
                    case 'o':
                        event.preventDefault();
                        applyTextFormat('ol');
                        break;
                }
            }

            if (event.key === 'Escape') {
                variableSelector.focus();
            }
        }

        function applyTextFormat(format) {
            const selectedText = editor.value.substring(editor.selectionStart, editor.selectionEnd);
            let formattedText;

            switch (format) {
                case 'bold':
                    formattedText = `*${selectedText}*`;
                    break;
                case 'italic':
                    formattedText = `_${selectedText}_`;
                    break;
                case 'strikethrough':
                    formattedText = `~${selectedText}~`;
                    break;
                case 'monospace':
                    formattedText = `\`\`\`${selectedText}\`\`\``;
                    break;
                case 'blockquote':
                    formattedText = `> ${selectedText}`;
                    break;
                case 'ul':
                    formattedText = `* ${selectedText}`;
                    break;
                case 'ol':
                    formattedText = `1. ${selectedText}`;
                    break;
            }

            replaceSelectedText(editor, formattedText);
            updateMessage();
            editor.focus();
        }

        function applyFormat() {
            const format = formatSelector.value;
            if (format) {
                applyTextFormat(format);
                formatSelector.selectedIndex = 0;
            }
        }

        function insertVariable() {
            const variable = variableSelector.value;
            if (variable) {
                replaceSelectedText(editor, `\{\{${variable}\}\}`);
                updateMessage();
                updateCharCount();
                editor.focus();
                variableSelector.selectedIndex = 0;
            }
        }

        function replaceSelectedText(textarea, text) {
            const start = textarea.selectionStart;
            const end = textarea.selectionEnd;
            const value = textarea.value;

            textarea.value = value.substring(0, start) + text+ value.substring(end);
            textarea.selectionStart = textarea.selectionEnd = start + text.length;
        }

        function formatBBCode(text) {
            text = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
            text = text.replace(/\*(.*?)\*/g, '<strong>$1</strong>');
            text = text.replace(/_(.*?)_/g, '<em>$1</em>');
            text = text.replace(/~(.*?)~/g, '<del>$1</del>');
            text = text.replace(/```(.*?)```/gs, '<pre>$1</pre>');
            text = text.replace(/`(.*?)`/g, '<code>$1</code>');
            text = text.replace(/(?:^|\n)\* (.*?)(?=\n|$)/g, '<ul><li>$1</li></ul>');
            text = text.replace(/(?:^|\n)- (.*?)(?=\n|$)/g, '<ul><li>$1</li></ul>');
            text = text.replace(/(?:^|\n)\d+\. (.*?)(?=\n|$)/g, '<ol><li>$1</li></ol>');
            text = text.replace(/^> (.*?)(?=\n|$)/gm, '<blockquote>$1</blockquote>');

            return text;
        }

        function renderPreview(formattedText) {
            chatMessages.innerHTML = `<div class="message received"><div class="formatted-text">${formattedText}</div></div>`;
            generateButtonsView();
        }
        function generateButtonsView(){
            let data = JSON.parse($("#_sl_json-output").val() ? $("#_sl_json-output").val() : "[]",null);
            let container = $("<div>").addClass("message-button-container");
            data.forEach(i => container.append("<hr>").append(`<a href="#" class="message-button">${i.title}</a>`))
            $(".formatted-text").append(container);
        }
        $(() => {
            updateMessage();
        })
    </script>
@endpush