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

<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
        <div class="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
            <input
                type="text"
                wire:model.live.debounce.300ms="search"
                placeholder="Search products..."
                class="w-full sm:w-64 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 text-sm focus:border-indigo-500 focus:ring-indigo-500"
            />
            <div class="w-full sm:w-48">
                <x-searchable-select wire-model="warehouseFilter" :options="$warehouses" :selected="$warehouseFilter" placeholder="All warehouses" />
            </div>

            @if ($search || $warehouseFilter)
                <button wire:click="resetFilters" type="button" class="text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 self-center">
                    Clear filters
                </button>
            @endif
        </div>

        <div class="flex flex-wrap gap-2">
            @can('inventory.adjust')
                <button wire:click="openOpeningForm" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                    Opening Stock
                </button>
                <button wire:click="openAdjustForm" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                    Adjust Stock
                </button>
            @endcan
            @can('inventory.transfer')
                <button wire:click="openTransferForm" class="px-3 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition">
                    Transfer Stock
                </button>
            @endcan
        </div>
    </div>

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

    <div class="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-xl overflow-hidden">
        @if ($balances->isEmpty() && ($search || $warehouseFilter))
            <x-empty-state
                title="No stock balances match these filters"
                message="Try a different search term or clear the filters above."
            />
        @elseif ($balances->isEmpty())
            <x-empty-state
                title="No stock recorded yet"
                message="Record opening stock for a product and warehouse to start tracking inventory."
                action="openOpeningForm"
                action-label="Opening Stock"
            />
        @else
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-100 dark:divide-gray-700 text-sm">
                    <thead class="bg-gray-50 dark:bg-gray-900/40">
                        <tr>
                            <x-sortable-th column="product" :sort-by="$sortBy" :sort-direction="$sortDirection">Product</x-sortable-th>
                            <x-sortable-th column="warehouse" :sort-by="$sortBy" :sort-direction="$sortDirection">Warehouse</x-sortable-th>
                            <x-sortable-th column="quantity" :sort-by="$sortBy" :sort-direction="$sortDirection" align="right">Quantity</x-sortable-th>
                            <x-sortable-th column="cost" :sort-by="$sortBy" :sort-direction="$sortDirection" align="right">Avg. Cost</x-sortable-th>
                            <x-sortable-th column="value" :sort-by="$sortBy" :sort-direction="$sortDirection" align="right">Stock Value</x-sortable-th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                        @foreach ($balances as $balance)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30">
                                <td class="px-4 py-3">
                                    <div class="font-medium text-gray-800 dark:text-gray-100">{{ $balance->product->name }}</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $balance->product->sku }}</div>
                                </td>
                                <td class="px-4 py-3 text-gray-600 dark:text-gray-300">{{ $balance->warehouse->name }}</td>
                                <td @class([
                                    'px-4 py-3 text-right font-medium',
                                    'text-amber-600 dark:text-amber-400' => $balance->quantity <= $balance->product->reorder_level && $balance->quantity > 0,
                                    'text-red-600 dark:text-red-400' => $balance->quantity === 0,
                                    'text-gray-800 dark:text-gray-100' => $balance->quantity > $balance->product->reorder_level,
                                ])>
                                    {{ $balance->quantity }}
                                </td>
                                <td class="px-4 py-3 text-right text-gray-600 dark:text-gray-300">{{ number_format($balance->average_cost, 2) }}</td>
                                <td class="px-4 py-3 text-right text-gray-600 dark:text-gray-300">{{ number_format($balance->stockValue(), 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <x-per-page-select :per-page="$perPage" :options="$perPageOptions" :total="$balances->total()" noun="balance" />

                {{ $balances->links() }}
            </div>
        @endif
    </div>

    <div class="mt-4 flex gap-4">
        <a href="{{ route('inventory.movements') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400">
            View movement history &rarr;
        </a>
        <a href="{{ route('inventory.batches') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400">
            View batches &amp; expiry &rarr;
        </a>
    </div>

    {{-- Opening Stock modal --}}
    @if ($showOpeningForm)
        <div class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0" wire:key="opening-modal">
            <div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-900/75" wire:click="$set('showOpeningForm', false)"></div>
            <div class="relative mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl sm:w-full sm:max-w-lg sm:mx-auto">
                <form wire:submit="saveOpeningStock" class="p-6 space-y-4">
                    <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100">Record Opening Stock</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400">A one-time starting balance for a product at a warehouse. Use Adjust Stock afterwards for corrections.</p>

                    <div>
                        <x-input-label for="openingProductId" value="Product" />
                        <div class="mt-1">
                            <x-searchable-select wire-model="openingProductId" :options="$productOptions" :selected="$openingProductId" placeholder="— Select a product —" />
                        </div>
                        <x-input-error :messages="$errors->get('openingProductId')" class="mt-1" />
                    </div>

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

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <x-input-label for="openingQuantity" value="Quantity" />
                            <x-text-input wire:model="openingQuantity" id="openingQuantity" type="number" min="1" class="mt-1 block w-full" />
                            <x-input-error :messages="$errors->get('openingQuantity')" class="mt-1" />
                        </div>
                        <div>
                            <x-input-label for="openingUnitCost" value="Unit cost" />
                            <x-text-input wire:model="openingUnitCost" id="openingUnitCost" type="number" step="0.01" min="0" class="mt-1 block w-full" />
                            <x-input-error :messages="$errors->get('openingUnitCost')" class="mt-1" />
                        </div>
                    </div>

                    <div>
                        <x-input-label for="openingNotes" value="Notes (optional)" />
                        <textarea wire:model="openingNotes" id="openingNotes" 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 class="flex justify-end gap-3 pt-2">
                        <button type="button" wire:click="$set('showOpeningForm', false)" 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</button>
                        <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="saveOpeningStock">Save</span>
                            <span wire:loading wire:target="saveOpeningStock">Saving…</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @endif

    {{-- Adjust Stock modal --}}
    @if ($showAdjustForm)
        <div class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0" wire:key="adjust-modal">
            <div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-900/75" wire:click="$set('showAdjustForm', false)"></div>
            <div class="relative mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl sm:w-full sm:max-w-lg sm:mx-auto">
                <form wire:submit="saveAdjustment" class="p-6 space-y-4">
                    <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100">Adjust Stock</h3>

                    <div>
                        <x-input-label for="adjustProductId" value="Product" />
                        <div class="mt-1">
                            <x-searchable-select wire-model="adjustProductId" :options="$productOptions" :selected="$adjustProductId" placeholder="— Select a product —" />
                        </div>
                        <x-input-error :messages="$errors->get('adjustProductId')" class="mt-1" />
                    </div>

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

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <x-input-label for="adjustDirection" value="Direction" />
                            <select wire:model="adjustDirection" id="adjustDirection" 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">
                                <option value="add">Add (found stock)</option>
                                <option value="remove">Remove (damaged / lost)</option>
                            </select>
                        </div>
                        <div>
                            <x-input-label for="adjustQuantity" value="Quantity" />
                            <x-text-input wire:model="adjustQuantity" id="adjustQuantity" type="number" min="1" class="mt-1 block w-full" />
                            <x-input-error :messages="$errors->get('adjustQuantity')" class="mt-1" />
                        </div>
                    </div>

                    @if ($adjustDirection === 'add')
                        <div>
                            <x-input-label for="adjustUnitCost" value="Unit cost (optional)" />
                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Leave blank to keep the current average cost unchanged — only set this if the found stock has a known, different cost.</p>
                            <x-text-input wire:model="adjustUnitCost" id="adjustUnitCost" type="number" step="0.01" min="0" class="mt-1 block w-full" />
                            <x-input-error :messages="$errors->get('adjustUnitCost')" class="mt-1" />
                        </div>
                    @endif

                    <div>
                        <x-input-label for="adjustNotes" value="Reason" />
                        <textarea wire:model="adjustNotes" id="adjustNotes" 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>
                        <x-input-error :messages="$errors->get('adjustNotes')" class="mt-1" />
                    </div>

                    <div class="flex justify-end gap-3 pt-2">
                        <button type="button" wire:click="$set('showAdjustForm', false)" 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</button>
                        <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="saveAdjustment">Save</span>
                            <span wire:loading wire:target="saveAdjustment">Saving…</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @endif

    {{-- Transfer Stock modal --}}
    @if ($showTransferForm)
        <div class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0" wire:key="transfer-modal">
            <div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-900/75" wire:click="$set('showTransferForm', false)"></div>
            <div class="relative mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl sm:w-full sm:max-w-lg sm:mx-auto">
                <form wire:submit="saveTransfer" class="p-6 space-y-4">
                    <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100">Transfer Stock</h3>

                    <div>
                        <x-input-label for="transferProductId" value="Product" />
                        <div class="mt-1">
                            <x-searchable-select wire-model="transferProductId" :options="$productOptions" :selected="$transferProductId" placeholder="— Select a product —" />
                        </div>
                        <x-input-error :messages="$errors->get('transferProductId')" class="mt-1" />
                    </div>

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

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

                    <div>
                        <x-input-label for="transferNotes" value="Notes (optional)" />
                        <textarea wire:model="transferNotes" id="transferNotes" 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 class="flex justify-end gap-3 pt-2">
                        <button type="button" wire:click="$set('showTransferForm', false)" 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</button>
                        <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="saveTransfer">Save</span>
                            <span wire:loading wire:target="saveTransfer">Saving…</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @endif
</div>