import('bootstrap');
import $ from 'jquery';

$(function () {
    const id: number = $('#id').val() as number

    const fullLinkElement = $('#fullLink') as JQuery<HTMLInputElement>;
    const copyButton = $('#copyMyLink') as JQuery<HTMLButtonElement>;
    const newLinkElement = $('#newLink') as JQuery<HTMLInputElement>;
    const user_settings_myLink = $('#user_settings_myLink');
    const outputLink = $('#output_myLink') as JQuery<HTMLElement>;

    let previousLinkValue = user_settings_myLink.val() as string;

    function getLang() {
        if (window.location.href.indexOf("/de/") > -1) return 'de';
        if (window.location.href.indexOf("/en/") > -1) return 'en';
        if (window.location.href.indexOf("/es/") > -1) return 'es';
        if (window.location.href.indexOf("/ru/") > -1) return 'ru';
        return 'de';
    }

    function getSettingsBasePath(): string {
        const lang = getLang();
        const segmentByLang: Record<string, string> = {
            de: 'einstellungen',
            en: 'settings',
            es: 'configuracion',
            ru: encodeURIComponent('настройки'),
        };
        return `/app/${lang}/${segmentByLang[lang] || 'settings'}`;
    }

    function getFlashHeadline(label: string): string {
        if (typeof window.getFlashHeadline === 'function') {
            return window.getFlashHeadline(label);
        }

        return label === 'success' ? 'Well done!' : label === 'error' || label === 'danger' ? 'Oh snap!' : label === 'warning' ? 'Warning!' : label === 'info' ? 'Hi there!' : 'Notice';
    }

    function showFlash(label :string, message :string) {
        const flashContainer = document.getElementById('flash-messages');
        if (!flashContainer) {
            console.error('Can\'t find flash');
            return;
        }

        const flashElement = document.createElement('div');
        flashElement.className = `flash-message flash-message--${label}`;
        flashElement.innerHTML = `
                <svg class="svg-${label}" width="84" height="75" viewBox="0 0 84 75" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="20.6075" cy="9.29547" r="9.29547" fill="#004E32"/>
                    <circle cx="80.0986" cy="47.7167" r="3.71819" fill="#004E32"/>
                    <path d="M79.4438 11.0253C82.4971 18.5483 78.8737 27.1221 71.3507 30.1754C70.5208 30.5122 69.6781 30.7678 68.8315 30.9458C64.1204 31.9366 58.8591 33.2841 56.3382 37.3855C53.3951 42.1741 55.0036 48.3927 59.3496 51.9571C68.015 59.0642 75.0268 68.4315 79.3829 79.6187C92.9059 114.348 75.7149 153.464 40.9856 166.987C6.25636 180.51 -32.8599 163.319 -46.3829 128.59C-59.9059 93.8607 -42.7149 54.7445 -7.98562 41.2214C7.18342 35.3148 23.1894 35.2678 37.5341 39.9824C42.7299 41.69 48.6536 40.072 51.5174 35.4125L52.5823 33.68C54.694 30.2441 53.7172 25.8191 52.2006 22.0823C49.1473 14.5592 52.7707 5.98544 60.2937 2.93215C67.8167 -0.121136 76.3906 3.5023 79.4438 11.0253Z" fill="#004E32"/>
                </svg>

                <div class="flash-message__icon">
                    ${label === 'success' ? '✓' : label === 'error' ? '×' : label === 'warning' ? '!' : label === 'info' ? '?' : 'i'}
                </div>
                <div class="flash-message__text">
                    <div class="headline">
                        ${getFlashHeadline(label)}
                    </div>
                    <div class="subtext">${message}</div>
                </div>
                <button class="flash-message__close" aria-label="${window.flashHeadlines?.close ?? 'Close'}">&times;</button>
            `;

        flashContainer.appendChild(flashElement);

        const closeButton = flashElement.querySelector('.flash-message__close');

        if (closeButton) {
            closeButton.addEventListener('click', function () {
                flashElement.remove();
            });
        }

        // Автоматическое скрытие через 5 секунд
        setTimeout(() => {
            if (flashElement.parentNode) {
                flashElement.remove();
            }
        }, 5000);
    }

    // Функция для очистки preview после удаления
    function clearPreview(type: string) {
        let previewElement: HTMLImageElement | null = null;
        let nameElement: HTMLElement | null = null;
        let inputElement: HTMLInputElement | null = null;
        let noBackgroundLabel = 'No background selected';

        if (window.location.href.indexOf('/de/') > -1) noBackgroundLabel = 'Kein Hintergrund ausgewählt';
        if (window.location.href.indexOf('/es/') > -1) noBackgroundLabel = 'Sin fondo seleccionado';
        if (window.location.href.indexOf('/ru/') > -1) noBackgroundLabel = 'Фон не выбран';

        switch (type) {
            case 'login':
                previewElement = document.getElementById('loginBackgroundPreview') as HTMLImageElement;
                nameElement = document.getElementById('loginBackgroundPreviewName');
                inputElement = document.getElementById('user_settings_background_login') as HTMLInputElement;
                break;
            case 'upload':
                previewElement = document.getElementById('uploadBackgroundPreview') as HTMLImageElement;
                nameElement = document.getElementById('uploadBackgroundPreviewName');
                inputElement = document.getElementById('user_settings_background_upload') as HTMLInputElement;
                break;
            case 'download':
                previewElement = document.getElementById('downloadBackgroundPreview') as HTMLImageElement;
                nameElement = document.getElementById('downloadBackgroundPreviewName');
                inputElement = document.getElementById('user_settings_background_download') as HTMLInputElement;
                break;
            case 'logo':
                previewElement = document.getElementById('logoPreview') as HTMLImageElement;
                nameElement = document.getElementById('fileName');
                inputElement = document.getElementById('user_settings_emailLogo') as HTMLInputElement;
                break;
        }

        if (previewElement) {
            previewElement.src = '/images/default_setting_background_image.svg';
            if (type === 'logo') {
                previewElement.src = '/images/cumas_logo.svg';
            }
        }

        if (nameElement) {
            nameElement.textContent = type === 'logo' ? '' : noBackgroundLabel;
        }

        if (inputElement) {
            inputElement.value = '';
        }

        const deleteButton = document.getElementById(`del_${type === 'logo' ? 'email_logo' : 'background_' + type}`);
        if (deleteButton) {
            deleteButton.classList.add('d-none');
        }
    }

    // AJAX функция для удаления изображения
    function deleteImage(type: string) {
        const confirmText = getLang() === 'de'
            ? 'Hintergrund wirklich löschen?'
            : getLang() === 'es'
                ? '¿Eliminar el fondo?'
                : getLang() === 'ru'
                    ? 'Удалить фон?'
                    : 'Delete this background?';

        if (!window.confirm(confirmText)) {
            return;
        }

        $.ajax({
            url: `${getSettingsBasePath()}/${id}/delete-image?type=${type}`,
            type: 'DELETE',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            },
            success: function(response) {
                if (response.success) {
                    showFlash('success', response.message || 'OK');
                    clearPreview(type);
                } else {
                    showFlash('error', response.message);
                }
            },
            error: function(xhr) {
                let errorMessage = 'Error deleting image';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                showFlash('error', errorMessage);
            }
        });
    }

    // Функция для копирования ссылки в буфер обмена
    copyButton.on('click', function () {
        fullLinkElement.select();
        document.execCommand("copy");
    });

    newLinkElement.on('input', function () {
        const newLink = (newLinkElement.val() as string).trim();

        if (newLink.length >= 2) {
            user_settings_myLink.val(newLink);
            const lang = getLang();
            outputLink.load(`${getSettingsBasePath()}/check-company-link?data=${newLink}`);
        } else if (newLink.length === 0) {
            user_settings_myLink.val(previousLinkValue);
            outputLink.empty();
        }
    });

    const signature = document.getElementById('user_settings_companySignature') as HTMLInputElement;
    const subject = document.getElementById('user_settings_emailSubject') as HTMLInputElement;
    const signaturePreview = document.getElementById('signature-preview');
    const subjectPreview = document.getElementById('subject-preview');

    function updatePreview() {
        if (subject.value && subjectPreview) {
            subjectPreview.textContent = subject.value;
        }
        if (signature.value && signaturePreview) {
            // Замените символы новой строки на <br>
            signaturePreview.innerHTML = signature.value.replace(/\n/g, '<br>');
        }
    }

    if (signature && subject) {
        updatePreview()
        signature.addEventListener('input', updatePreview);
        subject.addEventListener('input', updatePreview);
    }

    function previewBackground(event: Event, previewId: string, previewName: string, errorId: string): void {
        const input = event.target as HTMLInputElement;
        const errorMessageDiv = document.getElementById(errorId);
        if (!input || !input.files || input.files.length === 0) {
            return;
        }

        const file = input.files[0];
        const maxBytes = 5 * 1024 * 1024;

        if (file.size > maxBytes) {
            if (errorMessageDiv) {
                errorMessageDiv.textContent = getLang() === 'de'
                    ? 'Die Datei ist zu groß. Die maximale Größe beträgt 5 MB.'
                    : 'File is too large. Maximum size is 5 MB.';
            }
            input.value = '';
            return;
        }

        if (errorMessageDiv) {
            errorMessageDiv.textContent = '';
        }

        if (!file.type.startsWith('image/')) {
            if (errorMessageDiv) {
                errorMessageDiv.textContent = getLang() === 'de'
                    ? 'Bitte wählen Sie eine Bilddatei.'
                    : 'Please select an image file.';
            }
            input.value = '';
            return;
        }

        const reader = new FileReader();
        reader.onload = (e: ProgressEvent<FileReader>) => {
            const preview = document.getElementById(previewId) as HTMLImageElement;
            if (preview) {
                preview.src = e.target?.result as string;
                preview.style.display = 'block';
            }
            const previewNameDiv = document.getElementById(previewName);
            if (previewNameDiv) {
                previewNameDiv.textContent = file.name;
            }

            const type = previewId.replace('BackgroundPreview', '').toLowerCase();
            const deleteButton = document.getElementById(`del_background_${type}`);
            if (deleteButton) {
                deleteButton.classList.remove('d-none');
            }
        };

        reader.readAsDataURL(file);
    }

    function previewLogo(event: Event, previewId: string): void {
        const input = event.target as HTMLInputElement;
        if (!input || !input.files || input.files.length === 0) {
            return;
        }

        const file = input.files[0];
        const reader = new FileReader();

        reader.onload = (e: ProgressEvent<FileReader>) => {
            const preview = document.getElementById(previewId) as HTMLImageElement;
            if (preview) {
                preview.src = e.target?.result as string;
                preview.style.display = 'block';
            }
            const fileNameDiv = document.getElementById('fileName');
            if (fileNameDiv) {
                fileNameDiv.textContent = file.name;
            }
        };

        reader.readAsDataURL(file);
    }

    function setActiveTab(tabId: string) {
        const tabs = ['settings', 'background', 'email-template', 'social-media'];
        tabs.forEach(tab => {
            $(`#link-${tab}`).removeClass('active');
            $(`#${tab}-block`).removeClass('display-block').addClass('display-none');
        });
        $(`#link-${tabId}`).addClass('active');
        $(`#${tabId}-block`).removeClass('display-none').addClass('display-block');
        localStorage.setItem('activeTab', tabId);
    }

    function changeActiveTab(tabId: string) {
        localStorage.setItem('settingsActiveTab', tabId);
        window.location.reload()
    }

    const activeTab = localStorage.getItem('settingsActiveTab') || 'settings';
    setActiveTab(activeTab);

    $('#link-settings').on('click', function () {
        changeActiveTab('settings');
    });

    $('#link-background').on('click', function () {
        changeActiveTab('background');
    });

    $('#link-email-template').on('click', function () {
        changeActiveTab('email-template');
    });

    $('#link-social-media').on('click', function () {
        changeActiveTab('social-media');
    });

    // Обновленные обработчики кнопок удаления с AJAX
    $('#del_background_login').on('click', function () {
        deleteImage('login');
    });

    $('#del_background_upload').on('click', function () {
        deleteImage('upload');
    });

    $('#del_background_download').on('click', function () {
        deleteImage('download');
    });

    $('#del_email_logo').on('click', function () {
        deleteImage('logo');
    });

    $(document).ready(() => {
        const loginInput = document.querySelector('input[id="user_settings_background_login"]');
        if (loginInput) {
            loginInput.addEventListener('change', (event) =>
                previewBackground(event, 'loginBackgroundPreview', 'loginBackgroundPreviewName', 'loginBackgroundError')
            );
        }

        const uploadInput = document.querySelector('input[id="user_settings_background_upload"]');
        if (uploadInput) {
            uploadInput.addEventListener('change', (event) =>
                previewBackground(event, 'uploadBackgroundPreview', 'uploadBackgroundPreviewName', 'uploadBackgroundError')
            );
        }

        const downloadInput = document.querySelector('input[id="user_settings_background_download"]');
        if (downloadInput) {
            downloadInput.addEventListener('change', (event) =>
                previewBackground(event, 'downloadBackgroundPreview', 'downloadBackgroundPreviewName', 'downloadBackgroundError')
            );
        }

        const uploadTitle: HTMLInputElement | null = document.getElementById('user_settings_uploadTitle') as HTMLInputElement;
        if (uploadTitle) {
            const form_setting = document.getElementById('form_setting') as HTMLFormElement;
            const color: HTMLInputElement | null = document.getElementById('user_settings_uploadTitleColor') as HTMLInputElement;
            const fontSize: HTMLInputElement | null = document.getElementById('user_settings_uploadTitleSize') as HTMLInputElement;
            const preview: HTMLDivElement | null = document.getElementById('preview') as HTMLDivElement;

            preview.textContent = uploadTitle.value;
            preview.style.color = color.value
            preview.style.fontSize = fontSize.value + 'px'

            form_setting.addEventListener('input', function () {
                // Get form values
                const title: string = uploadTitle.value;
                const textColor: string = color.value;
                const textSize: string = fontSize.value;

                // Update preview div
                preview.textContent = title;
                preview.style.color = textColor;
                preview.style.fontSize = textSize + 'px';
            });
        }

        const logoInput = document.querySelector('input[id="user_settings_emailLogo"]');
        if (logoInput) {
            logoInput.addEventListener('change', (event) => previewLogo(event, 'logoPreview'));
        }
    });
});