// Drag & Drop directives for Budget Page

app.directive('draggableItem', function () {
    return {
        restrict: 'A',
        scope: {
            item: '=',
            category: '=',
            onItemDrop: '&'
        },
        link: function (scope, element) {
            const row = element[0];
            const handle = row.querySelector('.drag-handle');

            function isEditing() {
                return scope.category && scope.category.editing;
            }

            // Gör handtaget till draggable om editing är aktivt
            scope.$watch('category.editing', function (editing) {
                if (handle) handle.setAttribute('draggable', editing ? 'true' : 'false');
            });

            if (handle) {
                handle.addEventListener('dragstart', function (e) {
                    if (!isEditing()) {
                        e.preventDefault();
                        return;
                    }

                    e.dataTransfer.setData('text/plain', JSON.stringify({
                        type: 'item',
                        itemId: scope.item.id,
                        fromCategoryId: scope.category.id
                    }));

                    const ghost = row.cloneNode(true);
                    ghost.style.position = 'absolute';
                    ghost.style.top = '-9999px';
                    ghost.style.left = '-9999px';
                    ghost.style.width = `${row.offsetWidth}px`;
                    ghost.style.opacity = '0.7';
                    document.body.appendChild(ghost);
                    e.dataTransfer.setDragImage(ghost, 0, 0);
                    setTimeout(() => document.body.removeChild(ghost), 0);

                    document.querySelectorAll('.drop-zone').forEach(el => el.classList.add('active-drop-target'));
                });

                handle.addEventListener('dragend', function () {
                    document.querySelectorAll('.drop-zone').forEach(el => el.classList.remove('active-drop-target'));
                });
            }
        }
    };
});


app.directive('dropPlaceholder', function () {
    return {
        restrict: 'A',
        scope: {
            category: '=',
            index: '=',
            onDropItem: '&'
        },
        link: function (scope, element) {
            function isEditing() {
                return scope.category && scope.category.editing;
            }

            element.addClass('drop-zone');
            element.addClass('drop-placeholder');

            const label = document.createElement('div');
            label.innerText = 'DROP HERE';
            label.style.textAlign = 'center';
            label.style.fontSize = '12px';
            label.style.color = '#166534';
            label.style.display = 'none';
            element[0].appendChild(label);

            element[0].addEventListener('dragover', function (e) {
                if (!isEditing()) return;
                const rawData = e.dataTransfer.getData('text/plain');
                if (!rawData.includes('"type":"item"')) return;

                e.preventDefault();
                element[0].classList.add('drag-over');
            });

            element[0].addEventListener('dragleave', function () {
                element[0].classList.remove('drag-over');
            });

            element[0].addEventListener('drop', function (e) {
                if (!isEditing()) return;
                e.preventDefault();
                element[0].classList.remove('drag-over');

                const dataText = e.dataTransfer.getData('text/plain');
                const data = JSON.parse(dataText);
                if (data.type !== 'item') return;

                scope.$apply(() => {
                    scope.onDropItem({
                        data: data,
                        targetCategory: scope.category,
                        targetIndex: scope.index
                    });
                });
            });

        }
    };
});

app.directive('dropFallback', function () {
    return {
        restrict: 'A',
        scope: {
            category: '=',
            onDropItem: '&'
        },
        link: function (scope, element) {
            element.addClass('drop-zone');

            const label = document.createElement('div');
            label.innerText = 'DROP HERE';
            label.style.textAlign = 'center';
            label.style.fontSize = '12px';
            label.style.color = '#166534';
            label.style.display = 'none';
            element[0].appendChild(label);

            element[0].addEventListener('dragover', function (e) {
                const data = e.dataTransfer.getData('text/plain');
                if (!data.includes('"type":"item"')) return;
                e.preventDefault();
                element[0].classList.add('drag-over');
                label.style.display = 'block';
            });

            element[0].addEventListener('dragleave', function () {
                element[0].classList.remove('drag-over');
                label.style.display = 'none';
            });

            element[0].addEventListener('drop', function (e) {
                e.preventDefault();
                element[0].classList.remove('drag-over');
                label.style.display = 'none';

                const data = JSON.parse(e.dataTransfer.getData('text/plain'));
                if (data.type !== 'item') return;

                scope.$apply(() => {
                    scope.onDropItem({
                        data: data,
                        targetCategory: scope.category,
                        targetIndex: scope.category.items.length
                    });
                });
            });
        }
    };
});

app.directive('draggableCategory', function () {
    return {
        restrict: 'A',
        scope: {
            category: '=',
            onCategoryDrop: '&'
        },
        link: function (scope, element) {
            const header = element[0].querySelector('.card-header');
            if (!header) return;

            function isDragEnabled() {
                return scope.category && scope.category.editing && scope.category.allowDrag;
            }

            function updateDraggableAttr() {
                header.setAttribute('draggable', isDragEnabled() ? 'true' : 'false');
            }

            scope.$watchGroup(['category.editing', 'category.allowDrag'], updateDraggableAttr);
            updateDraggableAttr();

            header.addEventListener('dragstart', function (e) {
                if (!isDragEnabled()) {
                    e.preventDefault();
                    return;
                }

                // Endast tillåt drag från just headern, inte från t.ex. knappar
                if (e.target !== header) {
                    e.preventDefault();
                    return;
                }

                e.dataTransfer.setData('text/plain', JSON.stringify({
                    type: 'category',
                    categoryId: scope.category.id
                }));

                const ghost = element[0].cloneNode(true);
                ghost.style.position = 'absolute';
                ghost.style.top = '-9999px';
                ghost.style.left = '-9999px';
                ghost.style.width = element[0].offsetWidth + 'px';
                ghost.style.opacity = '0.7';
                document.body.appendChild(ghost);
                e.dataTransfer.setDragImage(ghost, 0, 0);
                setTimeout(() => document.body.removeChild(ghost), 0);

                document.querySelectorAll('.drop-zone').forEach(el => el.classList.add('active-drop-target'));
            });

            header.addEventListener('dragend', function () {
                document.querySelectorAll('.drop-zone').forEach(el => el.classList.remove('active-drop-target'));
            });

            element[0].addEventListener('dragover', function (e) {
                e.preventDefault();
            });

            element[0].addEventListener('drop', function (e) {
                e.preventDefault();
                element[0].classList.remove('drag-over');

                const data = JSON.parse(e.dataTransfer.getData('text/plain'));
                if (data.type !== 'category') return;

                scope.$apply(() => {
                    scope.onCategoryDrop({
                        data: data,
                        targetCategory: scope.category
                    });
                });
            });

            element[0].addEventListener('dragenter', function (e) {
                e.preventDefault();
                element[0].classList.add('drag-over');
            });

            element[0].addEventListener('dragleave', function (e) {
                e.preventDefault();
                element[0].classList.remove('drag-over');
            });
        }
    };
});
