<div class="space-y-6">
    {{-- Page 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">{{ __('مسميات') }} {{ term('members') }}</h1>
            <p class="text-sm text-gray-500 mt-1">
                {{ __('اختر ما يسميه هذا الفرع المنتمين إليه وغير المنتمين. يتغيّر المسمى في كل الشاشات والقوائم والبرامج والأسعار والتقارير والاستيراد — بدون أي تعديل على البيانات.') }}
            </p>
        </div>
        <div class="w-full sm:w-auto flex flex-col-reverse sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3">
            <button type="button" wire:click="applyToAllBranches" wire:loading.attr="disabled" wire:target="applyToAllBranches"
                class="w-full sm:w-auto py-2.5 text-center px-4 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50">
                <span wire:loading.remove wire:target="applyToAllBranches">{{ __('حفظ وتطبيق على كل الفروع') }}</span>
                <span wire:loading wire:target="applyToAllBranches">{{ __('جارٍ التطبيق...') }}</span>
            </button>
            <button type="button" wire:click="save" wire:loading.attr="disabled" wire:target="save"
                class="w-full sm:w-auto py-2.5 text-center px-6 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
                <span wire:loading.remove wire:target="save">{{ __('حفظ المسميات') }}</span>
                <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
            </button>
        </div>
    </div>

    @if($saved)
        <div class="p-3 text-sm text-green-700 bg-green-50 border border-green-200 rounded-lg">
            {{ $copiedTo ?? __('تم حفظ المسميات. حدّث أي صفحة مفتوحة لتظهر بالمسمى الجديد.') }}
        </div>
    @endif

    @error('branch')
        <div class="p-3 text-sm text-red-700 bg-red-50 border border-red-200 rounded-lg">{{ $message }}</div>
    @enderror

    {{-- Branch — the topbar switcher owns it. A picker appears here only for a
         user genuinely viewing every branch; otherwise there is exactly one
         branch to configure and it is shown, not offered. --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
        <label for="branch" class="block text-sm font-medium text-gray-700 mb-2">{{ __('الفرع') }}</label>
        @if($branches->count() > 1)
            <select id="branch" wire:model.live="selectedBranchId"
                class="w-full max-w-sm rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500">
                <option value="">{{ __('-- اختر الفرع --') }}</option>
                @foreach($branches as $branch)
                    <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
                @endforeach
            </select>
        @else
            <p class="text-sm font-medium text-gray-900">{{ $branches->first()?->name_ar ?? __('لا يوجد فرع نشط') }}</p>
        @endif
        <p class="text-xs text-gray-500 mt-2">{{ __('لكل فرع مسمياته الخاصة — نادٍ وكمبوند تحت نفس الأكاديمية لا يتشاركان المسمى.') }}</p>
    </div>

    {{-- Presets --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
        <h2 class="text-sm font-semibold text-gray-900 mb-1">{{ __('نوع الفرع') }}</h2>
        <p class="text-xs text-gray-500 mb-4">{{ __('اختيار النوع يملأ كل الحقول تلقائياً، وتظل قابلة للتعديل بعدها.') }}</p>

        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
            @foreach($presets as $key => $definition)
                <button type="button" wire:click="applyPreset('{{ $key }}')"
                    class="text-start p-3 rounded-lg border-2 transition-colors
                        {{ $preset === $key ? 'border-blue-500 bg-blue-50' : 'border-gray-200 bg-white hover:border-gray-300' }}">
                    <span class="block text-sm font-semibold text-gray-900">{{ $definition['label'] }}</span>
                    <span class="block text-xs text-gray-500 mt-1">
                        {{ $definition['terms']['member'] }} / {{ $definition['terms']['non_member'] }}
                    </span>
                </button>
            @endforeach
        </div>
        @error('preset') <p class="text-xs text-red-600 mt-2">{{ $message }}</p> @enderror
    </div>

    {{-- Arabic words --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
        <h2 class="text-sm font-semibold text-gray-900 mb-1">{{ __('المسميات بالعربية') }}</h2>
        <p class="text-xs text-gray-500 mb-4">
            {{ __('العربية لا تشتق هذه الصيغ من بعضها — «العضو» تُعرَّف في أولها و«غير العضو» في ثانيها، وجمع «عضو» الأعضاء بينما جمع «مقيم» المقيمين. لذلك تُكتب كل صيغة صراحةً، والباقي يُركَّب منها.') }}
        </p>

        <div class="grid md:grid-cols-2 gap-x-6 gap-y-4">
            {{-- Shared with messages() so a validation error names the box the
                 user is looking at, in the same words. --}}
            @foreach(\App\Livewire\Settings\TerminologySettings::arabicFields() as $key => [$label, $example])
                <div>
                    <label for="term-{{ $key }}" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __($label) }} <span class="text-red-500">*</span>
                    </label>
                    <input id="term-{{ $key }}" type="text" wire:model.live.debounce.400ms="terms.{{ $key }}"
                        placeholder="{{ $example }}"
                        class="w-full rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500 @error('terms.'.$key) border-red-400 @enderror">
                    @error('terms.'.$key) <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
                </div>
            @endforeach
        </div>
    </div>

    {{-- English words --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
        <h2 class="text-sm font-semibold text-gray-900 mb-1">{{ __('المسميات بالإنجليزية') }}</h2>
        <p class="text-xs text-gray-500 mb-4">{{ __('اختيارية — تُستخدم عند تشغيل الواجهة بالإنجليزية. الحقل الفارغ يعود إلى العربية.') }}</p>

        <div class="grid md:grid-cols-2 gap-x-6 gap-y-4">
            @foreach(\App\Livewire\Settings\TerminologySettings::englishFields() as $key => [$label, $example])
                <div>
                    <label for="term-{{ $key }}" class="block text-sm font-medium text-gray-700 mb-1">{{ $label }}</label>
                    <input id="term-{{ $key }}" type="text" dir="ltr" wire:model.live.debounce.400ms="terms.{{ $key }}"
                        placeholder="{{ $example }}"
                        class="w-full rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500 @error('terms.'.$key) border-red-400 @enderror">
                    @error('terms.'.$key) <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
                </div>
            @endforeach
        </div>
    </div>

    {{-- Live preview — the same composition the app uses, so what is shown
         here is literally what every screen will print. --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
        <h2 class="text-sm font-semibold text-gray-900 mb-1">{{ __('معاينة') }}</h2>
        <p class="text-xs text-gray-500 mb-4">{{ __('هكذا ستظهر المسميات في الشاشات فعلياً.') }}</p>

        <div class="flex flex-wrap items-center gap-2 mb-5">
            <span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">{{ $preview->member }}</span>
            <span class="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded-full">{{ $preview->non_member }}</span>
        </div>

        <dl class="grid sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-3">
            @php
                $previewRows = [
                    'قائمة المشتركين — عمود'  => $preview->membership_type,
                    'فلتر القائمة'            => __('كل') . ' ' . $preview->membership_types,
                    'حقل الرقم'               => $preview->membership_id,
                    'سعر البرنامج والمنتج'    => $preview->member_price,
                    'السعر الآخر'             => $preview->non_member_price,
                    'بطاقة الطباعة'           => $preview->membership_card,
                    'رسالة جماعية — الفئة'    => $preview->members,
                    'رسالة جماعية — الفئة الأخرى' => $preview->non_members,
                    'ملاحظات الطلب'           => __('ملاحظات') . ' ' . $preview->for_member,
                ];
            @endphp
            @foreach($previewRows as $where => $label)
                <div class="border-s-2 border-gray-100 ps-3">
                    <dt class="text-[11px] text-gray-400">{{ $where }}</dt>
                    <dd class="text-sm font-medium text-gray-900">{{ $label }}</dd>
                </div>
            @endforeach
        </dl>

        <div class="mt-5 p-3 rounded-lg bg-amber-50 border border-amber-200">
            <p class="text-xs text-amber-900">
                {{ __('المسمى فقط هو ما يتغيّر. أعمدة الاستيراد وقيم قاعدة البيانات تبقى member و non_member كما هي، فملفات الاستيراد القديمة تظل صالحة.') }}
            </p>
        </div>
    </div>
</div>
