// Pages List - Accordion grouping (parent/children), drag & drop sorting, publish toggle, deletion

import type { ApiResponse } from '../types/api/ApiResponse';
import { initTooltips } from '../core/Tooltip';

initTooltips();

interface DragAfterResult<T extends HTMLElement> {
    offset: number;
    element?: T;
}

function getDragAfterElement<T extends HTMLElement>(container: HTMLElement, y: number, selector: string): T | undefined {
    const draggableElements = [...container.querySelectorAll<T>(selector)].filter(el => !el.classList.contains('dragging'));
    return draggableElements.reduce((closest: DragAfterResult<T>, child: T): DragAfterResult<T> => {
        const box = child.getBoundingClientRect();
        const offset = y - box.top - box.height / 2;
        if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child };
        } else {
            return closest;
        }
    }, { offset: Number.NEGATIVE_INFINITY }).element;
}

function saveOrder(ids: string[]): void {
    fetch('/api/admin/pages/reorder', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ order: ids })
    })
    .then(response => response.json())
    .then((data: ApiResponse) => {
        if (!data.success) {
            alert('Erreur lors de la sauvegarde de l\'ordre');
            location.reload();
        }
    });
}

// Root pages accordion reorder (drag on group header)
const accordion = document.getElementById('pages-accordion') as HTMLDivElement | null;
let draggedGroup: HTMLElement | null = null;

if (accordion) {
    accordion.addEventListener('dragstart', (e: DragEvent): void => {
        const target = e.target as HTMLElement;
        if (!target.closest('.page-group__header')) return;
        draggedGroup = target.closest('.page-group');
        if (draggedGroup) {
            draggedGroup.classList.add('dragging');
        }
    });

    accordion.addEventListener('dragend', (e: DragEvent): void => {
        const target = e.target as HTMLElement;
        const group = target.closest('.page-group');
        group?.classList.remove('dragging');
        draggedGroup = null;
    });

    accordion.addEventListener('dragover', (e: DragEvent): void => {
        if (!draggedGroup) return;
        e.preventDefault();
        const afterElement = getDragAfterElement<HTMLElement>(accordion, e.clientY, '.page-group');
        if (afterElement == null) {
            accordion.appendChild(draggedGroup);
        } else {
            accordion.insertBefore(draggedGroup, afterElement);
        }
    });

    accordion.addEventListener('drop', (e: DragEvent): void => {
        if (!draggedGroup) return;
        e.preventDefault();
        const groups = accordion.querySelectorAll<HTMLElement>('.page-group');
        const order = Array.from(groups).map(g => g.dataset.id).filter((id): id is string => !!id);
        saveOrder(order);
    });
}

// Children reorder within each parent group (drag on <tr>)
const childGroups = document.querySelectorAll<HTMLTableSectionElement>('.sortable-pages');
let draggedRow: HTMLTableRowElement | null = null;

childGroups.forEach(tbody => {
    tbody.addEventListener('dragstart', (e: DragEvent): void => {
        const target = e.target as HTMLElement;
        draggedRow = target.closest('tr');
        draggedRow?.classList.add('dragging');
    });

    tbody.addEventListener('dragend', (e: DragEvent): void => {
        const target = e.target as HTMLElement;
        target.closest('tr')?.classList.remove('dragging');
        draggedRow = null;
    });

    tbody.addEventListener('dragover', (e: DragEvent): void => {
        if (!draggedRow) return;
        e.preventDefault();
        const afterElement = getDragAfterElement<HTMLTableRowElement>(tbody, e.clientY, 'tr');
        if (afterElement == null) {
            tbody.appendChild(draggedRow);
        } else {
            tbody.insertBefore(draggedRow, afterElement);
        }
    });

    tbody.addEventListener('drop', (e: DragEvent): void => {
        if (!draggedRow) return;
        e.preventDefault();
        const rows = tbody.querySelectorAll<HTMLTableRowElement>('tr');
        const order = Array.from(rows).map(row => row.dataset.id).filter((id): id is string => !!id);
        saveOrder(order);
    });
});

// Menu Style Inline Edit
const menuStyleSelects = document.querySelectorAll<HTMLSelectElement>('.menu-style-select');
menuStyleSelects.forEach(select => {
    select.addEventListener('change', (e: Event): void => {
        const target = e.target as HTMLSelectElement;
        const pageId = target.dataset.pageId;
        const newStyle = target.value;
        const previousStyle = target.dataset.current;

        if (!pageId) return;

        // Disable select during save
        target.disabled = true;

        fetch(`/api/admin/pages/${pageId}/menu-style`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-HTTP-METHOD-OVERRIDE': 'PATCH' },
            body: JSON.stringify({ menuStyle: newStyle })
        })
        .then(response => response.json())
        .then((data: ApiResponse) => {
            if (data.success) {
                // Update current value
                target.dataset.current = newStyle;
                target.disabled = false;
            } else {
                alert('Erreur lors de la modification du style de menu');
                // Revert to previous value
                target.value = previousStyle ?? 'main';
                target.disabled = false;
            }
        })
        .catch(() => {
            alert('Erreur lors de la modification du style de menu');
            // Revert to previous value
            target.value = previousStyle ?? 'main';
            target.disabled = false;
        });
    });
});

declare global {
    interface Window {
        togglePublish: (id: string) => void;
        duplicatePage: (id: string) => void;
        deletePage: (id: string) => void;
    }
}

window.togglePublish = function(id: string): void {
    fetch(`/api/admin/pages/${id}/toggle-publish`, {
        method: 'POST'
    })
    .then(response => response.json())
    .then((data: ApiResponse) => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erreur lors de la modification');
        }
    });
};

window.duplicatePage = function(id: string): void {
    fetch(`/api/admin/pages/${id}/duplicate`, {
        method: 'POST'
    })
    .then(response => response.json())
    .then((data: ApiResponse) => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.error || 'Erreur lors de la duplication');
        }
    });
};

window.deletePage = function(id: string): void {
    if (!confirm('Êtes-vous sûr de vouloir supprimer cette page ?')) return;

    fetch(`/api/admin/pages/${id}`, {
        method: 'POST',
        headers: { 'X-HTTP-METHOD-OVERRIDE': 'DELETE' }
    })
    .then(response => response.json())
    .then((data: ApiResponse) => {
        if (data.success) {
            const row = document.querySelector(`tr[data-id="${id}"]`);
            const group = document.querySelector(`details[data-id="${id}"]`);
            row?.remove();
            group?.remove();
        } else {
            alert(data.error || 'Erreur lors de la suppression');
        }
    });
};