<div>
    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تصحيح فاتورة') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('تعديل بيانات فاتورة خاطئة مع سجل مراجعة كامل') }}</p>
        </div>
        <a href="{{ route('admin.panel') }}" wire:navigate
           class="inline-flex items-center gap-2 px-4 py-2 text-gray-600 bg-gray-100 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="M6 18L18 6M6 6l12 12"/>
            </svg>
            {{ __('رجوع') }}
        </a>
    </div>

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

    {{-- Warning Banner --}}
    <div class="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-xl">
        <div class="flex items-start gap-3">
            <svg class="w-5 h-5 text-amber-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
            </svg>
            <div>
                <p class="text-sm font-medium text-amber-800">{{ __('هذه الأداة للمديرين فقط') }}</p>
                <p class="text-xs text-amber-600 mt-0.5">{{ __('كل تعديل يتم تسجيله في سجل المراجعة ولا يمكن حذفه') }}</p>
            </div>
        </div>
    </div>

    {{-- Step Indicator --}}
    @if(!$completed)
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex items-center justify-between">
            @php
                $steps = [
                    1 => 'اختيار المشترك',
                    2 => 'اختيار الفاتورة',
                    3 => 'تفاصيل التصحيح',
                    4 => 'النتيجة',
                ];
            @endphp
            @foreach($steps as $num => $label)
            <div class="flex items-center {{ !$loop->last ? 'flex-1' : '' }}">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold
                        {{ $num === $currentStep ? 'bg-red-600 text-white' : '' }}
                        {{ $num < $currentStep ? 'bg-green-500 text-white' : '' }}
                        {{ $num > $currentStep ? 'bg-gray-200 text-gray-500' : '' }}">
                        @if($num < $currentStep)
                            <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="M5 13l4 4L19 7"/>
                            </svg>
                        @else
                            {{ $num }}
                        @endif
                    </div>
                    <span class="text-xs sm:text-sm font-medium {{ $num === $currentStep ? 'text-gray-800' : 'text-gray-500' }} hidden sm:inline">
                        {{ __($label) }}
                    </span>
                </div>
                @if(!$loop->last)
                <div class="flex-1 h-0.5 mx-3 {{ $num < $currentStep ? 'bg-green-300' : 'bg-gray-200' }}"></div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Step 1: Search Participant --}}
    @if($currentStep === 1)
    <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>

        <input type="text" wire:model.live.debounce.300ms="search"
               placeholder="{{ __('ابحث بالاسم أو رقم الهاتف أو رقم المشترك...') }}"
               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 text-sm">

        @if($searchResults->isNotEmpty())
        <div class="mt-4 space-y-2 max-h-80 overflow-y-auto">
            @foreach($searchResults as $participant)
            <button wire:click="selectParticipant({{ $participant->id }}, '{{ addslashes($participant->person?->name_ar) }}')"
                    class="w-full flex items-center gap-3 p-3 border border-gray-200 rounded-xl hover:bg-gray-50 hover:border-red-300 transition-colors text-start">
                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center shrink-0">
                    <span class="text-sm font-bold text-red-700">{{ mb_substr($participant->person?->name_ar ?? '?', 0, 1) }}</span>
                </div>
                <div class="min-w-0 flex-1">
                    <p class="font-medium text-gray-800 text-sm truncate">{{ $participant->person?->name_ar }}</p>
                    <p class="text-xs text-gray-500">{{ $participant->participant_number }} — {{ $participant->person?->phone }}</p>
                </div>
            </button>
            @endforeach
        </div>
        @elseif(strlen($search) >= 2)
        <p class="mt-4 text-sm text-gray-500 text-center py-4">{{ __('لا توجد نتائج') }}</p>
        @endif
    </div>
    @endif

    {{-- Step 2: Select Invoice --}}
    @if($currentStep === 2)
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-gray-800">{{ __('فواتير') }}: {{ $selectedParticipantName }}</h2>
            <button wire:click="previousStep" class="text-sm text-gray-500 hover:text-gray-700">{{ __('تغيير المشترك') }}</button>
        </div>

        @if($invoices->isEmpty())
        <p class="text-sm text-gray-500 text-center py-8">{{ __('لا توجد فواتير لهذا المشترك') }}</p>
        @else
        <div class="space-y-3 max-h-[500px] overflow-y-auto">
            @foreach($invoices as $inv)
            <button wire:click="selectInvoice({{ $inv->id }})"
                    class="w-full text-start p-4 border border-gray-200 rounded-xl hover:bg-gray-50 hover:border-red-300 transition-colors">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-mono font-medium text-gray-800">{{ $inv->number }}</span>
                    <span class="px-2 py-0.5 text-xs rounded-full
                        {{ $inv->status === \App\Domain\Financial\Enums\InvoiceStatus::Paid ? 'bg-green-100 text-green-700' : '' }}
                        {{ $inv->status === \App\Domain\Financial\Enums\InvoiceStatus::Sent ? 'bg-blue-100 text-blue-700' : '' }}
                        {{ $inv->status === \App\Domain\Financial\Enums\InvoiceStatus::PartiallyPaid ? 'bg-amber-100 text-amber-700' : '' }}
                        {{ $inv->status === \App\Domain\Financial\Enums\InvoiceStatus::Cancelled ? 'bg-gray-100 text-gray-500' : '' }}
                        {{ $inv->status === \App\Domain\Financial\Enums\InvoiceStatus::Overdue ? 'bg-red-100 text-red-700' : '' }}
                        {{ $inv->status === \App\Domain\Financial\Enums\InvoiceStatus::Draft ? 'bg-gray-100 text-gray-600' : '' }}
                    ">{{ $inv->status->label() }}</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                    <span class="text-gray-600 truncate max-w-[60%]">{{ $inv->items->first()?->description ?? $inv->notes }}</span>
                    <span class="font-bold text-gray-800" dir="ltr">{{ number_format($inv->total_amount / 100, 2) }} {{ __('ج.م') }}</span>
                </div>
                <div class="flex items-center justify-between mt-1 text-xs text-gray-400">
                    <span>{{ $inv->issue_date?->format('Y-m-d') }}</span>
                    @if($inv->paid_amount > 0 && $inv->paid_amount < $inv->total_amount)
                    <span class="text-amber-600">{{ __('مدفوع') }}: {{ number_format($inv->paid_amount / 100, 2) }}</span>
                    @endif
                </div>
            </button>
            @endforeach
        </div>
        @endif
    </div>
    @endif

    {{-- Step 3: Correction Details --}}
    @if($currentStep === 3)
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-lg font-semibold text-gray-800">{{ __('تصحيح الفاتورة') }}: {{ $invoiceDetails['number'] ?? '' }}</h2>
            <button wire:click="previousStep" class="text-sm text-gray-500 hover:text-gray-700">{{ __('اختيار فاتورة أخرى') }}</button>
        </div>

        {{-- Current Invoice Info --}}
        <div class="mb-6 p-4 bg-gray-50 border border-gray-200 rounded-xl space-y-2">
            <div class="flex justify-between text-sm">
                <span class="text-gray-600">{{ __('المبلغ الحالي') }}</span>
                <span class="font-bold text-gray-800" dir="ltr">{{ number_format(($invoiceDetails['total_amount'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</span>
            </div>
            <div class="flex justify-between text-sm">
                <span class="text-gray-600">{{ __('المدفوع') }}</span>
                <span class="font-medium" dir="ltr">{{ number_format(($invoiceDetails['paid_amount'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</span>
            </div>
            <div class="flex justify-between text-sm">
                <span class="text-gray-600">{{ __('الحالة') }}</span>
                <span class="font-medium">{{ $invoiceDetails['status'] ?? '' }}</span>
            </div>
            @if(!empty($invoiceDetails['items']))
            <div class="border-t border-gray-200 pt-2 mt-2">
                @foreach($invoiceDetails['items'] as $item)
                <div class="flex justify-between text-xs text-gray-500">
                    <span>{{ $item['description'] }}</span>
                    <span dir="ltr">{{ number_format($item['unit_price'] / 100, 2) }}</span>
                </div>
                @endforeach
            </div>
            @endif
            @if(!empty($invoiceDetails['payments']))
            <div class="border-t border-gray-200 pt-2 mt-2">
                <p class="text-xs font-medium text-gray-600 mb-1">{{ __('المدفوعات:') }}</p>
                @foreach($invoiceDetails['payments'] as $pay)
                <div class="flex justify-between text-xs text-gray-500">
                    <span>{{ $pay['method'] }} — {{ $pay['payment_date'] }}</span>
                    <span dir="ltr">{{ number_format($pay['amount'] / 100, 2) }}</span>
                </div>
                @endforeach
            </div>
            @endif
        </div>

        {{-- Correction Form --}}
        <div class="space-y-5">
            {{-- New Amount --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('المبلغ الصحيح (ج.م)') }}</label>
                <input type="number" wire:model.live="newAmountInput" step="0.01" min="0"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 text-lg font-bold"
                       dir="ltr">
                @if($this->difference > 0)
                <p class="mt-1 text-sm text-amber-600">
                    {{ __('فرق:') }} <span dir="ltr">{{ number_format($this->difference / 100, 2) }} {{ __('ج.م') }}</span> {{ __('سيتم خصمه') }}
                </p>
                @elseif($this->difference < 0)
                <p class="mt-1 text-sm text-red-600">
                    {{ __('زيادة:') }} <span dir="ltr">{{ number_format(abs($this->difference) / 100, 2) }} {{ __('ج.م') }}</span>
                </p>
                @endif
            </div>

            {{-- New Description --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('الوصف الصحيح') }}</label>
                <input type="text" wire:model="newDescription"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 text-sm">
            </div>

            {{-- Remainder Invoice --}}
            @if($this->difference > 0)
            <div class="p-4 border border-dashed border-amber-300 rounded-xl bg-amber-50">
                <label class="flex items-center gap-3 cursor-pointer mb-3">
                    <input type="checkbox" wire:model.live="createRemainderInvoice"
                           class="w-5 h-5 rounded border-gray-300 text-red-600 focus:ring-red-500">
                    <span class="text-sm font-medium text-gray-800">{{ __('إنشاء فاتورة بالمبلغ المتبقي') }} ({{ number_format($this->difference / 100, 2) }} {{ __('ج.م') }})</span>
                </label>

                @if($createRemainderInvoice)
                <div class="space-y-3 ms-8">
                    <div>
                        <label class="block text-xs text-gray-600 mb-1">{{ __('تاريخ الاستحقاق') }}</label>
                        <input type="date" wire:model="remainderDueDate"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" dir="ltr">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-600 mb-1">{{ __('وصف الفاتورة الجديدة') }}</label>
                        <input type="text" wire:model="remainderDescription"
                               placeholder="{{ __('أقساط متبقية...') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                    </div>
                </div>
                @endif
            </div>
            @endif

            {{-- Reason (required) --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    {{ __('سبب التصحيح') }} <span class="text-red-500">*</span>
                </label>
                <textarea wire:model="correctionReason" rows="3"
                          placeholder="{{ __('اشرح سبب التعديل بالتفصيل — مثال: الموظف سجّل القيد كاملاً بدلاً من القسط الأول فقط') }}"
                          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 text-sm"></textarea>
                @error('correctionReason')
                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        {{-- Actions --}}
        <div class="flex justify-between mt-8">
            <button wire:click="previousStep"
                    class="inline-flex items-center gap-2 px-6 py-3 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 font-medium">
                <svg class="w-5 h-5" 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>
                {{ __('السابق') }}
            </button>
            <button wire:click="applyCorrection" wire:loading.attr="disabled"
                    class="inline-flex items-center gap-2 px-8 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 font-bold transition-colors disabled:opacity-50">
                <span wire:loading.remove wire:target="applyCorrection">{{ __('تطبيق التصحيح') }}</span>
                <span wire:loading wire:target="applyCorrection" class="inline-flex items-center gap-2">
                    <svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                    </svg>
                    {{ __('جارٍ التصحيح...') }}
                </span>
            </button>
        </div>
    </div>
    @endif

    {{-- Step 4: Results --}}
    @if($currentStep === 4 && $completed)
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center">
        <div class="w-20 h-20 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-6">
            <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
        </div>

        <h2 class="text-2xl font-bold text-green-700 mb-2">{{ __('تم التصحيح بنجاح') }}</h2>
        <p class="text-gray-600 mb-6">{{ __('تم تعديل الفاتورة وتسجيل التغيير في سجل المراجعة') }}</p>

        <div class="inline-block bg-gray-50 border border-gray-200 rounded-xl p-6 mb-6 text-start max-w-md mx-auto">
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">{{ __('الفاتورة') }}</span>
                    <span class="font-mono font-medium">{{ $correctionResult['invoice_number'] ?? '' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">{{ __('المبلغ الأصلي') }}</span>
                    <span class="font-medium line-through text-gray-400" dir="ltr">{{ number_format(($correctionResult['original_amount'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">{{ __('المبلغ الجديد') }}</span>
                    <span class="font-bold text-green-700" dir="ltr">{{ number_format(($correctionResult['new_amount'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-600">{{ __('الحالة الجديدة') }}</span>
                    <span class="font-medium">{{ $correctionResult['new_status'] ?? '' }}</span>
                </div>
                @if(!empty($correctionResult['remainder_invoice']))
                <div class="border-t border-gray-200 pt-3">
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600">{{ __('فاتورة المتبقي') }}</span>
                        <span class="font-mono font-medium">{{ $correctionResult['remainder_invoice']['number'] }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600">{{ __('المبلغ المتبقي') }}</span>
                        <span class="font-bold text-amber-700" dir="ltr">{{ number_format($correctionResult['remainder_invoice']['amount'] / 100, 2) }} {{ __('ج.م') }}</span>
                    </div>
                </div>
                @endif
            </div>
        </div>

        <div class="flex justify-center gap-3">
            <button wire:click="startOver"
                    class="inline-flex items-center gap-2 px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium">
                {{ __('تصحيح فاتورة أخرى') }}
            </button>
            <a href="{{ route('admin.panel') }}" wire:navigate
               class="inline-flex items-center gap-2 px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 font-medium">
                {{ __('لوحة التحكم') }}
            </a>
        </div>
    </div>
    @endif
</div>
