@php
    $productOptions = $products->map(fn ($product) => (object) ['id' => $product->id, 'name' => "{$product->name} ({$product->sku})"]);
    $previewLines = $this->previewLines();
    $totals = $this->totals();
@endphp

<div>
    <x-slot name="header">Smart Supplier Return</x-slot>

    <div class="mb-4">
        <a href="{{ route('purchases.returns.index') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400">
            &larr; Back to supplier returns
        </a>
    </div>

    <x-page-header section="Supplier returns" title="Supplier return" subtitle="Send goods back to a supplier as a credit or a replacement." />

    @if (session('error'))
        <div class="mb-4 rounded-lg bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 text-sm px-4 py-3">
            {{ session('error') }}
        </div>
    @endif

    <div class="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-xl p-6 mb-6">
        <h3 class="text-base font-bold text-gray-900 dark:text-white">Paste items from a box list</h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            Paste it the way it's written — one product and quantity per line. Parse Items matches every line to a
            product; you review and fix anything before it's added below.
        </p>

        <div class="mt-4">
            <textarea wire:model="itemsText" rows="8" placeholder="Beard Softner Cream 100Gm&#9;12&#10;Hair Spa Cream 100Gm&#9;12"
                class="block w-full font-mono text-sm rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
            <x-input-error :messages="$errors->get('itemsText')" class="mt-1" />
        </div>

        <div class="mt-4 flex items-center gap-3">
            <button type="button" wire:click="parseItems" wire:loading.attr="disabled"
                class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-900 border border-indigo-600 text-indigo-600 dark:text-indigo-400 text-sm font-medium rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition disabled:opacity-50">
                <span wire:loading.remove wire:target="parseItems">Parse Items</span>
                <span wire:loading wire:target="parseItems">Parsing…</span>
            </button>

            @if (! empty($draftLines) && ! $showReviewModal)
                <button type="button" wire:click="reopenReviewModal" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700">
                    Review the last parsed list again ({{ count($draftLines) }} lines)
                </button>
            @endif
        </div>
    </div>

    <form wire:submit="save" class="space-y-6">
        <div class="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-xl p-6">
            <h3 class="text-base font-bold text-gray-900 dark:text-white mb-1">Details</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Return inventory from a warehouse straight to a supplier — no purchase order required.</p>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <x-input-label for="supplierId" value="Supplier" />
                    <div class="mt-1">
                        <x-searchable-select wire-model="supplierId" :options="$suppliers" :selected="$supplierId" placeholder="— Select a supplier —" />
                    </div>
                    <x-input-error :messages="$errors->get('supplierId')" class="mt-1" />
                </div>

                <div>
                    <x-input-label for="warehouseId" value="Return from warehouse" />
                    <div class="mt-1">
                        <x-searchable-select wire-model="warehouseId" :options="$warehouses" :selected="$warehouseId" placeholder="— Select warehouse —" />
                    </div>
                    <x-input-error :messages="$errors->get('warehouseId')" class="mt-1" />
                </div>

                <div>
                    <x-input-label for="returnDate" value="Return date" />
                    <x-text-input wire:model="returnDate" id="returnDate" type="date" class="mt-1 block w-full" />
                    <x-input-error :messages="$errors->get('returnDate')" class="mt-1" />
                </div>

                <div>
                    <x-input-label value="Return type" />
                    <div class="mt-2 flex gap-4">
                        <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
                            <input type="radio" wire:model="returnType" value="credit" class="border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
                            Credit (reduces balance)
                        </label>
                        <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
                            <input type="radio" wire:model="returnType" value="replacement" class="border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
                            Replacement (no balance change)
                        </label>
                    </div>
                    <x-input-error :messages="$errors->get('returnType')" class="mt-1" />
                </div>

                <div class="sm:col-span-2">
                    <x-input-label for="notes" value="Reason for return (optional)" />
                    <textarea wire:model="notes" id="notes" rows="2" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                </div>
            </div>

            <div class="mt-6 pt-4 border-t border-gray-100 dark:border-gray-700">
                <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-100">Transport details (optional)</h4>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    Fill these in so the debit note can also travel with the goods when handed to a transporter.
                </p>

                <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <x-input-label for="transporterName" value="Transporter name" />
                        <x-text-input wire:model="transporterName" id="transporterName" type="text" class="mt-1 block w-full" />
                        <x-input-error :messages="$errors->get('transporterName')" class="mt-1" />
                    </div>

                    <div>
                        <x-input-label for="vehicleNumber" value="Vehicle number" />
                        <x-text-input wire:model="vehicleNumber" id="vehicleNumber" type="text" class="mt-1 block w-full" />
                        <x-input-error :messages="$errors->get('vehicleNumber')" class="mt-1" />
                    </div>

                    <div>
                        <x-input-label for="lrNumber" value="LR / GR number" />
                        <x-text-input wire:model="lrNumber" id="lrNumber" type="text" class="mt-1 block w-full" />
                        <x-input-error :messages="$errors->get('lrNumber')" class="mt-1" />
                    </div>

                    <div>
                        <x-input-label for="dispatchDate" value="Dispatch date" />
                        <x-text-input wire:model="dispatchDate" id="dispatchDate" type="date" class="mt-1 block w-full" />
                        <x-input-error :messages="$errors->get('dispatchDate')" class="mt-1" />
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-xl p-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-base font-bold text-gray-900 dark:text-white">Items</h3>
                    <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                        Total items: {{ count($items) }} &middot; Total quantity: {{ collect($items)->sum(fn ($item) => (int) ($item['quantity'] ?: 0)) }}
                    </p>
                </div>
                <button type="button" wire:click="addItem" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400">
                    + Add line
                </button>
            </div>

            <x-input-error :messages="$errors->get('items')" class="mb-3" />

            <div>
                <table class="min-w-full text-sm">
                    <thead>
                        <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                            <th class="pb-2 pr-3 w-10">Sr No.</th>
                            <th class="pb-2 pr-3 min-w-[220px]">Product</th>
                            <th class="pb-2 px-3 w-24">Quantity</th>
                            <th class="pb-2 px-3 w-28 text-right">Cost</th>
                            <th class="pb-2 px-3 w-20 text-right">Tax %</th>
                            <th class="pb-2 px-3 w-32 text-right">Amount</th>
                            <th class="pb-2 w-10"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($items as $index => $item)
                            <tr class="border-t border-gray-100 dark:border-gray-700">
                                <td class="py-2 pr-3 text-gray-500 dark:text-gray-400">{{ $index + 1 }}</td>
                                <td class="py-2 pr-3">
                                    <x-searchable-select wire-model="items.{{ $index }}.product_id" :options="$productOptions" :selected="$item['product_id']" placeholder="— Select —" />
                                    <x-input-error :messages="$errors->get('items.'.$index.'.product_id')" class="mt-1" />
                                    @if ($item['product_id'] && $warehouseId)
                                        @php $product = $products->firstWhere('id', (int) $item['product_id']) @endphp
                                        @if ($product?->track_batches)
                                            <select wire:model="items.{{ $index }}.batch_id" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-xs">
                                                <option value="">— Select batch —</option>
                                                @foreach ($this->batchesFor($index) as $batch)
                                                    <option value="{{ $batch->id }}">{{ $batch->batch_number }} — {{ $batch->quantity }} left @if ($batch->expiry_date), exp {{ $batch->expiry_date->format('d M Y') }} @endif</option>
                                                @endforeach
                                            </select>
                                            <x-input-error :messages="$errors->get('items.'.$index.'.batch_id')" class="mt-1" />
                                        @else
                                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">In stock: {{ $this->availableStock($index) }}</p>
                                        @endif
                                    @endif
                                </td>
                                <td class="py-2 px-3">
                                    <input type="number" min="1" wire:model="items.{{ $index }}.quantity" class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm" />
                                    <x-input-error :messages="$errors->get('items.'.$index.'.quantity')" class="mt-1" />
                                </td>
                                <td class="py-2 px-3 text-right text-gray-600 dark:text-gray-300">
                                    {{ isset($previewLines[$index]) ? number_format($previewLines[$index]['unit_cost'], 2) : '—' }}
                                </td>
                                <td class="py-2 px-3 text-right text-gray-600 dark:text-gray-300">
                                    {{ isset($previewLines[$index]) ? rtrim(rtrim(number_format($previewLines[$index]['tax_rate'], 2), '0'), '.').'%' : '—' }}
                                </td>
                                <td class="py-2 px-3 text-right text-gray-600 dark:text-gray-300">
                                    {{ isset($previewLines[$index]) ? number_format($previewLines[$index]['line_total'], 2) : '—' }}
                                </td>
                                <td class="py-2 text-right">
                                    @if (count($items) > 1)
                                        <button type="button" wire:click="removeItem({{ $index }})" class="text-red-500 hover:text-red-700">
                                            <svg class="h-4 w-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
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="flex justify-end mt-4">
                <div class="w-full sm:w-64 space-y-1 text-sm">
                    <div class="flex justify-between text-gray-600 dark:text-gray-300">
                        <span>Subtotal</span>
                        <span>{{ number_format($totals['subtotal'], 2) }}</span>
                    </div>
                    <div class="flex justify-between text-gray-600 dark:text-gray-300">
                        <span>Tax</span>
                        <span>{{ number_format($totals['tax_total'], 2) }}</span>
                    </div>
                    <div class="flex justify-between font-semibold text-gray-800 dark:text-gray-100 pt-1 border-t border-gray-100 dark:border-gray-700">
                        <span>Total</span>
                        <span>{{ number_format($totals['total'], 2) }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ route('purchases.returns.index') }}" class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
                Cancel
            </a>
            <button type="submit" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition">
                <span wire:loading.remove wire:target="save">Save Return</span>
                <span wire:loading wire:target="save">Saving…</span>
            </button>
        </div>
    </form>

    @if ($showReviewModal)
        <div class="fixed inset-0 z-50 bg-black/50 flex items-start justify-center p-4 sm:p-8 overflow-y-auto" wire:key="return-review-modal">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-5xl my-4">
                <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 dark:border-gray-700">
                    <h3 class="text-base font-bold text-gray-900 dark:text-white">
                        Review items &mdash; {{ count($draftLines) }} line{{ count($draftLines) === 1 ? '' : 's' }}
                    </h3>
                    <button type="button" wire:click="closeReviewModal" class="text-gray-400 hover:text-gray-600 text-xl leading-none">&times;</button>
                </div>

                <div class="p-6 max-h-[65vh] overflow-y-auto">
                    <x-input-error :messages="$errors->get('draftLines')" class="mb-3" />

                    @if ($this->unresolvedDraftCount() > 0)
                        <div class="mb-4 rounded-lg bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 text-sm px-4 py-3">
                            {{ $this->unresolvedDraftCount() }} line(s) below still need a product and/or a quantity greater than zero before you can add these to the return.
                        </div>
                    @endif

                    <div class="mb-3 flex items-center gap-3">
                        <x-text-input wire:model.live.debounce.200ms="reviewSearch" type="search"
                            placeholder="Search rows to jump to one and adjust it…" class="block w-full sm:max-w-xs" />
                        @if ($reviewSearch !== '')
                            <span class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
                                {{ count($this->visibleDraftLineIndices()) }} of {{ count($draftLines) }} shown
                            </span>
                            <button type="button" wire:click="$set('reviewSearch', '')" class="text-xs font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 whitespace-nowrap">
                                Clear
                            </button>
                        @endif
                    </div>

                    <div>
                        <table class="min-w-full text-sm">
                            <thead>
                                <tr class="text-left text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-700">
                                    <th class="py-2 pr-3">Typed as</th>
                                    <th class="py-2 px-3 w-64">Matched product</th>
                                    <th class="py-2 px-3 text-center w-20">Qty</th>
                                    <th class="py-2 px-3 text-right">Cost</th>
                                    <th class="py-2 px-3 text-right">Amount</th>
                                    <th class="py-2 pl-3 w-10"></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                                @php $pricedDrafts = $this->pricedDraftLines(); $visibleDrafts = $this->visibleDraftLineIndices(); @endphp
                                @foreach ($draftLines as $i => $line)
                                    @continue(! in_array($i, $visibleDrafts, true))
                                    @php
                                        $p = $pricedDrafts[$i] ?? null;
                                        $needsAttention = empty($line['product_id']) || (int) ($line['quantity'] ?? 0) <= 0;
                                    @endphp
                                    <tr wire:key="return-draft-{{ $i }}" @class(['bg-red-50/60 dark:bg-red-500/5' => $needsAttention])>
                                        <td class="py-2 pr-3 text-gray-500 dark:text-gray-400 align-top">
                                            {{ $line['raw_text'] }}
                                        </td>
                                        <td class="py-2 px-3 align-top">
                                            <x-searchable-select wire-model="draftLines.{{ $i }}.product_id" :options="$products" :selected="$line['product_id']" placeholder="— Search product —" />

                                            @if ($line['status'] === 'exact')
                                                <span class="inline-block mt-1 text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-500/10 dark:text-green-400">Matched</span>
                                            @elseif ($line['status'] === 'fuzzy')
                                                <span class="inline-block mt-1 text-xs px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400">
                                                    Check match{{ isset($line['candidates'][0]['score']) ? ' ('.$line['candidates'][0]['score'].'%)' : '' }}
                                                </span>
                                            @elseif ($line['status'] === 'manual')
                                                <span class="inline-block mt-1 text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400">Manual</span>
                                            @else
                                                <span class="inline-block mt-1 text-xs px-1.5 py-0.5 rounded bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400">Select a product</span>
                                            @endif

                                            @if (count($line['candidates']) > 1)
                                                <div class="mt-1 flex flex-wrap gap-1">
                                                    @foreach (array_slice($line['candidates'], 1) as $c)
                                                        <button type="button" wire:click="pickCandidate({{ $i }}, {{ $c['product_id'] }})"
                                                            class="text-xs px-1.5 py-0.5 rounded border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                                                            {{ $c['name'] }} ({{ $c['score'] }}%)
                                                        </button>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </td>
                                        <td class="py-2 px-3 align-top">
                                            <input type="number" min="0" wire:model.live.debounce.400ms="draftLines.{{ $i }}.quantity"
                                                class="w-20 text-center rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        </td>
                                        <td class="py-2 px-3 text-right text-gray-700 dark:text-gray-200 align-top">
                                            {{ $p ? number_format($p['unit_cost'], 2) : '—' }}
                                        </td>
                                        <td class="py-2 px-3 text-right font-medium text-gray-800 dark:text-gray-100 align-top">
                                            {{ $p ? number_format($p['line_total'], 2) : '—' }}
                                        </td>
                                        <td class="py-2 pl-3 text-right align-top">
                                            <button type="button" wire:click="removeDraftLine({{ $i }})" title="Remove this line" class="text-red-500 hover:text-red-700">&times;</button>
                                        </td>
                                    </tr>
                                @endforeach
                                @if (empty($visibleDrafts))
                                    <tr>
                                        <td colspan="6" class="py-8 text-center text-gray-500 dark:text-gray-400">
                                            No lines match "{{ $reviewSearch }}".
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

                    <button type="button" wire:click="addDraftLine" class="mt-3 text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400">
                        + Add line
                    </button>

                    @php $draftTotals = $this->draftTotals(); @endphp
                    <div class="mt-6 pt-4 border-t border-gray-100 dark:border-gray-700">
                        <dl class="space-y-1 text-sm max-w-xs ml-auto">
                            <div class="flex justify-between"><dt class="text-gray-500 dark:text-gray-400">Subtotal</dt><dd>{{ number_format($draftTotals['subtotal'], 2) }}</dd></div>
                            <div class="flex justify-between"><dt class="text-gray-500 dark:text-gray-400">Tax</dt><dd>{{ number_format($draftTotals['tax_total'], 2) }}</dd></div>
                            <div class="flex justify-between pt-2 mt-1 border-t border-gray-200 dark:border-gray-700 text-base font-semibold text-gray-800 dark:text-gray-100">
                                <dt>Total</dt><dd>&#8377;{{ number_format($draftTotals['total'], 2) }}</dd>
                            </div>
                        </dl>
                    </div>
                </div>

                <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-100 dark:border-gray-700">
                    <button type="button" wire:click="closeReviewModal" class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800">
                        Cancel
                    </button>
                    <button type="button" wire:click="confirmAddToReturn" wire:loading.attr="disabled" @disabled($this->unresolvedDraftCount() > 0)
                        class="inline-flex items-center px-5 py-2.5 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
                        <span wire:loading.remove wire:target="confirmAddToReturn">Add to Return</span>
                        <span wire:loading wire:target="confirmAddToReturn">Adding…</span>
                    </button>
                </div>
            </div>
        </div>
    @endif
</div>