<div>
    @php
        $isRevenue = $expense->category->value === 'external_revenue';
        $cancelled = $expense->isCancelled();
    @endphp

    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <div class="flex items-center gap-3">
            <a href="{{ route('expenses.list') }}" wire:navigate
               class="p-2 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-50 transition">
                <svg class="w-4 h-4 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <div>
                <h1 class="text-xl sm:text-2xl font-bold text-gray-800">
                    {{ $isRevenue ? __('تفاصيل الإيراد الخارجي') : __('تفاصيل المصروف') }}
                </h1>
                <p class="text-xs text-gray-400 font-mono" dir="ltr">{{ $expense->uuid }}</p>
            </div>
        </div>

        @if(!$cancelled)
        <button wire:click="$set('showCancelModal', true)"
                class="inline-flex items-center gap-2 px-4 py-2 border border-red-200 text-red-700 bg-red-50 rounded-lg hover:bg-red-100 transition text-sm">
            <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="M6 18L18 6M6 6l12 12"/></svg>
            {{ __('إلغاء المصروف') }}
        </button>
        @endif
    </div>

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

    @if($cancelled)
    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-xl">
        <p class="font-semibold text-red-800 text-sm mb-1">{{ __('هذا المصروف ملغى') }}</p>
        <p class="text-sm text-red-700">{{ $expense->cancellation_reason }}</p>
        <p class="text-xs text-red-500 mt-2">
            {{ __('ألغاه') }}: {{ $expense->canceller?->name ?? '—' }}
            &middot; <span dir="ltr">{{ $expense->cancelled_at?->format('Y-m-d H:i') }}</span>
        </p>
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6">
        {{-- Details --}}
        <div class="lg:col-span-2 space-y-4">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="p-5 border-b border-gray-100 bg-gradient-to-l {{ $isRevenue ? 'from-emerald-50' : 'from-red-50' }} to-white">
                    <p class="text-sm text-gray-500 mb-1">{{ $isRevenue ? __('قيمة الإيراد') : __('قيمة المصروف') }}</p>
                    <p class="text-3xl font-bold {{ $isRevenue ? 'text-emerald-700' : 'text-red-700' }}" dir="ltr">
                        {{ format_money($expense->amount) }}
                    </p>
                </div>

                <dl class="divide-y divide-gray-100 text-sm">
                    <div class="flex px-5 py-3">
                        <dt class="w-40 shrink-0 text-gray-500">{{ __('الوصف') }}</dt>
                        <dd class="text-gray-800 font-medium">{{ $expense->description }}</dd>
                    </div>
                    <div class="flex px-5 py-3">
                        <dt class="w-40 shrink-0 text-gray-500">{{ __('الفئة') }}</dt>
                        <dd>
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700">
                                {{ $expense->category->label() }}
                            </span>
                        </dd>
                    </div>
                    <div class="flex px-5 py-3">
                        <dt class="w-40 shrink-0 text-gray-500">{{ __('التاريخ') }}</dt>
                        <dd class="text-gray-800" dir="ltr">{{ $expense->expense_date?->format('Y-m-d') }}</dd>
                    </div>
                    <div class="flex px-5 py-3">
                        <dt class="w-40 shrink-0 text-gray-500">{{ $isRevenue ? __('المصدر') : __('المستلم') }}</dt>
                        <dd class="text-gray-800">{{ $expense->recipient_name ?: '—' }}</dd>
                    </div>
                    <div class="flex px-5 py-3">
                        <dt class="w-40 shrink-0 text-gray-500">{{ __('طريقة الدفع') }}</dt>
                        <dd class="text-gray-800">{{ $expense->payment_method?->label() ?? '—' }}</dd>
                    </div>
                    <div class="flex px-5 py-3">
                        <dt class="w-40 shrink-0 text-gray-500">{{ __('رقم الإيصال') }}</dt>
                        <dd class="text-gray-800" dir="ltr">{{ $expense->receipt_reference ?: '—' }}</dd>
                    </div>
                    <div class="flex px-5 py-3">
                        <dt class="w-40 shrink-0 text-gray-500">{{ __('الفرع') }}</dt>
                        <dd class="text-gray-800">{{ $expense->branch?->name ?? __('غير محدد') }}</dd>
                    </div>
                    <div class="flex px-5 py-3">
                        <dt class="w-40 shrink-0 text-gray-500">{{ __('الحالة') }}</dt>
                        <dd>
                            @if($cancelled)
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">{{ __('ملغى') }}</span>
                            @else
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">{{ __('نشط') }}</span>
                            @endif
                        </dd>
                    </div>
                    @if($expense->notes)
                    <div class="flex px-5 py-3">
                        <dt class="w-40 shrink-0 text-gray-500">{{ __('ملاحظات') }}</dt>
                        <dd class="text-gray-700 whitespace-pre-line">{{ $expense->notes }}</dd>
                    </div>
                    @endif
                    <div class="flex px-5 py-3">
                        <dt class="w-40 shrink-0 text-gray-500">{{ __('سجّله') }}</dt>
                        <dd class="text-gray-800">
                            {{ $expense->creator?->name ?? '—' }}
                            <span class="text-gray-400 text-xs ms-2" dir="ltr">{{ $expense->created_at?->format('Y-m-d H:i') }}</span>
                        </dd>
                    </div>
                </dl>
            </div>

            {{-- Journal entries: what this expense did to the books --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-5 py-3 border-b border-gray-100 flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-6h13M9 17H4V7h5m0 10V7m0 0h11"/></svg>
                    <h2 class="text-sm font-semibold text-gray-700">{{ __('القيود المحاسبية') }}</h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 border-b">
                            <tr>
                                <th class="px-4 py-2 text-start text-xs font-medium text-gray-500">{{ __('التاريخ') }}</th>
                                <th class="px-4 py-2 text-start text-xs font-medium text-gray-500">{{ __('النوع') }}</th>
                                <th class="px-4 py-2 text-start text-xs font-medium text-gray-500">{{ __('مدين') }}</th>
                                <th class="px-4 py-2 text-start text-xs font-medium text-gray-500">{{ __('دائن') }}</th>
                                <th class="px-4 py-2 text-start text-xs font-medium text-gray-500">{{ __('المبلغ') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @forelse($expense->transactions as $txn)
                            <tr>
                                <td class="px-4 py-2 text-gray-600" dir="ltr">{{ $txn->transaction_date?->format('Y-m-d') }}</td>
                                <td class="px-4 py-2 text-gray-700">{{ $txn->type->label() }}</td>
                                <td class="px-4 py-2 text-gray-700">
                                    <span class="text-gray-400 text-xs" dir="ltr">{{ $txn->debitAccount?->code }}</span>
                                    {{ $txn->debitAccount?->name_ar ?: $txn->debitAccount?->name }}
                                </td>
                                <td class="px-4 py-2 text-gray-700">
                                    <span class="text-gray-400 text-xs" dir="ltr">{{ $txn->creditAccount?->code }}</span>
                                    {{ $txn->creditAccount?->name_ar ?: $txn->creditAccount?->name }}
                                </td>
                                <td class="px-4 py-2 font-semibold text-gray-800" dir="ltr">{{ format_money($txn->amount) }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="px-4 py-6 text-center text-gray-400">{{ __('لا توجد قيود مرتبطة') }}</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Attachment --}}
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-5 py-3 border-b border-gray-100 flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
                    <h2 class="text-sm font-semibold text-gray-700">{{ __('الفاتورة / المرفق') }}</h2>
                </div>

                <div class="p-5">
                    @if($expense->hasAttachment())
                        <div class="rounded-lg border border-gray-200 overflow-hidden bg-gray-50 mb-3">
                            @if($expense->attachmentIsViewableImage())
                            <a href="{{ route('expenses.attachment', $expense) }}" target="_blank" rel="noopener">
                                <img src="{{ route('expenses.attachment', $expense) }}"
                                     alt="{{ $expense->attachment_name }}"
                                     class="w-full max-h-96 object-contain bg-white">
                            </a>
                            @elseif($expense->attachmentIsPdf())
                            <iframe src="{{ route('expenses.attachment', $expense) }}"
                                    title="{{ $expense->attachment_name }}"
                                    class="w-full h-96 bg-white"></iframe>
                            @else
                            <div class="p-8 text-center text-gray-400">
                                <svg class="w-10 h-10 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                <p class="text-xs">{{ __('لا يمكن عرض هذا النوع من الملفات') }}</p>
                            </div>
                            @endif
                        </div>

                        <p class="text-sm text-gray-700 break-all mb-1">{{ $expense->attachment_name }}</p>
                        <p class="text-xs text-gray-400 mb-3">
                            @if($expense->attachment_size)
                            <span dir="ltr">{{ number_format($expense->attachment_size / 1024, 0) }} KB</span> &middot;
                            @endif
                            {{ __('أرفقه') }} {{ $expense->attachmentUploader?->name ?? $expense->creator?->name ?? '—' }}
                            @if($expense->attachment_uploaded_at)
                            &middot; <span dir="ltr">{{ $expense->attachment_uploaded_at->format('Y-m-d H:i') }}</span>
                            @endif
                        </p>

                        <div class="flex flex-wrap gap-2">
                            <a href="{{ route('expenses.attachment', $expense) }}" target="_blank" rel="noopener"
                               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
                                {{ __('عرض') }}
                            </a>
                            <a href="{{ route('expenses.attachment.download', $expense) }}"
                               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
                                {{ __('تحميل') }}
                            </a>
                            @if(!$cancelled)
                            <button wire:click="$set('showRemoveModal', true)"
                                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs text-red-600 rounded-lg hover:bg-red-50 transition">
                                {{ __('حذف') }}
                            </button>
                            @endif
                        </div>
                    @else
                        <div class="text-center py-6 mb-3">
                            <svg class="w-10 h-10 mx-auto mb-2 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                            <p class="text-sm text-gray-500">{{ __('لا يوجد مستند مرفق') }}</p>
                            <p class="text-xs text-gray-400 mt-1">{{ __('ارفع صورة الفاتورة أو الإيصال') }}</p>
                        </div>
                    @endif

                    @if(!$cancelled)
                    <div class="{{ $expense->hasAttachment() ? 'mt-5 pt-5 border-t border-gray-100' : '' }}">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            {{ $expense->hasAttachment() ? __('استبدال المرفق') : __('إرفاق مستند') }}
                        </label>
                        <input type="file" wire:model="receipt" accept="image/*,.heic,.heif,application/pdf"
                               class="block w-full text-sm text-gray-600 file:me-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:bg-gray-100 file:text-gray-700 hover:file:bg-gray-200">
                        <div wire:loading wire:target="receipt" class="text-xs text-gray-400 mt-1">{{ __('جارٍ الرفع...') }}</div>
                        @error('receipt')
                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                        @enderror

                        <button wire:click="uploadReceipt" wire:loading.attr="disabled" wire:target="uploadReceipt,receipt"
                                class="mt-3 w-full px-4 py-2 text-sm bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 disabled:opacity-50 transition">
                            <span wire:loading.remove wire:target="uploadReceipt">{{ __('حفظ المرفق') }}</span>
                            <span wire:loading wire:target="uploadReceipt">{{ __('جارٍ الحفظ...') }}</span>
                        </button>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Remove attachment modal --}}
    @if($showRemoveModal)
    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" wire:click.self="$set('showRemoveModal', false)">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-sm mx-4 p-6">
            <h3 class="text-lg font-bold text-gray-800 mb-2">{{ __('حذف المرفق') }}</h3>
            <p class="text-sm text-gray-600 mb-5">{{ __('سيتم حذف الملف نهائياً. المصروف نفسه لن يتأثر.') }}</p>
            <div class="flex gap-3 justify-end">
                <button wire:click="$set('showRemoveModal', false)"
                        class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 rounded-lg border border-gray-300">{{ __('تراجع') }}</button>
                <button wire:click="removeReceipt" wire:loading.attr="disabled"
                        class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50">
                    <span wire:loading.remove wire:target="removeReceipt">{{ __('حذف') }}</span>
                    <span wire:loading wire:target="removeReceipt">{{ __('جارٍ الحذف...') }}</span>
                </button>
            </div>
        </div>
    </div>
    @endif

    {{-- Cancel modal --}}
    @if($showCancelModal)
    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" wire:click.self="$set('showCancelModal', false)">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 p-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4">{{ __('إلغاء المصروف') }}</h3>
            <p class="text-sm text-gray-600 mb-4">{{ __('سيتم عكس القيد المالي لهذا المصروف. المصروف سيبقى مرئياً بحالة "ملغى".') }}</p>
            <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="cancellationReason" rows="3"
                          class="w-full rounded-lg border-gray-300 text-sm focus:ring-red-500 focus:border-red-500"
                          placeholder="{{ __('مثال: تم تسجيل المصروف بالغلط في فرع آخر') }}"></textarea>
                @error('cancellationReason')
                <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div class="flex gap-3 justify-end">
                <button wire:click="$set('showCancelModal', false)"
                        class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 rounded-lg border border-gray-300">{{ __('تراجع') }}</button>
                <button wire:click="confirmCancel" wire:loading.attr="disabled"
                        class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50">
                    <span wire:loading.remove wire:target="confirmCancel">{{ __('تأكيد الإلغاء') }}</span>
                    <span wire:loading wire:target="confirmCancel">{{ __('جارٍ الإلغاء...') }}</span>
                </button>
            </div>
        </div>
    </div>
    @endif
</div>
