@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">{{ $editing ? "Edit Stock Transfer {$editing->batch_number}" : 'Smart Stock Movement' }}</x-slot>

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

    <x-page-header section="Stock" title="Batch transfer" subtitle="Move stock between warehouses." />

    @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

    @if ($editing)
        <div class="mb-4 rounded-lg bg-amber-50 dark:bg-amber-500/10 text-amber-800 dark:text-amber-300 text-sm px-4 py-3">
            Saving reverses this transfer's original stock movements and books the edited version: the old quantities go back to
            the source warehouse and out of the destination, then the new quantities move across. If the destination no longer
            holds enough stock to reverse, the edit is refused.
        </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 (e.g. "Beard Softner Cream 100Gm  12").
            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;BACK TO 18 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">Move several products between two warehouses in one go, with an optional bill for the goods.</p>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <x-input-label for="fromWarehouseId" value="From warehouse" />
                    <div class="mt-1">
                        <x-searchable-select wire-model="fromWarehouseId" :options="$warehouses" :selected="$fromWarehouseId" placeholder="— Select source warehouse —" />
                    </div>
                    <x-input-error :messages="$errors->get('fromWarehouseId')" class="mt-1" />
                </div>

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

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

                <div class="sm:col-span-2">
                    <x-input-label for="notes" value="Notes (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>

        <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>
                            @if ($generateInvoice)
                                <th class="pb-2 px-3 w-28 text-right">Rate</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>
                            @endif
                            <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'] && $fromWarehouseId)
                                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">In stock at source: {{ $this->availableStock($index) }}</p>
                                    @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>
                                @if ($generateInvoice)
                                    <td class="py-2 px-3 text-right text-gray-600 dark:text-gray-300">
                                        {{ isset($previewLines[$index]) ? number_format($previewLines[$index]['unit_price'], 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]['taxable'], 2) : '—' }}
                                    </td>
                                @endif
                                <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>

        <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-4">Bill for this transfer</h3>

            <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
                <input type="checkbox" wire:model.live="generateInvoice" @disabled($editing?->has_invoice) class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
                Generate an invoice for the receiving warehouse
            </label>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Priced at your chosen tier and GST-correct, but recorded as a stock transfer document — it does not create a sale and never appears in Sales/Profit reports.
            </p>

            @if ($generateInvoice)
                <div class="mt-4">
                    <x-input-label value="Price tier" />
                    <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.live="priceTier" value="distributor" class="border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
                            Distributor rate
                        </label>
                        <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
                            <input type="radio" wire:model.live="priceTier" value="retailer" class="border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" />
                            Retailer rate
                        </label>
                    </div>
                    <x-input-error :messages="$errors->get('priceTier')" class="mt-1" />
                </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>Taxable amount</span>
                            <span>{{ number_format($totals['taxable'], 2) }}</span>
                        </div>
                        <div class="flex justify-between text-gray-600 dark:text-gray-300">
                            <span>CGST</span>
                            <span>{{ number_format($totals['cgst'], 2) }}</span>
                        </div>
                        <div class="flex justify-between text-gray-600 dark:text-gray-300">
                            <span>SGST</span>
                            <span>{{ number_format($totals['sgst'], 2) }}</span>
                        </div>
                        <div class="flex justify-between text-gray-600 dark:text-gray-300">
                            <span>Round off</span>
                            <span>{{ number_format($totals['round_off'], 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>
            @endif
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ $editing ? route('inventory.transfers.show', $editing) : route('inventory.transfers.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">{{ $editing ? 'Update Transfer' : 'Save Transfer' }}</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="transfer-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 transfer.
                        </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>

                    {{-- Not overflow-x-auto: the per-row product picker is an absolutely-positioned
                        dropdown that overflow-x would clip — same note as sale-form.blade.php's item table. --}}
                    <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>
                                    @if ($generateInvoice)
                                        <th class="py-2 px-3 text-right">Rate</th>
                                        <th class="py-2 px-3 text-right">Amount</th>
                                    @endif
                                    <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="transfer-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'] }}
                                            @if ($line['section_label'])
                                                <div class="text-xs">{{ $line['section_label'] }}</div>
                                            @endif
                                        </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>
                                        @if ($generateInvoice)
                                            <td class="py-2 px-3 text-right text-gray-700 dark:text-gray-200 align-top">
                                                {{ $p ? number_format($p['unit_price'], 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['taxable'], 2) : '—' }}
                                            </td>
                                        @endif
                                        <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>

                    @if ($generateInvoice)
                        @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">Taxable value</dt><dd>{{ number_format($draftTotals['taxable'], 2) }}</dd></div>
                                <div class="flex justify-between"><dt class="text-gray-500 dark:text-gray-400">CGST</dt><dd>{{ number_format($draftTotals['cgst'], 2) }}</dd></div>
                                <div class="flex justify-between"><dt class="text-gray-500 dark:text-gray-400">SGST</dt><dd>{{ number_format($draftTotals['sgst'], 2) }}</dd></div>
                                <div class="flex justify-between"><dt class="text-gray-500 dark:text-gray-400">Round off</dt><dd>{{ number_format($draftTotals['round_off'], 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>
                    @endif
                </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="confirmAddToTransfer" 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="confirmAddToTransfer">Add to Transfer</span>
                        <span wire:loading wire:target="confirmAddToTransfer">Adding…</span>
                    </button>
                </div>
            </div>
        </div>
    @endif
</div>