@extends('layouts.admin')
@section('title','Inventory')
@section('content')
@php
  $columns = [
    'sku' => 'SKU / Product',
    'location' => 'Location',
    'on_hand' => 'On hand',
    'available' => 'Available',
    'committed' => 'Committed',
    'incoming' => 'Incoming',
    'threshold' => 'Threshold',
    'status' => 'Status',
    'actions' => 'Actions',
  ];
  $label = fn (string $v) => ucwords(str_replace(['_', '-'], ' ', $v));
  $statusTone = fn (string $s) => match ($s) {
      'out' => 'danger',
      'low' => 'warning',
      'overstock' => 'info',
      default => 'success',
  };
  $statusLabel = fn (string $s) => match ($s) {
      'out' => 'Out of stock',
      'low' => 'Low stock',
      'overstock' => 'Overstock',
      default => 'In stock',
  };
  $filterParams = array_filter([
      'location_id' => request('location_id'),
      'q' => request('q'),
      'sort' => request('sort'),
  ], fn ($v) => filled($v));
  $activeChips = collect([
      'status' => request('status'),
      'location_id' => request('location_id') ? ($locations->firstWhere('id', (int) request('location_id'))?->code ?? request('location_id')) : null,
      'sort' => request('sort') && request('sort') !== 'sku' ? request('sort') : null,
  ])->filter();
@endphp

<x-admin.page
    title="Inventory"
    subtitle="Warehouse command center — on-hand balances, low-stock alerts, transfers, and movement audit across every location."
