@extends('layouts.app')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 bg-white border-b border-gray-200">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-semibold text-black">
                        {{ \App\Helpers\TranslationHelper::transFromDatabase('API Settings', __('API Settings')) }}
                    </h2>
                </div>
                <div class="bg-gray-50 p-6 rounded-lg mb-6">
                    <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                        <p class="text-black">
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Manage API integrations with third-party medical services.', __('إدارة مفاتيح الربط والتكامل البرمجي مع الخدمات الطبية الخارجية والأنظمة الأخرى.')) }}
                        </p>
                        <form action="{{ route('healthcare.settings.api_settings.update') }}" method="POST" class="w-full">
                            @csrf
                            <div class="flex flex-col gap-4">
                                <div class="flex flex-col md:flex-row gap-2">
                                    <input type="text" name="name" placeholder="{{ __('اسم المفتاح (مثال: تطبيق جوال المرضى)') }}" class="flex-1 rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 text-sm" required>
                                    <button type="submit" class="bg-red-600 text-white px-6 py-2 rounded-md text-sm font-bold hover:bg-red-700 whitespace-nowrap">
                                        {{ __('توليد مفتاح API جديد') }}
                                    </button>
                                </div>
                                <div class="bg-white p-4 rounded border border-gray-200">
                                    <span class="text-sm font-bold text-black block mb-3 border-b pb-2">{{ __('صلاحيات الوصول التفصيلية:') }}</span>
                                    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
                                        @php
                                            $modules = [
                                                'patients' => __('المرضى'),
                                                'appointments' => __('المواعيد'),
                                                'emr' => __('السجل الطبي'),
                                                'laboratory' => __('المختبر'),
                                                'pharmacy' => __('الصيدلية')
                                            ];
                                            $actions = [
                                                'read' => ['label' => __('قراءة'), 'color' => 'blue'],
                                                'write' => ['label' => __('إضافة/تعديل'), 'color' => 'green'],
                                                'delete' => ['label' => __('حذف'), 'color' => 'red']
                                            ];
                                        @endphp
                                        @foreach($modules as $modKey => $modLabel)
                                            <div class="flex flex-col gap-2 p-2 bg-gray-50 rounded">
                                                <span class="text-xs font-bold text-black">{{ $modLabel }}</span>
                                                @foreach($actions as $actKey => $actInfo)
                                                    <label class="inline-flex items-center text-xs cursor-pointer">
                                                        <input type="checkbox" name="permissions[]" value="{{ $modKey }}:{{ $actKey }}" class="rounded border-gray-300 text-red-600 shadow-sm focus:border-red-500 focus:ring-red-500">
                                                        <span class="mr-2">{{ $actInfo['label'] }}</span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-6">
                    <div class="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                        <h3 class="text-lg font-medium text-black mb-4">{{ __('مفاتيح الوصول الحالية') }}</h3>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead>
                                    <tr>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-black uppercase tracking-wider">{{ __('اسم المفتاح') }}</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-black uppercase tracking-wider">{{ __('الصلاحيات') }}</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-black uppercase tracking-wider">{{ __('مفتاح API') }}</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-black uppercase tracking-wider">{{ __('الحالة') }}</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-black uppercase tracking-wider">{{ __('آخر استخدام') }}</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-black uppercase tracking-wider">{{ __('العمليات') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200 text-sm">
                                    @forelse($apiKeys as $apiKey)
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">{{ $apiKey->name }}</td>
                                        <td class="px-6 py-4">
                                            @if($apiKey->permissions)
                                                <div class="flex flex-wrap gap-1">
                                                    @foreach($apiKey->permissions as $perm)
                                                        @php
                                                            if (str_contains($perm, ':')) {
                                                                [$mod, $act] = explode(':', $perm);
                                                                $color = $act == 'read' ? 'blue' : ($act == 'write' ? 'green' : 'red');
                                                                $modName = $modules[$mod] ?? $mod;
                                                                $actName = $actions[$act]['label'] ?? $act;
                                                            } else {
                                                                $modName = $modules[$perm] ?? $perm;
                                                                $actName = __('وصول كامل');
                                                                $color = 'gray';
                                                            }
                                                        @endphp
                                                        <span class="px-2 py-0.5 bg-{{ $color }}-50 text-{{ $color }}-700 rounded text-[10px] border border-{{ $color }}-200 whitespace-nowrap">
                                                            {{ $modName }}: {{ $actName }}
                                                        </span>
                                                    @endforeach
                                                </div>
                                            @else
                                                <span class="text-black text-xs italic">{{ __('وصول كامل') }}</span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap font-mono text-black flex items-center gap-2">
                                            @php
                                                $parts = explode('_', $apiKey->api_key);
                                                $prefix = $parts[0] . '_' . $parts[1] . '_';
                                            @endphp
                                            <span id="key-{{ $apiKey->id }}">{{ $prefix . str_repeat('•', 16) }}</span>
                                            <button onclick="copyToClipboard('{{ $apiKey->api_key }}', this)" class="text-black hover:text-blue-600 focus:outline-none" title="{{ __('نسخ المفتاح') }}">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            @if($apiKey->active)
                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{{ __('نشط') }}</span>
                                            @else
                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{{ __('معطل') }}</span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-black">
                                            {{ $apiKey->last_used_at ? $apiKey->last_used_at->diffForHumans() : __('لم يستخدم بعد') }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap flex gap-2">
                                            <form action="{{ route('healthcare.settings.api_settings.toggle', $apiKey->id) }}" method="POST">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit" class="text-blue-600 hover:underline">
                                                    {{ $apiKey->active ? __('تعطيل') : __('تفعيل') }}
                                                </button>
                                            </form>
                                            <span class="text-black">|</span>
                                            <form action="{{ route('healthcare.settings.api_settings.delete', $apiKey->id) }}" method="POST" onsubmit="return confirm('{{ __('هل أنت متأكد من الحذف؟') }}')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="text-red-600 hover:underline">
                                                    {{ __('حذف') }}
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="5" class="px-6 py-4 text-center text-black italic">
                                            {{ __('لا توجد مفاتيح وصول حالية') }}
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function copyToClipboard(text, btn) {
        navigator.clipboard.writeText(text).then(() => {
            const originalIcon = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-check text-green-500"></i>';
            setTimeout(() => {
                btn.innerHTML = originalIcon;
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy: ', err);
            alert('{{ __("فشل نسخ المفتاح") }}');
        });
    }
</script>
@endpush