@extends('layouts.master')

@section('content')
<main>
    <!-- Left Sidebar -->
    <aside class="panel sidebar" id="left-panel">
        <div class="panel-header" onclick="toggleLeftPanel()" style="cursor:pointer">
            <h2>Category Explorer</h2>
            <i data-lucide="plus" size="14" style="color:var(--text-muted); cursor:pointer"></i>
        </div>
        <div id="tree"></div>
    </aside>

    <!-- Center Canvas -->
    <section class="diagram-container">
        <div class="diagram-viewer">
            <div class="diagram-scroller">
                <div id="diagram"></div>
            </div>
            
            <div class="canvas-controls">
                <div class="control-btn" id="zoom-out" title="Zoom Out"><i data-lucide="minus" size="14"></i></div>
                <div class="control-btn" id="zoom-in" title="Zoom In"><i data-lucide="plus" size="14"></i></div>
                <div style="width:1px; background:var(--border); margin:4px 0;"></div>
                <div class="control-btn" id="reset-zoom" title="Reset (100%)"><i data-lucide="maximize" size="16"></i></div>
                <span id="zoom-label" style="font-size: 11px; font-weight: 600; color: var(--text-muted); width: 40px; text-align: center;">100%</span>
            </div>
        </div>
    </section>

    <!-- Right Sidebar -->
    <aside class="panel properties-panel properties" id="right-panel">
        <div class="panel-header" onclick="toggleRightPanel()" style="cursor:pointer">
            <h2>Node Properties</h2>
        </div>
        <div class="property-group">
            <!-- <div class="field">
                <label>Display Label</label>
                <input type="text" class="input" readonly placeholder="Selected Node">
            </div>
            <div class="field">
                <label>Description</label>
                <textarea class="textarea" readonly placeholder="Logic description area..."></textarea>
            </div>
            <div style="margin-top:auto; padding-top:16px; border-top:1px solid var(--border)">
                <p style="font-size:10px; color:var(--text-muted)">Changes are autosaved</p>
            </div> -->
            <div class="field">
            <label>Node Name</label>
<input type="text" class="input" id="nodeName">
</div>
<div class="field">
<label style="margin-top:10px;display:block;">Copy Into Parent</label>

<select id="copyTarget"></select>
</div>

<!-- <button class="btn-primary" style="margin-top:10px;width:100%" onclick="updateNode()">
Update Node
</button> -->
<!-- <button class="btn" style="margin-top:8px;width:100%" onclick="deleteNode()">
Delete Node
</button> -->

<button class="btn" style="margin-top:8px;width:100%" onclick="copySelectedNode()">
Copy Node
</button>
        </div>
    </aside>
</main>
@endsection

@push('styles')
<style>
    /* Panel Specific Layout */
    .node label.active{
background:#e0edff;
}
    .sidebar {
        width: var(--sidebar-width);
        border-right: 1px solid var(--border);
    }

    #tree {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
    }

    .node {
        margin-bottom: 4px;
    }

    .node label {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s;
    }
    
    .node label span {
        white-space: nowrap;
        overflow-x: auto;
        flex: 1;
        min-width: 0;
        display: block;
        padding-bottom: 2px;
    }

    .node label span::-webkit-scrollbar {
        height: 3px;
    }
    
    .node label span::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }

    .node label:hover {
        background: var(--bg-main);
    }

    .children {
        margin-left: 14px;
        border-left: 1px dashed var(--border);
        padding-left: 10px;
        margin-top: 4px;
    }

    /* Diagram Area */
    .diagram-container {
        flex: 1;
        background: #f1f5f9;
        position: relative;
        overflow: hidden;
    }

    .diagram-viewer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .diagram-scroller {
        flex: 1;
        overflow: auto;
        padding: 60px;
        position: relative;
    }

    #diagram {
        display: inline-block;
        background: transparent;
        transition: transform 0.2s ease-out;
        transform-origin: 0 0;
    }

    .canvas-controls {
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        background: white;
        padding: 6px;
        border-radius: 10px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        border: 1px solid var(--border);
        gap: 6px;
        align-items: center;
        z-index: 1000;
    }

    .control-btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
        color: var(--text-muted);
    }

    .control-btn:hover { background: var(--bg-main); color: var(--text-main); }

    .textarea { height: 100px; resize: none; }

    /* Custom Card Styles for Mermaid Nodes */
    /* Mermaid Node Box */
