<div>
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('مراجعة مستند') }}</h1>
        <a href="{{ route('documents.approvals') }}" wire:navigate
           class="inline-flex items-center gap-2 px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            {{ __('رجوع') }}
        </a>
    </div>

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

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Document Info --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <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">{{ $document->document_type->label() }}</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">{{ $document->original_filename }}</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($document->file_size / 1024, 0) }} KB</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">{{ $document->documentable?->name_ar ?? '-' }}</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">{{ $document->uploader?->name_ar ?? '-' }}</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">{{ $document->created_at->format('Y-m-d H:i') }}</dd>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <dt class="text-sm text-gray-500">{{ __('الحالة') }}</dt>
                    <dd>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                            {{ match($document->status->badgeColor()) { 'yellow' => 'bg-yellow-100 text-yellow-700', 'green' => 'bg-green-100 text-green-700', 'red' => 'bg-red-100 text-red-700', default => 'bg-gray-100 text-gray-700' } }}">
                            {{ $document->status->label() }}
                        </span>
                    </dd>
                </div>
                @if($document->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">{{ $document->notes }}</dd>
                </div>
                @endif
            </dl>

            {{-- Preview/Download --}}
            <div class="mt-4 flex gap-3">
                <a href="{{ route('documents.view', $document) }}" target="_blank"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 text-sm font-medium">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                    {{ __('معاينة') }}
                </a>
                <a href="{{ route('documents.download', $document) }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-700 rounded-lg hover:bg-gray-100 text-sm font-medium">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    {{ __('تحميل') }}
                </a>
            </div>
        </div>

        {{-- Actions --}}
        @if($document->isPending())
        <div class="space-y-4">
            {{-- Approve --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-green-700 mb-4">{{ __('اعتماد المستند') }}</h2>

                @if($expiryRequired)
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الانتهاء') }} <span class="text-red-500">*</span></label>
                        <input type="date" wire:model="expiresAt" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm" dir="ltr">
                        @error('expiresAt') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                @else
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الانتهاء (اختياري)') }}</label>
                        <input type="date" wire:model="expiresAt" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm" dir="ltr">
                    </div>
                @endif

                <button wire:click="approve" wire:loading.attr="disabled" wire:target="approve"
                        class="w-full px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium disabled:opacity-50">
                    <span wire:loading.remove wire:target="approve">{{ __('اعتماد') }}</span>
                    <span wire:loading wire:target="approve">{{ __('جارٍ الاعتماد...') }}</span>
                </button>
            </div>

            {{-- Reject --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-red-700 mb-4">{{ __('رفض المستند') }}</h2>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سبب الرفض') }} <span class="text-red-500">*</span></label>
                    <textarea wire:model="rejectionReason" rows="3" placeholder="{{ __('اكتب سبب رفض هذا المستند...') }}"
                              class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-sm"></textarea>
                    @error('rejectionReason') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <button wire:click="reject" wire:loading.attr="disabled" wire:target="reject"
                        class="w-full px-4 py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50">
                    <span wire:loading.remove wire:target="reject">{{ __('رفض') }}</span>
                    <span wire:loading wire:target="reject">{{ __('جارٍ الرفض...') }}</span>
                </button>
            </div>
        </div>
        @endif
    </div>
</div>
