@extends('layouts.base')

@section('content')
    @section('breadcrumb')
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ $homeUrl }}">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.workflows.list') }}">Workflows</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.workflows.show', $workflow) }}">{{ $workflow->name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Étapes (Tasks)</li>
            </ol>
        </nav>
    @endsection

    <div class="container-fluid py-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h4 mb-1"><i class="fas fa-sitemap me-2"></i>Étapes du workflow</h1>
                <p class="text-muted mb-0">Organisez les étapes (ordre + hiérarchie) par glisser-déposer.</p>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('partner.workflows.show', $workflow) }}" class="btn btn-outline-primary">
                    <i class="fas fa-arrow-left me-2"></i>Retour au workflow
                </a>
                <a href="{{ route('partner.workflows.tasks.create', $workflow) }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>Ajouter une étape
                </a>
            </div>
        </div>

        <div class="card shadow-sm">
            <div class="card-body">
                <form method="POST" action="{{ route('partner.workflows.tasks.reorder', $workflow) }}" id="tasks-reorder-form">
                    @csrf
                    <div id="tasks-tree" class="list-group list-group-flush">
                        @forelse($tasks as $task)
                            @include('partner.workflows.tasks.partials.task-node', ['task' => $task])
                        @empty
                            <div class="text-center py-5 text-muted">
                                <i class="fas fa-layer-group fa-2x mb-2"></i>
                                <div>Aucune étape pour ce workflow.</div>
                            </div>
                        @endforelse
                    </div>

                    <div class="mt-3 d-flex justify-content-end">
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save me-2"></i>Enregistrer l’ordre et la hiérarchie
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const tree = document.getElementById('tasks-tree');
                let dragSrc = null;
                let dropTarget = null;
                let dropPosition = null; // 'before', 'after', 'inside'

                const serialize = () => {
                    const payload = [];

                    // Fonction récursive pour parcourir l'arborescence
                    const processContainer = (container, parentId = null) => {
                        // Sélectionner uniquement les items directs (pas les descendants)
                        const directItems = Array.from(container.children).filter(child =>
                            child.classList.contains('task-item')
                        );

                        directItems.forEach((item, index) => {
                            const id = parseInt(item.dataset.id);
                            const childrenContainer = item.querySelector('.children-container');

                            // Ajouter l'item actuel avec son ordre dans ce niveau
                            payload.push({
                                id: id,
                                parent_id: parentId,
                                order: index + 1
                            });

                            // Traiter les enfants récursivement
                            if (childrenContainer) {
                                processContainer(childrenContainer, id);
                            }
                        });
                    };

                    processContainer(tree);

                    document.getElementById('tasks-order-input')?.remove();
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'ordering';
                    input.id = 'tasks-order-input';
                    input.value = JSON.stringify(payload);
                    document.getElementById('tasks-reorder-form').appendChild(input);
                };

                // Démarrer le drag
                tree.addEventListener('dragstart', (e) => {
                    const item = e.target.closest('.task-item');
                    if (!item) return;
                    dragSrc = item;
                    e.dataTransfer.effectAllowed = 'move';
                    item.classList.add('dragging');
                    item.style.opacity = '0.5';
                });

                // Fin du drag
                tree.addEventListener('dragend', (e) => {
                    if (dragSrc) {
                        dragSrc.classList.remove('dragging');
                        dragSrc.style.opacity = '1';
                        dragSrc = null;
                    }

                    // Nettoyer les indicateurs visuels
                    document.querySelectorAll('.drop-zone-active, .drop-before, .drop-after, .drop-inside').forEach(el => {
                        el.classList.remove('drop-zone-active', 'drop-before', 'drop-after', 'drop-inside');
                    });

                    dropTarget = null;
                    dropPosition = null;
                });

                // Pendant le drag
                tree.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    if (!dragSrc) return;

                    const targetItem = e.target.closest('.task-item');
                    const targetContainer = e.target.closest('[data-drop-zone="true"]');

                    // Nettoyer les indicateurs précédents
                    document.querySelectorAll('.drop-zone-active, .drop-before, .drop-after, .drop-inside').forEach(el => {
                        el.classList.remove('drop-zone-active', 'drop-before', 'drop-after', 'drop-inside');
                    });

                    // Si on survole un item (pas un conteneur vide)
                    if (targetItem && targetItem !== dragSrc) {
                        const rect = targetItem.getBoundingClientRect();
                        const y = e.clientY - rect.top;
                        const threshold = rect.height / 3;

                        // Empêcher de glisser sur soi-même ou ses descendants
                        if (dragSrc.contains(targetItem) || targetItem.contains(dragSrc)) {
                            return;
                        }

                        if (y < threshold) {
                            // Glisser avant l'item
                            dropTarget = targetItem;
                            dropPosition = 'before';
                            targetItem.classList.add('drop-before');
                        } else if (y > rect.height - threshold) {
                            // Glisser après l'item
                            dropTarget = targetItem;
                            dropPosition = 'after';
                            targetItem.classList.add('drop-after');
                        } else {
                            // Glisser dans l'item (en faire un enfant)
                            dropTarget = targetItem;
                            dropPosition = 'inside';
                            targetItem.classList.add('drop-inside');
                        }
                    } else if (targetContainer && targetContainer !== dragSrc.closest('.children-container')) {
                        // Survoler un conteneur vide
                        dropTarget = targetContainer;
                        dropPosition = 'inside';
                        targetContainer.classList.add('drop-zone-active');
                    }
                });

                // Déposer l'élément
                tree.addEventListener('drop', (e) => {
                    e.preventDefault();
                    if (!dragSrc || !dropTarget) return;

                    // Empêcher de glisser sur soi-même ou ses descendants
                    if (dropTarget.contains && dropTarget.contains(dragSrc)) {
                        return;
                    }
                    if (dragSrc.contains && dragSrc.contains(dropTarget)) {
                        return;
                    }

                    if (dropPosition === 'before') {
                        // Insérer avant l'élément cible
                        dropTarget.parentNode.insertBefore(dragSrc, dropTarget);
                        // Retirer du parent si c'était un enfant
                        const oldParent = dragSrc.closest('.children-container');
                        if (oldParent && oldParent !== dropTarget.parentNode) {
                            // Déjà déplacé par insertBefore
                        }
                    } else if (dropPosition === 'after') {
                        // Insérer après l'élément cible
                        if (dropTarget.nextSibling) {
                            dropTarget.parentNode.insertBefore(dragSrc, dropTarget.nextSibling);
                        } else {
                            dropTarget.parentNode.appendChild(dragSrc);
                        }
                    } else if (dropPosition === 'inside') {
                        // Ajouter comme enfant
                        const childrenContainer = dropTarget.querySelector ?
                            dropTarget.querySelector('.children-container') :
                            dropTarget;

                        if (childrenContainer && childrenContainer.dataset.dropZone === 'true') {
                            childrenContainer.appendChild(dragSrc);
                        }
                    }

                    serialize();
                });

                // Styles CSS pour les indicateurs visuels
                const style = document.createElement('style');
                style.textContent = `
                    .task-item.dragging {
                        opacity: 0.5;
                    }
                    .task-item.drop-before {
                        border-top: 3px solid #0d6efd;
                        margin-top: 2px;
                    }
                    .task-item.drop-after {
                        border-bottom: 3px solid #0d6efd;
                        margin-bottom: 2px;
                    }
                    .task-item.drop-inside {
                        background-color: #e7f3ff;
                        border: 2px dashed #0d6efd;
                    }
                    .children-container.drop-zone-active {
                        min-height: 50px;
                        background-color: #f0f8ff;
                        border: 2px dashed #0d6efd;
                        border-radius: 4px;
                    }
                `;
                document.head.appendChild(style);

                serialize();
            });
        </script>
    @endpush
@endsection