>
    <x-slot:actions>
        <a href="{{ route('admin.inventory.movements') }}" class="admin-btn">
            <i data-lucide="history" class="h-3.5 w-3.5"></i>
            Movements
        </a>
        <a href="{{ route('admin.transfers.index') }}" class="admin-btn">
            <i data-lucide="arrow-left-right" class="h-3.5 w-3.5"></i>
            Transfers
        </a>
        <a href="{{ route('admin.stocktakes.index') }}" class="admin-btn">
            <i data-lucide="list-checks" class="h-3.5 w-3.5"></i>
            Stocktakes
        </a>
        <a href="{{ route('admin.inventory.export', request()->query()) }}" class="admin-btn">
            <i data-lucide="download" class="h-3.5 w-3.5"></i>
            Export CSV
        </a>
        <form method="post" action="{{ route('admin.inventory.sync') }}" class="inline">
            @csrf
            @if(request('location_id'))
                <input type="hidden" name="location_id" value="{{ request('location_id') }}">
            @endif
            <button type="submit" class="admin-btn admin-btn-primary">
                <i data-lucide="refresh-cw" class="h-3.5 w-3.5"></i>
                Sync variants
            </button>
        </form>
    </x-slot:actions>

    <div class="order-ops-stat-rail mb-5">
        <a href="{{ route('admin.inventory.index', $filterParams) }}" class="order-ops-stat {{ ! request('status') ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">SKU levels</span>
            <span class="order-ops-stat-value">{{ number_format($stats['skus']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['locations']) }} active locations</span>
        </a>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Available</span>
            <span class="order-ops-stat-value">{{ number_format($stats['available']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['on_hand']) }} on hand · {{ number_format($stats['committed']) }} committed</span>
        </div>
        <a href="{{ route('admin.inventory.index', array_merge($filterParams, ['status' => 'low'])) }}" class="order-ops-stat {{ request('status') === 'low' ? 'is-active tone-warning' : 'tone-warning' }}">
            <span class="order-ops-stat-label">Low stock</span>
            <span class="order-ops-stat-value">{{ number_format($stats['low_stock']) }}</span>
            <span class="order-ops-stat-meta">At or below threshold</span>
        </a>
        <a href="{{ route('admin.inventory.index', array_merge($filterParams, ['status' => 'out'])) }}" class="order-ops-stat {{ request('status') === 'out' ? 'is-active tone-danger' : 'tone-danger' }}">
            <span class="order-ops-stat-label">Out of stock</span>
            <span class="order-ops-stat-value">{{ number_format($stats['out_of_stock']) }}</span>
            <span class="order-ops-stat-meta">Available ≤ 0</span>
        </a>
        <a href="{{ route('admin.inventory.index', array_merge($filterParams, ['status' => 'incoming'])) }}" class="order-ops-stat {{ request('status') === 'incoming' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Incoming</span>
            <span class="order-ops-stat-value">{{ number_format($stats['incoming']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['recent_moves']) }} moves / 24h</span>
        </a>
    </div>

    <div class="order-ops-quick-filters mb-4">
        @foreach([
            ['label' => 'All', 'params' => []],
            ['label' => 'In stock', 'params' => ['status' => 'in']],
            ['label' => 'Low', 'params' => ['status' => 'low']],
            ['label' => 'Out', 'params' => ['status' => 'out']],
            ['label' => 'Committed', 'params' => ['status' => 'committed']],
            ['label' => 'Incoming', 'params' => ['status' => 'incoming']],
            ['label' => 'Overstock', 'params' => ['status' => 'overstock']],
        ] as $chip)
            @php
                $params = array_merge($filterParams, $chip['params']);
                unset($params['status']);
                if (! empty($chip['params']['status'])) {
                    $params['status'] = $chip['params']['status'];
                }
                $isActive = empty($chip['params'])
                    ? ! request('status')
                    : request('status') === ($chip['params']['status'] ?? null);
            @endphp
            <a href="{{ route('admin.inventory.index', $params) }}" class="order-ops-chip {{ $isActive ? 'is-active' : '' }}">{{ $chip['label'] }}</a>
        @endforeach
        @foreach($locations as $location)
            <a href="{{ route('admin.inventory.index', array_filter(['location_id' => $location->id, 'status' => request('status'), 'q' => request('q'), 'sort' => request('sort')])) }}"
               class="order-ops-chip {{ (int) request('location_id') === $location->id ? 'is-active' : '' }}">
                {{ $location->code }}
            </a>
        @endforeach
    </div>

    @if($activeChips->isNotEmpty())
        <div class="mb-4 flex flex-wrap items-center gap-2">
            <span class="text-xs font-semibold uppercase tracking-wide text-[#8c9196]">Active</span>
            @foreach($activeChips as $key => $value)
                <span class="order-ops-chip is-active">{{ $label($key) }}: {{ $label((string) $value) }}</span>
            @endforeach
            <a href="{{ route('admin.inventory.index') }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Clear all</a>
        </div>
    @endif

    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
            {{ $errors->first() }}
        </div>
    @endif

    <x-admin.advanced-table
        id="inventory"
        :search-url="route('admin.inventory.index')"
        search-placeholder="Search SKU, product, location…"
        :columns="$columns"
        :filters-open="$activeChips->isNotEmpty()"
    >
        <x-slot:filters>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-status">Status</label>
                <div class="admin-select-wrap">
                    <select id="filter-status" name="status" form="inventory-filter" class="admin-select" onchange="document.getElementById('inventory-filter').submit()">
                        <option value="">Any</option>
                        @foreach(['in','low','out','committed','incoming','overstock'] as $status)
                            <option value="{{ $status }}" @selected(request('status') === $status)>{{ $label($status) }}</option>
                        @endforeach
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-location">Location</label>
                <div class="admin-select-wrap">
                    <select id="filter-location" name="location_id" form="inventory-filter" class="admin-select" onchange="document.getElementById('inventory-filter').submit()">
                        <option value="">All locations</option>
                        @foreach($locations as $location)
                            <option value="{{ $location->id }}" @selected((int) request('location_id') === $location->id)>{{ $location->name }} ({{ $location->code }})</option>
                        @endforeach
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-sort">Sort</label>
                <div class="admin-select-wrap">
                    <select id="filter-sort" name="sort" form="inventory-filter" class="admin-select" onchange="document.getElementById('inventory-filter').submit()">
                        <option value="sku" @selected(request('sort', 'sku') === 'sku')>SKU A–Z</option>
                        <option value="available_asc" @selected(request('sort') === 'available_asc')>Available ↑</option>
                        <option value="available_desc" @selected(request('sort') === 'available_desc')>Available ↓</option>
                        <option value="on_hand_desc" @selected(request('sort') === 'on_hand_desc')>On hand ↓</option>
                        <option value="location" @selected(request('sort') === 'location')>Location</option>
                        <option value="updated" @selected(request('sort') === 'updated')>Recently updated</option>
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="flex items-end">
                <a href="{{ route('admin.inventory.index') }}" class="admin-btn w-full justify-center">
                    <i data-lucide="x" class="h-3.5 w-3.5"></i> Clear
                </a>
            </div>
        </x-slot:filters>

        <x-slot:bulk>
            <span class="text-xs text-[#6d7175]">Bulk adjust or set thresholds on selected levels.</span>
            <select name="action" form="inventory-bulk-form" class="admin-input w-40" data-inventory-bulk-action>
                <option value="adjust">Adjust qty</option>
                <option value="set_threshold">Set threshold</option>
            </select>
            <input type="number" name="delta" form="inventory-bulk-form" placeholder="± qty" class="admin-input w-24" data-inventory-bulk-delta>
            <input type="number" name="low_stock_threshold" form="inventory-bulk-form" placeholder="Threshold" class="admin-input w-28 hidden" data-inventory-bulk-threshold>
            <input type="text" name="reason" form="inventory-bulk-form" placeholder="Reason" class="admin-input w-48" value="Bulk adjustment" data-inventory-bulk-reason>
            <button type="submit" form="inventory-bulk-form" class="admin-btn admin-btn-primary">Apply</button>
        </x-slot:bulk>

        <thead>
            <tr>
                <th class="w-10"><input type="checkbox" data-inventory-check-all aria-label="Select all"></th>
                <th data-col="sku">SKU / Product</th>
                <th data-col="location">Location</th>
                <th data-col="on_hand">On hand</th>
                <th data-col="available">Available</th>
                <th data-col="committed">Committed</th>
                <th data-col="incoming">Incoming</th>
                <th data-col="threshold">Threshold</th>
                <th data-col="status">Status</th>
                <th data-col="actions"></th>
            </tr>
        </thead>
        <tbody>
            @forelse($levels as $level)
                @php
                    $sku = $level->item?->sku ?? $level->item?->variant?->sku ?? '—';
                    $title = $level->item?->variant?->product?->title ?? 'Unlinked item';
                    $status = $level->stockStatus();
                @endphp
                <tr class="{{ $status === 'out' ? 'bg-red-50/40' : ($status === 'low' ? 'bg-amber-50/50' : '') }}">
                    <td>
                        <input type="checkbox" name="ids[]" value="{{ $level->id }}" form="inventory-bulk-form" data-inventory-row>
                    </td>
                    <td data-col="sku">
                        <div class="font-medium text-[#202223]">{{ $sku }}</div>
                        <div class="text-xs text-[#8c9196]">{{ $title }}</div>
                    </td>
                    <td data-col="location">
                        <div class="font-medium">{{ $level->location?->code ?? '—' }}</div>
                        <div class="text-xs text-[#8c9196]">{{ $level->location?->name }}</div>
                    </td>
                    <td data-col="on_hand" class="font-semibold tabular-nums">{{ number_format($level->on_hand) }}</td>
                    <td data-col="available" class="font-semibold tabular-nums">{{ number_format($level->available) }}</td>
                    <td data-col="committed" class="tabular-nums text-[#6d7175]">{{ number_format($level->committed) }}</td>
                    <td data-col="incoming" class="tabular-nums text-[#6d7175]">{{ number_format($level->incoming) }}</td>
                    <td data-col="threshold" class="tabular-nums text-[#6d7175]">{{ number_format($level->low_stock_threshold) }}</td>
                    <td data-col="status">
                        <x-admin.badge :tone="$statusTone($status)">{{ $statusLabel($status) }}</x-admin.badge>
                    </td>
                    <td data-col="actions" class="text-right">
                        <a href="{{ route('admin.inventory.show', $level) }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Manage</a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="10" class="p-10 text-center text-sm text-[#8c9196]">No inventory levels match these filters.</td>
                </tr>
            @endforelse
        </tbody>
    </x-admin.advanced-table>

    <form id="inventory-filter" method="get" action="{{ route('admin.inventory.index') }}" class="hidden">
        @if(request('q'))
            <input type="hidden" name="q" value="{{ request('q') }}">
        @endif
    </form>
    <form id="inventory-bulk-form" method="post" action="{{ route('admin.inventory.bulk') }}" class="hidden">
        @csrf
    </form>

    <div class="mt-4">{{ $levels->links() }}</div>
</x-admin.page>

<script>
(() => {
  const all = document.querySelector('[data-inventory-check-all]');
  if (all) {
    all.addEventListener('change', () => {
      document.querySelectorAll('[data-inventory-row]').forEach((el) => { el.checked = all.checked; });
    });
  }
  const action = document.querySelector('[data-inventory-bulk-action]');
  const delta = document.querySelector('[data-inventory-bulk-delta]');
  const threshold = document.querySelector('[data-inventory-bulk-threshold]');
  const reason = document.querySelector('[data-inventory-bulk-reason]');
  if (!action) return;
  const syncBulk = () => {
    const isThreshold = action.value === 'set_threshold';
    if (delta) delta.classList.toggle('hidden', isThreshold);
    if (reason) reason.classList.toggle('hidden', isThreshold);
    if (threshold) threshold.classList.toggle('hidden', !isThreshold);
  };
  action.addEventListener('change', syncBulk);
  syncBulk();
})();
</script>
@endsection