@extends('layouts.app')

@push('style')
<style>
    #geo-map { width:100%; height:460px; }
    .jvectormap-container { width:100%; height:100%; }
    .geo-legend { display:flex; gap:18px; font-size:.82rem; }
    .geo-legend-dot { width:14px; height:14px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:middle; }
    #geo-tooltip {
        position:fixed; background:#1e293b; color:#fff; padding:7px 12px;
        border-radius:8px; font-size:.8rem; pointer-events:none; display:none;
        z-index:9999; box-shadow:0 4px 16px rgba(0,0,0,.3);
    }
    .geo-action-bar {
        display:flex; align-items:center; gap:10px; flex-wrap:wrap;
        padding:14px 18px; border-top:1px solid #e8ecf0;
        background:#f8fafc; border-radius:0 0 12px 12px;
    }
    #saveBtn.saving { opacity:.6; pointer-events:none; }
</style>
@endpush

@section('content')

{{-- Page header --}}
<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
    <div>
        <h4 class="mb-0 fw-bold d-flex align-items-center gap-2">
            <i data-lucide="globe" style="width:20px;height:20px;"></i> Geo Firewall
        </h4>
        <div class="text-secondary small mt-1">Click countries on the map to toggle allow/block. Private ranges are always bypassed.</div>
    </div>
    <div class="d-flex align-items-center gap-2 mt-2 mt-md-0">
        <a href="{{ route('firewall.geo') }}" class="btn btn-outline-secondary btn-sm">
            <i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Reload
        </a>
    </div>
</div>

