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

<div>
    <x-slot name="header">Stock Balances</x-slot>

    <x-page-header section="Stock" title="Stock Balances" subtitle="What is on hand in each warehouse, valued at average cost.">
        <div class="flex flex-wrap gap-2">
            @can('inventory.adjust')
                <button wire:click="openOpeningForm" class="btn-secondary">
                    Opening Stock
                </button>
                <button wire:click="openAdjustForm" class="btn-secondary">
                    Adjust Stock
                </button>
            @endcan
            @can('inventory.transfer')
                <button wire:click="openTransferForm" class="btn-secondary">
                    Transfer Stock
                </button>
                <a href="{{ route('inventory.transfers.create') }}" class="btn-primary">
                    Smart Stock Movement
                </a>
            @endcan
            @can('inventory.view')
                <a href="{{ route('inventory.transfers.index') }}" class="btn-secondary">
                    Transfer History
                </a>
            @endcan
        </div>
    </x-page-header>

    @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

    @if ($supplierSummary->isNotEmpty())
        <div class="mb-4 flex flex-wrap gap-2">
            @foreach ($supplierSummary as $row)
                <button
                    type="button"
                    wire:click="filterSupplier('{{ $row->supplier_id }}')"
                    @class([
                        'text-left px-3 py-2 rounded-lg border text-xs transition',
                        'border-indigo-500 bg-indigo-50 dark:bg-indigo-500/10' => (string) $row->supplier_id === $supplierFilter,
                        'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-gray-300' => (string) $row->supplier_id !== $supplierFilter,
                    ])
                >
                    <div class="font-medium text-gray-800 dark:text-gray-100">{{ $row->supplier_name ?? 'No supplier set' }}</div>
                    <div class="text-gray-500 dark:text-gray-400">{{ number_format($row->units) }} units · ₹{{ number_format($row->value, 2) }}</div>
                </button>
            @endforeach
        </div>
    @endif

    @php $filtersActive = $productFilter || $warehouseFilter || $supplierFilter || $quantityFilter || $costFilter || $valueFilter; @endphp

    <x-filter-bar>
        <x-filter-field label="Product" grow>
            <input type="text" wire:model.live.debounce.300ms="productFilter" placeholder="Search product/SKU" class="field">
        </x-filter-field>
        <x-filter-field label="Warehouse" class="min-w-[11rem]">
            <x-searchable-select wire-model="warehouseFilter" :options="$warehouses" :selected="$warehouseFilter" placeholder="All warehouses"  />
        </x-filter-field>
        <x-filter-field label="Supplier" class="min-w-[11rem]">
            <x-searchable-select wire-model="supplierFilter" :options="$suppliers" :selected="$supplierFilter" placeholder="All suppliers"  />
        </x-filter-field>
        <x-filter-field label="Quantity">
            <input type="text" wire:model.live.debounce.300ms="quantityFilter" placeholder="Search quantity" class="field">
        </x-filter-field>
        <x-filter-field label="Avg. Cost">
            <input type="text" wire:model.live.debounce.300ms="costFilter" placeholder="Search cost" class="field">
        </x-filter-field>
        <x-filter-field label="Stock Value">
            <input type="text" wire:model.live.debounce.300ms="valueFilter" placeholder="Search value" class="field">
        </x-filter-field>
        @if ($filtersActive)
            <button type="button" wire:click="resetFilters" class="btn-secondary">Clear</button>
        @endif
    </x-filter-bar>

    <div class="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-xl overflow-hidden">
        
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-100 dark:border-gray-700">
                        <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>
                        <th class="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Supplier</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">
                    @forelse ($balances as $balance)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30">
                            <td class="px-4 py-3">
                                @if ($balance->product)
                                    <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 }}@if ($balance->product->brandRelation) · {{ $balance->product->brandRelation->name }}@endif</div>
                                @else
                                    <div class="font-medium text-red-600 dark:text-red-400">Deleted product (#{{ $balance->product_id }})</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">Stock still recorded here — needs reconciling.</div>
                                @endif
                            </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-gray-600 dark:text-gray-300">{{ $balance->product?->supplierLinks->firstWhere('pivot.is_preferred', true)?->name ?? '—' }}</td>
                            <td @class([
                                'px-4 py-3 text-right font-medium',
                                'text-amber-600 dark:text-amber-400' => $balance->product && $balance->quantity <= $balance->product->reorder_level && $balance->quantity > 0,
                                'text-red-600 dark:text-red-400' => $balance->quantity === 0 || ! $balance->product,
                                'text-gray-800 dark:text-gray-100' => $balance->product && $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>
                    @empty
                        <tr>
                            <td colspan="6">
                                @if ($filtersActive)
                                    <x-empty-state
                                        title="No stock balances match these filters"
                                        message="Try a different search term or clear the filters above."
                                    />
                                @else
                                    <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"
                                    />
                                @endif
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if ($balances->isNotEmpty())
            <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>