.mermaid .node rect{
    fill:#ffffff !important;
    stroke:#2563eb !important;
    stroke-width:1.5px !important;
    rx:6px !important;
    ry:6px !important;
}

/* Node text */
.mermaid .node text,
.mermaid .node .label,
.mermaid .node .label div,
.mermaid .node .label span {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    fill: #0f172a !important;
    color: #0f172a !important;
}

/* Perfect center */
.mermaid svg text{
    text-anchor:middle !important;
    dominant-baseline:middle !important;
}

/* HTML labels center */
.mermaid .node .label div{
    text-align:center !important;
    padding:4px 8px !important;
    line-height:1.4 !important;
}
.mermaid svg text{
    text-anchor: middle !important;
}

/* .mermaid .nodeLabel{
    text-anchor: middle !important;
    dominant-baseline: middle !important;
} */
.mermaid .nodeLabel,
.mermaid .edgeLabel {
    color: #0f172a !important;
    text-align: center;
    font-family: 'Inter', sans-serif !important;
}

</style>
@endpush

@push('scripts')
<script>
    let selectedNode = null;
    let draggedNodeId = null;

function dragStart(e,id){
draggedNodeId=id;
}

function allowDrop(e){
e.preventDefault();
}
//     mermaid.initialize({
//     startOnLoad: false,
//     theme: "default",
//     flowchart: {
//         htmlLabels: true
//     }
// });

mermaid.initialize({
    startOnLoad:false,
    securityLevel:'loose',
    theme: "default",
    flowchart:{
        htmlLabels:true,
        useMaxWidth:false
    },
    htmlLabels: true,
    themeVariables: {
        fontSize: '13px', 
        fontFamily: 'Inter',
        lineColor: '#2563eb',
        primaryColor: '#ffffff',
        nodeBorder: '#2563eb',
        mainBkg: '#ffffff',
        textColor: '#0f172a',
        nodeTextColor: '#0f172a',
        defaultColor: '#0f172a'
    }
});

let nodes = @json($diagram);
function getChildren(parent){
    return nodes.filter(n=>n.parent===parent);
}

/* INIT ROOT */
function init(){
    let root = getChildren(null);
    root.forEach(node=>{
        createNode(node,document.getElementById("tree"));
    });
}
function dropNode(e,parentId){

e.preventDefault();

if(!draggedNodeId || draggedNodeId==parentId) return;

let source = nodes.find(n=>n.id==draggedNodeId);

/* duplicate check */
let exist = nodes.find(n =>
n.parent==parentId &&
n.name.toLowerCase()==source.name.toLowerCase()
);

if(exist){
alert("Child already exists under this parent");
return;
}

/* API create */
apiFetch(`${baseUrl}/admin/categories`,{
method:'POST',
body:JSON.stringify({
name:source.name,
parent_id:parentId
})
})
.then(newNode=>{

newNode.parent=newNode.parent_id;
nodes.push(newNode);

appendChildren(parentId);

updateDiagram();

});

}
function createNode(node,container){
    let div=document.createElement("div");
    div.className="node";
    div.id="node_"+node.id;
div.innerHTML = `
<div style="display:flex; justify-content:space-between; align-items:center; width:100%; padding-right:8px;">
    <label onclick="selectNode(${node.id})"
           draggable="true"
           ondragstart="dragStart(event,${node.id})"
           ondragover="allowDrop(event)"
           ondrop="dropNode(event,${node.id})"
           style="flex:1;">
    <input type="checkbox" data-id="${node.id}" onchange="toggleNode(this)">
    <span id="label_${node.id}">${node.name}</span>
    </label>
    <div onclick="promptDeleteNode(${node.id}, event)" style="cursor:pointer; color:#ef4444; padding:2px 6px;" title="Delete Category">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
    </div>
</div>
`;  // div.innerHTML=`
    // <label>
    //     <input type="checkbox" data-id="${node.id}" onchange="toggleNode(this)">
    //     ${node.name}
    // </label>
    // `;

    container.appendChild(div);
}