@if (session('status'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i data-lucide="check-circle" style="width:15px;height:15px;"></i> {{ session('status') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif
@if ($errors->any())
    <div class="alert alert-danger">
        @foreach ($errors->all() as $e)<div>{{ $e }}</div>@endforeach
    </div>
@endif

{{-- KPI cards --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="ext-summary-card d-flex align-items-center gap-3">
            @php $isWhitelist = $mode === 'whitelist'; $isBlacklist = $mode === 'blacklist'; @endphp
            <div class="ext-summary-icon" style="background:{{ $isWhitelist ? 'rgba(34,197,94,.1)' : ($isBlacklist ? 'rgba(239,68,68,.1)' : 'rgba(100,116,139,.1)') }};">
                <i data-lucide="{{ $isWhitelist ? 'shield-check' : ($isBlacklist ? 'shield-x' : 'shield') }}" style="width:20px;height:20px;color:{{ $isWhitelist ? '#16a34a' : ($isBlacklist ? '#dc2626' : '#64748b') }};"></i>
            </div>
            <div>
                <div class="ext-summary-label">Filter Mode</div>
                <div class="ext-summary-value text-capitalize {{ $isWhitelist ? 'text-success' : ($isBlacklist ? 'text-danger' : '') }}" id="kpiMode">{{ $mode ?: 'Inactive' }}</div>
                <div class="ext-summary-sub">{{ $isWhitelist ? 'Only allowed countries connect' : ($isBlacklist ? 'Listed countries are blocked' : 'No filter active') }}</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="ext-summary-card d-flex align-items-center gap-3">
            <div class="ext-summary-icon" style="background:rgba(34,197,94,.1);">
                <i data-lucide="globe" style="width:20px;height:20px;color:#16a34a;"></i>
            </div>
            <div>
                <div class="ext-summary-label">Allowed Countries</div>
                <div class="ext-summary-value text-success" id="kpiAllow">{{ $allowCount }}</div>
                <div class="ext-summary-sub">Permitted to access</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="ext-summary-card d-flex align-items-center gap-3">
            <div class="ext-summary-icon" style="background:rgba(239,68,68,.1);">
                <i data-lucide="ban" style="width:20px;height:20px;color:#dc2626;"></i>
            </div>
            <div>
                <div class="ext-summary-label">Blocked Countries</div>
                <div class="ext-summary-value text-danger" id="kpiBlock">{{ $blockCount }}</div>
                <div class="ext-summary-sub">Explicitly blocked</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="ext-summary-card d-flex align-items-center gap-3">
            <div class="ext-summary-icon" style="background:{{ $hooked ? 'rgba(34,197,94,.1)' : 'rgba(245,158,11,.1)' }};">
                <i data-lucide="activity" style="width:20px;height:20px;color:{{ $hooked ? '#16a34a' : '#d97706' }};"></i>
            </div>
            <div>
                <div class="ext-summary-label">Firewall Status</div>
                <div class="ext-summary-value {{ $hooked ? 'text-success' : 'text-warning' }} d-flex align-items-center gap-1">
                    {{ $hooked ? 'Active' : 'Inactive' }}
                    <span style="width:8px;height:8px;border-radius:50%;display:inline-block;background:{{ $hooked ? '#22c55e' : '#f59e0b' }};"></span>
                </div>
                <div class="ext-summary-sub">{{ $chainExists ? 'Rules are enforced' : 'Rules not yet applied' }}</div>
            </div>
        </div>
    </div>
</div>

{{-- Interactive Map Card --}}
<div class="card mb-4">
    <div class="card-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-3">
            <span class="fw-semibold">World Map</span>
            <div class="geo-legend">
                <span><span class="geo-legend-dot" style="background:#22c55e;"></span>Allowed</span>
                <span><span class="geo-legend-dot" style="background:#ef4444;"></span>Blocked</span>
                <span><span class="geo-legend-dot" style="background:#cbd5e1;"></span>No rule</span>
            </div>
        </div>
        <div class="d-flex align-items-center gap-2">
            <span class="text-secondary small">Click a country to toggle · Right-click to clear</span>
        </div>
    </div>
    <div class="card-body p-0" style="background:#f8fafc;">
        <div id="geo-map"></div>
    </div>
    <div class="geo-action-bar">
        <button class="btn btn-sm btn-outline-danger" id="blockAllBtn">
            <i data-lucide="globe" style="width:14px;height:14px;"></i> Block All
        </button>
        <button class="btn btn-sm btn-outline-success" id="allowAllBtn">
            <i data-lucide="globe" style="width:14px;height:14px;"></i> Allow All
        </button>
        <button class="btn btn-sm btn-outline-secondary" id="clearAllBtn">
            <i data-lucide="x" style="width:14px;height:14px;"></i> Clear All
        </button>
        <div class="ms-auto d-flex align-items-center gap-2">
            <span class="text-secondary small" id="pendingNote" style="display:none;">
                <i data-lucide="circle" style="width:8px;height:8px;fill:#f59e0b;color:#f59e0b;"></i> Unsaved changes
            </span>
            <button class="btn btn-sm btn-success" id="saveApplyBtn" title="Saves rules to database and pushes to nftables firewall">
                <i data-lucide="zap" style="width:14px;height:14px;"></i> Save &amp; Apply
            </button>
        </div>
    </div>
</div>

{{-- Active Rules Table --}}
<div class="card mb-4">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span class="fw-semibold">Active Rules</span>
        <span class="badge bg-secondary" id="rulesCount">{{ $countries->count() }}</span>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0" id="rulesTable">
            <thead>
                <tr>
                    <th>Country</th>
                    <th>Code</th>
                    <th>Action</th>
                    <th class="text-end">Remove</th>
                </tr>
            </thead>
            <tbody id="rulesBody">
                @forelse ($countries as $c)
                <tr data-code="{{ strtoupper($c->country_code) }}">
                    <td>{{ $c->country_name }}</td>
                    <td class="font-monospace">{{ strtoupper($c->country_code) }}</td>
                    <td><span class="badge {{ $c->action === 'allow' ? 'bg-success' : 'bg-danger' }}">{{ strtoupper($c->action) }}</span></td>
                    <td class="text-end">
                        <button class="btn btn-outline-danger btn-sm" onclick="removeCountry('{{ strtoupper($c->country_code) }}')">&times;</button>
                    </td>
                </tr>
                @empty
                <tr id="emptyRow"><td colspan="4" class="text-center text-secondary py-3">No rules yet — click countries on the map.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>


@if (session('geo_debug'))
<div class="card mb-3 border-warning">
    <div class="card-header">Last Apply Debug</div>
    <div class="card-body"><pre class="mb-0 small" style="white-space:pre-wrap;">{{ session('geo_debug') }}</pre></div>
</div>
@endif

{{-- Hidden tooltip --}}
<div id="geo-tooltip"></div>

@push('plugin-scripts')
{{-- jQuery (required by jVectorMap) --}}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
{{-- jVectorMap core + world-mill map data (ika.jvectormap bundles both) --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ika.jvectormap@1.0.0/jquery-jvectormap-1.2.2.css">
<script src="https://cdn.jsdelivr.net/npm/ika.jvectormap@1.0.0/jquery-jvectormap-1.2.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ika.jvectormap@1.0.0/jquery-jvectormap-world-mill-en.js"></script>
@endpush

@push('custom-scripts')
<script>
(function () {
    /* ── Seed state from PHP ── */
    const SAVED = @json(
        $countries->mapWithKeys(fn($c) => [strtoupper($c->country_code) => [
            'name'   => $c->country_name,
            'action' => $c->action,
        ]])
    );

    /* Working copy — code => 'allow'|'block'|null */
    const state   = {};   /* code => 'allow'|'block' */
    const names   = {};   /* code => display name    */
    let   dirty   = false;

    Object.entries(SAVED).forEach(([code, v]) => {
        state[code] = v.action;
        names[code] = v.name;
    });

    /* ── Colours ── */
    const COLOR = { allow: '#22c55e', block: '#ef4444', none: '#cbd5e1' };

    function buildSeriesValues() {
        const v = {};
        Object.entries(state).forEach(([c, a]) => { v[c] = a === 'allow' ? 1 : 2; });
        return v;
    }

    function buildColorScale() {
        /* jVectorMap uses an array scale mapped 1→2 */
        return { scale: [COLOR.allow, COLOR.block], min: 1, max: 2 };
    }

    /* ── Init map ── */
    $('#geo-map').vectorMap({
        map: 'world_mill_en',
        backgroundColor: '#f8fafc',
        regionStyle: {
            initial:  { fill: COLOR.none, stroke: '#fff', strokeWidth: 0.5 },
            hover:    { fillOpacity: 0.8, cursor: 'pointer' },
            selected: {},
        },
        series: {
            regions: [{
                values:     buildSeriesValues(),
                scale:      [COLOR.allow, COLOR.block],
                normalizeFunction: 'linear',
                min: 1, max: 2,
            }],
        },
        onRegionTipShow(e, label, code) {
            const a = state[code];
            const badge = a === 'allow'
                ? '<span style="color:#22c55e;font-weight:700;">ALLOWED</span>'
                : a === 'block'
                ? '<span style="color:#ef4444;font-weight:700;">BLOCKED</span>'
                : '<span style="color:#94a3b8;">No rule</span>';
            label.html(`<strong>${label.html()}</strong> (${code}) &nbsp; ${badge}`);
        },
        onRegionClick(e, code) {
            const cur = state[code] || null;
            /* Cycle: none → block → allow → none */
            if (!cur)            state[code] = 'block';
            else if (cur === 'block') state[code] = 'allow';
            else                 delete state[code];

            /* Store name from map label */
            if (state[code]) {
                names[code] = names[code] || $('#geo-map').vectorMap('get','mapObject').getRegionName(code);
            }
            refreshMap();
            refreshTable();
            markDirty();
        },
    });

    const mapObj = () => $('#geo-map').vectorMap('get', 'mapObject');

    function refreshMap() {
        mapObj().series.regions[0].setValues(buildSeriesValues());
        /* Reset un-set regions to none colour */
        const all = mapObj().regions;
        Object.keys(all).forEach(code => {
            if (!state[code]) {
                all[code].element.attr({ fill: COLOR.none });
            }
        });
    }

    /* ── Table helpers ── */
    function refreshTable() {
        const tbody  = document.getElementById('rulesBody');
        const codes  = Object.keys(state).sort();
        tbody.innerHTML = '';
        if (codes.length === 0) {
            tbody.innerHTML = '<tr id="emptyRow"><td colspan="4" class="text-center text-secondary py-3">No rules yet — click countries on the map.</td></tr>';
        } else {
            codes.forEach(code => {
                const a   = state[code];
                const nm  = names[code] || code;
                const row = document.createElement('tr');
                row.dataset.code = code;
                row.innerHTML = `
                    <td>${nm}</td>
                    <td class="font-monospace">${code}</td>
                    <td><span class="badge ${a==='allow'?'bg-success':'bg-danger'}">${a.toUpperCase()}</span></td>
                    <td class="text-end"><button class="btn btn-outline-danger btn-sm" onclick="removeCountry('${code}')">&times;</button></td>`;
                tbody.appendChild(row);
            });
        }
        document.getElementById('rulesCount').textContent = codes.length;
        updateKPIs();
    }

    function updateKPIs() {
        const allow = Object.values(state).filter(v=>v==='allow').length;
        const block = Object.values(state).filter(v=>v==='block').length;
        document.getElementById('kpiAllow').textContent = allow;
        document.getElementById('kpiBlock').textContent = block;
        const mode  = allow > 0 ? 'whitelist' : block > 0 ? 'blacklist' : 'inactive';
        const el    = document.getElementById('kpiMode');
        el.textContent = mode;
        el.className = 'fs-5 fw-bold text-capitalize ' + (mode==='whitelist'?'text-success':mode==='blacklist'?'text-danger':'text-secondary');
    }

    function markDirty() {
        dirty = true;
        document.getElementById('pendingNote').style.display = '';
    }

    /* ── Global remove (called from table buttons) ── */
    window.removeCountry = function(code) {
        delete state[code];
        refreshMap();
        refreshTable();
        markDirty();
    };

    /* ── Bulk actions ── */
    document.getElementById('blockAllBtn').addEventListener('click', () => {
        const regionNames = mapObj().getRegionName ? null : null;
        Object.keys(mapObj().regions).forEach(code => {
            state[code] = 'block';
            names[code] = names[code] || mapObj().getRegionName(code);
        });
        refreshMap(); refreshTable(); markDirty();
    });

    document.getElementById('allowAllBtn').addEventListener('click', () => {
        Object.keys(mapObj().regions).forEach(code => {
            state[code] = 'allow';
            names[code] = names[code] || mapObj().getRegionName(code);
        });
        refreshMap(); refreshTable(); markDirty();
    });

    document.getElementById('clearAllBtn').addEventListener('click', () => {
        if (!confirm('Clear all geo rules?')) return;
        Object.keys(state).forEach(k => delete state[k]);
        refreshMap(); refreshTable(); markDirty();
    });

    /* ── Save & Apply ── */
    document.getElementById('saveApplyBtn').addEventListener('click', async () => {
        const btn = document.getElementById('saveApplyBtn');
        btn.disabled = true;
        btn.innerHTML = '<i data-lucide="loader" style="width:14px;height:14px;"></i> Saving…';
        if (typeof lucide !== 'undefined') lucide.createIcons();

        const payload = Object.entries(state).map(([code, action]) => ({
            code, name: names[code] || code, action,
        }));

        const resp = await fetch('{{ route("firewall.geo.bulk") }}', {
            method:  'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept':       'application/json',
            },
            body: JSON.stringify({ countries: payload }),
        });

        btn.disabled = false;
        btn.innerHTML = '<i data-lucide="zap" style="width:14px;height:14px;"></i> Save &amp; Apply';
        if (typeof lucide !== 'undefined') lucide.createIcons();

        if (resp.ok) {
            dirty = false;
            document.getElementById('pendingNote').style.display = 'none';
            showToast('Rules saved and applied to nftables.', 'success');
        } else {
            showToast('Save failed — please try again.', 'danger');
        }
    });

    /* ── Toast helper ── */
    function showToast(msg, type) {
        const t = document.createElement('div');
        t.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
        t.style.cssText = 'bottom:24px;right:24px;z-index:9999;min-width:260px;';
        t.innerHTML = `${msg}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>`;
        document.body.appendChild(t);
        setTimeout(() => t.remove(), 4000);
    }

    /* ── Warn before leaving with unsaved changes ── */
    window.addEventListener('beforeunload', e => {
        if (dirty) { e.preventDefault(); e.returnValue = ''; }
    });

})();
</script>
@endpush

@endsection