import 'bootstrap';
import $ from 'jquery';
import 'datatables.net-bs5';

$(function () {
    const languageOptions: Record<string, { searchPlaceholder: string; lengthMenu: string }> = {
        de: {
            searchPlaceholder: 'Suchen',
            lengthMenu: 'Einträge anzeigen _MENU_',
        },
        en: {
            searchPlaceholder: 'Search',
            lengthMenu: 'Show _MENU_ entries',
        },
        es: {
            searchPlaceholder: 'Buscar',
            lengthMenu: 'Mostrar _MENU_ entradas',
        },
        ru: {
            searchPlaceholder: 'Поиск',
            lengthMenu: 'Показать _MENU_ записей',
        },
    };

    const getLang = (): string => {
        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';
    };

    const lang = getLang();
    const langOptions = languageOptions[lang] || languageOptions.en;

    const SORT_STORAGE_KEY = 'transferSort_v1';

    type SortState = {
        key: string;
        col: number;
        dir: 'asc' | 'desc';
        label: string;
    };

    const loadSortState = (): SortState => {
        try {
            const raw = localStorage.getItem(SORT_STORAGE_KEY);
            if (raw) {
                const parsed = JSON.parse(raw) as SortState;
                if (parsed && parsed.col >= 1 && parsed.col <= 4) {
                    return parsed;
                }
            }
        } catch (e) {
            // ignore
        }

        return {
            key: 'date',
            col: 1,
            dir: 'desc',
            label: '',
        };
    };

    const saveSortState = (state: SortState): void => {
        localStorage.setItem(SORT_STORAGE_KEY, JSON.stringify(state));
    };

    const createTable = (selector: string): any => {
        const $table = $(selector);
        if (!$table.length) {
            return null;
        }

        const defaultCol = Number($table.data('default-sort-col') || 1);
        const defaultDir = String($table.data('default-sort-dir') || 'desc') as 'asc' | 'desc';
        const saved = loadSortState();

        return $table.DataTable({
            stateSave: true,
            stateLoadParams: function (_settings: unknown, data: any) {
                if (!data.columns || data.columns.length !== 5) {
                    delete data.columns;
                    delete data.order;
                    delete data.ColReorder;
                }
            },
            autoWidth: false,
            paging: true,
            pagingType: 'simple_numbers',
            ordering: true,
            order: [[saved.col || defaultCol, saved.dir || defaultDir]],
            language: {
                search: '',
                searchPlaceholder: langOptions.searchPlaceholder,
                lengthMenu: langOptions.lengthMenu,
                paginate: {
                    previous: '<',
                    next: '>',
                },
            },
            lengthChange: false,
            lengthMenu: [],
            pageLength: 5,
            dom: 'lfrtp',
            columnDefs: [
                {
                    targets: 0,
                    orderable: false,
                    searchable: true,
                },
                {
                    targets: [1, 2, 4],
                    visible: false,
                    searchable: false,
                    type: 'num',
                },
                {
                    targets: 3,
                    visible: false,
                    searchable: false,
                    type: 'string',
                },
            ],
        });
    };

    const tables: Record<string, any> = {
        'home-tab-pane': createTable('#uploadTable'),
        'profile-tab-pane': createTable('#downloadTable'),
        'profile-tab-2-pane': createTable('#uploadGuestTable'),
    };

    const applySortToAll = (col: number, dir: 'asc' | 'desc'): void => {
        Object.values(tables).forEach((table) => {
            if (table) {
                table.order([[col, dir]]).draw(false);
            }
        });
    };

    // Sort control (WeTransfer-like)
    const sortRoot = document.querySelector('[data-transfer-sort]') as HTMLElement | null;
    if (sortRoot) {
        const root = sortRoot;
        const trigger = root.querySelector('[data-transfer-sort-trigger]') as HTMLButtonElement | null;
        const menu = root.querySelector('[data-transfer-sort-menu]') as HTMLElement | null;
        const labelEl = root.querySelector('[data-transfer-sort-label]') as HTMLElement | null;
        const dirEl = root.querySelector('[data-transfer-sort-dir]') as HTMLElement | null;
        const options = Array.from(root.querySelectorAll('[data-sort-key]')) as HTMLButtonElement[];

        let state = loadSortState();
        if (!state.label) {
            const activeOption = options.find((opt) => Number(opt.dataset.sortCol) === state.col) || options[0];
            state.label = activeOption?.textContent?.trim() || '';
            state.key = activeOption?.dataset.sortKey || 'date';
            state.col = Number(activeOption?.dataset.sortCol || 1);
        }

        const syncUi = (): void => {
            if (labelEl) {
                labelEl.textContent = state.label;
            }
            if (dirEl) {
                dirEl.textContent = state.dir === 'asc' ? '↑' : '↓';
            }
            options.forEach((opt) => {
                opt.classList.toggle('is-active', Number(opt.dataset.sortCol) === state.col);
            });
        };

        const openMenu = (open: boolean): void => {
            if (!menu || !trigger) {
                return;
            }
            menu.classList.toggle('d-none', !open);
            trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
            root.classList.toggle('is-open', open);
        };

        const setSort = (col: number, key: string, label: string): void => {
            if (state.col === col) {
                state.dir = state.dir === 'asc' ? 'desc' : 'asc';
            } else {
                state.col = col;
                state.key = key;
                state.label = label;
                state.dir = key === 'title' ? 'asc' : 'desc';
            }

            saveSortState(state);
            syncUi();
            applySortToAll(state.col, state.dir);
            openMenu(false);
        };

        syncUi();
        applySortToAll(state.col, state.dir);

        trigger?.addEventListener('click', (event) => {
            event.preventDefault();
            event.stopPropagation();
            const isOpen = !menu?.classList.contains('d-none');
            openMenu(!isOpen);
        });

        options.forEach((opt) => {
            opt.addEventListener('click', (event) => {
                event.preventDefault();
                event.stopPropagation();
                const col = Number(opt.dataset.sortCol || 1);
                const key = opt.dataset.sortKey || 'date';
                const label = opt.textContent?.trim() || '';
                setSort(col, key, label);
            });
        });

        document.addEventListener('click', (event) => {
            if (!root.contains(event.target as Node)) {
                openMenu(false);
            }
        });

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape') {
                openMenu(false);
            }
        });
    }

    const tableResponsive = $('.table-responsive');
    tableResponsive.on('show.bs.dropdown', function () {
        $('#uploadTable').css('overflow', 'inherit');
    });

    tableResponsive.on('hide.bs.dropdown', function () {
        $('#uploadTable').css('overflow', 'auto');
    });
});