/* TOGGLE NODE */
function toggleNode(el){
    let id=parseInt(el.dataset.id);
    if(el.checked){
        appendChildren(id);
        autoCheckParent(id);
    }else{
        removeChildren(id);
    }
    updateDiagram();
}

/* APPEND CHILDREN */
function appendChildren(parentId){
    let parentDiv=document.getElementById("node_"+parentId);
    if(parentDiv.querySelector(".children")) return;

    let children=getChildren(parentId);
    if(!children.length) return;

    let box=document.createElement("div");
    box.className="children";

    children.forEach(child=>{
        createNode(child,box);
    });

    parentDiv.appendChild(box);
}

/* REMOVE CHILDREN */
function removeChildren(parentId){
    let parentDiv=document.getElementById("node_"+parentId);
    let childrenBox=parentDiv.querySelector(".children");
    if(childrenBox) childrenBox.remove();
}

/* AUTO SELECT PARENT */
function autoCheckParent(id){
    let node = nodes.find(n=>n.id===id);
    if(!node.parent) return;

    let parentCheckbox = document.querySelector(`input[data-id="${node.parent}"]`);
    if(parentCheckbox && !parentCheckbox.checked){
        parentCheckbox.checked=true;
        appendChildren(node.parent);
        autoCheckParent(node.parent); // recursive for multi-level
    }
}

/* BUILD DIAGRAM */
let zoomLevel = 1.0;

function changeZoom(delta) {
    zoomLevel += delta;
    if (zoomLevel < 0.2) zoomLevel = 0.2;
    if (zoomLevel > 5.0) zoomLevel = 5.0; // Increased to 500%
    applyZoom();
}

function applyZoom() {
    const el = document.getElementById("diagram");
    const label = document.getElementById("zoom-label");
    if (el) {
        el.style.transform = `scale(${zoomLevel})`;
        // Origin is set in CSS as 0 0
    }
    if (label) {
        label.textContent = Math.round(zoomLevel * 100) + "%";
    }
}

// Setup CSRF for all AJAX calls
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;

function apiFetch(url, options = {}) {
    options.headers = {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': csrfToken,
        'Accept': 'application/json',
        ...options.headers
    };
    return fetch(url, options).then(res => {
        if (!res.ok) throw new Error('API Error');
        return res.status === 204 ? null : res.json();
    });
}

// Bind zoom controls after DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('zoom-in').onclick = () => changeZoom(0.2);
    document.getElementById('zoom-out').onclick = () => changeZoom(-0.2);
    document.getElementById('reset-zoom').onclick = () => {
        zoomLevel = 1.0;
        applyZoom();
    };
});
function loadTree(){
    let select = $('#copyTarget');
    let options = "<option value=''>Select Parent</option>";

    nodes.forEach(n => {
        options += `<option value="${n.id}">${n.name}</option>`;
    });

    select.html(options).select2({
        width: '100%',
        placeholder: 'Search for parent...',
        dropdownParent: $('#right-panel')
    });
}
/* SELECT NODE */

function selectNode(id){

selectedNode=id;

document.querySelectorAll(".node label").forEach(l=>{
l.classList.remove("active");
});

let label=document.querySelector(`#node_${id} label`);

if(label) label.classList.add("active");

let node=nodes.find(n=>n.id==id);

document.getElementById("nodeName").value=node.name;

}
/* DELETE NODE */
function deleteNode(){
    if(!selectedNode){
        alert("Select node first");
        return;
    }
    promptDeleteNode(selectedNode);
}

