@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'إدارة خدمات الطرف الثالث' : 'Third-Party Services')
@section('skip_page_hero', true)

@php
    $isArabic = app()->getLocale() === 'ar';
    $labelMap = [
        'pusher_channels_app_id' => $isArabic ? 'معرّف التطبيق' : 'App ID',
        'pusher_channels_app_key' => $isArabic ? 'مفتاح التطبيق' : 'App Key',
        'pusher_channels_app_secret' => $isArabic ? 'السر' : 'App Secret',
        'pusher_channels_app_cluster' => $isArabic ? 'المجموعة' : 'Cluster',
        'pusher_channels_host' => $isArabic ? 'المضيف' : 'Host',
        'pusher_channels_port' => $isArabic ? 'المنفذ' : 'Port',
        'pusher_channels_scheme' => $isArabic ? 'البروتوكول' : 'Scheme',
        'pusher_beams_instance_id' => $isArabic ? 'معرّف النسخة' : 'Instance ID',
        'pusher_beams_secret_key' => $isArabic ? 'المفتاح السري' : 'Secret Key',
        'pusher_beams_publishable_key' => $isArabic ? 'المفتاح العام' : 'Publishable Key',
        'tinymce_api_key' => $isArabic ? 'مفتاح الواجهة' : 'API Key',
    ];

    $maskValue = function ($value) {
        if (!$value) return '';
        $len = strlen($value);
        if ($len <= 8) return str_repeat('*', $len);
        return substr($value, 0, 4) . str_repeat('*', $len - 8) . substr($value, -4);
    };

    $serviceItems = collect($services)->map(function ($service, $serviceKey) use ($settings) {
        $service['key'] = $serviceKey;
        $service['enabled'] = ($settings->get($service['enabled_key'])?->value ?? '0') === '1';
        $service['test_status'] = $settings->get($serviceKey . '_last_test_status')?->value;
        $service['test_message'] = $settings->get($serviceKey . '_last_test_message')?->value;
        $service['tested_at'] = $settings->get($serviceKey . '_last_test_tested_at')?->value;
        return $service;
    });

    $enabledCount = $serviceItems->where('enabled', true)->count();
    $testedCount = $serviceItems->where('can_test', true)->whereIn('test_status', ['success', 'failed'])->count();
    $successfulTests = $serviceItems->where('test_status', 'success')->count();
@endphp

