@extends('layouts.admin-sidebar')

@section('title', 'API Configuration')
@section('page-title', 'API Configuration')
@section('page-description', 'Manage API integrations, credentials, and service configurations')

@section('content')
<div class="space-y-8">
    <!-- Header Stats & Quick Actions -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl shadow-lg overflow-hidden">
        <div class="px-8 py-6">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h2 class="text-2xl font-bold text-white">API Integration Dashboard</h2>
                    <p class="text-blue-100 mt-1">Monitor and manage your service integrations</p>
                </div>
                <div class="flex items-center space-x-3">
                    <a href="{{ route('admin.api-config.create') }}" 
                       class="inline-flex items-center px-4 py-2 bg-white text-blue-600 rounded-lg hover:bg-blue-50 font-medium transition-all duration-200 shadow-sm hover:shadow-md">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                        </svg>
                        Add New Provider
                    </a>
                    <button onclick="testAllConnections()" 
                            class="inline-flex items-center px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 font-medium transition-all duration-200 border border-white/20">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        Test All Connections
                    </button>
                    <a href="{{ route('admin.api-config.logs') }}" 
                       class="inline-flex items-center px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 font-medium transition-all duration-200 border border-white/20">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        View Logs
                    </a>
                </div>
            </div>
            
            <!-- Stats Cards -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-emerald-500 rounded-xl flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-white/80 text-sm font-medium">Active Services</p>
                            <p class="text-3xl font-bold text-white">
                                {{ collect($serviceCategories)->flatten()->where('is_active', true)->count() }}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-white/80 text-sm font-medium">Total Services</p>
                            <p class="text-3xl font-bold text-white">
                                {{ collect($serviceCategories)->flatten()->count() }}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-red-500 rounded-xl flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-white/80 text-sm font-medium">Live Mode</p>
                            <p class="text-3xl font-bold text-white">
                                {{ collect($serviceCategories)->flatten()->where('is_live_mode', true)->count() }}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-amber-500 rounded-xl flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-white" 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-2.5L13.732 4c-.77-.833-1.662-.833-2.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-white/80 text-sm font-medium">Health Issues</p>
                            <p class="text-3xl font-bold text-white">
                                {{ collect($healthStats)->where('status', 'unhealthy')->count() + collect($healthStats)->where('status', 'error')->count() }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Services -->
    @if($serviceCategories['payment']->count() > 0)
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-8 py-6 bg-gradient-to-r from-blue-50 to-blue-100 border-b border-blue-200">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mr-4">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">Payment Services</h3>
                        <p class="text-blue-700 text-sm">{{ $serviceCategories['payment']->count() }} providers configured</p>
                    </div>
                </div>
                <div class="text-sm text-blue-600">
                    {{ $serviceCategories['payment']->where('is_active', true)->count() }}/{{ $serviceCategories['payment']->count() }} active
                </div>
            </div>
        </div>
        <div class="p-8">
            <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
                @foreach($serviceCategories['payment'] as $service)
                @include('admin.api-config.partials.service-card', ['service' => $service, 'health' => $healthStats[$service->name] ?? []])
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <!-- Identity Verification Services -->
    @if($serviceCategories['identity']->count() > 0)
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-8 py-6 bg-gradient-to-r from-emerald-50 to-emerald-100 border-b border-emerald-200">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-emerald-500 rounded-xl flex items-center justify-center mr-4">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">Identity Verification Services</h3>
                        <p class="text-emerald-700 text-sm">{{ $serviceCategories['identity']->count() }} providers configured</p>
                    </div>
                </div>
                <div class="text-sm text-emerald-600">
                    {{ $serviceCategories['identity']->where('is_active', true)->count() }}/{{ $serviceCategories['identity']->count() }} active
                </div>
            </div>
        </div>
        <div class="p-8">
            <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
                @foreach($serviceCategories['identity'] as $service)
                @include('admin.api-config.partials.service-card', ['service' => $service, 'health' => $healthStats[$service->name] ?? []])
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <!-- Messaging Services -->
    @if($serviceCategories['messaging']->count() > 0)
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-8 py-6 bg-gradient-to-r from-purple-50 to-purple-100 border-b border-purple-200">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mr-4">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">Messaging Services</h3>
                        <p class="text-purple-700 text-sm">{{ $serviceCategories['messaging']->count() }} providers configured</p>
                    </div>
                </div>
                <div class="text-sm text-purple-600">
                    {{ $serviceCategories['messaging']->where('is_active', true)->count() }}/{{ $serviceCategories['messaging']->count() }} active
                </div>
            </div>
        </div>
        <div class="p-8">
            <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
                @foreach($serviceCategories['messaging'] as $service)
                @include('admin.api-config.partials.service-card', ['service' => $service, 'health' => $healthStats[$service->name] ?? []])
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <!-- Utilities Services -->
    @if($serviceCategories['utilities']->count() > 0)
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-8 py-6 bg-gradient-to-r from-amber-50 to-amber-100 border-b border-amber-200">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-amber-500 rounded-xl flex items-center justify-center mr-4">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">Utility Services</h3>
                        <p class="text-amber-700 text-sm">{{ $serviceCategories['utilities']->count() }} providers configured</p>
                    </div>
                </div>
                <div class="text-sm text-amber-600">
                    {{ $serviceCategories['utilities']->where('is_active', true)->count() }}/{{ $serviceCategories['utilities']->count() }} active
                </div>
            </div>
        </div>
        <div class="p-8">
            <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
                @foreach($serviceCategories['utilities'] as $service)
                @include('admin.api-config.partials.service-card', ['service' => $service, 'health' => $healthStats[$service->name] ?? []])
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <!-- Banking Services -->
    @if($serviceCategories['banking']->count() > 0)
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-8 py-6 bg-gradient-to-r from-indigo-50 to-indigo-100 border-b border-indigo-200">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-indigo-500 rounded-xl flex items-center justify-center mr-4">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">Banking Services</h3>
                        <p class="text-indigo-700 text-sm">{{ $serviceCategories['banking']->count() }} providers configured</p>
                    </div>
                </div>
                <div class="text-sm text-indigo-600">
                    {{ $serviceCategories['banking']->where('is_active', true)->count() }}/{{ $serviceCategories['banking']->count() }} active
                </div>
            </div>
        </div>
        <div class="p-8">
            <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
                @foreach($serviceCategories['banking'] as $service)
                @include('admin.api-config.partials.service-card', ['service' => $service, 'health' => $healthStats[$service->name] ?? []])
                @endforeach
            </div>
        </div>
    </div>
    @endif
</div>

<script>
function testConnection(serviceId, serviceName) {
    const button = document.getElementById(`test-${serviceId}`);
    const statusElement = document.getElementById(`status-${serviceId}`);
    
    button.disabled = true;
    button.innerHTML = '<svg class="animate-spin w-4 h-4 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Testing...';
    
    fetch(`/admin/api-config/${serviceId}/test`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            statusElement.innerHTML = `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">Healthy (${data.response_time}ms)</span>`;
        } else {
            statusElement.innerHTML = '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Unhealthy</span>';
        }
        
        button.disabled = false;
        button.innerHTML = 'Test Connection';
        
        // Show notification
        showNotification(data.success ? 'success' : 'error', 
                        data.success ? `${serviceName} connection test successful` : `${serviceName} connection test failed: ${data.error || 'Unknown error'}`);
    })
    .catch(error => {
        statusElement.innerHTML = '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Error</span>';
        button.disabled = false;
        button.innerHTML = 'Test Connection';
        showNotification('error', `Connection test failed: ${error.message}`);
    });
}

