@extends('layouts.app')

@section('title', '메뉴 관리')

@section('content')
    <!-- 페이지 헤더 -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">메뉴 관리</h1>
            <p class="text-sm text-gray-500 mt-1">
                드래그: 순서 변경 | <span class="font-medium text-blue-600">→ 오른쪽</span>: 하위로 이동 | <span class="font-medium text-orange-600">← 왼쪽</span>: 상위로 이동
            </p>
        </div>
        <a href="{{ route('menus.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
            + 새 메뉴
        </a>
    </div>

    <!-- 필터 영역 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <form id="filterForm" class="flex gap-4">
            <!-- 검색 -->
            <div class="flex-1">
                <input type="text"
                       name="search"
                       placeholder="메뉴명, URL로 검색..."
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- 활성 상태 필터 -->
            <div class="w-48">
                <select name="is_active" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">전체 상태</option>
                    <option value="1">활성</option>
                    <option value="0">비활성</option>
                </select>
            </div>

            <!-- 검색 버튼 -->
            <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition">
                검색
            </button>
        </form>
    </div>

    <!-- 테이블 영역 (HTMX로 로드) -->
    <div id="menu-table"
         hx-get="/api/admin/menus"
         hx-trigger="load, filterSubmit from:body"
         hx-include="#filterForm"
         hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
         class="bg-white rounded-lg shadow-sm overflow-hidden">
        <!-- 로딩 스피너 -->
        <div class="flex justify-center items-center p-12">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    /* 드래그 인디케이터 스타일 */
    .drag-indicator {
        position: fixed;
        pointer-events: none;
        z-index: 9999;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transition: background-color 0.15s, transform 0.1s;
    }
    .drag-indicator.indent {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
    }
    .drag-indicator.outdent {
        background: linear-gradient(135deg, #f97316, #ea580c);
        color: white;
    }
    .drag-indicator.reorder {
        background: linear-gradient(135deg, #6b7280, #4b5563);
        color: white;
    }

    /* 드래그 중 행 하이라이트 - 더 눈에 띄게 */
    .menu-row.drag-target-indent {
        background: rgba(59, 130, 246, 0.25) !important;
        border: 2px solid #3b82f6 !important;
        border-left-width: 6px !important;
        position: relative;
        animation: pulse-indent 0.8s ease-in-out infinite;
    }
    .menu-row.drag-target-outdent {
        background: rgba(249, 115, 22, 0.25) !important;
        border: 2px solid #f97316 !important;
        border-right-width: 6px !important;
        position: relative;
        animation: pulse-outdent 0.8s ease-in-out infinite;
    }

    /* 펄스 애니메이션 */
    @keyframes pulse-indent {
        0%, 100% { background: rgba(59, 130, 246, 0.15); }
        50% { background: rgba(59, 130, 246, 0.35); }
    }
    @keyframes pulse-outdent {
        0%, 100% { background: rgba(249, 115, 22, 0.15); }
        50% { background: rgba(249, 115, 22, 0.35); }
    }

    /* 인덴트 프리뷰 라인 */
    .indent-preview-line {
        position: absolute;
        left: 0;
        height: 3px;
        background: #3b82f6;
        border-radius: 2px;
        pointer-events: none;
        z-index: 100;
        transition: width 0.15s, left 0.15s;
    }
</style>
@endpush

@push('scripts')
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
    // 폼 제출 시 HTMX 이벤트 트리거
    document.getElementById('filterForm').addEventListener('submit', function(e) {
        e.preventDefault();
        htmx.trigger('#menu-table', 'filterSubmit');
    });

    // HTMX 응답 처리 + SortableJS 초기화
    document.body.addEventListener('htmx:afterSwap', function(event) {
        if (event.detail.target.id === 'menu-table') {
            const response = JSON.parse(event.detail.xhr.response);
            if (response.html) {
                event.detail.target.innerHTML = response.html;
                // 테이블 로드 후 SortableJS 초기화
                initMenuSortable();
            }
        }
    });

    // 드래그 상태 관리
    let dragStartX = 0;
    let dragIndicator = null;
    let currentDragItem = null;
    let lastHighlightedRow = null;
    const INDENT_THRESHOLD = 40; // px - 인덴트 임계값

    // 드래그 인디케이터 생성
    function createDragIndicator() {
        const indicator = document.createElement('div');
        indicator.className = 'drag-indicator reorder';
        indicator.innerHTML = '↕️ 순서 변경';
        indicator.style.display = 'none';
        document.body.appendChild(indicator);
        return indicator;
    }

    // 드래그 인디케이터 업데이트
    function updateDragIndicator(deltaX, mouseX, mouseY, canIndent, canOutdent, targetName) {
        if (!dragIndicator) return;

        dragIndicator.style.display = 'block';
        dragIndicator.style.left = (mouseX + 15) + 'px';
        dragIndicator.style.top = (mouseY - 15) + 'px';

        // 클래스 및 텍스트 업데이트
        dragIndicator.classList.remove('indent', 'outdent', 'reorder');

        if (deltaX > INDENT_THRESHOLD && canIndent) {
            dragIndicator.classList.add('indent');
            dragIndicator.innerHTML = `→ <b>${targetName}</b>의 하위로`;
        } else if (deltaX < -INDENT_THRESHOLD && canOutdent) {
            dragIndicator.classList.add('outdent');
            dragIndicator.innerHTML = '← 상위 레벨로';
        } else {
            dragIndicator.classList.add('reorder');
            dragIndicator.innerHTML = '↕️ 순서 변경';
        }
    }

    // 행 하이라이트 업데이트
    function updateRowHighlight(prevRow, draggedRow, deltaX, canIndent, canOutdent) {
        // 이전 하이라이트 제거
        if (lastHighlightedRow) {
            lastHighlightedRow.classList.remove('drag-target-indent', 'drag-target-outdent');
        }

        // 새 하이라이트 적용
        if (deltaX > INDENT_THRESHOLD && canIndent && prevRow) {
            // 인덴트: prevRow(새 부모가 될 행) 하이라이트
            prevRow.classList.add('drag-target-indent');
            lastHighlightedRow = prevRow;
        } else if (deltaX < -INDENT_THRESHOLD && canOutdent && draggedRow) {
            // 아웃덴트: 드래그 중인 행 자체 하이라이트
            draggedRow.classList.add('drag-target-outdent');
            lastHighlightedRow = draggedRow;
        } else {
            lastHighlightedRow = null;
        }
    }

    // 드래그 인디케이터 제거
    function removeDragIndicator() {
        if (dragIndicator) {
            dragIndicator.remove();
            dragIndicator = null;
        }
        if (lastHighlightedRow) {
            lastHighlightedRow.classList.remove('drag-target-indent', 'drag-target-outdent');
            lastHighlightedRow = null;
        }
    }

    // SortableJS 초기화 함수
    function initMenuSortable() {
        const tbody = document.getElementById('menu-sortable');
        if (!tbody) return;

        // 기존 인스턴스 제거
        if (tbody.sortableInstance) {
            tbody.sortableInstance.destroy();
        }

        // 드래그 중 마우스 이동 핸들러
        function onDragMove(e) {
            if (!currentDragItem) return;

            const mouseX = e.clientX || e.touches?.[0]?.clientX || 0;
            const mouseY = e.clientY || e.touches?.[0]?.clientY || 0;
            const deltaX = mouseX - dragStartX;

            const rows = Array.from(tbody.querySelectorAll('tr.menu-row'));
            const draggedIndex = rows.indexOf(currentDragItem);

            // 위 행 찾기 (드래그 중인 항목 제외)
            let prevRow = null;
            for (let i = draggedIndex - 1; i >= 0; i--) {
                if (rows[i] !== currentDragItem && !rows[i].classList.contains('sortable-ghost')) {
                    prevRow = rows[i];
                    break;
                }
            }

            // 인덴트/아웃덴트 가능 여부 체크
            const oldParentIdRaw = currentDragItem.dataset.parentId;
            const oldPid = oldParentIdRaw === '' ? null : (oldParentIdRaw ? parseInt(oldParentIdRaw) : null);
            const canIndent = prevRow !== null;
            const canOutdent = oldPid !== null;

            // 타겟 이름 가져오기
            let targetName = '';
            if (prevRow && canIndent) {
                const nameCell = prevRow.querySelector('td:nth-child(3) span');
                targetName = nameCell?.textContent?.trim() || '위 항목';
            }

            updateDragIndicator(deltaX, mouseX, mouseY, canIndent, canOutdent, targetName);
            updateRowHighlight(prevRow, currentDragItem, deltaX, canIndent, canOutdent);
        }

        // SortableJS 초기화 - 노션 스타일 인덴트
        tbody.sortableInstance = new Sortable(tbody, {
            handle: '.drag-handle',
            animation: 150,
            ghostClass: 'bg-blue-50',
            chosenClass: 'bg-blue-100',
            dragClass: 'shadow-lg',

            // 드래그 시작 시
            onStart: function(evt) {
                dragStartX = evt.originalEvent?.clientX || evt.originalEvent?.touches?.[0]?.clientX || 0;
                currentDragItem = evt.item;
                dragIndicator = createDragIndicator();

                // 마우스 이동 이벤트 리스너 추가
                document.addEventListener('mousemove', onDragMove);
                document.addEventListener('touchmove', onDragMove);

                console.log('=== Drag Start ===');
                console.log('dragStartX:', dragStartX);
            },

            // 드래그 종료 시 처리
            onEnd: function(evt) {
                // 이벤트 리스너 및 인디케이터 정리
                document.removeEventListener('mousemove', onDragMove);
                document.removeEventListener('touchmove', onDragMove);
                removeDragIndicator();
                currentDragItem = null;

                const movedItem = evt.item;
                const menuId = parseInt(movedItem.dataset.menuId);
                const currentDepth = parseInt(movedItem.dataset.depth) || 0;
                const oldParentIdRaw = movedItem.dataset.parentId;
                const oldPid = oldParentIdRaw === '' ? null : (oldParentIdRaw ? parseInt(oldParentIdRaw) : null);

                const rows = Array.from(tbody.querySelectorAll('tr.menu-row'));
                const newIndex = rows.indexOf(movedItem);
                const oldIndex = evt.oldIndex;

                // X 이동량 계산
                const dragEndX = evt.originalEvent?.clientX || evt.originalEvent?.changedTouches?.[0]?.clientX || dragStartX;
                const deltaX = dragEndX - dragStartX;

                console.log('=== Menu Drag Debug (Indent Style) ===');
                console.log('menuId:', menuId, 'currentDepth:', currentDepth);
                console.log('oldIndex:', oldIndex, '→ newIndex:', newIndex);
                console.log('dragStartX:', dragStartX, 'dragEndX:', dragEndX, 'deltaX:', deltaX);
                console.log('oldParentId:', oldPid);

                let newParentId = oldPid;
                let sortOrder = 1;
                let action = 'reorder'; // 'reorder', 'indent', 'outdent'

                // 오른쪽으로 이동 → 인덴트 (위 항목의 자식으로)
                if (deltaX > INDENT_THRESHOLD && newIndex > 0) {
                    const prevRow = rows[newIndex - 1];
                    if (prevRow) {
                        const prevId = parseInt(prevRow.dataset.menuId);
                        // 자기 자신의 자식으로는 이동 불가
                        if (prevId !== menuId) {
                            newParentId = prevId;
                            action = 'indent';
                            console.log('→ INDENT: 위 항목의 자식으로 이동, newParentId:', newParentId);
                        }
                    }
                }
                // 왼쪽으로 이동 → 아웃덴트 (부모의 형제로)
                else if (deltaX < -INDENT_THRESHOLD && oldPid !== null) {
                    // 현재 부모를 찾아서 그 부모의 parent_id를 가져옴
                    const parentRow = rows.find(r => parseInt(r.dataset.menuId) === oldPid);
                    if (parentRow) {
                        const grandParentIdRaw = parentRow.dataset.parentId;
                        newParentId = grandParentIdRaw === '' ? null : (grandParentIdRaw ? parseInt(grandParentIdRaw) : null);
                        action = 'outdent';
                        console.log('← OUTDENT: 부모의 형제로 이동, newParentId:', newParentId);
                    } else {
                        // 부모를 찾을 수 없으면 최상위로
                        newParentId = null;
                        action = 'outdent';
                        console.log('← OUTDENT: 최상위로 이동');
                    }
                }
                // 수평 이동 없음 → 같은 레벨에서 순서만 변경
                else {
                    // 위 행과 같은 부모로 (기존 동작)
                    if (newIndex > 0) {
                        const prevRow = rows[newIndex - 1];
                        if (prevRow) {
                            const prevParentIdRaw = prevRow.dataset.parentId;
                            newParentId = prevParentIdRaw === '' ? null : (prevParentIdRaw ? parseInt(prevParentIdRaw) : null);
                        }
                    } else {
                        newParentId = null;
                    }
                    console.log('↔ REORDER: 위 행과 같은 레벨로, newParentId:', newParentId);
                }

                const parentChanged = oldPid !== newParentId;
                console.log('oldPid:', oldPid, 'newPid:', newParentId, 'parentChanged:', parentChanged);
                console.log('action:', action);

                if (parentChanged) {
                    // 새 부모 하위에서의 순서 계산
                    const existingSiblings = rows.filter(row => {
                        if (row === movedItem) return false;
                        const rowParentId = row.dataset.parentId || '';
                        const rowPid = rowParentId === '' ? null : parseInt(rowParentId);
                        return rowPid === newParentId;
                    });

                    // DOM에서 movedItem보다 앞에 있는 형제의 수 = 새 순서
                    let siblingsBeforeMe = 0;
                    for (const sibling of existingSiblings) {
                        if (rows.indexOf(sibling) < newIndex) {
                            siblingsBeforeMe++;
                        }
                    }
                    sortOrder = siblingsBeforeMe + 1;

                    console.log('existingSiblings count:', existingSiblings.length);
                    console.log('siblingsBeforeMe:', siblingsBeforeMe, 'sortOrder:', sortOrder);

                    // 계층 변경 API 호출
                    moveMenu(menuId, newParentId, sortOrder);
                } else {
                    // 같은 레벨 내 순서 변경
                    const siblingRows = rows.filter(row => {
                        const rowParentId = row.dataset.parentId || '';
                        const rowPid = rowParentId === '' ? null : parseInt(rowParentId);
                        return rowPid === oldPid;
                    });

                    const items = siblingRows.map((row, index) => ({
                        id: parseInt(row.dataset.menuId),
                        sort_order: index + 1
                    }));

                    console.log('Same level reorder:', items);
                    saveMenuOrder(items);
                }
            }
        });
    }

    // 메뉴 이동 API 호출 (계층 변경)
    function moveMenu(menuId, newParentId, sortOrder) {
        const payload = {
            menu_id: menuId,
            new_parent_id: newParentId,
            sort_order: sortOrder
        };
        console.log('moveMenu API Request:', payload);

        fetch('/api/admin/menus/move', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify(payload)
        })
        .then(response => {
            console.log('moveMenu API Response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('moveMenu API Response data:', data);
            if (data.success) {
                console.log('메뉴 이동 성공!');
                htmx.trigger('#menu-table', 'filterSubmit');
            } else {
                console.error('메뉴 이동 실패:', data.message);
                alert('메뉴 이동 실패: ' + (data.message || ''));
                htmx.trigger('#menu-table', 'filterSubmit');
            }
        })
        .catch(error => {
            console.error('moveMenu API Error:', error);
            alert('메뉴 이동 중 오류 발생');
            htmx.trigger('#menu-table', 'filterSubmit');
        });
    }

    // 메뉴 순서 저장 API 호출 (같은 레벨)
    function saveMenuOrder(items) {
        fetch('/api/admin/menus/reorder', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ items: items })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                htmx.trigger('#menu-table', 'filterSubmit');
            } else {
                alert('순서 변경 실패: ' + (data.message || ''));
                htmx.trigger('#menu-table', 'filterSubmit');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('순서 변경 중 오류 발생');
            htmx.trigger('#menu-table', 'filterSubmit');
        });
    }

    // 삭제 확인
    window.confirmDelete = function(id, name) {
        if (confirm(`"${name}" 메뉴를 삭제하시겠습니까?`)) {
            htmx.ajax('DELETE', `/api/admin/menus/${id}`, {
                target: '#menu-table',
                swap: 'none',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }).then(() => {
                htmx.trigger('#menu-table', 'filterSubmit');
            });
        }
    };

    // 복원 확인
    window.confirmRestore = function(id, name) {
        if (confirm(`"${name}" 메뉴를 복원하시겠습니까?`)) {
            htmx.ajax('POST', `/api/admin/menus/${id}/restore`, {
                target: '#menu-table',
                swap: 'none',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }).then(() => {
                htmx.trigger('#menu-table', 'filterSubmit');
            });
        }
    };

    // 영구삭제 확인
    window.confirmForceDelete = function(id, name) {
        if (confirm(`⚠️ 경고: "${name}" 메뉴를 영구 삭제하시겠습니까?\n\n이 작업은 되돌릴 수 없습니다!`)) {
            htmx.ajax('DELETE', `/api/admin/menus/${id}/force`, {
                target: '#menu-table',
                swap: 'none',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }).then(() => {
                htmx.trigger('#menu-table', 'filterSubmit');
            });
        }
    };

    // 활성 토글
    window.toggleActive = function(id) {
        htmx.ajax('POST', `/api/admin/menus/${id}/toggle-active`, {
            target: '#menu-table',
            swap: 'none',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        }).then(() => {
            htmx.trigger('#menu-table', 'filterSubmit');
        });
    };

    // 숨김 토글
    window.toggleHidden = function(id) {
        htmx.ajax('POST', `/api/admin/menus/${id}/toggle-hidden`, {
            target: '#menu-table',
            swap: 'none',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        }).then(() => {
            htmx.trigger('#menu-table', 'filterSubmit');
        });
    };

</script>
<script src="{{ asset('js/menu-tree.js') }}"></script>
@endpush