@extends('layouts.app')

@section('content')

{{-- 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="shield-ban" style="width:20px;height:20px;"></i> Fail2Ban Protection
        </h4>
        <div class="text-secondary small mt-1">Automatically blocks IPs with suspicious authentication attempts to protect your PBX.</div>
    </div>
    <div class="d-flex gap-2 mt-2 mt-md-0">
        <a href="{{ route('fail2ban.index') }}" 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">
    {{ session('status') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</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">
            <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">Active Bans</div>
                <div class="ext-summary-value text-danger">{{ $totalBanned }}</div>
                <div class="ext-summary-sub">Currently blocked IPs</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="layers" style="width:20px;height:20px;color:#16a34a;"></i>
            </div>
            <div>
                <div class="ext-summary-label">Monitors Running</div>
                <div class="ext-summary-value">{{ $jailsRunning }} <span style="font-size:.85rem;font-weight:400;color:#64748b;">/ {{ $jailsTotal }}</span></div>
                <div class="ext-summary-sub">{{ $jailsTotal > 0 ? 'All monitors healthy' : 'Service unavailable' }}</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(245,158,11,.1);">
                <i data-lucide="alert-triangle" style="width:20px;height:20px;color:#d97706;"></i>
            </div>
            <div>
                <div class="ext-summary-label">Recent Events</div>
                <div class="ext-summary-value">{{ count($events) }}</div>
                <div class="ext-summary-sub">Logged security events</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(37,99,235,.1);">
                <i data-lucide="list" style="width:20px;height:20px;color:#2563eb;"></i>
            </div>
            <div>
                <div class="ext-summary-label">Total Monitors</div>
                <div class="ext-summary-value">{{ $jailsTotal }}</div>
                <div class="ext-summary-sub">Configured protection rules</div>
            </div>
        </div>
    </div>
</div>

@if($jailsTotal === 0)
<div class="alert alert-warning d-flex align-items-center gap-2">
    <i data-lucide="alert-triangle" style="width:18px;height:18px;"></i>
    <div>Fail2Ban is not responding or <code>www-data</code> lacks sudo permission. Add <code>www-data ALL=(ALL) NOPASSWD: /usr/bin/fail2ban-client status*</code> to <code>/etc/sudoers.d/pbx-web</code>.</div>
</div>
@endif

{{-- Active Bans --}}
<div class="card mb-4">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span class="fw-semibold d-flex align-items-center gap-2">
            <i data-lucide="shield-off" style="width:16px;height:16px;color:#ef4444;"></i>
            Active Bans
            <span class="badge bg-danger ms-1">{{ $totalBanned }}</span>
        </span>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th>IP Address</th>
                    <th>Country</th>
                    <th>Jail</th>
                    <th>Banned Since</th>
                    <th>Expires</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($bans as $i => $ban)
                @php
                    $cc = $ban['country_code'] ?? null;
                    $flag = '';
                    if ($cc && strlen($cc) === 2 && ctype_alpha($cc)) {
                        $flag = mb_chr(0x1F1E6 + ord(strtoupper($cc[0])) - 65) . mb_chr(0x1F1E6 + ord(strtoupper($cc[1])) - 65);
                    }
                @endphp
                <tr>
                    <td>
                        <span class="d-inline-flex align-items-center gap-2">
                            <span style="width:8px;height:8px;border-radius:50%;background:#ef4444;display:inline-block;flex-shrink:0;"></span>
                            <code>{{ $ban['ip'] }}</code>
                        </span>
                    </td>
                    <td class="small">
                        @if($ban['country_name'] ?? null)
                            <span title="{{ $cc }}">{{ $flag }} {{ $ban['country_name'] }}</span>
                        @else
                            <span class="text-secondary">—</span>
                        @endif
                    </td>
                    <td><span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle font-monospace">{{ $ban['jail'] }}</span></td>
                    <td class="small">
                        @if($ban['banned_since'] ?? null)
                            <span title="{{ $ban['banned_since'] }}">{{ \Carbon\Carbon::parse($ban['banned_since'])->diffForHumans() }}</span>
                        @else
                            <span class="text-secondary">—</span>
                        @endif
                    </td>
                    <td class="small">
                        @if($ban['expires'] ?? null)
                            <span title="{{ $ban['expires'] }}">{{ \Carbon\Carbon::parse($ban['expires'])->diffForHumans() }}</span>
                        @else
                            <span class="text-secondary">—</span>
                        @endif
                    </td>
                    <td class="text-end">
                        <div class="d-flex justify-content-end gap-1">
                            <form method="POST" action="{{ route('fail2ban.unban') }}" class="d-inline"
                                  onsubmit="return confirm('Unban {{ $ban['ip'] }} from {{ $ban['jail'] }}?');">
                                @csrf
                                <input type="hidden" name="ip"   value="{{ $ban['ip'] }}">
                                <input type="hidden" name="jail" value="{{ $ban['jail'] }}">
                                <button type="submit" class="btn btn-outline-warning btn-sm">
                                    <i data-lucide="shield-check" style="width:13px;height:13px;"></i> Unban
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center text-secondary py-4">
                        <i data-lucide="check-circle" style="width:18px;height:18px;color:#22c55e;"></i>
                        No IPs currently banned.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Recent Events --}}
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span class="fw-semibold d-flex align-items-center gap-2">
            <i data-lucide="activity" style="width:16px;height:16px;"></i>
            Recent Fail2Ban Events
        </span>
        <span class="text-secondary small">From /var/log/fail2ban.log</span>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0" style="font-size:.83rem;">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Jail</th>
                    <th>Severity</th>
                    <th>Event</th>
                    <th>IP Address</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                @forelse($events as $ev)
                <tr>
                    <td class="text-secondary font-monospace" style="white-space:nowrap;">{{ $ev['time'] }}</td>
                    <td><span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle font-monospace">{{ $ev['jail'] }}</span></td>
                    <td>
                        @if($ev['severity'] === 'high')
                            <span class="badge bg-danger-subtle text-danger border border-danger-subtle">● High</span>
                        @elseif($ev['severity'] === 'medium')
                            <span class="badge bg-warning-subtle text-warning border border-warning-subtle">● Medium</span>
                        @else
                            <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">● Low</span>
                        @endif
                    </td>
                    <td>
                        @if($ev['event'] === 'Ban')
                            <span class="text-danger fw-semibold"><i data-lucide="ban" style="width:13px;height:13px;"></i> Ban</span>
                        @elseif($ev['event'] === 'Unban')
                            <span class="text-success fw-semibold"><i data-lucide="shield-check" style="width:13px;height:13px;"></i> Unban</span>
                        @else
                            <span class="text-warning fw-semibold"><i data-lucide="eye" style="width:13px;height:13px;"></i> Detected</span>
                        @endif
                    </td>
                    <td><code>{{ $ev['ip'] ?: '—' }}</code></td>
                    <td>
                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                data-bs-toggle="modal" data-bs-target="#eventDetailModal"
                                data-detail="{{ e($ev['details']) }}"
                                data-time="{{ $ev['time'] }}" data-jail="{{ $ev['jail'] }}"
                                data-ip="{{ $ev['ip'] }}" data-event="{{ $ev['event'] }}">
                            <i data-lucide="eye" style="width:13px;height:13px;"></i> View
                        </button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center text-secondary py-4">No log events found — log may be unreadable or empty.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Ban Detail Modal --}}
<div class="modal fade" id="banDetailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title d-flex align-items-center gap-2">
                    <i data-lucide="shield-off" style="width:18px;height:18px;color:#ef4444;"></i> Ban Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <table class="table table-borderless mb-0">
                    <tr><td class="text-secondary" style="width:120px;">IP Address</td><td><code id="mdBanIp"></code></td></tr>
                    <tr><td class="text-secondary">Jail</td><td><span id="mdBanJail" class="badge bg-secondary-subtle text-secondary border border-secondary-subtle font-monospace"></span></td></tr>
                    <tr><td class="text-secondary">Fail Count</td><td><span id="mdBanFail" class="fw-semibold text-danger"></span></td></tr>
                    <tr><td class="text-secondary">Status</td><td><span class="badge bg-danger-subtle text-danger border border-danger-subtle">Banned</span></td></tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                <form method="POST" action="{{ route('fail2ban.unban') }}" class="d-inline" id="mdUnbanForm">
                    @csrf
                    <input type="hidden" name="ip"   id="mdUnbanIp">
                    <input type="hidden" name="jail" id="mdUnbanJail">
                    <button type="submit" class="btn btn-warning">
                        <i data-lucide="shield-check" style="width:14px;height:14px;"></i> Unban this IP
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Event Detail Modal --}}
<div class="modal fade" id="eventDetailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title d-flex align-items-center gap-2">
                    <i data-lucide="activity" style="width:18px;height:18px;"></i> Event Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <table class="table table-borderless mb-3">
                    <tr><td class="text-secondary" style="width:120px;">Time</td><td id="mdEvTime" class="font-monospace"></td></tr>
                    <tr><td class="text-secondary">IP Address</td><td><code id="mdEvIp"></code></td></tr>
                    <tr><td class="text-secondary">Jail</td><td><span id="mdEvJail" class="badge bg-secondary-subtle text-secondary border border-secondary-subtle font-monospace"></span></td></tr>
                    <tr><td class="text-secondary">Event</td><td id="mdEvEvent" class="fw-semibold"></td></tr>
                </table>
                <div class="text-secondary small mb-1">Raw log line:</div>
                <div style="background:#0f172a;border-radius:8px;padding:12px 16px;">
                    <pre id="mdEvDetail" class="mb-0 small" style="white-space:pre-wrap;color:#e2e8f0;"></pre>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@push('custom-scripts')
<script>
document.getElementById('banDetailModal').addEventListener('show.bs.modal', function(e) {
    const btn = e.relatedTarget;
    document.getElementById('mdBanIp').textContent    = btn.dataset.ip;
    document.getElementById('mdBanJail').textContent  = btn.dataset.jail;
    document.getElementById('mdBanFail').textContent  = btn.dataset.fail;
    document.getElementById('mdUnbanIp').value        = btn.dataset.ip;
    document.getElementById('mdUnbanJail').value      = btn.dataset.jail;
});
document.getElementById('eventDetailModal').addEventListener('show.bs.modal', function(e) {
    const btn = e.relatedTarget;
    document.getElementById('mdEvTime').textContent   = btn.dataset.time;
    document.getElementById('mdEvIp').textContent     = btn.dataset.ip || '—';
    document.getElementById('mdEvJail').textContent   = btn.dataset.jail;
    document.getElementById('mdEvEvent').textContent  = btn.dataset.event;
    document.getElementById('mdEvDetail').textContent = btn.dataset.detail;
});
</script>
@endpush

@endsection