<div>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('إعدادات النظام') }}</h1>
            <p class="mt-1 text-sm text-gray-500">{{ __('إدارة إعدادات النظام المختلفة حسب المجموعة') }}</p>
        </div>
    </div>

    @if(session('success'))
        <div class="mb-4 p-3 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm">
            {{ session('success') }}
        </div>
    @endif

    {{-- Platform Service Fee (read-only, env-controlled) --}}
    <div class="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-lg">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-sm font-semibold text-amber-800">{{ __('مصاريف خدمة المنصة') }}</h3>
                <p class="text-xs text-amber-600 mt-1">{{ __('تُضاف تلقائياً على كل إيصال — هذه القيمة محددة من مزود الخدمة ولا يمكن تغييرها') }}</p>
            </div>
            <div class="text-2xl font-bold text-amber-800" dir="ltr">
                {{ env('PLATFORM_SERVICE_FEE_PERCENT', 3) }}%
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <div x-data="{ activeGroup: @entangle('activeGroup') }" class="mb-6">
        <div class="border-b border-gray-200">
            <nav class="flex gap-1 -mb-px overflow-x-auto" aria-label="{{ __('مجموعات الإعدادات') }}">
                @foreach($groups as $key => $label)
                    <button
                        type="button"
                        wire:click="$set('activeGroup', '{{ $key }}')"
                        class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-colors
                            {{ $activeGroup === $key
                                ? 'border-blue-600 text-blue-700'
                                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                        {{ __($label) }}
                    </button>
                @endforeach
            </nav>
        </div>
    </div>

    <!-- Settings Form -->
    <form wire:submit="save">
        <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6" wire:loading.class="opacity-50 pointer-events-none" wire:target="updatedActiveGroup">
            @if(empty($settings))
                <div class="p-8 text-center">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    <p class="mt-4 text-sm text-gray-500">{{ __('لا توجد إعدادات في هذه المجموعة بعد') }}</p>
                </div>
            @else
                <div class="space-y-6" x-data="{ settings: @js($settings) }">
                    @foreach($settings as $key => $value)
                        @php
                            $meta = $settingsMeta[$key] ?? ['type' => 'string', 'description_ar' => ''];
                            $type = $meta['type'] ?? 'string';
                            $description = $meta['description_ar'] ?? '';
                            $parentKey = $dependsOn[$key] ?? null;
                            $label = !empty($meta['label_ar']) ? $meta['label_ar'] : str_replace('_', ' ', $key);
                        @endphp
                        <div
                            @if($parentKey)
                                x-show="settings['{{ $parentKey }}'] == '1' || settings['{{ $parentKey }}'] === true"
                                x-transition:enter="transition ease-out duration-200"
                                x-transition:enter-start="opacity-0 -translate-y-1"
                                x-transition:enter-end="opacity-100 translate-y-0"
                                class="ps-4 border-s-2 border-blue-200"
                            @endif
                        >
                            <label for="setting-{{ $key }}" class="block text-sm font-medium text-gray-700 mb-1">
                                {{ $label }}
                            </label>

                            @if($type === 'boolean')
                                <label class="relative inline-flex items-center cursor-pointer" dir="ltr">
                                    <input
                                        type="checkbox"
                                        id="setting-{{ $key }}"
                                        wire:model="settings.{{ $key }}"
                                        @change="settings['{{ $key }}'] = $el.checked ? '1' : '0'"
                                        value="1"
                                        @checked(filter_var($value, FILTER_VALIDATE_BOOLEAN))
                                        class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                </label>
                            @elseif($type === 'integer' || $type === 'float')
                                <input
                                    type="number"
                                    id="setting-{{ $key }}"
                                    wire:model="settings.{{ $key }}"
                                    dir="ltr"
                                    step="{{ $type === 'float' ? '0.01' : '1' }}"
                                    class="w-full max-w-xs rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5">
                            @elseif($type === 'json')
                                <textarea
                                    id="setting-{{ $key }}"
                                    wire:model="settings.{{ $key }}"
                                    dir="ltr"
                                    rows="3"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm font-mono"></textarea>
                            @else
                                <input
                                    type="text"
                                    id="setting-{{ $key }}"
                                    wire:model="settings.{{ $key }}"
                                    class="w-full max-w-md rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5">
                            @endif

                            @if($description)
                                <p class="mt-1 text-xs text-gray-500">{{ $description }}</p>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        @if(!empty($settings))
            <div class="mt-4 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
                <button type="submit" wire:loading.attr="disabled" wire:target="save"
                        class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
                    <span wire:loading.remove wire:target="save">{{ __('حفظ الإعدادات') }}</span>
                    <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
                </button>
            </div>
        @endif
    </form>
</div>
