@extends('layouts.app')

@section('title', 'IP Whitelist')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    {{-- Header Section --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">IP Whitelist</h1>
            <p class="text-sm text-gray-500 mt-1">Manage allowed IP addresses for API access</p>
        </div>
    </div>

    {{-- Current IP Info Banner --}}
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-5">
        <div class="flex items-start gap-3">
            <div class="flex-shrink-0">
                <svg class="w-5 h-5 text-blue-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                </svg>
            </div>
            <div class="flex-1">
                <h3 class="text-sm font-semibold text-blue-900 mb-1">Your Current IP Address</h3>
                <div class="flex items-center gap-3">
                    <code class="text-sm font-mono bg-white px-3 py-1.5 rounded-lg border border-blue-200 text-blue-900">
                        {{ request()->ip() }}
                    </code>
                    <button type="button"
                            onclick="addCurrentIP('{{ request()->ip() }}')"
                            class="text-xs font-medium text-blue-700 hover:text-blue-800 underline">
                        Add to whitelist
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Success/Error Messages --}}
    @if(session('success'))
        <div class="bg-emerald-50 border border-emerald-200 rounded-xl p-4">
            <div class="flex items-center gap-3">
                <div class="flex-shrink-0">
                    <svg class="w-5 h-5 text-emerald-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <p class="text-sm font-medium text-emerald-800">{{ session('success') }}</p>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-50 border border-red-200 rounded-xl p-4">
            <div class="flex items-center gap-3">
                <div class="flex-shrink-0">
                    <svg class="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <p class="text-sm font-medium text-red-800">{{ session('error') }}</p>
            </div>
        </div>
    @endif

    {{-- Add IP Form --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-6">
            <h3 class="text-base font-semibold text-gray-900 mb-4">Add IP Address</h3>
            
            <form method="POST" action="{{ route('user.ip-whitelist.store') }}" class="space-y-4">
                @csrf
                
                <div>
                    <label for="ip_address" class="block text-xs font-medium text-gray-700 mb-2">
                        IP Address <span class="text-red-500">*</span>
                    </label>
                    <div class="flex gap-3">
                        <div class="flex-1">
                            <input type="text" 
                                   id="ip_address"
                                   name="ip_address" 
                                   placeholder="192.168.1.1"
                                   required
                                   pattern="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$"
                                   class="w-full px-4 py-2.5 text-sm border rounded-lg transition-colors font-mono
                                          @error('ip_address') 
                                             border-red-300 focus:border-red-500 focus:ring-red-200 
                                          @else 
                                             border-gray-200 focus:border-brand focus:ring-brand/20 
                                          @enderror 
                                          focus:ring-2 focus:outline-none">
                            @error('ip_address')
                                <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                        <button type="submit"
                            class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium bg-brand text-white rounded-lg hover:bg-brand/90 focus:ring-4 focus:ring-brand/20 transition-all shadow-sm hover:shadow whitespace-nowrap">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                            </svg>
                            Add IP
                        </button>
                    </div>
                    <p class="mt-1.5 text-xs text-gray-500">
                        Enter IPv4 address in format: xxx.xxx.xxx.xxx
                    </p>
                </div>
            </form>
        </div>
    </div>

    {{-- Whitelisted IPs List --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-6 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-base font-semibold text-gray-900">Whitelisted IP Addresses</h3>
                    <p class="text-xs text-gray-500 mt-1">
                        {{ $whitelistedIPs->count() }} IP address(es) allowed
                    </p>
                </div>
                @if($whitelistedIPs->count() > 0)
                    <button type="button"
                            onclick="openClearAllModal()"
                            class="text-sm font-medium text-red-600 hover:text-red-700 transition-colors">
                        Clear All
                    </button>
                @endif
            </div>
        </div>

        <div class="divide-y divide-gray-200">
            @forelse($whitelistedIPs as $ip)
                <div class="p-4 hover:bg-gray-50 transition-colors">
                    <div class="flex items-center justify-between gap-4">
                        <div class="flex items-center gap-3 flex-1">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center">
                                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                                    </svg>
                                </div>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2">
                                    <code class="text-sm font-mono font-medium text-gray-900">
                                        {{ $ip }}
                                    </code>
                                    @if($ip === request()->ip())
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 ring-1 ring-blue-600/20">
                                            Current IP
                                        </span>
                                    @endif
                                </div>
                                <p class="text-xs text-gray-500 mt-0.5">
                                    Added {{ now()->format('d M Y') }}
                                </p>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <button type="button"
                                    onclick="copyIP('{{ $ip }}')"
                                    class="p-2 text-gray-500 hover:text-brand hover:bg-brand/10 rounded-lg transition-all"
                                    title="Copy IP">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                                </svg>
                            </button>
                            <button type="button"
                                    onclick="openDeleteModal('{{ $ip }}')"
                                    class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all"
                                    title="Remove IP">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            @empty
                <div class="p-12 text-center">
                    <div class="flex flex-col items-center justify-center">
                        <svg class="w-16 h-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                        </svg>
                        <p class="text-gray-500 text-sm font-medium">No IP addresses whitelisted</p>
                        <p class="text-gray-400 text-xs mt-1">Add IP addresses to restrict API access</p>
                    </div>
                </div>
            @endforelse
        </div>
    </div>

    {{-- Information Card --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-start gap-4">
            <div class="flex-shrink-0">
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
            <div class="flex-1">
                <h3 class="text-base font-semibold text-gray-900 mb-2">How IP Whitelist Works</h3>
                <div class="space-y-2 text-sm text-gray-600">
                    <p>• Only whitelisted IP addresses can access your API</p>
                    <p>• If no IPs are whitelisted, all IPs are allowed</p>
                    <p>• You can add multiple IP addresses</p>
                    <p>• Changes take effect immediately</p>
                    <p>• Make sure to add your current IP to avoid being locked out</p>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- Delete Single IP Modal --}}
<div id="deleteModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        {{-- Background overlay --}}
        <div class="fixed inset-0 bg-gray-900/75 transition-opacity" aria-hidden="true" onclick="closeDeleteModal()"></div>

        {{-- Center modal --}}
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        {{-- Modal panel --}}
        <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full z-60">
            <div class="bg-white px-6 pt-6 pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                        <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
                        <h3 class="text-lg font-semibold text-gray-900">Remove IP Address</h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-600">
                                Are you sure you want to remove <code id="deleteIpText" class="font-mono font-semibold text-gray-900"></code> from whitelist?
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-6 py-4 sm:flex sm:flex-row-reverse gap-3">
                <form method="POST" action="{{ route('user.ip-whitelist.destroy') }}" id="deleteForm" class="w-full sm:w-auto">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="ip_address" id="deleteIpInput">
                    <button type="submit"
                        class="w-full inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-2.5 bg-red-600 text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-4 focus:ring-red-200 transition-all sm:w-auto">
                        Yes, Remove
                    </button>
                </form>
                <button type="button"
                    onclick="closeDeleteModal()"
                    class="mt-3 w-full inline-flex justify-center rounded-lg border border-gray-300 shadow-sm px-4 py-2.5 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-200 transition-all sm:mt-0 sm:w-auto">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Clear All Modal --}}
<div id="clearAllModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        {{-- Background overlay --}}
        <div class="fixed inset-0 bg-gray-900/75 transition-opacity" aria-hidden="true" onclick="closeClearAllModal()"></div>

        {{-- Center modal --}}
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        {{-- Modal panel --}}
        <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden z-50 shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-6 pt-6 pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                        <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
                        <h3 class="text-lg font-semibold text-gray-900">Clear All IP Addresses</h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-600">
                                This will remove all {{ $whitelistedIPs->count() }} whitelisted IP address(es). This action cannot be undone.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-6 py-4 sm:flex sm:flex-row-reverse gap-3">
                <form method="POST" action="{{ route('user.ip-whitelist.clear') }}" class="w-full sm:w-auto">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                        class="w-full inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-2.5 bg-red-600 text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-4 focus:ring-red-200 transition-all sm:w-auto">
                        Yes, Clear All
                    </button>
                </form>
                <button type="button"
                    onclick="closeClearAllModal()"
                    class="mt-3 w-full inline-flex justify-center rounded-lg border border-gray-300 shadow-sm px-4 py-2.5 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-200 transition-all sm:mt-0 sm:w-auto">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Add current IP to input field
function addCurrentIP(ip) {
    document.getElementById('ip_address').value = ip;
    document.getElementById('ip_address').focus();
}

// Copy IP to clipboard
function copyIP(ip) {
    const button = event.currentTarget;
    const originalHTML = button.innerHTML;
    
    navigator.clipboard.writeText(ip).then(function() {
        // Visual feedback
        button.innerHTML = `
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
            </svg>
        `;
        button.classList.add('text-emerald-600');
        
        setTimeout(() => {
            button.innerHTML = originalHTML;
            button.classList.remove('text-emerald-600');
        }, 2000);
    }).catch(function(err) {
        console.error('Failed to copy:', err);
    });
}

// Delete modal functions
document.addEventListener('DOMContentLoaded', function () {

    window.openDeleteModal = function(ip) {
        const modal = document.getElementById('deleteModal');
        if (!modal) return;

        document.getElementById('deleteIpText').textContent = ip;
        document.getElementById('deleteIpInput').value = ip;
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    window.closeDeleteModal = function() {
        const modal = document.getElementById('deleteModal');
        if (!modal) return;

        modal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

});

// Clear all modal functions
function openClearAllModal() {
    document.getElementById('clearAllModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeClearAllModal() {
    document.getElementById('clearAllModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
}

// Close modals on ESC key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeDeleteModal();
        closeClearAllModal();
    }
});
</script>
@endsection