function toggleStatus(serviceId, serviceName, currentStatus) {
    const action = currentStatus ? 'deactivate' : 'activate';
    if (confirm(`Are you sure you want to ${action} ${serviceName}?`)) {
        fetch(`/admin/api-config/${serviceId}/toggle-status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success !== false) {
                location.reload();
            } else {
                showNotification('error', data.message || 'Failed to toggle service status');
            }
        })
        .catch(error => {
            showNotification('error', `Failed to toggle status: ${error.message}`);
        });
    }
}

function toggleMode(serviceId, serviceName, currentMode) {
    const newMode = currentMode ? 'test' : 'live';
    if (confirm(`Switch ${serviceName} to ${newMode} mode?`)) {
        fetch(`/admin/api-config/${serviceId}/toggle-mode`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success !== false) {
                location.reload();
            } else {
                showNotification('error', data.message || 'Failed to toggle service mode');
            }
        })
        .catch(error => {
            showNotification('error', `Failed to toggle mode: ${error.message}`);
        });
    }
}

function configureService(serviceId, serviceName) {
    window.location.href = `/admin/api-config/${serviceId}`;
}

function testAllConnections() {
    const testButtons = document.querySelectorAll('[id^="test-"]');
    testButtons.forEach(button => {
        const serviceId = button.id.replace('test-', '');
        const serviceName = button.closest('.border').querySelector('h4').textContent;
        setTimeout(() => {
            testConnection(serviceId, serviceName);
        }, Math.random() * 2000); // Stagger the tests
    });
}

function showNotification(type, message) {
    // Create notification element
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg ${type === 'success' ? 'bg-emerald-500 text-white' : 'bg-red-500 text-white'}`;
    notification.innerHTML = `
        <div class="flex items-center">
            <span>${message}</span>
            <button onclick="this.parentElement.parentElement.remove()" class="ml-4 text-white hover:text-gray-200">
                <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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
    `;
    
    document.body.appendChild(notification);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (notification.parentElement) {
            notification.remove();
        }
    }, 5000);
}
</script>
@endsection