@extends('admin.firewallplus.layout', ['fwpTab' => 'presets'])

@section('fwp_title')
    Firewall-Plus: Presets
@endsection

@section('fwp_subtitle')
    Manage client-visible firewall presets
@endsection

@section('fwp')
@if (session('success'))
    <div class="alert alert-success alert-dismissible">
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
        {{ session('success') }}
    </div>
@endif

@if (session('warnings'))
    <div class="alert alert-warning alert-dismissible">
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
        <strong>Saved with warnings:</strong>
        <ul style="margin-bottom:0;">
            @foreach ((array) session('warnings') as $message)<li>{{ $message }}</li>@endforeach
        </ul>
    </div>
@endif

@if ($errors->any())
    <div class="alert alert-danger">
        <strong>Could not save preset:</strong>
        <ul style="margin-bottom:0;">
            @foreach ($errors->all() as $message)<li>{{ $message }}</li>@endforeach
        </ul>
    </div>
@endif

@php
    $activePane = old('preset_id') ? 'edit' : (old('create_name') || old('create_rules_json') ? 'add' : 'edit');
@endphp

@include('admin.firewallplus.partials.json-editor-styles')

<div class="row">
    <div class="col-xs-12">
        <div class="box box-primary fwp-tabs-box">
            <div class="box-header with-border clearfix">
                <ul class="nav nav-tabs fwp-sub-tabs pull-left" role="tablist">
                    <li class="{{ $activePane === 'edit' ? 'active' : '' }}">
                        <a href="#fwp-presets-edit" data-toggle="tab" role="tab">
                            <i class="fa fa-pencil"></i> Edit presets
                        </a>
                    </li>
                    <li class="{{ $activePane === 'add' ? 'active' : '' }}">
                        <a href="#fwp-presets-add" data-toggle="tab" role="tab">
                            <i class="fa fa-plus-circle"></i> Add preset
                        </a>
                    </li>
                </ul>
                <div class="pull-right">
                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#fwp-preset-docs-modal">
                        <i class="fa fa-book"></i> Docs
                    </button>
                </div>
            </div>

            <div class="tab-content">
                <div role="tabpanel" class="tab-pane {{ $activePane === 'edit' ? 'active' : '' }}" id="fwp-presets-edit">
                    <div class="box-body">
                        @if ($presets->isEmpty())
                            <p class="text-muted" style="margin-bottom:0;">No global presets found.</p>
                        @else
                            <p class="text-muted" style="margin-bottom:12px;font-size:12px;">
                                <i class="fa fa-arrows" style="margin-right:4px;"></i>
                                Drag the <strong><i class="fa fa-bars"></i></strong> handle to reorder presets. Order is reflected in the client preset popup.
                            </p>
                            <div class="panel-group" id="fwp-presets-accordion">
                                @foreach ($presets as $preset)
                                    @php
                                        $rules = is_array($preset->rules_json) ? $preset->rules_json : [];
                                        $rulesJson = json_encode($rules, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
                                        $isEditingOld = ((int) old('preset_id')) === (int) $preset->id;
                                        $open = $isEditingOld || ($loop->first && !old('preset_id'));
                                        $collapseId = 'fwp-preset-' . $preset->id;
                                    @endphp
                                    <div class="panel panel-default" data-preset-id="{{ $preset->id }}">
                                        <div class="panel-heading" style="padding:0;display:flex;align-items:stretch;">
                                            <span class="fwp-drag-handle" title="Drag to reorder"
                                                  style="display:flex;align-items:center;padding:0 12px;cursor:grab;color:rgba(255,255,255,0.4);font-size:14px;border-right:1px solid rgba(255,255,255,0.08);">
                                                <i class="fa fa-bars"></i>
                                            </span>
                                            <a
                                                class="fwp-bound-toggle {{ $open ? '' : 'collapsed' }}"
                                                role="button"
                                                data-toggle="collapse"
                                                data-parent="#fwp-presets-accordion"
                                                href="#{{ $collapseId }}"
                                                aria-expanded="{{ $open ? 'true' : 'false' }}"
                                                style="display:block;padding:10px 14px;flex:1;"
                                            >
                                                <i class="fa fa-chevron-down fwp-bound-chevron pull-right" style="margin-top:2px;transition:transform .2s;"></i>
                                                <strong>{{ $preset->name }}</strong>
                                                <span class="label label-{{ $preset->is_system ? 'success' : 'default' }}" style="margin-left:8px;">
                                                    {{ $preset->is_system ? 'Client visible' : 'Hidden' }}
                                                </span>
                                                <small class="text-muted" style="margin-left:8px;">
                                                    {{ count($rules) }} rule{{ count($rules) === 1 ? '' : 's' }} &middot; Updated {{ optional($preset->updated_at)->diffForHumans() ?? 'unknown' }}
                                                </small>
                                            </a>
                                        </div>
                                        <div id="{{ $collapseId }}" class="panel-collapse collapse {{ $open ? 'in' : '' }}">
                                            <div class="panel-body">
                                                <form method="POST" action="{{ route('admin.firewallplus.presets.update', $preset) }}">
                                                    @csrf
                                                    @method('PUT')
                                                    <input type="hidden" name="preset_id" value="{{ $preset->id }}">

                                                    <div class="row">
                                                        <div class="col-md-4 form-group">
                                                            <label>Name</label>
                                                            <input
                                                                type="text"
                                                                name="name"
                                                                class="form-control"
                                                                value="{{ $isEditingOld ? old('name', $preset->name) : $preset->name }}"
                                                                maxlength="120"
                                                                required
                                                            >
                                                        </div>
                                                        <div class="col-md-8 form-group">
                                                            <label>Description</label>
                                                            <input
                                                                type="text"
                                                                name="description"
                                                                class="form-control"
                                                                value="{{ $isEditingOld ? old('description', $preset->description) : $preset->description }}"
                                                                maxlength="2000"
                                                            >
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-4 form-group">
                                                            <label>Visibility</label>
                                                            @php
                                                                $visibilityValue = $isEditingOld
                                                                    ? old('is_system', (string) ((int) $preset->is_system))
                                                                    : (string) ((int) $preset->is_system);
                                                            @endphp
                                                            <select name="is_system" class="form-control">
                                                                <option value="1" {{ $visibilityValue === '1' ? 'selected' : '' }}>
                                                                    Visible in client preset popup
                                                                </option>
                                                                <option value="0" {{ $visibilityValue === '0' ? 'selected' : '' }}>
                                                                    Hidden from client popup
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label>Rules JSON</label>
                                                        @include('admin.firewallplus.partials.json-editor', [
                                                            'name' => 'rules_json',
                                                            'value' => $isEditingOld ? old('rules_json', $rulesJson) : $rulesJson,
                                                            'required' => true,
                                                            'id' => 'fwp-preset-rules-' . $preset->id,
                                                        ])
                                                    </div>

                                                    <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px;">
                                                        <button type="submit" class="btn btn-primary btn-sm">
                                                            <i class="fa fa-save"></i> Save changes
                                                        </button>
                                                </form>

                                                        <form
                                                            method="POST"
                                                            action="{{ route('admin.firewallplus.presets.destroy', $preset) }}"
                                                            onsubmit="return confirm('Delete preset \'{{ addslashes($preset->name) }}\'? This cannot be undone.');"
                                                            style="display:inline;"
                                                        >
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-danger btn-sm">
                                                                <i class="fa fa-trash"></i> Delete preset
                                                            </button>
                                                        </form>
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>

                <div role="tabpanel" class="tab-pane {{ $activePane === 'add' ? 'active' : '' }}" id="fwp-presets-add">
                    <form method="POST" action="{{ route('admin.firewallplus.presets.store') }}">
                        @csrf
                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>Name</label>
                                    <input
                                        type="text"
                                        name="create_name"
                                        class="form-control"
                                        value="{{ old('create_name') }}"
                                        maxlength="120"
                                        placeholder="Example: Anti-Bot Focused"
                                        required
                                    >
                                </div>
                                <div class="col-md-8 form-group">
                                    <label>Description</label>
                                    <input
                                        type="text"
                                        name="create_description"
                                        class="form-control"
                                        value="{{ old('create_description') }}"
                                        maxlength="2000"
                                        placeholder="Shown to clients in the Presets popup."
                                    >
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>Visibility</label>
                                    <select name="create_is_system" class="form-control">
                                        <option value="1" {{ old('create_is_system', '1') === '1' ? 'selected' : '' }}>
                                            Visible in client preset popup
                                        </option>
                                        <option value="0" {{ old('create_is_system', '1') === '0' ? 'selected' : '' }}>
                                            Hidden from client popup
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group" style="margin-bottom:0;">
                                <label>Rules JSON</label>
                                @include('admin.firewallplus.partials.json-editor', [
                                    'name' => 'create_rules_json',
                                    'value' => old('create_rules_json', $create_rules_json),
                                    'required' => true,
                                    'id' => 'fwp-preset-create-rules',
                                ])
                                <p class="help-block" style="margin-bottom:0;margin-top:8px;">
                                    Must be a JSON array of rule templates. Each item needs at minimum:
                                    <code>rule_type</code>, and usually <code>scope</code>, <code>protocol</code>, <code>value_json</code>.
                                    For <code>scope: "port"</code>, include a numeric <code>port</code>.
                                </p>
                            </div>
                        </div>
                        <div class="box-footer" style="padding:10px 15px;">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-save"></i> Create preset
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade fwp-modal" id="fwp-preset-docs-modal" tabindex="-1" role="dialog" aria-labelledby="fwpPresetDocsTitle">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
                <h4 class="modal-title" id="fwpPresetDocsTitle">
                    <i class="fa fa-book"></i> Preset docs and JSON format
                </h4>
            </div>
            <div class="modal-body">
                <h4 style="margin-top:0;">Top-level format</h4>
                <p class="text-muted">
                    A preset must be a <strong>JSON array</strong> of rule objects.
                </p>
<pre style="white-space:pre-wrap;word-break:break-word;">[
  {
    "rule_type": "stateful_tracking",
    "scope": "global",
    "protocol": "both",
    "value_json": { "enabled": true }
  },
  {
    "rule_type": "syn_limit",
    "scope": "port",
    "port": 25565,
    "protocol": "tcp",
    "value_json": { "limit": "50/second", "burst": 100 }
  }
]</pre>

                <h4>How scope works: global vs port</h4>
                <ul>
                    <li><code>"scope": "global"</code> - applies to all server allocations/ports.</li>
                    <li><code>"scope": "port"</code> - applies only to one specific port, and <code>port</code> is required.</li>
                    <li>When <code>scope</code> is <code>port</code>, port is <strong>not auto-filled</strong>. You must set a valid port on each port-scoped rule.</li>
                    <li>If a port-scoped rule has an invalid/missing port, firewall apply is expected to fail that rule validation.</li>
                </ul>

                <h4>Required keys per rule</h4>
                <ul>
                    <li><code>rule_type</code> (string) - internal rule key.</li>
                    <li><code>scope</code> - <code>global</code> or <code>port</code>.</li>
                    <li><code>protocol</code> - <code>both</code>, <code>tcp</code>, or <code>udp</code>.</li>
                    <li><code>value_json</code> (object) - rule-specific settings.</li>
                    <li><code>port</code> (number) - required only when <code>scope</code> is <code>port</code>.</li>
                </ul>

                <h4>Common value_json examples</h4>
                <ul>
                    <li><code>syn_limit</code>/<code>tcp_limit</code>/<code>udp_limit</code>: <code>{"limit":"500/second","burst":1000}</code></li>
                    <li><code>connection_limit</code>: <code>{"max_concurrent": 25}</code></li>
                    <li><code>packet_size_filter</code>: <code>{"min_size":20,"max_size":1500}</code></li>
                    <li><code>ttl_filter</code>: <code>{"min_ttl":10,"max_ttl":255}</code></li>
                    <li><code>stateful_tracking</code>/<code>fragmented_drop</code>: <code>{"enabled":true}</code></li>
                </ul>

                <h4>Rule type examples (global and port)</h4>
                <p class="text-muted">
                    Use global for broad baseline protection, and port scope when you need a stricter rule on one service port.
                </p>
<pre style="white-space:pre-wrap;word-break:break-word;">[
  { "rule_type":"stateful_tracking", "scope":"global", "protocol":"both", "value_json":{"enabled":true} },
  { "rule_type":"fragmented_drop", "scope":"global", "protocol":"both", "value_json":{"enabled":true} },
  { "rule_type":"packet_size_filter", "scope":"global", "protocol":"both", "value_json":{"min_size":20,"max_size":1500} },
  { "rule_type":"ttl_filter", "scope":"global", "protocol":"both", "value_json":{"min_ttl":10,"max_ttl":255} },

  { "rule_type":"syn_limit", "scope":"global", "protocol":"tcp", "value_json":{"limit":"50/second","burst":100} },
  { "rule_type":"source_packet_limit", "scope":"global", "protocol":"both", "value_json":{"limit":"500/second","burst":1000} },
  { "rule_type":"global_packet_limit", "scope":"global", "protocol":"both", "value_json":{"limit":"5000/second","burst":10000} },
  { "rule_type":"new_conn_limit", "scope":"global", "protocol":"tcp", "value_json":{"limit":"30/second","burst":60} },
  { "rule_type":"connection_limit", "scope":"global", "protocol":"both", "value_json":{"max_concurrent":25} },

  { "rule_type":"syn_limit", "scope":"port", "port":25565, "protocol":"tcp", "value_json":{"limit":"35/second","burst":70} },
  { "rule_type":"source_packet_limit", "scope":"port", "port":25565, "protocol":"both", "value_json":{"limit":"400/second","burst":800} },
  { "rule_type":"connection_limit", "scope":"port", "port":25565, "protocol":"both", "value_json":{"max_concurrent":18} }
]</pre>

                <h4>Minimal templates by rule kind</h4>
                <ul>
                    <li><strong>Boolean rules</strong> (<code>stateful_tracking</code>, <code>fragmented_drop</code>): <code>{"enabled":true}</code></li>
                    <li><strong>Rate rules</strong> (<code>syn_limit</code>, <code>source_packet_limit</code>, <code>global_packet_limit</code>, <code>new_conn_limit</code>): <code>{"limit":"N/second","burst":M}</code></li>
                    <li><strong>Connection rules</strong> (<code>connection_limit</code>): <code>{"max_concurrent":N}</code></li>
                    <li><strong>Range rules</strong> (<code>packet_size_filter</code>, <code>ttl_filter</code>): min/max pairs</li>
                </ul>

                <p class="text-muted" style="margin-bottom:0;">
                    Tip: duplicate an existing preset in the Edit tab, rename it, then tweak JSON incrementally.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<style>
    #fwp-presets-accordion .fwp-drag-handle {
        user-select: none;
        -webkit-user-select: none;
        touch-action: none;
        flex-shrink: 0;
    }
    #fwp-presets-accordion.fwp-presets-sorting,
    #fwp-presets-accordion.fwp-presets-sorting * {
        user-select: none !important;
        -webkit-user-select: none !important;
        cursor: grabbing !important;
    }
    .fwp-sortable-ghost {
        opacity: 0.45;
        background: rgba(0, 172, 193, 0.15) !important;
    }
    .fwp-sortable-chosen {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }
    .fwp-drag-handle:hover {
        color: rgba(255, 255, 255, 0.75) !important;
    }
    .fwp-drag-handle:active {
        cursor: grabbing !important;
    }
