<div>
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('رفع مستند') }} — {{ $documentableLabel }}</h1>
    </div>

    {{-- Step Indicator --}}
    <div class="flex items-center justify-center gap-2 mb-8">
        @foreach($stepLabels as $num => $label)
            <button wire:click="goToStep({{ $num }})"
                    class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'cursor-default' }}">
                <span class="flex items-center justify-center w-8 h-8 rounded-full text-sm font-bold
                    {{ $num < $currentStep ? 'bg-green-500 text-white' : ($num === $currentStep ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-500') }}">
                    @if($num < $currentStep)
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                    @else
                        {{ $num }}
                    @endif
                </span>
                <span class="hidden sm:inline text-sm {{ $num === $currentStep ? 'text-blue-700 font-medium' : 'text-gray-500' }}">{{ $label }}</span>
            </button>
            @if(!$loop->last)
                <div class="w-8 h-0.5 {{ $num < $currentStep ? 'bg-green-400' : 'bg-gray-200' }}"></div>
            @endif
        @endforeach
    </div>

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

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        {{-- Step 1: Document Type --}}
        @if($currentStep === 1)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('اختر نوع المستند') }}</h2>
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                @foreach($allowedTypes as $type)
                    <label class="relative flex flex-col items-center p-4 rounded-lg border-2 cursor-pointer transition-all
                        {{ $documentType === $type->value ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300' }}">
                        <input type="radio" wire:model="documentType" value="{{ $type->value }}" class="sr-only">
                        <span class="text-sm font-medium text-center {{ $documentType === $type->value ? 'text-blue-700' : 'text-gray-700' }}">{{ $type->label() }}</span>
                    </label>
                @endforeach
            </div>
            @error('documentType') <p class="mt-2 text-xs text-red-600">{{ $message }}</p> @enderror
        @endif

        {{-- Step 2: File Upload --}}
        @if($currentStep === 2)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('رفع الملف') }}</h2>
            <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
                <input type="file" wire:model="file" class="hidden" id="file-upload">
                <label for="file-upload" class="cursor-pointer">
                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <p class="mt-2 text-sm text-gray-600">{{ __('اضغط لاختيار ملف أو اسحبه هنا') }}</p>
                    <p class="mt-1 text-xs text-gray-400">{{ __('الحد الأقصى:') }} {{ $maxSizeMb }} MB</p>
                </label>
            </div>
            @if($file)
                <div class="mt-3 p-3 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3">
                    <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                    <span class="text-sm text-green-700">{{ $file->getClientOriginalName() }} ({{ number_format($file->getSize() / 1024, 0) }} KB)</span>
                </div>
            @endif
            <div wire:loading wire:target="file" class="mt-3 text-sm text-blue-600">{{ __('جارٍ رفع الملف...') }}</div>
            @error('file') <p class="mt-2 text-xs text-red-600">{{ $message }}</p> @enderror
        @endif

        {{-- Step 3: Notes --}}
        @if($currentStep === 3)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('ملاحظات (اختياري)') }}</h2>
            <textarea wire:model="notes" rows="4" placeholder="{{ __('أي ملاحظات إضافية حول هذا المستند...') }}"
                      class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"></textarea>
            @error('notes') <p class="mt-2 text-xs text-red-600">{{ $message }}</p> @enderror
        @endif

        {{-- Step 4: Review/Confirm --}}
        @if($currentStep === 4 && !$completed)
            <h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('مراجعة وتأكيد') }}</h2>
            <dl class="space-y-3">
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('نوع المستند') }}</dt>
                    <dd class="text-sm font-medium text-gray-800">{{ \App\Domain\Document\Enums\DocumentType::from($documentType)->label() }}</dd>
                </div>
                @if($file)
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('اسم الملف') }}</dt>
                    <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ $file->getClientOriginalName() }}</dd>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('حجم الملف') }}</dt>
                    <dd class="text-sm font-medium text-gray-800" dir="ltr">{{ number_format($file->getSize() / 1024, 0) }} KB</dd>
                </div>
                @endif
                @if($notes)
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('ملاحظات') }}</dt>
                    <dd class="text-sm text-gray-800">{{ $notes }}</dd>
                </div>
                @endif
            </dl>
        @endif

        {{-- Success --}}
        @if($completed && $createdDocument)
            <div class="text-center py-8">
                <div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                </div>
                <h2 class="text-xl font-bold text-gray-800 mb-2">{{ __('تم رفع المستند بنجاح') }}</h2>
                <p class="text-sm text-gray-500 mb-1">{{ $createdDocument['type_label'] }} — {{ $createdDocument['original_filename'] }}</p>
                <p class="text-sm text-gray-500">{{ __('الحالة:') }} {{ $createdDocument['status_label'] }}</p>
            </div>
        @endif
    </div>

    {{-- Navigation Buttons --}}
    @if(!$completed)
        <div class="flex items-center justify-between mt-6">
            <button wire:click="previousStep" @if($currentStep === 1) disabled @endif
                    class="px-5 py-2.5 text-sm font-medium rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                {{ __('السابق') }}
            </button>

            @if($currentStep < $totalSteps)
                <button wire:click="nextStep"
                        class="px-5 py-2.5 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700">
                    {{ __('التالي') }}
                </button>
            @else
                <button wire:click="confirm" wire:loading.attr="disabled" wire:target="confirm"
                        class="px-5 py-2.5 text-sm font-medium rounded-lg bg-green-600 text-white hover:bg-green-700 disabled:opacity-50">
                    <span wire:loading.remove wire:target="confirm">{{ __('تأكيد الرفع') }}</span>
                    <span wire:loading wire:target="confirm">{{ __('جارٍ الرفع...') }}</span>
                </button>
            @endif
        </div>
    @endif
</div>
