<x-app-layout>
    <x-module-hero
        title="Payment Test Connection"
        description="Verify MTN MoMo API connectivity and credentials"
        icon="fa-plug">
        <x-slot name="backButton">
            <a href="{{ route('config.payment.index') }}"
               class="inline-flex items-center gap-1 text-white/80 hover:text-white text-sm transition-colors">
                <i class="fas fa-arrow-left"></i> Back to Dashboard
            </a>
        </x-slot>
        <x-slot name="tabs">
            <a href="{{ route('config.payment.index') }}"
               class="module-hero-tab {{ request()->routeIs('config.payment.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-tachometer-alt"></i> Dashboard
            </a>
            @can('create payment configuration')
            <a href="{{ route('config.payment.create') }}"
               class="module-hero-tab {{ request()->routeIs('config.payment.create') || request()->routeIs('config.payment.edit') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-plus"></i> Configure
            </a>
            @endcan
            @can('test payment connection')
            <a href="{{ route('config.payment.test-interface') }}"
               class="module-hero-tab {{ request()->routeIs('config.payment.test-interface') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-plug"></i> Test Connection
            </a>
            @endcan
            @can('view payment logs')
            <a href="{{ route('config.payment.logs') }}"
               class="module-hero-tab {{ request()->routeIs('config.payment.logs') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-history"></i> API Logs
            </a>
            @endcan
            <a href="{{ route('config.payment.documentation') }}"
               class="module-hero-tab {{ request()->routeIs('config.payment.documentation') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-book"></i> Documentation
            </a>
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center">
                <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i> {{ session('error') }}
            </div>
        @endif

        {{-- Status Overview --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <p class="text-xs text-gray-500 font-semibold uppercase tracking-wider">Configuration</p>
                <p class="text-xl font-bold mt-1 {{ $statusSummary['is_configured'] ? 'text-green-600' : 'text-red-500' }}">
                    {{ $statusSummary['is_configured'] ? 'Active' : 'Not Set' }}
                </p>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <p class="text-xs text-gray-500 font-semibold uppercase tracking-wider">Environment</p>
                <p class="text-xl font-bold mt-1 capitalize {{ $statusSummary['environment'] === 'production' ? 'text-green-600' : 'text-yellow-600' }}">
                    {{ $statusSummary['environment'] }}
                </p>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <p class="text-xs text-gray-500 font-semibold uppercase tracking-wider">Service Ready</p>
                <p class="text-xl font-bold mt-1 {{ $serviceStatus['ready'] ? 'text-green-600' : 'text-red-500' }}">
                    {{ $serviceStatus['ready'] ? 'Yes' : 'No' }}
                </p>
            </div>
        </div>

        @if(!$statusSummary['is_configured'])
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center">
                <i class="fas fa-exclamation-triangle text-yellow-500 text-4xl mb-3"></i>
                <h3 class="text-lg font-semibold text-yellow-800 mb-2">Configuration Required</h3>
                <p class="text-yellow-700 text-sm mb-4">Please configure your MTN MoMo API credentials before testing.</p>
                @can('create payment configuration')
                    <a href="{{ route('config.payment.create') }}"
                       class="inline-flex items-center gap-1 px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition text-sm">
                        <i class="fas fa-cog"></i> Configure Now
                    </a>
                @endcan
            </div>
        @else
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {{-- Collection API Test --}}
                @if($statusSummary['has_collection'])
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-4">
                        <h2 class="text-base font-semibold text-white flex items-center gap-2">
                            <i class="fas fa-arrow-down"></i> Test Collection API
                        </h2>
                        <p class="text-blue-100 text-xs mt-0.5">MoMo Mobile Money — Request payments from customers</p>
                    </div>
                    <div class="p-6">
                        <p class="text-sm text-gray-600 mb-4">
                            Click below to verify your Collection API credentials are valid and the connection is working.
                        </p>
                        <form method="POST" action="{{ route('config.payment.test') }}">
                            @csrf
                            <input type="hidden" name="type" value="collection">
                            <button type="submit"
                                    class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm">
                                <i class="fas fa-plug mr-1"></i> Test Collection API
                            </button>
                        </form>
                    </div>
                </div>
                @endif

                {{-- Disbursement API Test --}}
                @if($statusSummary['has_disbursement'])
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="bg-gradient-to-r from-purple-600 to-purple-700 px-6 py-4">
                        <h2 class="text-base font-semibold text-white flex items-center gap-2">
                            <i class="fas fa-arrow-up"></i> Test Disbursement API
                        </h2>
                        <p class="text-purple-100 text-xs mt-0.5">MoMo Card Payments — Send money to customers</p>
                    </div>
                    <div class="p-6">
                        <p class="text-sm text-gray-600 mb-4">
                            Click below to verify your Disbursement API credentials are valid and the connection is working.
                        </p>
                        <form method="POST" action="{{ route('config.payment.test') }}">
                            @csrf
                            <input type="hidden" name="type" value="disbursement">
                            <button type="submit"
                                    class="w-full px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition text-sm">
                                <i class="fas fa-plug mr-1"></i> Test Disbursement API
                            </button>
                        </form>
                    </div>
                </div>
                @endif
            </div>

            {{-- Recent Test Logs --}}
            @if($testLogs->count() > 0)
            <div class="mt-6 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="p-4 border-b border-gray-200">
                    <h2 class="text-sm font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-history text-green-600"></i> Recent Test Results
                    </h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full table-zebra">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-left th-col-1">Type</th>
                                <th class="px-4 py-3 text-left th-col-2">Status</th>
                                <th class="px-4 py-3 text-left th-col-3">Response Time</th>
                                <th class="px-4 py-3 text-left th-col-4">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($testLogs as $log)
                                <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 py-0.5 rounded text-xs font-semibold
                                            {{ $log->type === 'collection' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800' }}">
                                            {{ $log->getTypeLabel() }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 py-0.5 rounded text-xs font-semibold
                                            {{ $log->isSuccessful() ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                            {{ $log->response_status ?? 'N/A' }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-500">{{ $log->execution_time_ms }}ms</td>
                                    <td class="px-4 py-3 text-sm text-gray-500">{{ $log->created_at->diffForHumans() }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif
        @endif
    </div>
</x-app-layout>