</style>
@endsection

@section('footer-scripts')
@parent
@include('admin.firewallplus.partials.json-editor-scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.3/Sortable.min.js"></script>
<script>
(function () {
    if (window.jQuery) {
        var hash = window.location.hash;
        if (hash === '#fwp-presets-add' || hash === '#fwp-presets-edit') {
            jQuery('a[href="' + hash + '"]').tab('show');
        }
    }

    function initPresetSortable() {
        var accordion = document.getElementById('fwp-presets-accordion');
        if (!accordion || typeof Sortable === 'undefined') return;
        if (accordion.dataset.sortableInit === '1') return;
        accordion.dataset.sortableInit = '1';

        var reorderUrl = '{{ route('admin.firewallplus.presets.reorder') }}';
        var csrf = '{{ csrf_token() }}';
        var saveTimer = null;

        accordion.querySelectorAll('.fwp-drag-handle').forEach(function (handle) {
            handle.addEventListener('mousedown', function (e) {
                e.preventDefault();
            });
            handle.addEventListener('dragstart', function (e) {
                e.preventDefault();
            });
        });

        Sortable.create(accordion, {
            handle: '.fwp-drag-handle',
            draggable: '.panel.panel-default',
            animation: 150,
            ghostClass: 'fwp-sortable-ghost',
            chosenClass: 'fwp-sortable-chosen',
            forceFallback: true,
            fallbackTolerance: 3,
            onStart: function () {
                accordion.classList.add('fwp-presets-sorting');
            },
            onEnd: function () {
                accordion.classList.remove('fwp-presets-sorting');
                clearTimeout(saveTimer);
                saveTimer = setTimeout(function () {
                    var ids = Array.from(accordion.querySelectorAll('.panel.panel-default[data-preset-id]'))
                        .map(function (el) { return parseInt(el.getAttribute('data-preset-id'), 10); })
                        .filter(function (id) { return !isNaN(id); });

                    fetch(reorderUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrf,
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({ ids: ids }),
                    }).catch(function (err) {
                        console.warn('[FWP] Preset reorder save failed:', err);
                    });
                }, 400);
            },
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initPresetSortable);
    } else {
        initPresetSortable();
    }

    if (window.fwpInitJsonEditors) {
        window.fwpInitJsonEditors(document);
    }
})();
</script>
@endsection