<div class="grid gap-2 grid-cols-2 md:grid-cols-3 xl:grid-cols-6">
    <x-ui.stat-card compact tone="primary" label="On hand" :value="number_format($onHandUnits ?? 0)" hint="Units" icon="bi bi-boxes" />
    <x-ui.stat-card compact tone="info" label="Available" :value="number_format($availableUnits ?? 0)" :hint="($reservedUnits ?? 0).' reserved'" icon="bi bi-check2-circle" />
    <x-ui.stat-card compact tone="warning" label="Stock value" :value="'₹'.number_format($approxStockCost ?? 0, 0)" hint="Approx cost" icon="bi bi-cash-coin" />
    <x-ui.stat-card compact tone="danger" label="Low stock" :value="(string) ($lowStockProducts ?? 0)" hint="≤ 10 available" icon="bi bi-exclamation-triangle" />
    <x-ui.stat-card compact tone="muted" label="Open POs" :value="(string) ($openPurchaseOrders ?? 0)" hint="Draft / ordered" icon="bi bi-receipt" />
    <x-ui.stat-card compact tone="primary" label="Transfers out" :value="(string) ($openTransfersOut ?? 0)" :hint="($transfersInTransit ?? 0).' in transit'" icon="bi bi-arrow-left-right" />
</div>

<div class="grid gap-2 lg:grid-cols-12">
    <div class="lg:col-span-4">
        <div class="dash-panel h-full">
            <div class="dash-panel__head">
                <h3 class="dash-panel__title">Quick actions</h3>
            </div>
            <div class="dash-panel__body">
                <div class="dash-actions">
                    @can('transfers.manage')
                        <a href="{{ route('admin.transfers.create') }}" class="dash-action"><i class="bi bi-plus-circle"></i> New transfer</a>
                    @endcan
                    @can('transfers.view')
                        <a href="{{ route('admin.transfers.index') }}" class="dash-action"><i class="bi bi-arrow-left-right"></i> All transfers</a>
                    @endcan
                    @can('purchase-orders.manage')
                        <a href="{{ route('admin.purchase-orders.create') }}" class="dash-action"><i class="bi bi-cart-plus"></i> New PO</a>
                    @endcan
                    @can('purchase-orders.view')
                        <a href="{{ route('admin.purchase-orders.index') }}" class="dash-action"><i class="bi bi-receipt"></i> Purchase orders</a>
                    @endcan
                    @can('inventory.balances.view')
                        <a href="{{ route('admin.inventory.balances') }}" class="dash-action"><i class="bi bi-layers"></i> Inventory balances</a>
                    @endcan
                    @can('reports.location-ops')
                        <a href="{{ route('admin.reports.location-ops') }}" class="dash-action"><i class="bi bi-graph-up"></i> Location ops report</a>
                    @endcan
                </div>
            </div>
        </div>
    </div>

    <div class="lg:col-span-4">
        <div class="dash-panel h-full">
            <div class="dash-panel__head">
                <h3 class="dash-panel__title">Open transfers</h3>
                @can('transfers.view')
                    <a href="{{ route('admin.transfers.index') }}" class="text-[10px] font-medium text-[var(--color-primary)] no-underline">View all</a>
                @endcan
            </div>
            <div class="dash-panel__body p-0">
                @if(isset($recentTransfers) && $recentTransfers->count())
                    <div class="overflow-x-auto">
                        <table class="dash-table">
                            <thead>
                                <tr>
                                    <th>Transfer</th>
                                    <th>Route</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentTransfers as $tr)
                                    <tr>
                                        <td class="font-medium">
                                            <a href="{{ route('admin.transfers.show', $tr) }}" class="text-[var(--color-primary)] no-underline">
                                                {{ $tr->transfer_number ?: '#'.$tr->id }}
                                            </a>
                                        </td>
                                        <td class="text-[11px]">
                                            {{ $tr->fromLocation?->name ?? '—' }}
                                            → {{ $tr->toLocation?->name ?? '—' }}
                                        </td>
                                        <td><span class="dash-chip">{{ str_replace('_', ' ', $tr->status) }}</span></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <p class="mb-0 px-3 py-4 text-center text-xs text-[var(--color-text-muted)]">No open transfers</p>
                @endif
            </div>
        </div>
    </div>

    <div class="lg:col-span-4">
        <div class="dash-panel h-full">
            <div class="dash-panel__head">
                <h3 class="dash-panel__title">Open purchase orders</h3>
                @can('purchase-orders.view')
                    <a href="{{ route('admin.purchase-orders.index') }}" class="text-[10px] font-medium text-[var(--color-primary)] no-underline">View all</a>
                @endcan
            </div>
            <div class="dash-panel__body p-0">
                @if(isset($recentPurchaseOrders) && $recentPurchaseOrders->count())
                    <div class="overflow-x-auto">
                        <table class="dash-table">
                            <thead>
                                <tr>
                                    <th>PO</th>
                                    <th>Supplier</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentPurchaseOrders as $po)
                                    <tr>
                                        <td class="font-medium">
                                            <a href="{{ route('admin.purchase-orders.show', $po) }}" class="text-[var(--color-primary)] no-underline">
                                                {{ $po->po_number ?: '#'.$po->id }}
                                            </a>
                                        </td>
                                        <td class="text-[11px]">{{ $po->supplier?->name ?? '—' }}</td>
                                        <td><span class="dash-chip">{{ $po->status }}</span></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <p class="mb-0 px-3 py-4 text-center text-xs text-[var(--color-text-muted)]">No open POs</p>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="grid gap-2 lg:grid-cols-2">
    <div class="dash-panel">
        <div class="dash-panel__head">
            <h3 class="dash-panel__title">Low stock at warehouse</h3>
        </div>
        <div class="dash-panel__body p-0">
            @if(isset($lowStockItems) && $lowStockItems->count())
                <div class="overflow-x-auto">
                    <table class="dash-table">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Available</th>
                                <th>On hand</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($lowStockItems as $item)
                                <tr>
                                    <td>{{ \Illuminate\Support\Str::limit($item->name ?? 'N/A', 32) }}</td>
                                    <td class="font-semibold text-rose-600">{{ $item->current_stock }}</td>
                                    <td>{{ $item->on_hand ?? $item->current_stock }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <p class="mb-0 px-3 py-4 text-center text-xs text-[var(--color-text-muted)]">No low-stock SKUs</p>
            @endif
        </div>
    </div>

    <div class="dash-panel">
        <div class="dash-panel__head">
            <h3 class="dash-panel__title">Top SKUs by stock value</h3>
        </div>
        <div class="dash-panel__body p-0">
            @if(isset($topValueSkus) && $topValueSkus->count())
                <div class="overflow-x-auto">
                    <table class="dash-table">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Qty</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($topValueSkus as $sku)
                                <tr>
                                    <td>
                                        <div class="font-medium">{{ \Illuminate\Support\Str::limit($sku->name ?? 'N/A', 28) }}</div>
                                        <div class="text-[10px] text-[var(--color-text-muted)]">{{ $sku->sku ?: '—' }}</div>
                                    </td>
                                    <td>{{ number_format($sku->on_hand) }}</td>
                                    <td class="font-semibold">₹{{ number_format($sku->value, 0) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <p class="mb-0 px-3 py-4 text-center text-xs text-[var(--color-text-muted)]">No stock value data</p>
            @endif
        </div>
    </div>
</div>
