@extends('layouts.master')

@section('content')
<main style="display: flex; flex-direction: column; height: calc(100vh - 64px); background: #f8fafc; overflow: hidden;">
    <!-- Top Header with Breadcrumb and Actions -->
    <header style="background: white; border-bottom: 1px solid var(--border); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; z-index: 10;">
        <div style="flex: 1;">
            <div id="breadcrumb" style="font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
                <span>Select Categories</span>
            </div>
            <h2 style="margin: 0; font-size: 18px; color: var(--text-main);" id="active-path-display">No category selected</h2>
        </div>
        
        <div style="display: flex; gap: 16px; align-items: center;">
            <div style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-right: 8px;">
                <input type="checkbox" id="auto-select-children" style="width: 16px; height: 16px;">
                <label for="auto-select-children" style="cursor: pointer;">Auto-select children</label>
            </div>

            <div style="position: relative;">
                <input type="text" id="categorySearch" class="input" placeholder="Search..." onkeyup="searchCategories(this.value)" style="width: 250px; padding-right: 40px;">
                <span id="searchCount" style="position: absolute; right: 12px; top: 10px; font-size: 10px; background: #e2e8f0; color: #475569; padding: 2px 6px; border-radius: 10px; display: none;"></span>
            </div>
            
            <div style="width: 1px; height: 24px; background: var(--border);"></div>
            
            <button class="btn" onclick="clearSelection()" style="padding: 8px 16px;">Clear Selection</button>
        </div>
    </header>

    <!-- Multi-Column Selection Area -->
    <div style="flex: 1; display: flex; overflow-x: auto; padding: 0; position: relative;" id="columns-container">
        <!-- Columns will be injected here -->
    </div>

    <!-- Footer - Template Details & Save -->
    <footer style="background: white; border-top: 1px solid var(--border); padding: 20px 32px; display: flex; align-items: center; gap: 32px; z-index: 10;">
        <div style="flex: 1; display: flex; align-items: center; gap: 16px;">
            <div style="width: 300px;">
                <label style="display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em;">Template Name</label>
                <input type="text" class="input" id="templateName" value="{{ $template->name ?? '' }}" placeholder="Enter template name..." style="width: 100%; font-size: 15px;">
                @if(isset($template)) <input type="hidden" id="templateId" value="{{ $template->id }}"> @endif
            </div>
            
            <div style="flex: 1;">
                <label style="display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase;">Selection Summary</label>
                <div id="selection-summary" style="font-size: 13px; color: var(--primary); font-weight: 500;">0 categories selected</div>
            </div>
        </div>

        <div style="display: flex; gap: 12px;">
            @if(isset($template))
                <button class="btn" style="padding: 10px 24px;" onclick="saveNewTemplate()">Save as New</button>
                <button class="btn-primary" style="padding: 10px 24px;" onclick="updateTemplate()">Update Template</button>
            @else
                <button class="btn-primary" style="padding: 12px 32px; font-weight: 600;" onclick="saveNewTemplate()">Save Template</button>
            @endif
        </div>
    </footer>
</main>
@endsection

