<x-app-layout>
    <x-module-hero
        title="Payment Configuration"
        description="Manage MTN MoMo API credentials and monitor payment operations"
        icon="fa-credit-card">
        <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">
        {{-- Flash Messages --}}
        @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('info'))
            <div class="mb-4 p-4 bg-blue-100 border border-blue-400 text-blue-700 rounded-lg flex items-center">
                <i class="fas fa-info-circle mr-2"></i> {{ session('info') }}
            </div>
        @endif
        @if($errors->any())
            <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                <ul class="list-disc list-inside text-sm">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif

        {{-- Stats Row --}}
        <div class="grid grid-cols-1 md:grid-cols-4 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">Today's Requests</p>
                <p class="text-xl font-bold mt-1 text-blue-600">{{ $todayStats['total'] }}</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">Success Rate</p>
                <p class="text-xl font-bold mt-1 text-purple-600">{{ $logStats['success_rate'] ?? 0 }}%</p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            {{-- Configuration Status --}}
            <div class="lg:col-span-2 bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="p-4 border-b border-gray-200">
                    <h2 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-cog text-green-600"></i> Configuration Status
                    </h2>
                </div>
                <div class="p-6">
                    @if($configuration)
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            {{-- Collection API --}}
                            <div class="border border-gray-200 rounded-lg p-4">
                                <div class="flex items-center justify-between mb-2">
                                    <h3 class="font-medium text-gray-800 text-sm flex items-center gap-1">
                                        <i class="fas fa-arrow-down text-blue-500"></i> Collection API
                                    </h3>
                                    @if($statusSummary['has_collection'])
                                        <span class="px-2 py-0.5 bg-green-100 text-green-800 rounded-full text-xs font-semibold">
                                            <i class="fas fa-check-circle mr-1"></i> Configured
                                        </span>
                                    @else
                                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full text-xs font-semibold">
                                            <i class="fas fa-exclamation-circle mr-1"></i> Not Set
                                        </span>
                                    @endif
                                </div>
                                @if($statusSummary['has_collection'])
                                    <div class="text-xs text-gray-500 space-y-1">
                                        <p><span class="font-medium">API User:</span> {{ $maskedConfig['collection_api_user'] ?? 'N/A' }}</p>
                                        <p><span class="font-medium">Sub Key:</span> {{ $maskedConfig['collection_subscription_key'] ?? 'N/A' }}</p>
                                    </div>
                                @endif
                            </div>

                            {{-- Disbursement API --}}
                            <div class="border border-gray-200 rounded-lg p-4">
                                <div class="flex items-center justify-between mb-2">
                                    <h3 class="font-medium text-gray-800 text-sm flex items-center gap-1">
                                        <i class="fas fa-arrow-up text-purple-500"></i> Disbursement API
                                    </h3>
                                    @if($statusSummary['has_disbursement'])
                                        <span class="px-2 py-0.5 bg-green-100 text-green-800 rounded-full text-xs font-semibold">
                                            <i class="fas fa-check-circle mr-1"></i> Configured
                                        </span>
                                    @else
                                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full text-xs font-semibold">
                                            <i class="fas fa-exclamation-circle mr-1"></i> Not Set
                                        </span>
                                    @endif
                                </div>
                                @if($statusSummary['has_disbursement'])
                                    <div class="text-xs text-gray-500 space-y-1">
                                        <p><span class="font-medium">API User:</span> {{ $maskedConfig['disbursement_api_user'] ?? 'N/A' }}</p>
                                        <p><span class="font-medium">Sub Key:</span> {{ $maskedConfig['disbursement_subscription_key'] ?? 'N/A' }}</p>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="flex items-center justify-between pt-3 border-t border-gray-200">
                            <div class="text-sm text-gray-500">
                                <span class="font-medium">Environment:</span>
                                <span class="ml-1 px-2 py-0.5 rounded text-xs {{ $configuration->environment === 'production' ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800' }}">
                                    {{ ucfirst($configuration->environment) }}
                                </span>
                                <span class="mx-2 text-gray-300">|</span>
                                <span class="font-medium">Currency:</span>
                                <span class="ml-1 px-2 py-0.5 rounded text-xs bg-yellow-100 text-yellow-800">
                                    {{ $configuration->currency ?? 'SSP' }}
                                </span>
                                <span class="mx-2 text-gray-300">|</span>
                                <span class="font-medium">Last Updated:</span> {{ $statusSummary['last_updated'] }}
                            </div>
                            @can('edit payment configuration')
                                <a href="{{ route('config.payment.edit') }}" class="btn-action-edit">
                                    <i class="fas fa-edit"></i> Edit
                                </a>
                            @endcan
                        </div>
                    @else
                        <div class="text-center py-8">
                            <i class="fas fa-credit-card text-gray-300 text-5xl mb-4"></i>
                            <h3 class="text-lg font-medium text-gray-900 mb-2">No Configuration Found</h3>
                            <p class="text-gray-500 mb-4 text-sm">Configure your MTN MoMo API credentials to enable payment operations.</p>
                            @can('create payment configuration')
                                <a href="{{ route('config.payment.create') }}"
                                   class="inline-flex items-center gap-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
                                    <i class="fas fa-plus"></i> Configure Now
                                </a>
                            @endcan
                        </div>
                    @endif
                </div>
            </div>

            {{-- API Statistics --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-chart-bar text-indigo-500"></i> API Statistics
                </h3>
                <dl class="space-y-3">
                    <div class="flex justify-between items-center">
                        <dt class="text-sm text-gray-500">Total Requests</dt>
                        <dd class="font-bold text-blue-600">{{ $logStats['total'] ?? 0 }}</dd>
                    </div>
                    <div class="flex justify-between items-center">
                        <dt class="text-sm text-gray-500">Successful</dt>
                        <dd class="font-bold text-green-600">{{ $logStats['successful'] ?? 0 }}</dd>
                    </div>
                    <div class="flex justify-between items-center">
                        <dt class="text-sm text-gray-500">Failed</dt>
                        <dd class="font-bold text-red-600">{{ $logStats['failed'] ?? 0 }}</dd>
                    </div>
                    <div class="flex justify-between items-center">
                        <dt class="text-sm text-gray-500">Avg Response</dt>
                        <dd class="font-bold text-purple-600">{{ $logStats['avg_execution_time'] ?? 0 }}ms</dd>
                    </div>
                    <div class="flex justify-between items-center">
                        <dt class="text-sm text-gray-500">Today Success</dt>
                        <dd class="font-bold text-teal-600">{{ $todayStats['successful'] ?? 0 }}</dd>
                    </div>
                    <div class="flex justify-between items-center">
                        <dt class="text-sm text-gray-500">Today Failed</dt>
                        <dd class="font-bold text-orange-600">{{ $todayStats['failed'] ?? 0 }}</dd>
                    </div>
                </dl>
            </div>
        </div>

        {{-- Recent Logs --}}
        @can('view payment logs')
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                <h2 class="text-sm font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-history text-green-600"></i> Recent API Logs
                </h2>
                <a href="{{ route('config.payment.logs') }}" class="text-xs text-green-600 hover:text-green-700">
                    View All <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            @if($recentLogs->count() > 0)
                <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">Endpoint</th>
                                <th class="px-4 py-3 text-left th-col-3">Status</th>
                                <th class="px-4 py-3 text-left th-col-4">Time</th>
                                <th class="px-4 py-3 text-left th-col-5">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentLogs 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' :
                                               ($log->type === 'disbursement' ? 'bg-purple-100 text-purple-800' :
                                               ($log->type === 'test' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800')) }}">
                                            {{ $log->getTypeLabel() }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-600">{{ Str::limit($log->endpoint, 40) }}</td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        @if($log->response_status)
                                            <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 }}
                                            </span>
                                        @else
                                            <span class="text-gray-400 text-xs">N/A</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">{{ $log->execution_time_ms }}ms</td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">{{ $log->created_at->diffForHumans() }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="p-8 text-center text-gray-500">
                    <i class="fas fa-inbox text-4xl mb-3 opacity-30"></i>
                    <p class="text-sm">No API logs found. Logs will appear here after API requests are made.</p>
                </div>
            @endif
        </div>
        @endcan
    </div>
</x-app-layout>
