// Media Library - File upload, folder management, media operations

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

interface MediaContainer extends HTMLElement {
    dataset: {
        folderId?: string;
        folderName?: string;
        folderDescription?: string;
        libraryPath?: string;
    };
}

// Read context from data attributes
const container = document.querySelector<MediaContainer>('.admin-media');
const currentFolderId = container?.dataset.folderId || null;
const currentFolderName = container?.dataset.folderName || '';
const currentFolderDescription = container?.dataset.folderDescription || '';
const mediaLibraryPath = container?.dataset.libraryPath || '/admin/media/library';

// File upload handler
const fileInput = document.getElementById('file-input') as HTMLInputElement | null;
if (fileInput) {
    fileInput.addEventListener('change', async function(e: Event): Promise<void> {
        const target = e.target as HTMLInputElement;
        const files = target.files ? Array.from(target.files) : [];
        if (files.length === 0) return;

        const folderIdInput = document.getElementById('upload-folder-id') as HTMLInputElement | null;
        const folderId = folderIdInput?.value || '';
        const status = document.getElementById('upload-status');

        let successCount = 0;
        const errors: string[] = [];

        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            if (!file) continue;

            if (status) {
                status.textContent = `Upload en cours... (${i + 1}/${files.length})`;
                status.style.color = '#3498db';
            }

            const formData = new FormData();
            formData.append('file', file);

            // Always send folderId (even empty) so Symfony's multipart form-data
            // payload mapper receives a non-empty field set; with only "file" set,
            // it falls back to reading the raw body and rejects it as invalid form data.
            formData.append('folderId', folderId);

            try {
                const response = await fetch('/api/admin/media', {
                    method: 'POST',
                    body: formData
                });

                const data: ApiResponse = await response.json();

                if (data.success) {
                    successCount++;
                } else {
                    errors.push(`${file.name}: ${data.error}`);
                }
            } catch (error) {
                errors.push(`${file.name}: erreur réseau`);
                console.error('Upload error:', error);
            }
        }

        if (!status) return;

        if (errors.length === 0) {
            status.textContent = `${successCount} fichier(s) uploadé(s) avec succès !`;
            status.style.color = '#27ae60';
            setTimeout(() => location.reload(), 1000);
        } else {
            status.textContent = `${successCount} réussi(s), ${errors.length} échec(s): ${errors.join(', ')}`;
            status.style.color = '#e74c3c';
        }
    });
}

// Media deletion
declare global {
    interface Window {
        deleteMedia: (id: string) => Promise<void>;
        openCreateFolderModal: () => void;
        openRenameFolderModal: () => void;
        closeFolderModal: () => void;
        deleteCurrentFolder: () => Promise<void>;
        updateSelectedCount: () => void;
        openMoveModal: () => void;
        closeMoveModal: () => void;
    }
}

window.deleteMedia = async function(id: string): Promise<void> {
    if (!confirm('Êtes-vous sûr de vouloir supprimer ce média ?')) return;

    try {
        const response = await fetch(`/api/admin/media/${id}`, {
            method: 'POST',
            headers: { 'X-HTTP-METHOD-OVERRIDE': 'DELETE' }
        });

        const data: ApiResponse = await response.json();

        if (data.success) {
            const mediaElement = document.querySelector(`[data-id="${id}"]`);
            mediaElement?.remove();
        } else {
            alert('Erreur lors de la suppression');
        }
    } catch (error) {
        alert('Erreur lors de la suppression');
        console.error('Delete media error:', error);
    }
};

// Folder management
let folderModalMode: 'create' | 'rename' = 'create';

window.openCreateFolderModal = function(): void {
    folderModalMode = 'create';
    const title = document.getElementById('folder-modal-title');
    const nameInput = document.getElementById('folder-name') as HTMLInputElement | null;
    const descInput = document.getElementById('folder-description') as HTMLTextAreaElement | null;
    const modal = document.getElementById('folder-modal') as HTMLElement | null;

    if (title) title.textContent = 'Nouveau dossier';
    if (nameInput) nameInput.value = '';
    if (descInput) descInput.value = '';
    if (modal) modal.style.display = 'flex';
};

window.openRenameFolderModal = function(): void {
    folderModalMode = 'rename';
    const title = document.getElementById('folder-modal-title');
    const nameInput = document.getElementById('folder-name') as HTMLInputElement | null;
    const descInput = document.getElementById('folder-description') as HTMLTextAreaElement | null;
    const modal = document.getElementById('folder-modal') as HTMLElement | null;

    if (title) title.textContent = 'Renommer le dossier';
    if (nameInput) nameInput.value = currentFolderName;
    if (descInput) descInput.value = currentFolderDescription;
    if (modal) modal.style.display = 'flex';
};

window.closeFolderModal = function(): void {
    const modal = document.getElementById('folder-modal') as HTMLElement | null;
    if (modal) modal.style.display = 'none';
};

