@extends('layouts.app')

@section('content')
@php
    // Which tab should be active on load?
    $currentTab   = request('tab', 'blacklist');

    // Should the modal be open?
    $openModal    = request()->has('create') || $errors->any();

    // Default action in the modal (based on ?create=allow|deny)
    $presetAction = request('create') === 'allow' ? 'allow' : 'deny';
@endphp

<div class="p-6" x-data="{ tab: '{{ $currentTab }}' }">
    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-4">
            <div class="flex items-center justify-center w-16 h-16 rounded-full bg-blue-50 border border-blue-200">
                <x-lucide-shield class="w-9 h-9 text-blue-500" />
            </div>
            <div>
                <h1 class="text-2xl font-semibold text-gray-800">Firewall Access Control</h1>
                <p class="text-sm text-gray-500 mt-1">
                    Manage blacklist and whitelist rules for incoming traffic.
                </p>
            </div>
        </div>

        <a href="{{ route('firewall.services') }}"
           class="inline-flex items-center px-4 py-2 bg-white border border-gray-200 text-sm font-medium rounded-lg shadow-sm hover:bg-gray-50">
            <span class="mr-2 text-gray-500">?</span>
            Services
        </a>
    </div>

    {{-- Flash --}}
    @if(session('status'))
        <div class="mb-4 text-sm text-green-700 bg-green-50 border border-green-200 px-4 py-2 rounded">
            {{ session('status') }}
        </div>
    @endif

    {{-- Card --}}
    <div class="bg-white shadow-sm rounded-lg border border-gray-200">
        {{-- Tabs --}}
        <div class="border-b border-gray-200 px-4 pt-4">
            <nav class="flex space-x-4" aria-label="Tabs">
                <button
                    type="button"
                    @click="tab = 'blacklist'"
                    :class="tab === 'blacklist'
                        ? 'border-blue-500 text-blue-600'
                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-2 px-3 border-b-2 text-sm font-medium"
                >
                    Blacklist (Deny)
                </button>

                <button
                    type="button"
                    @click="tab = 'whitelist'"
                    :class="tab === 'whitelist'
                        ? 'border-blue-500 text-blue-600'
                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-2 px-3 border-b-2 text-sm font-medium"
                >
                    Whitelist (Allow)
                </button>
            </nav>
        </div>

        {{-- Info strip --}}
        <div class="px-6 py-4 border-b border-gray-100 text-sm text-gray-600">
            <ul class="list-disc list-inside space-y-1">
                <li>Maintain blacklist and whitelist IPs and networks.</li>
                <li>Quickly block abusive sources detected by Fail2Ban.</li>
                <li>Whitelist trusted management IPs and office subnets.</li>
            </ul>
        </div>

        {{-- Tab content --}}
        <div class="px-6 py-4">
            {{-- BLACKLIST TAB --}}
            <div x-show="tab === 'blacklist'" x-cloak>
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-sm font-semibold text-gray-700">
                        Blacklist rules (action = DENY)
                    </h2>
                    <a href="{{ route('firewall.access', ['tab' => 'blacklist', 'create' => 'deny']) }}"
                       class="inline-flex items-center px-3 py-1.5 rounded-md text-xs font-medium bg-red-600 text-white hover:bg-red-700">
                        <x-lucide-plus class="w-4 h-4 mr-1" />
                        Add Blacklist IP
                    </a>
                </div>

                @if($blacklist->isEmpty())
                    <p class="text-sm text-gray-500 italic">
                        No blacklist entries yet. Click <strong>Add Blacklist IP</strong> to create one.
                    </p>
                @else
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm text-left text-gray-700">
                            <thead class="bg-gray-50 text-xs uppercase font-semibold text-gray-500">
                                <tr>
                                    <th class="px-3 py-2">Name</th>
                                    <th class="px-3 py-2">IP / Network</th>
                                    <th class="px-3 py-2">Description</th>
                                    <th class="px-3 py-2">Created</th>
                                    <th class="px-3 py-2 text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($blacklist as $row)
                                    <tr>
                                        <td class="px-3 py-2 whitespace-nowrap">{{ $row->name }}</td>
                                        <td class="px-3 py-2 font-mono text-xs">{{ $row->ip_address }}</td>
                                        <td class="px-3 py-2 text-xs text-gray-600">
                                            {{ $row->description ?: '—' }}
                                        </td>
                                        <td class="px-3 py-2 text-xs text-gray-500 whitespace-nowrap">
                                            {{ optional($row->created_at)->format('Y-m-d H:i') }}
                                        </td>
                                        <td class="px-3 py-2 text-right">
                                            <form method="POST"
                                                  action="{{ route('firewall.access.destroy', $row->id) }}"
                                                  onsubmit="return confirm('Remove this blacklist rule?');"
                                                  class="inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                        class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50">
                                                    <x-lucide-trash-2 class="w-4 h-4 mr-1" />
                                                    Delete
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>

            {{-- WHITELIST TAB --}}
            <div x-show="tab === 'whitelist'" x-cloak>
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-sm font-semibold text-gray-700">
                        Whitelist rules (action = ALLOW)
                    </h2>
                <a href="{{ route('firewall.access', ['tab' => 'whitelist', 'create' => 'allow']) }}"
                       class="inline-flex items-center px-3 py-1.5 rounded-md text-xs font-medium bg-emerald-600 text-white hover:bg-emerald-700">
                        <x-lucide-plus class="w-4 h-4 mr-1" />
                        Add Whitelist IP
                    </a>
                </div>

                @if($whitelist->isEmpty())
                    <p class="text-sm text-gray-500 italic">
                        No whitelist entries yet. Click <strong>Add Whitelist IP</strong> to create one.
                    </p>
                @else
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm text-left text-gray-700">
                            <thead class="bg-gray-50 text-xs uppercase font-semibold text-gray-500">
                                <tr>
                                    <th class="px-3 py-2">Name</th>
                                    <th class="px-3 py-2">IP / Network</th>
                                    <th class="px-3 py-2">Description</th>
                                    <th class="px-3 py-2">Created</th>
                                    <th class="px-3 py-2 text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($whitelist as $row)
                                    <tr>
                                        <td class="px-3 py-2 whitespace-nowrap">{{ $row->name }}</td>
                                        <td class="px-3 py-2 font-mono text-xs">{{ $row->ip_address }}</td>
                                        <td class="px-3 py-2 text-xs text-gray-600">
                                            {{ $row->description ?: '—' }}
                                        </td>
                                        <td class="px-3 py-2 text-xs text-gray-500 whitespace-nowrap">
                                            {{ optional($row->created_at)->format('Y-m-d H:i') }}
                                        </td>
                                        <td class="px-3 py-2 text-right">
                                            <form method="POST"
                                                  action="{{ route('firewall.access.destroy', $row->id) }}"
                                                  onsubmit="return confirm('Remove this whitelist rule?');"
                                                  class="inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                        class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50">
                                                    <x-lucide-trash-2 class="w-4 h-4 mr-1" />
                                                    Delete
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- ADD IP MODAL --}}
    @if($openModal)
        <div class="fixed inset-0 z-40 flex items-center justify-center bg-black/40">
            <div class="bg-white rounded-lg shadow-xl w-full max-w-lg mx-4">
                <div class="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-gray-800">
                        Add Access Rule
                    </h3>
                    <a href="{{ route('firewall.access', ['tab' => $currentTab]) }}"
                       class="text-gray-400 hover:text-gray-600">
                        ?
                    </a>
                </div>

                <form method="POST" action="{{ route('firewall.access.store') }}" class="px-5 py-4 space-y-4">
                    @csrf

                    @if ($errors->any())
                        <div class="mb-3 text-sm text-red-700 bg-red-50 border border-red-200 px-3 py-2 rounded">
                            <ul class="list-disc list-inside">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <input type="hidden" name="return_tab" value="{{ $currentTab }}">

                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">
                            Name / Label
                        </label>
                        <input type="text" name="name" required
                               class="w-full rounded-md border-gray-300 text-sm focus:ring-blue-500 focus:border-blue-500"
                               placeholder="e.g. Malicious scanner, Office LAN, Management VPN"
                               value="{{ old('name') }}">
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">
                            IP Address or Network
                        </label>
                        <input type="text" name="ip_address" required
                               class="w-full rounded-md border-gray-300 text-sm focus:ring-blue-500 focus:border-blue-500"
                               placeholder="e.g. 203.0.113.10 or 192.168.10.0/24"
                               value="{{ old('ip_address') }}">
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">
                            Action
                        </label>
                        <div class="flex items-center space-x-4 text-sm">
                            <label class="inline-flex items-center">
                                <input type="radio" name="action" value="deny"
                                       class="rounded border-gray-300 text-red-600 focus:ring-red-500"
                                       {{ old('action', $presetAction) === 'deny' ? 'checked' : '' }}>
                                <span class="ml-2 text-gray-700">Blacklist (DENY)</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" name="action" value="allow"
                                       class="rounded border-gray-300 text-emerald-600 focus:ring-emerald-500"
                                       {{ old('action', $presetAction) === 'allow' ? 'checked' : '' }}>
                                <span class="ml-2 text-gray-700">Whitelist (ALLOW)</span>
                            </label>
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">
                            Description (optional)
                        </label>
                        <textarea name="description" rows="3"
                                  class="w-full rounded-md border-gray-300 text-sm focus:ring-blue-500 focus:border-blue-500"
                                  placeholder='Notes on this rule, e.g. "Blocked after repeated SIP scans".'>{{ old('description') }}</textarea>
                    </div>

                    <div class="flex items-center justify-end space-x-2 pt-2 border-t border-gray-100">
                        <a href="{{ route('firewall.access', ['tab' => $currentTab]) }}"
                           class="px-3 py-1.5 text-xs font-medium text-gray-600 hover:text-gray-800">
                            Cancel
                        </a>
                        <button type="submit"
                                class="inline-flex items-center px-3 py-1.5 rounded-md text-xs font-medium bg-blue-600 text-white hover:bg-blue-700">
                            Save Rule
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @endif
</div>
@endsection