@extends('root')
@section('title', 'Flow Builder - ' . $wabaPool->phone_number)

@section('content')
<div class="container-fluid h-100 d-flex flex-column">
    @include('components.breadcrumb', [
        'title' => 'Flow Builder',
        'links' => [
            ['text' => 'Autoreply', 'url' => route('client.autoreply.index')],
            ['text' => 'Settings', 'url' => route('client.autoreply.settings', $wabaPool)],
        ],
        'current' => 'Flow Builder'
    ])

    <div class="row flex-grow-1">
        {{-- Sidebar Controls --}}
        <div class="col-md-3 col-lg-2 d-flex flex-column h-100 mb-3 mb-md-0">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h6 class="mb-0 fw-bold">Tools</h6>
                </div>
                <div class="card-body overflow-auto custom-scrollbar">
                    <div class="d-grid gap-2">
                        <div class="drag-drawflow btn btn-outline-secondary text-start" draggable="true" ondragstart="drag(event)" data-node="trigger">
                            <i class="ti ti-bolt me-2"></i> Trigger
                        </div>
                        <div class="drag-drawflow btn btn-outline-primary text-start" draggable="true" ondragstart="drag(event)" data-node="message">
                            <i class="ti ti-message me-2"></i> Message
                        </div>
                        <div class="drag-drawflow btn btn-outline-success text-start" draggable="true" ondragstart="drag(event)" data-node="button">
                            <i class="ti ti-click me-2"></i> Buttons
                        </div>
                        <div class="drag-drawflow btn btn-outline-info text-start" draggable="true" ondragstart="drag(event)" data-node="ai">
                            <i class="ti ti-robot me-2"></i> AI Generate
                        </div>
                        <div class="drag-drawflow btn btn-outline-warning text-start" draggable="true" ondragstart="drag(event)" data-node="condition">
                            <i class="ti ti-git-branch me-2"></i> Condition
                        </div>
                        <div class="drag-drawflow btn btn-outline-danger text-start" draggable="true" ondragstart="drag(event)" data-node="handover">
                            <i class="ti ti-headset me-2"></i> Handover
                        </div>
                    </div>
                    
                    <hr>
                    <div class="small text-muted mb-2">Instructions</div>
                    <ul class="text-muted small ps-3">
                        <li>Drag items to canvas</li>
                        <li>Connect dots to link</li>
                        <li>Click node to edit</li>
                        <li>Del key to remove</li>
                    </ul>
                </div>
            </div>
        </div>

        {{-- Canvas --}}
        <div class="col-md-9 col-lg-10 h-100">
            <div class="card h-100 border-0 shadow-sm overflow-hidden position-relative wrapper">
                
                {{-- Toolbar --}}
                <div class="position-absolute top-0 end-0 p-3 z-index-10 d-flex gap-2" style="z-index: 10;">
                    <button class="btn btn-warning btn-sm shadow-sm" onclick="editor.zoom_out()">
                        <i class="ti ti-minus"></i>
                    </button>
                    <button class="btn btn-warning btn-sm shadow-sm" onclick="editor.zoom_reset()">
                        <i class="ti ti-zoom-cancel"></i>
                    </button>
                     <button class="btn btn-warning btn-sm shadow-sm" onclick="editor.zoom_in()">
                        <i class="ti ti-plus"></i>
                    </button>
                    <button class="btn btn-success btn-sm shadow-sm" onclick="saveFlow()">
                        <i class="ti ti-device-floppy me-1"></i> Save Flow
                    </button>
                </div>

                {{-- Drawflow Root --}}
                <div id="drawflow" class="w-100 h-100 text-start" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </div>
        </div>
    </div>
</div>

<!-- Modal for Node Editing -->
<div class="modal fade" id="nodeEditModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Node</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="nodeEditForm">
                    <input type="hidden" id="nodeId">
                    <div class="mb-3">
                        <label class="form-label">Label</label>
                        <input type="text" class="form-control" id="nodeLabel">
                    </div>
                    <div class="mb-3" id="nodeContentArea">
                        <label class="form-label">Content</label>
                        <textarea class="form-control" id="nodeContent" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="updateNode()">Save changes</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