@section('content')
<div class="space-y-6">
    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <h1 class="text-3xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'إدارة خدمات الطرف الثالث' : 'Third-Party Services' }}</h1>
        <p class="mt-3 max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'إدارة تكاملات النظام ومفاتيحها وحالة اختبار الاتصال من واجهة أوضح وأبسط.' : 'Manage system integrations, credentials, and connection test states from a cleaner, simpler workspace.' }}</p>
    </section>

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ $isArabic ? 'إجمالي الخدمات' : 'Total Services' }}</p>
            <p class="mt-3 text-2xl font-black text-surface-900 dark:text-white">{{ $serviceItems->count() }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ $isArabic ? 'الخدمات المفعلة' : 'Enabled Services' }}</p>
            <p class="mt-3 text-2xl font-black text-surface-900 dark:text-white">{{ $enabledCount }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ $isArabic ? 'الخدمات المختبرة' : 'Tested Services' }}</p>
            <p class="mt-3 text-2xl font-black text-surface-900 dark:text-white">{{ $testedCount }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ $isArabic ? 'اختبارات ناجحة' : 'Successful Tests' }}</p>
            <p class="mt-3 text-2xl font-black text-surface-900 dark:text-white">{{ $successfulTests }}</p>
        </article>
    </section>

    <div class="space-y-5">
        @foreach($serviceItems as $service)
            <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_300px]">
                    <div class="text-start">
                        <div class="flex flex-wrap items-center gap-3">
                            <h2 class="text-2xl font-black text-surface-900 dark:text-white">{{ $service['label'] }}</h2>
                            <span class="rounded-full px-3 py-1 text-xs font-bold {{ $service['enabled'] ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300' }}">
                                {{ $service['enabled'] ? ($isArabic ? 'مفعلة' : 'Enabled') : ($isArabic ? 'متوقفة' : 'Disabled') }}
                            </span>
                            @if($service['can_test'])
                                <span class="rounded-full px-3 py-1 text-xs font-bold {{ $service['test_status'] === 'success' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : ($service['test_status'] === 'failed' ? 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-300' : 'bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300') }}">
                                    {{ $service['test_status'] === 'success' ? ($isArabic ? 'اختبار ناجح' : 'Test Passed') : ($service['test_status'] === 'failed' ? ($isArabic ? 'اختبار فاشل' : 'Test Failed') : ($isArabic ? 'غير مختبرة' : 'Untested')) }}
                                </span>
                            @endif
                        </div>

                        <p class="mt-2 text-sm text-surface-500 dark:text-surface-400">{{ $service['description'] }}</p>

                        <form method="POST" action="{{ route('admin.third-party-services.update', $service['key']) }}" class="mt-6 grid gap-4 md:grid-cols-2">
                            @csrf
                            @method('PUT')

                            @foreach($service['fields'] as $fieldKey)
                                @php $field = $settings->get($fieldKey); @endphp
                                <div class="space-y-2">
                                    <label class="block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $labelMap[$fieldKey] ?? $fieldKey }}</label>
                                    <div class="relative" x-data="{ show: false }">
                                        <input :type="show ? 'text' : 'password'"
                                               name="{{ $fieldKey }}"
                                               value="{{ $field?->value }}"
                                               class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm font-bold text-surface-900 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100"
                                               placeholder="{{ $field?->value ? $maskValue($field->value) : ($isArabic ? 'أدخل القيمة' : 'Enter value') }}">
                                        @if($field?->value)
                                            <button type="button" @click="show = !show" class="absolute end-4 top-1/2 -translate-y-1/2 text-surface-400 hover:text-brand-500">
                                                <i class="fa-solid" :class="show ? 'fa-eye-slash' : 'fa-eye'"></i>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            @endforeach

                            <div class="md:col-span-2 flex justify-end pt-2">
                                <button type="submit" class="inline-flex h-11 items-center rounded-xl bg-brand-600 px-6 text-sm font-bold text-white transition hover:bg-brand-700">
                                    {{ $isArabic ? 'حفظ الإعدادات' : 'Save Settings' }}
                                </button>
                            </div>
                        </form>
                    </div>

                    <div class="rounded-xl border border-surface-200 bg-surface-50/70 p-5 dark:border-surface-800 dark:bg-surface-950/40">
                        <div class="space-y-4">
                            @if($service['can_test'])
                                <div class="rounded-xl border border-surface-200 bg-white p-4 dark:border-surface-800 dark:bg-surface-900">
                                    <p class="text-xs font-bold text-surface-400 dark:text-surface-500">{{ $isArabic ? 'آخر نتيجة اختبار' : 'Latest Test Result' }}</p>
                                    <p class="mt-2 text-sm font-bold text-surface-900 dark:text-white">{{ $service['test_message'] ?: ($isArabic ? 'لا توجد نتيجة بعد.' : 'No result yet.') }}</p>
                                    <p class="mt-2 text-xs text-surface-500 dark:text-surface-400">{{ $service['tested_at'] ?: ($isArabic ? 'لم يتم الاختبار بعد' : 'Not tested yet') }}</p>
                                </div>

                                <form method="POST" action="{{ route('admin.third-party-services.test', $service['key']) }}">
                                    @csrf
                                    <button type="submit" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm font-bold text-surface-700 transition hover:border-brand-300 hover:text-brand-600 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200">
                                        {{ $isArabic ? 'اختبار الاتصال' : 'Test Connection' }}
                                    </button>
                                </form>
                            @endif

                            <form method="POST" action="{{ route('admin.third-party-services.toggle', $service['key']) }}">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="w-full rounded-xl px-4 py-3 text-sm font-bold transition {{ $service['enabled'] ? 'bg-red-50 text-red-700 hover:bg-red-100 dark:bg-red-500/10 dark:text-red-300 dark:hover:bg-red-500/20' : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-300 dark:hover:bg-emerald-500/20' }}">
                                    {{ $service['enabled'] ? ($isArabic ? 'إيقاف الخدمة' : 'Disable Service') : ($isArabic ? 'تفعيل الخدمة' : 'Enable Service') }}
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
        @endforeach
    </div>
</div>
@endsection