/* DELETE NODE WITH CONFIRMATION */
function promptDeleteNode(id, event){
    if (event) {
        event.stopPropagation();
    }
    if(!confirm("Are you sure you want to delete this category and all its children?")) return;

    apiFetch(`${baseUrl}/admin/categories/${id}`, { method: 'DELETE' })
        .then(() => {
            /* remove node + children locally */
            nodes = nodes.filter(n => n.id != id && n.parent != id);
            
            /* remove UI */
            let div = document.getElementById("node_"+id);
            if(div) div.remove();

            if(selectedNode == id) {
                selectedNode = null;
                document.getElementById("nodeName").value="";
            }
            updateDiagram();
            loadTree();
        })
        .catch(err => alert("Error deleting category: " + err.message));
}
/* UPDATE NODE */

/* UPDATE NODE */
function updateNode(){
    if(!selectedNode){
        alert("Select node first");
        return;
    }

    let node = nodes.find(n => n.id == selectedNode);
    let newName = document.getElementById("nodeName").value;
    if(!newName) return;

    apiFetch(`${baseUrl}/categories/${selectedNode}`, {
        method: 'PUT',
        body: JSON.stringify({ name: newName, parent_id: node.parent })
    })
    .then(updatedNode => {
        node.name = updatedNode.name;
        
        /* sidebar label update */
        let label = document.getElementById("label_"+selectedNode);
        if(label) label.innerText = updatedNode.name;

        updateDiagram();
        loadTree();
    })
    .catch(err => alert("Error updating category: " + err.message));
}
/* COPY NODE */

/* COPY/CREATE NODE */
function copySelectedNode(){
    if(!selectedNode){
        alert("Select node first");
        return;
    }

    let target = parseInt(document.getElementById("copyTarget").value);
    if(!target){
        alert("Select parent node");
        return;
    }

    let source = nodes.find(n => n.id == selectedNode);

    /* DUPLICATE CHECK */
    let alreadyExist = nodes.find(n =>
        n.parent == target &&
        n.name.toLowerCase() == source.name.toLowerCase()
    );

    if(alreadyExist){
        alert("This child already exists under selected parent");
        return;
    }

    apiFetch(`${baseUrl}/admin/categories`, {
        method: 'POST',
        body: JSON.stringify({ name: source.name, parent_id: target })
    })
    .then(newNode => {
        newNode.parent = newNode.parent_id; // Normalize for client logic
        nodes.push(newNode);

        /* APPEND UI */
        let parentDiv = document.getElementById("node_"+target);
        if(parentDiv){
            let childBox = parentDiv.querySelector(".children");
            if(!childBox){
                childBox = document.createElement("div");
                childBox.className="children";
                parentDiv.appendChild(childBox);
            }
            createNode(newNode, childBox);
        }
        updateDiagram();
        loadTree();
    })
    .catch(err => alert("Error copying category: " + err.message));
}
/* RENDER MERMAID */
function updateDiagram(){
    let checked = Array.from(document.querySelectorAll("input[type=checkbox]:checked"))
        .map(c=>parseInt(c.dataset.id));

    let text="flowchart LR\n";
    let edges=new Set();

    checked.forEach(id=>{
        let node = nodes.find(n=>n.id===id);
        if(node.parent){
            let parent = nodes.find(n=>n.id===node.parent);
            edges.add(`node${parent.id}["${parent.name}"] --> node${node.id}["${node.name}"]`);
        }
    });

    edges.forEach(e=>{
        text+=e+"\n";
    });

    const diagram=document.getElementById("diagram");
    diagram.innerHTML=`<div class="mermaid">${text}</div>`;

    mermaid.run({
        nodes:diagram.querySelectorAll('.mermaid')
    });
    setTimeout(()=>{

document.querySelectorAll(".mermaid .node").forEach(el=>{

let id=el.id.replace("node","");

el.onclick=function(){

document.querySelectorAll(".mermaid .node")
.forEach(n=>n.classList.remove("active-node"));

el.classList.add("active-node");

};

});

},200);
}

init();
loadTree();
</script>
@endpush