@extends('layouts.admin')
@include('blueprint.admin.template')

@section('title')
    {{ $EXTENSION_NAME }}
@endsection

@section('content-header')
    @yield('extension.header')
@endsection

@section('content')
    @yield('extension.config')
    @yield('extension.description')<style>
    /* Node Grid */
    .node-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 10px;
        margin-bottom: 5px;
    }

    .node-card {
        background: rgba(0,0,0,0.03);
        border: 1px solid rgba(0,0,0,0.15);
        border-radius: 4px;
        padding: 10px 14px;
        cursor: pointer;
        transition: all 0.15s ease;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .node-card:hover {
        border-color: rgba(0,0,0,0.3);
        background: rgba(0,0,0,0.06);
    }

    .node-card.selected {
        border-color: #5cb85c;
        background: rgba(92,184,92,0.1);
    }

    .node-card.security-selected {
        border-color: #f0ad4e;
        background: rgba(240,173,78,0.1);
    }

    .node-card .node-icon {
        width: 32px;
        height: 32px;
        background: #337ab7;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: white;
        flex-shrink: 0;
    }

    .node-card.selected .node-icon {
        background: #5cb85c;
    }

    .node-card.security-selected .node-icon {
        background: #f0ad4e;
    }

    .node-card .node-info {
        flex: 1;
        overflow: hidden;
    }

    .node-card .node-name {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .node-card .node-status {
        font-size: 11px;
        opacity: 0.6;
    }

    .node-card.selected .node-status {
        color: #5cb85c;
        opacity: 1;
    }

    .node-card.security-selected .node-status {
        color: #f0ad4e;
        opacity: 1;
    }

    /* Main Page Tabs */
    .main-tabs {
        display: flex;
        gap: 0;
        border-bottom: 2px solid rgba(0,0,0,0.15);
        margin-bottom: 0;
    }

    .main-tab {
        padding: 12px 24px;
        background: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        cursor: pointer;
        transition: all 0.2s ease;
        opacity: 0.65;
        font-weight: 600;
        font-size: 14px;
        margin-bottom: -2px;
    }

    .main-tab:hover {
        opacity: 0.85;
        background: rgba(0,0,0,0.04);
    }

    .main-tab.active {
        border-bottom-color: #337ab7;
        color: #337ab7;
        opacity: 1;
    }

    .main-tab i {
        margin-right: 8px;
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    /* Status Badge */
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 500;
    }

    .status-badge.enabled {
        background: rgba(92,184,92,0.15);
        color: #5cb85c;
    }

    .status-badge.warning {
        background: rgba(240,173,78,0.15);
        color: #f0ad4e;
    }

    .status-badge.disabled {
        background: rgba(0,0,0,0.06);
        color: #777;
    }

    /* Pattern chips */
    .pattern-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .pattern-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        background: rgba(92,184,92,0.1);
        border: 1px solid rgba(92,184,92,0.4);
        color: #3c763d;
        border-radius: 4px;
        font-family: monospace;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .pattern-chip:hover {
        background: rgba(92,184,92,0.18);
    }

    .pattern-chip.disabled {
        background: rgba(0,0,0,0.04);
        border-color: rgba(0,0,0,0.15);
        color: #999;
        text-decoration: line-through;
    }

    /* Preset list */
    .preset-item {
        background: rgba(0,0,0,0.03);
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 4px;
        padding: 12px 15px;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    }

    .preset-item.editing {
        border-color: #f0ad4e;
        background: rgba(240,173,78,0.08);
    }

    .preset-item.drag-ghost {
        opacity: 0.4;
    }

    .preset-item.drag-over {
        border-top: 2px solid #337ab7;
    }

    .preset-item .preset-drag {
        flex-shrink: 0;
        width: 16px;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: grab;
        color: #aaa;
        font-size: 14px;
        user-select: none;
    }

    .preset-item .preset-drag:hover {
        color: #555;
    }

    .preset-item.dragging .preset-drag {
        cursor: grabbing;
    }

    .preset-item .preset-actions {
        flex-shrink: 0;
        display: flex;
        gap: 6px;
    }

    .preset-item .preset-actions .btn {
        padding: 4px 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .preset-item .preset-actions .btn svg {
        display: block;
    }

    .preset-item .preset-meta {
        flex: 1;
        min-width: 0;
    }

    .preset-item h4 {
        margin: 0 0 4px;
        font-size: 14px;
        font-weight: 600;
        color: #337ab7;
    }

    .preset-item .preset-desc {
        margin: 0 0 6px;
        font-size: 12px;
        color: #777;
    }

    .preset-item .preset-cmd {
        display: block;
        font-family: monospace;
        font-size: 11px;
        color: #555;
        background: rgba(0,0,0,0.04);
        padding: 4px 8px;
        border-radius: 3px;
        word-break: break-all;
    }

    .preset-empty {
        padding: 20px;
        border: 2px dashed rgba(0,0,0,0.15);
        border-radius: 4px;
        text-align: center;
        color: #999;
    }

    #save-status {
        line-height: 34px;
        margin-right: 12px;
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .box-header.with-border {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 12px;
        }

        .box-header .main-tabs {
            width: 100%;
            flex-wrap: wrap;
        }

        .main-tab {
            padding: 10px 14px;
            font-size: 13px;
            flex: 1;
            text-align: center;
            white-space: nowrap;
        }

        .main-tab i {
            margin-right: 4px;
        }

        .node-grid {
            grid-template-columns: 1fr;
        }

        .tab-content .row .col-md-3,
        .tab-content .row .col-md-4,
        .tab-content .row .col-md-6 {
            width: 100%;
            margin-bottom: 15px;
        }

        .box-footer {
            display: flex;
            flex-direction: column-reverse;
            gap: 10px;
        }

        .box-footer .btn {
            float: none !important;
            width: 100%;
            margin-left: 0 !important;
        }

        #save-status {
            margin-right: 0;
            text-align: center;
        }
    }
</style>

<div class="row">
    <div class="col-xs-12">
        <div class="box box-primary">
            <div class="box-header with-border" style="display: flex; align-items: center;">
                <div class="main-tabs" style="margin: 0; border: none; background: none;">
                    <button type="button" class="main-tab active" data-tab="dashboard">
                        <i class="fa fa-dashboard"></i> Dashboard
                    </button>
                    <button type="button" class="main-tab" data-tab="memory">
                        <i class="fa fa-memory"></i> Memory Flags
                    </button>
                    <button type="button" class="main-tab" data-tab="security">
                        <i class="fa fa-shield"></i> Pattern Security
                    </button>
                    <button type="button" class="main-tab" data-tab="presets">
                        <i class="fa fa-cubes"></i> Presets
                    </button>
                </div>
            </div>
            <div class="box-body" style="padding-top: 0;">

                {{-- Dashboard Tab --}}
                <div class="tab-content active" id="tab-dashboard" style="padding-top: 20px;">
                    <div class="row" style="display: flex; flex-wrap: wrap;">

                        {{-- Memory Flag Restriction --}}
                        <div class="col-md-4" style="display: flex; flex-direction: column; margin-bottom: 20px;">
                            <div class="box {{ count($blockedNodes) > 0 ? 'box-success' : 'box-default' }}" id="memoryStatusBox" style="flex: 1; margin-bottom: 0;">
                                <div class="box-header with-border">
                                    <h3 class="box-title">
                                        <i class="fa fa-memory"></i> Memory Flag Restriction
                                    </h3>
                                    <div class="box-tools pull-right">
                                        <span class="label {{ count($blockedNodes) > 0 ? 'label-success' : 'label-default' }}" id="memoryStatusLabel">
                                            {{ count($blockedNodes) > 0 ? 'Active' : 'Inactive' }}
                                        </span>
                                    </div>
                                </div>
                                <div class="box-body no-padding">
                                    <table class="table table-condensed" style="margin-bottom: 0;">
                                        <tr>
                                            <td class="text-muted" style="width: 45%; padding-left: 15px;">Blocked nodes</td>
                                            <td><span id="memoryNodeCount">{{ count($blockedNodes) }}</span> / {{ count($nodes) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted" style="padding-left: 15px;">Blocked flags</td>
                                            <td><code>-Xms</code>, <code>-Xmx</code></td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted" style="padding-left: 15px;">Scope</td>
                                            <td>Java memory only</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="box-footer">
                                    <button type="button"
                                        onclick="document.querySelector('.main-tab[data-tab=memory]').click()"
                                        class="btn btn-xs btn-default">
                                        <i class="fa fa-cog"></i> Configure
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- Pattern Security --}}
                        <div class="col-md-4" style="display: flex; flex-direction: column; margin-bottom: 20px;">
                            <div class="box {{ count($securityBlockedNodes) > 0 ? 'box-warning' : 'box-default' }}" id="securityStatusBox" style="flex: 1; margin-bottom: 0;">
                                <div class="box-header with-border">
                                    <h3 class="box-title">
                                        <i class="fa fa-shield"></i> Pattern Security
                                    </h3>
                                    <div class="box-tools pull-right">
                                        <span class="label {{ count($securityBlockedNodes) > 0 ? 'label-warning' : 'label-default' }}" id="securityStatusLabel">
                                            {{ count($securityBlockedNodes) > 0 ? 'Active' : 'Inactive' }}
                                        </span>
                                    </div>
                                </div>
                                <div class="box-body no-padding">
                                    <table class="table table-condensed" style="margin-bottom: 0;">
                                        <tr>
                                            <td class="text-muted" style="width: 45%; padding-left: 15px;">Protected nodes</td>
                                            <td><span id="securityNodeCount">{{ count($securityBlockedNodes) }}</span> / {{ count($nodes) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted" style="padding-left: 15px;">Built-in patterns</td>
                                            <td><span id="builtinActiveCount">{{ count($builtinPatterns) - count($disabledBuiltins) }}</span> / {{ count($builtinPatterns) }} active</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted" style="padding-left: 15px;">Custom patterns</td>
                                            <td><span id="customCount">{{ count($customPatterns) }}</span></td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="box-footer">
                                    <button type="button"
                                        onclick="document.querySelector('.main-tab[data-tab=security]').click()"
                                        class="btn btn-xs btn-default">
                                        <i class="fa fa-cog"></i> Configure
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- Presets --}}
                        <div class="col-md-4" style="display: flex; flex-direction: column; margin-bottom: 20px;">
                            <div class="box {{ count($presets) > 0 ? 'box-primary' : 'box-default' }}" id="presetsStatusBox" style="flex: 1; margin-bottom: 0;">
                                <div class="box-header with-border">
                                    <h3 class="box-title">
                                        <i class="fa fa-cubes"></i> Startup Presets
                                    </h3>
                                    <div class="box-tools pull-right">
                                        <span class="label {{ count($presets) > 0 ? 'label-primary' : 'label-default' }}" id="presetsStatusLabel">
                                            {{ count($presets) }} defined
                                        </span>
                                    </div>
                                </div>
                                <div class="box-body no-padding">
                                    <table class="table table-condensed" style="margin-bottom: 0;">
                                        <tr>
                                            <td class="text-muted" style="width: 45%; padding-left: 15px;">Available presets</td>
                                            <td><span id="presetsCount">{{ count($presets) }}</span></td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted" style="padding-left: 15px;">Scope</td>
                                            <td>All servers</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted" style="padding-left: 15px;">Loaded via</td>
                                            <td>Startup tab dropdown</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="box-footer">
                                    <button type="button"
                                        onclick="document.querySelector('.main-tab[data-tab=presets]').click()"
                                        class="btn btn-xs btn-default">
                                        <i class="fa fa-cog"></i> Manage
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            <div class="box box-default">
                                <div class="box-header with-border">
                                    <h3 class="box-title"><i class="fa fa-info-circle"></i> How Restrictions Work</h3>
                                </div>
                                <div class="box-body">
                                    <ul style="line-height: 1.8; padding-left: 20px; margin-bottom: 0;">
                                        <li><strong>Memory Flag Restriction:</strong> Blocks edits that change <code>-Xms</code> / <code>-Xmx</code> Java heap flags on selected nodes. Useful when memory is sold by tier.</li>
                                        <li><strong>Pattern Security:</strong> Rejects startup commands containing dangerous patterns (download-and-execute, destructive commands, shell tunnels, etc.) on selected nodes.</li>
                                        <li><strong>Startup Presets:</strong> Curated commands users can load with one click from the Startup tab. Available globally.</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>{{-- /tab-dashboard --}}

                {{-- Memory Flags Tab --}}
                <div class="tab-content" id="tab-memory" style="padding-top: 20px;">
                    <div class="box box-default">
                        <div class="box-header with-border">
                            <h3 class="box-title"><i class="fa fa-memory"></i> Memory Flag Restriction</h3>
                        </div>
                        <div class="box-body">
                            <p class="text-muted" style="margin-bottom: 15px;">
                                Block modification of <code>-Xms</code> and <code>-Xmx</code> Java memory flags on selected nodes. The restriction activates automatically whenever at least one node is selected below.
                            </p>
                            <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px; flex-wrap: wrap;">
                                <span class="status-badge {{ count($blockedNodes) > 0 ? 'enabled' : 'disabled' }}" id="memoryBadge">
                                    <i class="fa {{ count($blockedNodes) > 0 ? 'fa-check-circle' : 'fa-times-circle' }}"></i>
                                    <span id="memoryStatus">{{ count($blockedNodes) > 0 ? count($blockedNodes) . ' node(s) blocked' : 'No nodes blocked' }}</span>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="box box-default">
                        <div class="box-header with-border">
                            <h3 class="box-title"><i class="fa fa-sitemap"></i> Target Nodes</h3>
                            <span class="text-muted" style="margin-left: 10px; font-size: 12px;">Click to toggle blocking</span>
                        </div>
                        <div class="box-body">
                            @if(count($nodes) === 0)
                                <p class="text-muted" style="margin: 0;">No nodes registered on this panel yet.</p>
                            @else
                                <div class="node-grid" id="memoryNodeGrid">
                                    @foreach($nodes as $node)
                                        <div class="node-card {{ in_array($node->id, $blockedNodes) ? 'selected' : '' }}"
                                            data-node-id="{{ $node->id }}">
                                            <div class="node-icon"><i class="fa fa-server"></i></div>
                                            <div class="node-info">
                                                <div class="node-name">{{ $node->name }}</div>
                                                <div class="node-status">{{ in_array($node->id, $blockedNodes) ? 'Blocked' : 'Click to block' }}</div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                </div>{{-- /tab-memory --}}

                {{-- Pattern Security Tab --}}
                <div class="tab-content" id="tab-security" style="padding-top: 20px;">
                    <div class="box box-default">
                        <div class="box-header with-border">
                            <h3 class="box-title"><i class="fa fa-shield"></i> Malicious Pattern Detection</h3>
                        </div>
                        <div class="box-body">
                            <p class="text-muted" style="margin-bottom: 15px;">
                                Block dangerous patterns such as download-and-execute, destructive commands, reverse shells, and other risky idioms. Active on the nodes you select below.
                            </p>
                            <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 0; flex-wrap: wrap;">
                                <span class="status-badge {{ count($securityBlockedNodes) > 0 ? 'warning' : 'disabled' }}" id="securityBadge">
                                    <i class="fa {{ count($securityBlockedNodes) > 0 ? 'fa-shield' : 'fa-times-circle' }}"></i>
                                    <span id="securityStatus">{{ count($securityBlockedNodes) > 0 ? count($securityBlockedNodes) . ' node(s) protected' : 'No nodes protected' }}</span>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="display: flex; flex-wrap: wrap;">
                        <div class="col-md-6" style="display: flex; flex-direction: column; margin-bottom: 20px;">
                            <div class="box box-default" style="flex: 1; margin-bottom: 0;">
                                <div class="box-header with-border">
                                    <h3 class="box-title"><i class="fa fa-sitemap"></i> Target Nodes</h3>
                                    <span class="text-muted" style="margin-left: 10px; font-size: 12px;">Click to toggle protection</span>
                                </div>
                                <div class="box-body">
                                    @if(count($nodes) === 0)
                                        <p class="text-muted" style="margin: 0;">No nodes registered on this panel yet.</p>
                                    @else
                                        <div class="node-grid" id="securityNodeGrid">
                                            @foreach($nodes as $node)
                                                <div class="node-card {{ in_array($node->id, $securityBlockedNodes) ? 'security-selected' : '' }}"
                                                    data-node-id="{{ $node->id }}">
                                                    <div class="node-icon"><i class="fa fa-server"></i></div>
                                                    <div class="node-info">
                                                        <div class="node-name">{{ $node->name }}</div>
                                                        <div class="node-status">{{ in_array($node->id, $securityBlockedNodes) ? 'Protected' : 'Click to protect' }}</div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" style="display: flex; flex-direction: column; margin-bottom: 20px;">
                            <div class="box box-default" style="flex: 1; margin-bottom: 0;">
                                <div class="box-header with-border">
                                    <h3 class="box-title"><i class="fa fa-list"></i> Built-in Patterns</h3>
                                    <span class="text-muted" style="margin-left: 10px; font-size: 12px;">Click a pattern to disable it</span>
                                </div>
                                <div class="box-body">
                                    <div class="pattern-chips" id="builtinPatterns">
                                        @foreach($builtinPatterns as $pattern)
                                            <span class="pattern-chip {{ in_array($pattern, $disabledBuiltins) ? 'disabled' : '' }}" data-pattern="{{ $pattern }}">
                                                <code style="background: transparent; padding: 0;">{{ $pattern }}</code>
                                            </span>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="box box-default">
                        <div class="box-header with-border">
                            <h3 class="box-title"><i class="fa fa-plus-circle"></i> Custom Patterns</h3>
                        </div>
                        <div class="box-body">
                            <p class="text-muted" style="margin-bottom: 10px;">One pattern per line. These are added on top of the built-in list.</p>
                            <textarea id="customPatterns" class="form-control" rows="5" style="font-family: monospace;" placeholder="Enter custom patterns, one per line...">@foreach($customPatterns as $pattern){{ $pattern }}
@endforeach</textarea>
                        </div>
                    </div>
                </div>{{-- /tab-security --}}

                {{-- Presets Tab --}}
                <div class="tab-content" id="tab-presets" style="padding-top: 20px;">
                    <div class="row" style="display: flex; flex-wrap: wrap;">
                        <div class="col-md-5" style="display: flex; flex-direction: column; margin-bottom: 20px;">
                            <div class="box box-default" style="flex: 1; margin-bottom: 0;">
                                <div class="box-header with-border">
                                    <h3 class="box-title">
                                        <i class="fa fa-plus" id="presetFormIcon"></i>
                                        <span id="presetFormTitle">Add Preset</span>
                                    </h3>
                                </div>
                                <div class="box-body">
                                    <div class="form-group">
                                        <label class="control-label">Preset Name</label>
                                        <input type="text" id="presetName" class="form-control" placeholder="e.g. Optimized Aikar Flags">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">Description</label>
                                        <input type="text" id="presetDesc" class="form-control" placeholder="Short description...">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">Startup Command</label>
                                        <textarea id="presetCommand" class="form-control" rows="4" style="font-family: monospace;" placeholder="The startup command text..."></textarea>
                                    </div>
                                    <button type="button" id="addPresetBtn" class="btn btn-success btn-sm">
                                        <i class="fa fa-plus"></i> Add Preset
                                    </button>
                                    <button type="button" id="cancelEditBtn" class="btn btn-default btn-sm" style="display: none; margin-left: 6px;">
                                        <i class="fa fa-times"></i> Cancel
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-7" style="display: flex; flex-direction: column; margin-bottom: 20px;">
                            <div class="box box-default" style="flex: 1; margin-bottom: 0;">
                                <div class="box-header with-border">
                                    <h3 class="box-title"><i class="fa fa-list"></i> Defined Presets</h3>
                                    <span class="text-muted" style="margin-left: 10px; font-size: 12px;">
                                        <span id="presetsListCount">{{ count($presets) }}</span> total · drag to reorder
                                    </span>
                                </div>
                                <div class="box-body">
                                    <div id="presetsList"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>{{-- /tab-presets --}}

            </div>
            <div class="box-footer">
                <span id="save-status"></span>
                <button type="button" id="save-settings" class="btn btn-success pull-right">
                    <i class="fa fa-save"></i> Save Settings
                </button>
            </div>
        </div>
    </div>
</div>

@section('footer-scripts')
    @parent
<script>
$(function() {
    var $tabs = $('.main-tab');
    var $contents = $('.tab-content');

    $tabs.on('click', function() {
        var target = $(this).data('tab');
        $tabs.removeClass('active');
        $(this).addClass('active');
        $contents.removeClass('active');
        $('#tab-' + target).addClass('active');
        history.replaceState(null, '', '#' + target);
    });

    if (window.location.hash) {
        var hash = window.location.hash.substring(1);
        var btn = document.querySelector('.main-tab[data-tab="' + hash + '"]');
        if (btn) btn.click();
    }

    var memoryNodes = [];
    var securityNodes = [];
    var disabledBuiltins = [];
    var presets = {!! json_encode($presets ?? [], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) !!};
    var totalBuiltins = {{ count($builtinPatterns) }};

    // Newline character constructed via fromCharCode so no backslash escape
    // sequence appears in this file - Blueprint's installer pipes admin views
    // through echo -e which would interpret the literal sequences as bytes.
    var LF = String.fromCharCode(10);
    var CR = String.fromCharCode(13);
    var NL_REGEX = new RegExp(CR + '?' + LF);

    $('#memoryNodeGrid .node-card.selected').each(function() {
        memoryNodes.push(parseInt($(this).data('node-id')));
    });
    $('#securityNodeGrid .node-card.security-selected').each(function() {
        securityNodes.push(parseInt($(this).data('node-id')));
    });
    $('#builtinPatterns .pattern-chip.disabled').each(function() {
        disabledBuiltins.push($(this).data('pattern'));
    });

    $('#memoryNodeGrid .node-card').on('click', function() {
        var $card = $(this);
        var id = parseInt($card.data('node-id'));
        if ($card.hasClass('selected')) {
            $card.removeClass('selected');
            $card.find('.node-status').text('Click to block');
            memoryNodes = memoryNodes.filter(function(n) { return n !== id; });
        } else {
            $card.addClass('selected');
            $card.find('.node-status').text('Blocked');
            memoryNodes.push(id);
        }
        refreshMemoryUI();
    });

    $('#securityNodeGrid .node-card').on('click', function() {
        var $card = $(this);
        var id = parseInt($card.data('node-id'));
        if ($card.hasClass('security-selected')) {
            $card.removeClass('security-selected');
            $card.find('.node-status').text('Click to protect');
            securityNodes = securityNodes.filter(function(n) { return n !== id; });
        } else {
            $card.addClass('security-selected');
            $card.find('.node-status').text('Protected');
            securityNodes.push(id);
        }
        refreshSecurityUI();
    });

    $('#builtinPatterns .pattern-chip').on('click', function() {
        var $chip = $(this);
        var p = $chip.data('pattern');
        if ($chip.hasClass('disabled')) {
            $chip.removeClass('disabled');
            disabledBuiltins = disabledBuiltins.filter(function(x) { return x !== p; });
        } else {
            $chip.addClass('disabled');
            disabledBuiltins.push(p);
        }
        refreshSecurityUI();
    });

    $('#customPatterns').on('input', function() {
        $('#customCount').text(currentCustomPatterns().length);
    });

    function currentCustomPatterns() {
        var raw = $('#customPatterns').val() || '';
        return raw.split(NL_REGEX).map(function(p) { return p.trim(); }).filter(function(p) { return p.length > 0; });
    }

    function refreshMemoryUI() {
        var count = memoryNodes.length;
        var $badge = $('#memoryBadge');
        $('#memoryNodeCount').text(count);

        if (count > 0) {
            $badge.attr('class', 'status-badge enabled');
            $badge.find('i').attr('class', 'fa fa-check-circle');
            $('#memoryStatus').text(count + ' node(s) blocked');
            $('#memoryStatusLabel').attr('class', 'label label-success').text('Active');
            $('#memoryStatusBox').removeClass('box-default').addClass('box-success');
        } else {
            $badge.attr('class', 'status-badge disabled');
            $badge.find('i').attr('class', 'fa fa-times-circle');
            $('#memoryStatus').text('No nodes blocked');
            $('#memoryStatusLabel').attr('class', 'label label-default').text('Inactive');
            $('#memoryStatusBox').removeClass('box-success').addClass('box-default');
        }
    }

    function refreshSecurityUI() {
        var count = securityNodes.length;
        var $badge = $('#securityBadge');
        $('#securityNodeCount').text(count);
        $('#builtinActiveCount').text(totalBuiltins - disabledBuiltins.length);

        if (count > 0) {
            $badge.attr('class', 'status-badge warning');
            $badge.find('i').attr('class', 'fa fa-shield');
            $('#securityStatus').text(count + ' node(s) protected');
            $('#securityStatusLabel').attr('class', 'label label-warning').text('Active');
            $('#securityStatusBox').removeClass('box-default').addClass('box-warning');
        } else {
            $badge.attr('class', 'status-badge disabled');
            $badge.find('i').attr('class', 'fa fa-times-circle');
            $('#securityStatus').text('No nodes protected');
            $('#securityStatusLabel').attr('class', 'label label-default').text('Inactive');
            $('#securityStatusBox').removeClass('box-warning').addClass('box-default');
        }
    }

    function escapeHtml(str) {
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }

    var editingIndex = -1;
    var dragSrcIdx = -1;

    // Inline SVGs so the icons always render even if FontAwesome isn't loaded.
    var PENCIL_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/></svg>';
    var GRIP_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="14" viewBox="0 0 6 10" fill="currentColor" aria-hidden="true"><circle cx="1.5" cy="1.5" r="1"/><circle cx="4.5" cy="1.5" r="1"/><circle cx="1.5" cy="5" r="1"/><circle cx="4.5" cy="5" r="1"/><circle cx="1.5" cy="8.5" r="1"/><circle cx="4.5" cy="8.5" r="1"/></svg>';

    function renderPresets() {
        var $container = $('#presetsList');
        $('#presetsCount').text(presets.length);
        $('#presetsListCount').text(presets.length);
        var $label = $('#presetsStatusLabel');
        var $box = $('#presetsStatusBox');
        if ($label.length) {
            $label.text(presets.length + ' defined');
            $label.attr('class', 'label ' + (presets.length > 0 ? 'label-primary' : 'label-default'));
        }
        if ($box.length) {
            $box.removeClass('box-default box-primary');
            $box.addClass(presets.length > 0 ? 'box-primary' : 'box-default');
        }

        $container.empty();
        if (presets.length === 0) {
            $container.html('<div class="preset-empty">No presets defined yet. Use the form on the left to add one.</div>');
            return;
        }
        presets.forEach(function(p, idx) {
            var cmd = p.command || '';
            var cmdPreview = cmd.length > 240 ? cmd.substring(0, 240) + '...' : cmd;
            var editingCls = (idx === editingIndex) ? ' editing' : '';
            var html =
                '<div class="preset-item' + editingCls + '" draggable="true" data-index="' + idx + '">' +
                    '<div class="preset-drag" title="Drag to reorder">' + GRIP_SVG + '</div>' +
                    '<div class="preset-meta">' +
                        '<h4>' + escapeHtml(p.name) + '</h4>' +
                        '<p class="preset-desc">' + escapeHtml(p.description || 'No description') + '</p>' +
                        '<code class="preset-cmd">' + escapeHtml(cmdPreview) + '</code>' +
                    '</div>' +
                    '<div class="preset-actions">' +
                        '<button type="button" class="btn btn-warning btn-xs edit-preset" data-index="' + idx + '" title="Edit preset" style="color: #fff;">' +
                            PENCIL_SVG +
                        '</button>' +
                        '<button type="button" class="btn btn-danger btn-xs delete-preset" data-index="' + idx + '" title="Delete preset">' +
                            '<i class="fa fa-trash"></i>' +
                        '</button>' +
                    '</div>' +
                '</div>';
            $container.append(html);
        });

        $container.find('.delete-preset').on('click', function(e) {
            e.stopPropagation();
            var idx = parseInt($(this).data('index'));
            presets.splice(idx, 1);
            if (editingIndex === idx) cancelEdit();
            else if (editingIndex > idx) editingIndex--;
            renderPresets();
        });

        $container.find('.edit-preset').on('click', function(e) {
            e.stopPropagation();
            beginEdit(parseInt($(this).data('index')));
        });

        attachDragHandlers($container);
    }

    function attachDragHandlers($container) {
        $container.find('.preset-item').each(function() {
            var el = this;
            el.addEventListener('dragstart', function(e) {
                dragSrcIdx = parseInt(el.getAttribute('data-index'));
                el.classList.add('dragging', 'drag-ghost');
                if (e.dataTransfer) {
                    e.dataTransfer.effectAllowed = 'move';
                    try { e.dataTransfer.setData('text/plain', String(dragSrcIdx)); } catch (_) {}
                }
            });
            el.addEventListener('dragend', function() {
                el.classList.remove('dragging', 'drag-ghost');
                $container.find('.preset-item').removeClass('drag-over');
                dragSrcIdx = -1;
            });
            el.addEventListener('dragover', function(e) {
                if (dragSrcIdx < 0) return;
                e.preventDefault();
                if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
                $container.find('.preset-item').each(function() {
                    if (this !== el) this.classList.remove('drag-over');
                });
                if (parseInt(el.getAttribute('data-index')) !== dragSrcIdx) {
                    el.classList.add('drag-over');
                }
            });
            el.addEventListener('dragleave', function() {
                el.classList.remove('drag-over');
            });
            el.addEventListener('drop', function(e) {
                e.preventDefault();
                var dstIdx = parseInt(el.getAttribute('data-index'));
                if (dragSrcIdx < 0 || dragSrcIdx === dstIdx) return;
                var moved = presets.splice(dragSrcIdx, 1)[0];
                presets.splice(dstIdx, 0, moved);
                if (editingIndex === dragSrcIdx) editingIndex = dstIdx;
                else if (dragSrcIdx < editingIndex && dstIdx >= editingIndex) editingIndex--;
                else if (dragSrcIdx > editingIndex && dstIdx <= editingIndex) editingIndex++;
                dragSrcIdx = -1;
                renderPresets();
            });
        });
    }

    var $addPresetBtn = $('#addPresetBtn');
    var $cancelEditBtn = $('#cancelEditBtn');
    var $formTitle = $('#presetFormTitle');
    var $formIcon = $('#presetFormIcon');

    function beginEdit(idx) {
        if (idx < 0 || idx >= presets.length) return;
        editingIndex = idx;
        var p = presets[idx];
        $('#presetName').val(p.name || '');
        $('#presetDesc').val(p.description || '');
        $('#presetCommand').val(p.command || '');
        $formTitle.text('Edit Preset');
        $formIcon.attr('class', 'fa fa-pencil');
        $addPresetBtn.html('<i class="fa fa-save"></i> Save Changes');
        $addPresetBtn.removeClass('btn-success').addClass('btn-warning');
        $cancelEditBtn.show();
        renderPresets();
        $('#presetName').focus();
    }

    function cancelEdit() {
        editingIndex = -1;
        $('#presetName').val('');
        $('#presetDesc').val('');
        $('#presetCommand').val('');
        $formTitle.text('Add Preset');
        $formIcon.attr('class', 'fa fa-plus');
        $addPresetBtn.html('<i class="fa fa-plus"></i> Add Preset');
        $addPresetBtn.removeClass('btn-warning').addClass('btn-success');
        $cancelEditBtn.hide();
        renderPresets();
    }

    $cancelEditBtn.on('click', cancelEdit);

    $addPresetBtn.on('click', function() {
        var name = $('#presetName').val().trim();
        var desc = $('#presetDesc').val().trim();
        var cmd = $('#presetCommand').val().trim();
        if (!name || !cmd) {
            alert('Name and Command are required.');
            return;
        }
        if (editingIndex >= 0 && editingIndex < presets.length) {
            presets[editingIndex] = { name: name, description: desc, command: cmd };
            cancelEdit();
        } else {
            presets.push({ name: name, description: desc, command: cmd });
            $('#presetName').val('');
            $('#presetDesc').val('');
            $('#presetCommand').val('');
            renderPresets();
        }
    });

    renderPresets();

    var $saveBtn = $('#save-settings');
    var $saveStatus = $('#save-status');

    $saveBtn.on('click', function() {
        $saveBtn.prop('disabled', true);
        $saveStatus.text('Saving...').css('color', '#f0ad4e');

        $.ajax({
            url: '{{ $root }}',
            method: 'POST',
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            },
            data: JSON.stringify({
                blocked_nodes: memoryNodes,
                security_blocked_nodes: securityNodes,
                custom_patterns: currentCustomPatterns(),
                disabled_builtin_patterns: disabledBuiltins,
                presets: presets
            })
        })
        .done(function() {
            $saveStatus.html('<i class="fa fa-check-circle"></i> Saved').css('color', '#5cb85c');
            setTimeout(function() { $saveStatus.text(''); }, 3000);
        })
        .fail(function(xhr) {
            var msg = (xhr.responseJSON && xhr.responseJSON.error) ? xhr.responseJSON.error : ('HTTP ' + xhr.status);
            $saveStatus.html('<i class="fa fa-exclamation-circle"></i> Error: ' + msg).css('color', '#d9534f');
        })
        .always(function() {
            $saveBtn.prop('disabled', false);
        });
    });
});
</script>
@endsection
@endsection