<style>
    #drawflow {
        background: var(--bs-body-bg);
        background-size: 20px 20px;
        background-image: radial-gradient(#dee2e6 1px, transparent 1px);
    }
    
    .drawflow .drawflow-node {
        background: #fff;
        border: 1px solid #e0e6ed;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        width: 200px;
        padding: 0;
        z-index: 2;
    }
    
    .drawflow .drawflow-node .input, .drawflow .drawflow-node .output {
        width: 12px;
        height: 12px;
        background: #fff;
        border: 2px solid #000;
        top: 2px;
    }
    
    .drawflow .drawflow-node .input { left: -8px; background: #ffc107; border-color: #ffc107; }
    .drawflow .drawflow-node .output { right: -8px; background: #0d6efd; border-color: #0d6efd;}
    
    .drawflow .drawflow-node.selected {
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
    }
    
    .node-header {
        padding: 8px 12px;
        border-bottom: 1px solid #f0f0f0;
        border-radius: 8px 8px 0 0;
        font-weight: 600;
        font-size: 0.9em;
        display: flex;
        align-items: center;
    }
    .node-header i { margin-right: 6px; }
    
    .node-body {
        padding: 10px;
        font-size: 0.85em;
        color: #6c757d;
        min-height: 40px;
    }

    /* Node type colors */
    .node-trigger .node-header { background-color: #f8f9fa; color: #495057; }
    .node-message .node-header { background-color: #ecf0ff; color: #0d6efd; }
    .node-button .node-header { background-color: #e6fffa; color: #198754; }
    .node-ai .node-header { background-color: #f2f7ff; color: #0dcaf0; }
    .node-handover .node-header { background-color: #fff5f5; color: #dc3545; }

</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.reroute = true;
    editor.editor_mode = 'edit';
    editor.start();

    // --- Load Data ---
    const existingFlow = @json($setting->flow_structure ?? null);
    
    if (existingFlow) {
        editor.import(existingFlow);
    } else {
        // Initial Example Data
        const initialData = {
          "drawflow": {
            "Home": {
              "data": {
                "1": { "id": 1, "name": "trigger", "data": { "label": "Start Keyword", "content": "promo" }, "class": "node-trigger", "html": createNodeHtml('trigger', 'Start Keyword', 'promo'), "typenode": false, "inputs": {}, "outputs": { "output_1": { "connections": [{ "node": "2", "output": "input_1" }] } }, "pos_x": 50, "pos_y": 50 },
                "2": { "id": 2, "name": "message", "data": { "label": "Welcome Msg", "content": "Hello there!" }, "class": "node-message", "html": createNodeHtml('message', 'Welcome Msg', 'Hello there!'), "typenode": false, "inputs": { "input_1": { "connections": [{ "node": "1", "input": "output_1" }] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": 400, "pos_y": 100 }
              }
            }
          }
        };
        editor.import(initialData);
    }

    // --- Drag & Drop ---
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("node", ev.target.getAttribute('data-node'));
    }

    function drop(ev) {
        ev.preventDefault();
        var nodeType = ev.dataTransfer.getData("node");
        addNodeToDrawFlow(nodeType, ev.clientX, ev.clientY);
    }

    function addNodeToDrawFlow(name, pos_x, pos_y) {
        if(editor.editor_mode === 'fixed') return;
        
        // Calculate canvas position relative to viewport
        // This is a simplified calculation, ideally use editor.pos_x / zoom etc.
        pos_x = pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
        pos_y = pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));

        const icons = {
            'trigger': 'ti-bolt',
            'message': 'ti-message',
            'button': 'ti-click',
            'ai': 'ti-robot',
            'condition': 'ti-git-branch',
            'handover': 'ti-headset'
        };

        const defaultLabels = {
            'trigger': 'Incoming',
            'message': 'Send Text',
            'button': 'Send Buttons',
            'ai': 'Generate AI',
            'condition': 'Check Logic',
            'handover': 'To Human'
        };
        
        let inputs = 1;
        let outputs = 1;
        if(name === 'trigger') inputs = 0;
        if(name === 'handover') outputs = 0;

        const html = createNodeHtml(name, defaultLabels[name], '');
        
        const data = { label: defaultLabels[name], content: '' };
        
        editor.addNode(name, inputs, outputs, pos_x, pos_y, `node-${name}`, data, html);
    }

    function createNodeHtml(type, title, body) {
         const icons = {
            'trigger': 'ti-bolt',
            'message': 'ti-message',
            'button': 'ti-click',
            'ai': 'ti-robot',
            'condition': 'ti-git-branch',
            'handover': 'ti-headset'
        };
        
        return `
            <div class="node-header">
                <i class="ti ${icons[type] || 'ti-circle'}"></i> ${title}
            </div>
            <div class="node-body">
                ${body ? (body.length > 30 ? body.substring(0,27)+'...' : body) : '<i>No content</i>'}
            </div>
        `;
    }

    // --- Interaction ---
    editor.on('nodeSelected', function(id) {
        console.log("Node selected " + id);
        // Show edit modal
        const node = editor.getNodeFromId(id);
        document.getElementById('nodeId').value = id;
        document.getElementById('nodeLabel').value = node.data.label;
        document.getElementById('nodeContent').value = node.data.content;
        
        // Show modal via Bootstrap JS
        var myModal = new bootstrap.Modal(document.getElementById('nodeEditModal'));
        myModal.show();
    });

    function updateNode() {
        const id = document.getElementById('nodeId').value;
        const label = document.getElementById('nodeLabel').value;
        const content = document.getElementById('nodeContent').value;
        
        const node = editor.getNodeFromId(id);
        
        // Update data
        node.data.label = label;
        node.data.content = content;
        editor.updateNodeDataFromId(id, node.data);
        
        // Update HTML visual
        const newHtml = createNodeHtml(node.name, label, content);
        
        // Access DOM element
        const domNode = document.getElementById('node-'+id);
        if(domNode) {
            const contentBox = domNode.querySelector('.drawflow_content_node');
            if(contentBox) contentBox.innerHTML = newHtml;
        }

        // Close modal
        var myModalEl = document.getElementById('nodeEditModal');
        var modal = bootstrap.Modal.getInstance(myModalEl);
        modal.hide();
    }

    // --- Save ---
    function saveFlow() {
        const flowData = editor.export();
        const saveUrl = "{{ route('client.autoreply.flow.save', $wabaPool) }}";
        
        Swal.fire({
            title: 'Saving...',
            didOpen: () => { Swal.showLoading() }
        });

        axios.post(saveUrl, {
            flow_structure: flowData,
            is_active: true
        })
        .then(function (response) {
            Swal.fire({
                title: 'Saved!',
                text: 'Flow has been saved successfully.',
                icon: 'success'
            });
        })
        .catch(function (error) {
            console.error(error);
            Swal.fire({
                title: 'Error!',
                text: error.response?.data?.message || 'Failed to save flow',
                icon: 'error'
            });
        });
    }
</script>
@endpush