@extends('layouts.user')

@section('title')
My Inventory
@endsection

@section('content')

<link rel="stylesheet" href="{{ asset('pilot/dashboard.css') }}?v=7">
<link rel="stylesheet" href="{{ asset('pilot/list-pages.css') }}?v=3.6">

@php
    // Helper to build URLs that preserve all current filters except the ones being replaced.
    $filterUrl = function (array $replace = []) {
        $params = array_merge(request()->except('page'), $replace);
        return route('inventory.index', array_filter($params, fn($v) => $v !== null && $v !== ''));
    };
@endphp

<section class="archive-section">
    <div class="archive-container">

        {{-- ── Header ────────────────────────────────────────────────── --}}
        <div class="archive-header">
            <div class="archive-header__left">
                <a href="{{ route('home') }}" class="archive-back" aria-label="Back to dashboard">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 12H5M12 19l-7-7 7-7"/>
                    </svg>
                </a>
                <div class="archive-header__icon archive-header__icon--inventory">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/>
                        <path d="m3.3 7 8.7 5 8.7-5"/>
                        <path d="M12 22V12"/>
                    </svg>
                </div>
                <div class="archive-header__text">
                    <h1 class="archive-title">My Inventory</h1>
                    <p class="archive-subtitle">{{ number_format($ownerships->total()) }} {{ $ownerships->total() === 1 ? 'item' : 'items' }} matching filters</p>
                </div>
            </div>
        </div>

        {{-- ── Stat ribbon ────────────────────────────────────────────── --}}
        <div class="stat-ribbon">
            <div class="stat-ribbon__item">
                <div class="stat-ribbon__head">
                    <span class="stat-ribbon__label">Store value</span>
                    <svg class="stat-ribbon__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                    </svg>
                </div>
                <div class="stat-ribbon__value stat-ribbon__value--accent">${{ number_format($stats['total_value'], 2) }}</div>
            </div>
            <div class="stat-ribbon__divider"></div>
            <div class="stat-ribbon__item">
                <div class="stat-ribbon__head">
                    <span class="stat-ribbon__label">Total items</span>
                    <svg class="stat-ribbon__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
                    </svg>
                </div>
                <div class="stat-ribbon__value">{{ number_format($stats['total_count']) }}</div>
            </div>
            <div class="stat-ribbon__divider"></div>
            <div class="stat-ribbon__item">
                <div class="stat-ribbon__head">
                    <span class="stat-ribbon__label">Available</span>
                    <svg class="stat-ribbon__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                </div>
                <div class="stat-ribbon__value">{{ number_format($stats['available_count']) }}</div>
            </div>
            <div class="stat-ribbon__divider"></div>
            <div class="stat-ribbon__item">
                <div class="stat-ribbon__head">
                    <span class="stat-ribbon__label">Listed</span>
                    <svg class="stat-ribbon__icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3" fill="currentColor"/>
                    </svg>
                </div>
                <div class="stat-ribbon__value stat-ribbon__value--pending">{{ number_format($stats['listed_count']) }}</div>
            </div>
        </div>

        {{-- ── Filter rail (anchor-based, no submit-button conflict) ───── --}}
        <div class="archive-filters">
            <div class="chip-group" role="tablist" aria-label="Status filter">
                <a href="{{ $filterUrl(['status' => 'all']) }}"
                   class="chip {{ $filters['status'] === 'all' ? 'chip--active' : '' }}"
                   role="tab" aria-selected="{{ $filters['status'] === 'all' ? 'true' : 'false' }}">
                    All <span class="chip__count">{{ number_format($stats['total_count']) }}</span>
                </a>
                <a href="{{ $filterUrl(['status' => 'active']) }}"
                   class="chip {{ $filters['status'] === 'active' ? 'chip--active' : '' }}"
                   role="tab" aria-selected="{{ $filters['status'] === 'active' ? 'true' : 'false' }}">
                    Available <span class="chip__count">{{ number_format($stats['available_count']) }}</span>
                </a>
                <a href="{{ $filterUrl(['status' => 'listed']) }}"
                   class="chip {{ $filters['status'] === 'listed' ? 'chip--active' : '' }}"
                   role="tab" aria-selected="{{ $filters['status'] === 'listed' ? 'true' : 'false' }}">
                    Listed <span class="chip__count">{{ number_format($stats['listed_count']) }}</span>
                </a>
            </div>

            <div class="archive-filters__right">
                {{-- Search is its own tiny form preserving everything via hidden inputs --}}
                <form method="GET" action="{{ route('inventory.index') }}" class="search-form">
                    <input type="hidden" name="status"   value="{{ $filters['status'] }}">
                    <input type="hidden" name="sort"     value="{{ $filters['sort'] }}">
                    <input type="hidden" name="per_page" value="{{ $filters['perPage'] }}">
                    <div class="search-input">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
                        </svg>
                        <input type="search" name="q" value="{{ $filters['q'] }}" placeholder="Search products" autocomplete="off">
                        @if($filters['q'] !== '')
                        <a href="{{ $filterUrl(['q' => null]) }}" class="search-input__clear" aria-label="Clear search">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                        </a>
                        @endif
                    </div>
                </form>

                {{-- Sort dropdown (anchor links) --}}
                <div class="sort-menu">
                    <button type="button" class="sort-menu__trigger" aria-haspopup="true" aria-expanded="false" onclick="toggleSortMenu(this)">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 6h18M6 12h12M10 18h4"/>
                        </svg>
                        @php
                            $sortLabels = [
                                'newest'     => 'Newest',
                                'oldest'     => 'Oldest',
                                'value_desc' => 'High to low',
                                'value_asc'  => 'Low to high',
                            ];
                        @endphp
                        <span>{{ $sortLabels[$filters['sort']] ?? 'Sort' }}</span>
                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg>
                    </button>
                    <div class="sort-menu__panel" role="menu">
                        @foreach($sortLabels as $val => $label)
                        <a href="{{ $filterUrl(['sort' => $val]) }}"
                           class="sort-menu__option {{ $filters['sort'] === $val ? 'sort-menu__option--active' : '' }}">
                            {{ $label }}
                            @if($filters['sort'] === $val)
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            @endif
                        </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        @if($filters['q'] !== '' || $filters['status'] !== 'all' || $filters['sort'] !== 'newest')
        <div class="filter-summary">
            <span class="filter-summary__label">Filtered</span>
            @if($filters['status'] !== 'all')<span class="filter-summary__tag">Status: {{ ucfirst($filters['status']) }}</span>@endif
            @if($filters['q'] !== '')<span class="filter-summary__tag">Search: "{{ $filters['q'] }}"</span>@endif
            @if($filters['sort'] !== 'newest')<span class="filter-summary__tag">Sort: {{ $sortLabels[$filters['sort']] ?? $filters['sort'] }}</span>@endif
            <a href="{{ route('inventory.index') }}" class="filter-summary__clear">Clear all</a>
        </div>
        @endif

        {{-- ── List ───────────────────────────────────────────────────── --}}
        <div class="archive-list" role="list">
            @forelse($ownerships as $ownership)
                @php
                    $pendingSell = $ownership->sells?->where('status', 0)->first();
                    $isListed = (bool) $pendingSell;
                @endphp
                <div class="inv-row {{ $isListed ? 'inv-row--listed' : '' }}" role="listitem">
                    <img src="{{ asset('storage/products/'.$ownership->product?->image1) }}" alt="" class="inv-row__thumb" loading="lazy">

                    <div class="inv-row__main">
                        <div class="inv-row__name">{{ $ownership->product?->name }}</div>
                        <div class="inv-row__meta">
                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M3 9h18M9 21V9"/><rect x="3" y="3" width="18" height="18" rx="2"/>
                            </svg>
                            <span>{{ $ownership->product?->market?->name }}</span>
                            <span class="inv-row__dot">·</span>
                            <span>Qty {{ $ownership->quantity }}</span>
                        </div>
                    </div>

                    <div class="inv-row__value">
                        <div class="inv-row__amount">${{ number_format($ownership->value, 2) }}</div>
                        @if($ownership->quantity > 1)
                        <div class="inv-row__amount-sub">${{ number_format($ownership->value * $ownership->quantity, 2) }} total</div>
                        @endif
                    </div>

                    <div class="inv-row__action">
                        @if($isListed)
                        <span class="status-pill status-pill--pending" data-eval-time="{{ \Carbon\Carbon::parse($pendingSell->sell_time)->addHours(24)->toIso8601String() }}">
                            <span class="status-pill__dot"></span>
                            In sale <span class="countdown-text"></span>
                        </span>
                        @else
                        <a href="{{ route('sell-markets', $ownership->slug) }}"
                           class="btn-sell"
                           @if($ownership->pilot_follow_id !== null) data-pilot-managed="1" @endif>
                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 11 12 6 7 11"/><polyline points="17 18 12 13 7 18"/></svg>
                            Sell off
                        </a>
                        @endif
                    </div>
                </div>
            @empty
                <div class="archive-empty">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="archive-empty__icon">
                        <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/>
                    </svg>
                    @if($filters['q'] !== '' || $filters['status'] !== 'all')
                    <p class="archive-empty__text">No inventory matches these filters.</p>
                    <a href="{{ route('inventory.index') }}" class="archive-empty__link">Clear all filters</a>
                    @else
                    <p class="archive-empty__text">No inventory yet.</p>
                    <a href="{{ route('bid-markets') }}" class="archive-empty__cta">Start bidding</a>
                    @endif
                </div>
            @endforelse
        </div>

        @include('partials.paginator', ['paginator' => $ownerships, 'perPageOptions' => $perPageOptions])

    </div>
</section>

<script>
    window.toggleSortMenu = function(trigger) {
        const panel = trigger.nextElementSibling;
        const open = panel.classList.toggle('sort-menu__panel--open');
        trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
    };
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.sort-menu')) {
            document.querySelectorAll('.sort-menu__panel--open').forEach(p => p.classList.remove('sort-menu__panel--open'));
            document.querySelectorAll('.sort-menu__trigger').forEach(t => t.setAttribute('aria-expanded', 'false'));
        }
    });

    // Countdown for "In sale" pills
    (function() {
        function tick() {
            document.querySelectorAll('.status-pill[data-eval-time]').forEach(function(el) {
                const iso = el.getAttribute('data-eval-time');
                if (!iso) return;
                const diff = new Date(iso).getTime() - Date.now();
                const span = el.querySelector('.countdown-text');
                if (!span) return;
                if (diff <= 0) { span.textContent = '· evaluating'; return; }
                const h = Math.floor(diff / 3600000);
                const m = Math.floor((diff % 3600000) / 60000);
                span.textContent = '· ' + (h > 0 ? h + 'h ' : '') + m + 'm';
            });
        }
        tick();
        setInterval(tick, 30000);
    })();
</script>

@include('partials.pilot-managed-modal')

@endsection