@push('styles')
<style>
    :root {
        --col-width: 320px;
    }

    .column {
        width: var(--col-width);
        min-width: var(--col-width);
        border-right: 1px solid var(--border);
        background: white;
        display: flex;
        flex-direction: column;
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from { transform: translateX(20px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }

    .column-header {
        padding: 14px 16px;
        background: #f1f5f9;
        border-bottom: 2px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .level-label {
        font-size: 9px;
        font-weight: 800;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .parent-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .category-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        cursor: pointer;
        transition: all 0.2s;
        border-right: 3px solid transparent;
        position: relative;
    }

    .category-item:hover {
        background: #f8fafc;
    }

    .category-item.active {
        background: #eff6ff;
        border-right-color: var(--primary);
    }

    .category-item.active .item-name {
        color: var(--primary);
        font-weight: 600;
    }

    .selection-badge {
        background: var(--primary);
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 10px;
        margin-left: 8px;
        font-weight: 700;
    }

    .search-highlight {
        background: #fef08a;
        padding: 2px 4px;
        border-radius: 4px;
        font-weight: 700;
        color: #854d0e;
    }

    .category-item .checkbox-wrapper {
        margin-right: 12px;
        display: flex;
        align-items: center;
    }

    .category-item .item-name {
        flex: 1;
        font-size: 14px;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .category-item .arrow {
        color: #cbd5e1;
        transition: transform 0.2s;
    }

    .category-item.active .arrow {
        color: var(--primary);
        transform: translateX(4px);
    }

    .input {
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 10px 14px;
        outline: none;
        font-size: 14px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    /* Custom Checkbox */
    input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: var(--primary);
    }

    /* Scrollbar */
    .column-content::-webkit-scrollbar { width: 6px; }
    .column-content::-webkit-scrollbar-track { background: transparent; }
    .column-content::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
    .column-content:hover::-webkit-scrollbar-thumb { background: #cbd5e1; }
</style>
@endpush

@push('scripts')
<script>
const nodes = @json($diagram);
let selectedCategories = new Set(@json($checkedCategories ?? []).map(id => parseInt(id)));
let expandedNodes = new Set(); // IDs of nodes that should show their children

function init() {
    // If editing, expand all paths to selected nodes
    if (selectedCategories.size > 0) {
        selectedCategories.forEach(id => {
            expandToNode(id);
        });
    }
    renderColumns();
    updateSummary();
}

function expandToNode(id) {
    let current = nodes.find(n => n.id == id);
    while (current && current.parent) {
        expandedNodes.add(parseInt(current.parent));
        current = nodes.find(n => n.id == current.parent);
    }
}

function getChildren(parentId) {
    return nodes.filter(n => n.parent == parentId);
}

function renderColumns() {
    const container = document.getElementById('columns-container');
    container.innerHTML = '';

    // Level 0: Roots
    renderColumn(null, 0);

    let currentLevel = 0;
    let parentsAtThisLevel = [null]; 

    while (currentLevel < 10) { 
        // Find all nodes at currentLevel that are in expandedNodes
        let nodesToExpand = Array.from(expandedNodes).filter(id => {
            let node = nodes.find(n => n.id == id);
            return node && parentsAtThisLevel.includes(node.parent);
        });

        if (nodesToExpand.length === 0) break;

        // Render children of all nodes in nodesToExpand in the NEXT column
        renderMultiParentColumn(nodesToExpand, currentLevel + 1);
        
        parentsAtThisLevel = nodesToExpand;
        currentLevel++;
    }

    updateBreadcrumb();
}

function renderMultiParentColumn(parentIds, level) {
    const container = document.getElementById('columns-container');
    const column = document.createElement('div');
    column.className = 'column';
    
    column.innerHTML = `
        <div class="column-header">
            <span class="level-label">Level ${level}</span>
            <span class="parent-name">Selected Children</span>
        </div>
        <div class="column-content"></div>
    `;

    const content = column.querySelector('.column-content');
    let hasAnyChildren = false;

    parentIds.forEach(parentId => {
        const children = getChildren(parentId);
        if (children.length === 0) return;
        hasAnyChildren = true;

        const parentNode = nodes.find(n => n.id == parentId);
        if (parentIds.length > 1) {
            const groupHeader = document.createElement('div');
            groupHeader.style.cssText = 'padding: 8px 16px; background: #f8fafc; font-size: 10px; font-weight: 700; color: #64748b; border-bottom: 1px solid #e2e8f0; margin-top: 8px;';
            groupHeader.innerText = `FROM: ${parentNode ? parentNode.name.toUpperCase() : 'ROOT'}`;
            content.appendChild(groupHeader);
        }

        children.forEach(node => {
            const hasSubChildren = getChildren(node.id).length > 0;
            const isExpanded = expandedNodes.has(node.id);
            const isSelected = selectedCategories.has(node.id);
            const selCount = getDescendantSelectionCount(node.id);

            const item = document.createElement('div');
            item.className = `category-item ${isExpanded ? 'active' : ''}`;
            item.onclick = (e) => {
                if (e.target.type === 'checkbox') return;
                selectNode(node.id, level);
            };

            item.innerHTML = `
                <div class="checkbox-wrapper">
                    <input type="checkbox" data-id="${node.id}" ${isSelected ? 'checked' : ''} onchange="handleCheckbox(this, event)">
                </div>
                <div class="item-name" title="${node.name}">${node.name}</div>
                ${selCount > 0 ? `<span class="selection-badge">${selCount}</span>` : ''}
                ${hasSubChildren ? '<div class="arrow"><i data-lucide="chevron-right" size="14"></i></div>' : ''}
            `;
            content.appendChild(item);
        });
    });

    if (hasAnyChildren) {
        container.appendChild(column);
        container.scrollLeft = container.scrollWidth;
        if (window.lucide) {
            lucide.createIcons({ attrs: { size: 14 }, portal: column });
        }
    }
}

// Keep original renderColumn for Level 0 or fallback
function renderColumn(parentId, level) {
    const children = getChildren(parentId);
    const container = document.getElementById('columns-container');
    const column = document.createElement('div');
    column.className = 'column';
    
    column.innerHTML = `
        <div class="column-header">
            <span class="level-label">Level ${level}</span>
            <span class="parent-name">Primary Categories</span>
        </div>
        <div class="column-content"></div>
    `;

    const content = column.querySelector('.column-content');
    children.forEach(node => {
        const hasChildren = getChildren(node.id).length > 0;
        const isExpanded = expandedNodes.has(node.id);
        const isSelected = selectedCategories.has(node.id);
        const selCount = getDescendantSelectionCount(node.id);

        const item = document.createElement('div');
        item.className = `category-item ${isExpanded ? 'active' : ''}`;
        item.dataset.id = node.id;
        item.onclick = (e) => {
            if (e.target.type === 'checkbox') return;
            selectNode(node.id, level);
        };

        item.innerHTML = `
            <div class="checkbox-wrapper">
                <input type="checkbox" data-id="${node.id}" ${isSelected ? 'checked' : ''} onchange="handleCheckbox(this, event)">
            </div>
            <div class="item-name" title="${node.name}">${node.name}</div>
            ${selCount > 0 ? `<span class="selection-badge">${selCount}</span>` : ''}
            ${hasChildren ? '<div class="arrow"><i data-lucide="chevron-right" size="14"></i></div>' : ''}
        `;
        content.appendChild(item);
    });

    container.appendChild(column);
}

function getDescendantSelectionCount(parentId) {
    let count = 0;
    selectedCategories.forEach(id => {
        if (id !== parentId && isAncestor(parentId, id)) {
            count++;
        }
    });
    return count;
}

function isAncestor(ancestorId, descendantId) {
    let current = nodes.find(n => n.id === descendantId);
    while (current && current.parent) {
        if (current.parent == ancestorId) return true;
        current = nodes.find(n => n.id == current.parent);
    }
    return false;
}

function selectNode(nodeId, level) {
    if (expandedNodes.has(nodeId)) {
        expandedNodes.delete(nodeId);
        collapseDescendants(nodeId);
    } else {
        expandedNodes.add(nodeId);
    }
    renderColumns();
}

function collapseDescendants(parentId) {
    let children = getChildren(parentId);
    children.forEach(child => {
        expandedNodes.delete(child.id);
        collapseDescendants(child.id);
    });
}

function handleCheckbox(el, event) {
    let id = parseInt(el.dataset.id);
    let checked = el.checked;
    const autoSelect = document.getElementById('auto-select-children').checked;

    if (checked) {
        selectedCategories.add(id);
        expandedNodes.add(id); // Auto-expand when checked
        autoSelectParents(id);
        if (autoSelect) {
            autoSelectChildren(id);
        }
    } else {
        selectedCategories.delete(id);
        expandedNodes.delete(id); // Also collapse when unchecked
        autoDeselectChildren(id); // ALWAYS deselect children when parent is unchecked
    }

    renderColumns();
    updateSummary();
}

function autoSelectParents(id) {
    let node = nodes.find(n => n.id === id);
    if (node && node.parent) {
        let parentId = parseInt(node.parent);
        selectedCategories.add(parentId);
        expandedNodes.add(parentId); // Also expand parents
        autoSelectParents(parentId);
    }
}

function autoSelectChildren(parentId) {
    let children = getChildren(parentId);
    children.forEach(child => {
        selectedCategories.add(child.id);
        expandedNodes.add(child.id);
        autoSelectChildren(child.id);
    });
}

function autoDeselectChildren(parentId) {
    let children = getChildren(parentId);
    children.forEach(child => {
        selectedCategories.delete(child.id);
        expandedNodes.delete(child.id);
        autoDeselectChildren(child.id);
    });
}

function updateSummary() {
    const summary = document.getElementById('selection-summary');
    summary.textContent = `${selectedCategories.size} categories selected`;
}

function updateBreadcrumb() {
    const display = document.getElementById('active-path-display');
    const checkedRoots = Array.from(selectedCategories).filter(id => {
        let node = nodes.find(n => n.id == id);
        return node && node.parent === null;
    });

    if (checkedRoots.length === 0 && expandedNodes.size === 0) {
        display.textContent = 'No category selected';
        return;
    }

    // Show top-level selected labels or a more generic summary if multiple
    let selectedNames = Array.from(selectedCategories).map(id => {
        let node = nodes.find(n => n.id == id);
        return node ? node.name : '';
    }).filter(n => n !== '').slice(0, 3);
    
    let text = selectedNames.join(', ');
    if (selectedCategories.size > 3) text += ` and ${selectedCategories.size - 3} more`;
    display.textContent = text || 'Navigating hierarchy...';
}

function clearSelection() {
    selectedCategories.clear();
    activePath = [];
    renderColumns();
    updateSummary();
}

function searchCategories(query) {
    // Clear previous highlights
    document.querySelectorAll('.item-name').forEach(el => el.classList.remove('search-highlight'));

    if (!query) {
        renderColumns();
        document.getElementById('searchCount').style.display = 'none';
        return;
    }

    query = query.toLowerCase();
    let matches = nodes.filter(n => n.name.toLowerCase().includes(query));
    
    const countEl = document.getElementById('searchCount');
    countEl.textContent = matches.length;
    countEl.style.display = 'block';

    if (matches.length > 0) {
        // Expand to the first match
        expandToNode(matches[0].id);
        renderColumns();

        // Highlight and scroll to matches
        setTimeout(() => {
            matches.forEach((match, index) => {
                let items = document.querySelectorAll(`.category-item[data-id="${match.id}"], .category-item input[data-id="${match.id}"]`);
                items.forEach(item => {
                    let label = item.closest('.category-item')?.querySelector('.item-name');
                    if (label) {
                        label.classList.add('search-highlight');
                        if (index === 0) {
                            label.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                    }
                });
            });
        }, 100);
    }
}

function apiFetch(url, options = {}) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
    options.headers = {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': csrfToken,
        'Accept': 'application/json',
        ...options.headers
    };
    return fetch(url, options).then(async res => {
        if (!res.ok) {
            let errorMsg = 'API Error';
            try {
                let data = await res.json();
                if (data.message) errorMsg = data.message;
            } catch(e){}
            throw new Error(errorMsg);
        }
        return res.status === 204 ? null : res.json();
    });
}

function saveNewTemplate() {
    let name = document.getElementById('templateName').value;
    if (!name) return alert('Please enter a template name');
    
    let checked = Array.from(selectedCategories);
    if (checked.length === 0) return alert('No categories selected.');

    apiFetch(`{{ url('admin/templates') }}`, {
        method: 'POST',
        body: JSON.stringify({ name: name, categories: checked })
    }).then(res => {
        alert('Template saved successfully!');
        window.location.href = `{{ url('admin/templates') }}`;
    }).catch(err => alert(err.message));
}

function updateTemplate() {
    let id = document.getElementById('templateId').value;
    let name = document.getElementById('templateName').value;
    if (!name) return alert('Please enter a template name');

    let checked = Array.from(selectedCategories);
    if (checked.length === 0) return alert('No categories selected.');
    
    apiFetch(`{{ url('admin/templates') }}/${id}`, {
        method: 'PUT',
        body: JSON.stringify({ name: name, categories: checked })
    }).then(res => {
        alert('Template updated successfully!');
    }).catch(err => alert(err.message));
}

document.addEventListener('DOMContentLoaded', init);
</script>
@endpush