@php
    use App\Enums\PartGrade;

    $input = 'block w-full min-h-11 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-lg shadow-sm';
    $activeFilters = collect($filters)->except(['search', 'show'])->filter(fn ($v) => filled($v))->count()
        + (($filters['show'] ?? 'active') !== 'active' ? 1 : 0);
    $canSeeCost = auth()->user()->can('view-cost-prices');
@endphp

<x-app-layout title="Parts">
    <x-slot name="header">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <h1 class="text-xl font-semibold text-gray-900">Parts</h1>
            @if ($canManage)
                <div class="flex flex-wrap gap-2">
                    <a href="{{ route('parts.import') }}"
                       class="inline-flex min-h-11 items-center rounded-lg border border-gray-300 bg-white px-4 text-sm font-semibold text-gray-700 hover:bg-gray-50">
                        Import / export
                    </a>
                    <a href="{{ route('parts.price-levels.index') }}"
                       class="inline-flex min-h-11 items-center rounded-lg border border-gray-300 bg-white px-4 text-sm font-semibold text-gray-700 hover:bg-gray-50">
                        Price levels
                    </a>
                    <a href="{{ route('parts.categories.index') }}"
                       class="inline-flex min-h-11 items-center rounded-lg border border-gray-300 bg-white px-4 text-sm font-semibold text-gray-700 hover:bg-gray-50">
                        Categories
                    </a>
                    <a href="{{ route('stock.count') }}"
                       class="inline-flex min-h-11 items-center rounded-lg border border-gray-300 bg-white px-4 text-sm font-semibold text-gray-700 hover:bg-gray-50">
                        Stock count
                    </a>
                    <a href="{{ route('parts.create') }}"
                       class="inline-flex min-h-11 items-center gap-2 rounded-lg bg-indigo-600 px-4 text-sm font-semibold text-white hover:bg-indigo-500">
                        <span class="text-lg leading-none">+</span> Add product
                    </a>
                </div>
            @endif
        </div>
    </x-slot>

    <div class="max-w-6xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
        <x-flash />

        {{-- Low stock warning --}}
        @if ($lowCount > 0 && ! ($filters['low'] ?? false))
            <a href="{{ route('parts.index', ['low' => 1]) }}"
               class="mb-4 flex min-h-12 items-center justify-between gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-amber-900 hover:bg-amber-100">
                <span><strong>{{ $lowCount }}</strong> {{ Str::plural('part', $lowCount) }} low on stock</span>
                <span class="text-sm font-semibold">Show &rarr;</span>
            </a>
        @endif

        <form method="GET" action="{{ route('parts.index') }}" x-data="{ open: {{ $activeFilters ? 'true' : 'false' }} }" class="mb-4 space-y-3">
            <div class="flex gap-2">
                <input type="search" name="search" value="{{ $filters['search'] ?? '' }}"
                       placeholder="Name, SKU, barcode or model (e.g. iPhone 13)" autocomplete="off"
                       class="{{ $input }} min-h-12 text-lg">
                <button type="submit" class="min-h-12 shrink-0 rounded-lg bg-gray-800 px-5 font-semibold text-white hover:bg-gray-700">Search</button>
            </div>

            <button type="button" @click="open = !open" class="inline-flex min-h-10 items-center gap-2 rounded-lg px-1 text-sm font-semibold text-indigo-700">
                <span x-text="open ? 'Hide filters' : 'Filters'">Filters</span>
                @if ($activeFilters)
                    <span class="rounded-full bg-indigo-600 px-2 py-0.5 text-xs text-white">{{ $activeFilters }}</span>
                @endif
            </button>

            <div x-show="open" x-cloak class="grid gap-3 rounded-xl bg-white p-4 shadow-sm sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <x-input-label for="category" value="Category" />
                    <select id="category" name="category" class="{{ $input }} mt-1">
                        <option value="">All categories</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}" @selected((string) ($filters['category'] ?? '') === (string) $category->id)>{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <x-input-label for="grade" value="Quality" />
                    <select id="grade" name="grade" class="{{ $input }} mt-1">
                        <option value="">All qualities</option>
                        @foreach (PartGrade::cases() as $grade)
                            <option value="{{ $grade->value }}" @selected(($filters['grade'] ?? '') === $grade->value)>{{ $grade->label() }}</option>
                        @endforeach
                    </select>
                </div>

                @if ($canManage)
                    <div>
                        <x-input-label for="show" value="Show" />
                        <select id="show" name="show" class="{{ $input }} mt-1">
                            <option value="active" @selected($filters['show'] === 'active')>Parts in use</option>
                            <option value="inactive" @selected($filters['show'] === 'inactive')>Turned off</option>
                            <option value="all" @selected($filters['show'] === 'all')>All</option>
                        </select>
                    </div>
                @endif

                <label class="flex min-h-11 items-center gap-3 self-end">
                    <input type="checkbox" name="low" value="1" @checked($filters['low'] ?? false)
                           class="h-5 w-5 rounded border-gray-300 text-amber-600 focus:ring-amber-500">
                    <span class="font-medium text-gray-800">Low stock only</span>
                </label>

                <div class="flex gap-2 sm:col-span-2 lg:col-span-4">
                    <button type="submit" class="min-h-11 flex-1 rounded-lg bg-indigo-600 px-5 font-semibold text-white hover:bg-indigo-500 sm:flex-none">Apply filters</button>
                    <a href="{{ route('parts.index') }}" class="inline-flex min-h-11 items-center rounded-lg border border-gray-300 bg-white px-5 font-semibold text-gray-700 hover:bg-gray-50">Clear</a>
                </div>
            </div>
        </form>

        <p class="mb-2 text-sm text-gray-500">{{ $parts->total() }} {{ Str::plural('part', $parts->total()) }}</p>

        @if ($parts->isEmpty())
            <div class="rounded-xl bg-white p-8 text-center text-gray-500 shadow-sm">
                No parts found.
                @if ($canManage && ! request()->query())
                    <a href="{{ route('parts.create') }}" class="font-semibold text-indigo-700 underline">Add the first part</a>.
                @endif
            </div>
        @else
            <ul class="divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-sm">
                @foreach ($parts as $part)
                    @php
                        $models = $part->deviceModels->map(fn ($m) => $m->full_name)->sort(SORT_NATURAL)->values();
                    @endphp
                    <li>
                        <a href="{{ route('parts.show', $part) }}" class="flex gap-3 px-4 py-3 hover:bg-gray-50">
                            {{-- Photo --}}
                            <div class="h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-gray-100">
                                @if ($part->photo_path)
                                    <img src="{{ $part->photoUrl(thumb: true) }}" alt="" loading="lazy" class="h-full w-full object-cover">
                                @else
                                    <div class="flex h-full w-full items-center justify-center text-gray-300"><x-icon name="cube" class="h-7 w-7" /></div>
                                @endif
                            </div>

                            {{-- Name, SKU, models --}}
                            <div class="min-w-0 flex-1">
                                <p @class(['font-medium', 'text-gray-900' => $part->is_active, 'text-gray-400 line-through' => ! $part->is_active])>{{ $part->fullName() }}</p>
                                <p class="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-gray-500">
                                    <span class="font-mono text-gray-700">{{ $part->sku }}</span>
                                    <span>· {{ $part->category->name }}</span>
                                    @if ($part->grade)
                                        <span class="rounded px-1.5 py-0.5 text-xs font-semibold {{ $part->grade->badgeClass() }}">{{ $part->grade->label() }}</span>
                                    @endif
                                    @if ($part->location)
                                        <span class="rounded bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-700">Shelf {{ $part->location }}</span>
                                    @endif
                                </p>
                                @if ($models->isNotEmpty())
                                    <p class="mt-0.5 truncate text-sm text-gray-500">
                                        Fits: {{ $models->take(3)->join(', ') }}{{ $models->count() > 3 ? ' +'.($models->count() - 3).' more' : '' }}
                                    </p>
                                @endif
                            </div>

                            {{-- Stock and price --}}
                            <div class="shrink-0 text-right">
                                <p @class([
                                    'inline-block rounded-full px-2.5 py-0.5 text-sm font-bold tabular-nums',
                                    'bg-red-100 text-red-800' => $part->stock_on_hand <= 0,
                                    'bg-amber-100 text-amber-800' => $part->stock_on_hand > 0 && $part->isLowStock(),
                                    'bg-green-100 text-green-800' => $part->stock_on_hand > 0 && ! $part->isLowStock(),
                                ])>
                                    {{ $part->stock_on_hand }} <span class="font-medium">{{ $part->unit?->value }}</span>
                                </p>
                                @can('view-prices')
                                    <p class="mt-1 text-sm font-semibold text-gray-900 tabular-nums">Rs. {{ number_format($part->selling_price, 2) }}</p>
                                @endcan
                                @if ($canSeeCost)
                                    <p class="text-xs text-gray-500 tabular-nums">Cost Rs. {{ number_format($part->cost_price, 2) }}</p>
                                @endif
                            </div>
                        </a>
                    </li>
                @endforeach
            </ul>

            <div class="mt-4">{{ $parts->links() }}</div>
        @endif
    </div>
</x-app-layout>