window.deleteCurrentFolder = async function(): Promise<void> {
    if (!confirm('Êtes-vous sûr de vouloir supprimer ce dossier ?\n\nLe dossier doit être vide (aucun média ni sous-dossier).')) return;

    if (!currentFolderId) {
        alert('Aucun dossier sélectionné');
        return;
    }

    try {
        const response = await fetch(`/api/admin/media/folders/${currentFolderId}`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-HTTP-METHOD-OVERRIDE': 'DELETE'},
            body: JSON.stringify({force: false})
        });

        const data: ApiResponse = await response.json();

        if (data.success) {
            window.location.href = mediaLibraryPath;
        } else {
            alert('Erreur: ' + data.error);
        }
    } catch (error) {
        alert('Erreur lors de la suppression');
        console.error('Delete folder error:', error);
    }
};

// Folder form submission
const folderForm = document.getElementById('folder-form') as HTMLFormElement | null;
if (folderForm) {
    folderForm.addEventListener('submit', function(e: Event): void {
        e.preventDefault();

        const nameInput = document.getElementById('folder-name') as HTMLInputElement | null;
        const descInput = document.getElementById('folder-description') as HTMLTextAreaElement | null;

        const name = nameInput?.value || '';
        const description = descInput?.value || '';

        if (folderModalMode === 'create') {
            createFolder(name, description);
        } else {
            renameFolder(name, description);
        }
    });
}

async function createFolder(name: string, description: string): Promise<void> {
    try {
        const response = await fetch('/api/admin/media/folders', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                name: name,
                description: description || null,
                parentId: currentFolderId
            })
        });

        const data: ApiResponse = await response.json();

        if (data.success) {
            window.closeFolderModal();
            location.reload();
        } else {
            alert('Erreur: ' + data.error);
        }
    } catch (error) {
        alert('Erreur lors de la création du dossier');
        console.error('Create folder error:', error);
    }
}

async function renameFolder(name: string, description: string): Promise<void> {
    if (!currentFolderId) {
        alert('Aucun dossier sélectionné');
        return;
    }

    try {
        const response = await fetch(`/api/admin/media/folders/${currentFolderId}`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-HTTP-METHOD-OVERRIDE': 'PUT'},
            body: JSON.stringify({
                name: name,
                description: description || null
            })
        });

        const data: ApiResponse = await response.json();

        if (data.success) {
            window.closeFolderModal();
            location.reload();
        } else {
            alert('Erreur: ' + data.error);
        }
    } catch (error) {
        alert('Erreur lors du renommage');
        console.error('Rename folder error:', error);
    }
}

// Close folder modal on outside click
const folderModal = document.getElementById('folder-modal');
if (folderModal) {
    folderModal.addEventListener('click', function(e: MouseEvent): void {
        if (e.target === this) {
            window.closeFolderModal();
        }
    });
}

// Media selection and move functions
window.updateSelectedCount = function(): void {
    const selected = document.querySelectorAll<HTMLInputElement>('.media-select:checked');
    const count = selected.length;
    const countElement = document.getElementById('selected-count');
    const moveBtn = document.getElementById('move-selected-btn') as HTMLElement | null;

    if (countElement) countElement.textContent = String(count);
    if (moveBtn) moveBtn.style.display = count > 0 ? 'block' : 'none';
};

window.openMoveModal = function(): void {
    const selected = document.querySelectorAll('.media-select:checked');
    if (selected.length === 0) {
        alert('Veuillez sélectionner au moins un média');
        return;
    }
    const modal = document.getElementById('move-modal') as HTMLElement | null;
    if (modal) modal.style.display = 'flex';
};

window.closeMoveModal = function(): void {
    const modal = document.getElementById('move-modal') as HTMLElement | null;
    if (modal) modal.style.display = 'none';
};

// Move form submission
const moveForm = document.getElementById('move-form') as HTMLFormElement | null;
if (moveForm) {
    moveForm.addEventListener('submit', async function(e: Event): Promise<void> {
        e.preventDefault();

        const selected = document.querySelectorAll<HTMLInputElement>('.media-select:checked');
        const mediaIds = Array.from(selected).map(cb => cb.value);
        const targetFolderSelect = document.getElementById('target-folder') as HTMLSelectElement | null;
        const targetFolder = targetFolderSelect?.value || null;

        try {
            const response = await fetch('/api/admin/media/bulk-move', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    mediaIds: mediaIds,
                    folderId: targetFolder
                })
            });

            const data: ApiResponse = await response.json();

            if (data.success) {
                window.closeMoveModal();
                location.reload();
            } else {
                alert('Erreur: ' + data.error);
            }
        } catch (error) {
            alert('Erreur lors du déplacement');
            console.error('Bulk move error:', error);
        }
    });
}

// Close move modal on outside click
const moveModal = document.getElementById('move-modal');
if (moveModal) {
    moveModal.addEventListener('click', function(e: MouseEvent): void {
        if (e.target === this) {
            window.closeMoveModal();
        }
    });
}