@php
    $canSeeCost = auth()->user()->can('view-cost-prices');
    $low = $part->min_stock > 0 && $onHand <= $part->min_stock;
@endphp

<x-app-layout :title="$part->name">
    <x-slot name="header">
        <a href="{{ route('parts.index') }}" class="text-sm text-gray-500 hover:text-gray-700">&larr; Parts</a>
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div class="min-w-0">
                <h1 class="text-xl font-semibold text-gray-900">{{ $part->fullName() }}</h1>
                <p class="text-sm text-gray-500">
                    <span class="font-mono text-gray-700">{{ $part->sku }}</span> · {{ $part->category->name }}@if ($part->subcategory) › {{ $part->subcategory->name }}@endif
                    @if ($part->brand) · {{ $part->brand->name }} @endif
                    @if ($part->parent) · Variant of <a href="{{ route('parts.show', $part->parent) }}" class="text-indigo-700 underline">{{ $part->parent->name }}</a> @endif
                    @unless ($part->is_active)
                        · <span class="font-semibold text-red-700">Turned off</span>
                    @endunless
                </p>
            </div>
            @can('update', $part)
                <div class="flex gap-2">
                    @if ($part->is_active)
                        <a href="{{ route('purchases.create', ['part' => $part->id]) }}"
                           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 in</a>
                    @endif
                    @unless ($part->parent_id)
                        <a href="{{ route('parts.create', ['variant_of' => $part->id]) }}"
                           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">+ Variant</a>
                    @endunless
                    <a href="{{ route('parts.edit', $part) }}"
                       class="inline-flex min-h-11 items-center rounded-lg bg-indigo-600 px-5 text-sm font-semibold text-white hover:bg-indigo-500">Edit</a>
                </div>
            @endcan
        </div>
    </x-slot>

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

        {{-- Stock --}}
        <section @class([
            'rounded-xl p-5 shadow-sm',
            'bg-red-50 ring-1 ring-red-200' => $onHand <= 0,
            'bg-amber-50 ring-1 ring-amber-200' => $onHand > 0 && $low,
            'bg-white' => $onHand > 0 && ! $low,
        ])>
            <div class="flex flex-wrap items-end justify-between gap-4">
                <div>
                    <p class="text-sm font-medium text-gray-600">In stock</p>
                    <p class="text-4xl font-bold tabular-nums text-gray-900">{{ $onHand }} <span class="text-lg font-medium text-gray-500">{{ $part->unit?->value }}</span></p>
                    <p class="mt-1 text-sm text-gray-600">
                        @if ($onHand <= 0)
                            <strong class="text-red-800">Out of stock.</strong>
                        @elseif ($low)
                            <strong class="text-amber-800">Low stock.</strong>
                        @endif
                        Minimum: {{ $part->min_stock ?: 'not set' }}
                    </p>
                    @if ($reserved > 0)
                        <p class="mt-1 text-sm text-amber-800">{{ $reserved }} reserved for jobs · <strong>{{ $onHand - $reserved }} available</strong></p>
                    @endif
                </div>
                @if ($part->location)
                    <div class="text-right">
                        <p class="text-sm font-medium text-gray-600">Shelf / bin</p>
                        <p class="text-2xl font-bold text-gray-900">{{ $part->location }}</p>
                    </div>
                @endif
            </div>
        </section>

        {{-- Details --}}
        <section class="rounded-xl bg-white p-4 shadow-sm sm:p-6">
            <div class="flex flex-col gap-5 sm:flex-row">
                @if ($part->photo_path)
                    <a href="{{ $part->photoUrl() }}" target="_blank" class="block h-40 w-40 shrink-0 overflow-hidden rounded-lg bg-gray-100">
                        <img src="{{ $part->photoUrl() }}" alt="{{ $part->name }}" class="h-full w-full object-cover">
                    </a>
                @endif

                <dl class="grid flex-1 gap-x-6 gap-y-4 sm:grid-cols-2">
                    @can('view-prices')
                        <div>
                            <dt class="text-sm text-gray-500">Retail price</dt>
                            <dd class="text-lg font-semibold tabular-nums">Rs. {{ number_format($part->selling_price, 2) }}</dd>
                        </div>
                        @foreach ($levels as $level)
                            <div>
                                <dt class="text-sm text-gray-500">{{ $level->name }} price</dt>
                                <dd class="text-lg font-semibold tabular-nums">Rs. {{ number_format($part->priceFor($level), 2) }}</dd>
                            </div>
                        @endforeach
                        <div>
                            <dt class="text-sm text-gray-500">Minimum selling price</dt>
                            <dd class="tabular-nums">{{ $part->min_selling_price !== null ? 'Rs. '.number_format($part->min_selling_price, 2) : 'No minimum' }}</dd>
                        </div>
                    @endcan
                    @if ($canSeeCost)
                        <div>
                            <dt class="text-sm text-gray-500">Cost price <span class="text-xs">(average)</span></dt>
                            <dd class="text-lg font-semibold tabular-nums">Rs. {{ number_format($part->cost_price, 2) }}</dd>
                        </div>
                    @endif
                    <div>
                        <dt class="text-sm text-gray-500">Quality</dt>
                        <dd>
                            @if ($part->grade)
                                <span class="rounded px-2 py-0.5 text-sm font-semibold {{ $part->grade->badgeClass() }}">{{ $part->grade->label() }}</span>
                            @else
                                Not set
                            @endif
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Barcode</dt>
                        <dd class="font-mono">{{ $part->barcode ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Unit</dt>
                        <dd>{{ $part->unit?->label() }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Warranty</dt>
                        <dd>{{ $part->warranty_days !== null ? $part->warranty_days.' days' : 'Settings default ('.setting('warranty_days_parts').' days)' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Tax category</dt>
                        <dd>{{ $part->tax_category?->label() }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Serialized</dt>
                        <dd>{{ $part->is_serialized ? 'Yes — each unit has its own serial' : 'No' }}</dd>
                    </div>
                    @if ($part->notes)
                        <div class="sm:col-span-2">
                            <dt class="text-sm text-gray-500">Notes</dt>
                            <dd class="whitespace-pre-line">{{ $part->notes }}</dd>
                        </div>
                    @endif
                </dl>
            </div>
        </section>

        {{-- Serial numbers / labels --}}
        @if ($part->is_serialized)
            <section class="rounded-xl bg-white p-4 shadow-sm sm:p-6 space-y-3">
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <h2 class="text-lg font-semibold text-gray-900">Units (serial numbers)</h2>
                    @can('view-prices')
                        @if ($shelfUnits->isNotEmpty())
                            <a href="{{ route('labels.units', ['ids' => $shelfUnits->pluck('id')->all()]) }}" target="_blank"
                               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">Print labels ({{ $shelfUnits->count() }})</a>
                        @endif
                    @endcan
                </div>
                <div class="flex flex-wrap gap-2">
                    @foreach (\App\Enums\StockUnitStatus::cases() as $status)
                        @if ($unitCounts[$status->value] ?? 0)
                            <span class="rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $status->badgeClass() }}">{{ $status->label() }}: {{ $unitCounts[$status->value] }}</span>
                        @endif
                    @endforeach
                </div>
                @if ($missingCodes > 0)
                    <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-900">
                        <span><strong>{{ $missingCodes }}</strong> in stock without a unit code. They cannot be used until they have one.</span>
                        @can('manage-stock')
                            <form method="POST" action="{{ route('parts.units.backfill', $part) }}">
                                @csrf
                                <button type="submit" class="min-h-10 rounded-lg bg-amber-600 px-4 font-semibold text-white hover:bg-amber-500">Give codes to stock</button>
                            </form>
                        @endcan
                    </div>
                @endif
                @if ($shelfUnits->isEmpty())
                    <p class="text-sm text-gray-500">No units on the shelf.</p>
                @else
                    <ul class="divide-y divide-gray-100 text-sm">
                        @foreach ($shelfUnits as $u)
                            <li class="flex flex-wrap items-center justify-between gap-2 py-2">
                                <span>
                                    <a href="{{ route('units.show', $u) }}" class="font-mono font-semibold text-indigo-700 underline">{{ $u->unit_code }}</a>
                                    @if ($u->serial_no) <span class="font-mono text-gray-500">· {{ $u->serial_no }}</span> @endif
                                </span>
                                <span class="rounded-full px-2 py-0.5 text-xs font-semibold {{ $u->status->badgeClass() }}">
                                    {{ $u->status->label() }}{{ $u->repairJob ? ' · '.$u->repairJob->job_no : '' }}
                                </span>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </section>
        @else
            @can('view-prices')
                <form method="GET" action="{{ route('labels.part', $part) }}" target="_blank" class="flex flex-wrap items-end gap-2 rounded-xl bg-white p-4 shadow-sm sm:p-6">
                    <div>
                        <x-input-label for="label_qty" value="Barcode labels" />
                        <input id="label_qty" name="qty" type="number" min="1" max="500" value="1" class="mt-1 block w-24 min-h-11 rounded-lg border-gray-300 shadow-sm">
                    </div>
                    <button type="submit" class="min-h-11 rounded-lg border border-gray-300 bg-white px-4 text-sm font-semibold text-gray-700 hover:bg-gray-50">Print labels</button>
                    <p class="w-full text-xs text-gray-500">Barcode: {{ $part->barcode ? 'supplier EAN '.$part->barcode : 'product code '.$part->sku }}.</p>
                </form>
            @endcan
        @endif

        {{-- Variants --}}
        @if ($family->isNotEmpty())
            <section class="rounded-xl bg-white p-4 shadow-sm sm:p-6">
                <h2 class="text-lg font-semibold text-gray-900">Variants</h2>
                <ul class="mt-2 divide-y divide-gray-100">
                    @foreach ($family as $v)
                        <li class="flex flex-wrap items-center justify-between gap-2 py-2">
                            <span>
                                @if ($v->is($part))
                                    <strong>{{ $v->variant_name ?? 'Main product' }}</strong> <span class="text-sm text-gray-500">(this one)</span>
                                @else
                                    <a href="{{ route('parts.show', $v) }}" class="font-medium text-indigo-700 underline">{{ $v->variant_name ?? 'Main product' }}</a>
                                @endif
                                <span class="font-mono text-xs text-gray-500">{{ $v->sku }}</span>
                                @unless ($v->is_active) <span class="text-xs font-semibold text-red-700">Turned off</span> @endunless
                            </span>
                            <span class="text-sm tabular-nums text-gray-700">
                                {{ $v->stock_on_hand }} in stock
                                @can('view-prices') · Rs. {{ number_format($v->selling_price, 2) }} @endcan
                            </span>
                        </li>
                    @endforeach
                </ul>
            </section>
        @endif

        {{-- Compatible models --}}
        <section class="rounded-xl bg-white p-4 shadow-sm sm:p-6">
            <h2 class="text-lg font-semibold text-gray-900">Fits these models</h2>
            @if ($part->deviceModels->isEmpty())
                <p class="mt-2 text-gray-500">No models added yet.</p>
            @else
                <ul class="mt-3 flex flex-wrap gap-2">
                    @foreach ($part->deviceModels->sortBy('full_name', SORT_NATURAL) as $model)
                        <li class="rounded-full bg-indigo-50 px-3 py-1 text-sm font-medium text-indigo-800">
                            {{ $model->full_name }}
                            @if ($model->deviceType)
                                <span class="font-normal text-indigo-500">· {{ $model->deviceType->name }}</span>
                            @endif
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>

        {{-- Stock history --}}
        <section class="rounded-xl bg-white shadow-sm">
            <div class="flex flex-wrap items-center justify-between gap-2 p-4 sm:px-6">
                <h2 class="text-lg font-semibold text-gray-900">Stock history <span class="text-sm font-normal text-gray-500">(latest 20, this branch)</span></h2>
                <div class="flex gap-2">
                    @can('manage-stock')
                        <a href="{{ route('parts.adjust', $part) }}" class="inline-flex min-h-10 items-center rounded-lg border border-gray-300 bg-white px-3 text-sm font-semibold text-gray-700 hover:bg-gray-50">Adjust</a>
                    @endcan
                    <a href="{{ route('parts.stock', $part) }}" class="inline-flex min-h-10 items-center rounded-lg bg-gray-800 px-3 text-sm font-semibold text-white hover:bg-gray-700">Full history</a>
                </div>
            </div>
            @if ($movements->isEmpty())
                <p class="px-4 pb-4 text-gray-500 sm:px-6">No stock movements yet.</p>
            @else
                <ul class="divide-y divide-gray-100 border-t border-gray-100">
                    @foreach ($movements as $move)
                        <li class="flex items-center justify-between gap-3 px-4 py-3 sm:px-6">
                            <div class="min-w-0">
                                <p class="font-medium text-gray-900">{{ $move->type->label() }}</p>
                                <p class="text-sm text-gray-500">
                                    {{ $move->created_at->format('d M Y, g:i A') }}
                                    @if ($move->createdBy) · {{ $move->createdBy->name }} @endif
                                    @if ($move->repairJob) · Job {{ $move->repairJob->job_no }} @endif
                                    @if ($move->reference_type === 'purchase_item' && $canSeeCost && $move->note)
                                        · <a href="{{ route('purchases.index', ['search' => $move->note]) }}" class="text-indigo-700 underline">{{ $move->note }}</a>
                                    @endif
                                </p>
                                @if ($move->note)
                                    <p class="text-sm text-gray-600">{{ $move->note }}</p>
                                @endif
                            </div>
                            <div class="shrink-0 text-right">
                                <p @class(['text-lg font-bold tabular-nums', 'text-green-700' => $move->quantity > 0, 'text-red-700' => $move->quantity < 0])>
                                    {{ $move->quantity > 0 ? '+' : '−' }}{{ abs($move->quantity) }}
                                </p>
                                @if ($canSeeCost)
                                    <p class="text-xs text-gray-500 tabular-nums">@ Rs. {{ number_format($move->unit_cost, 2) }}</p>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>

        {{-- Price history (prices: admin and front desk; cost changes: admin only) --}}
        @can('view-prices')
            <section class="rounded-xl bg-white p-4 shadow-sm sm:p-6">
                <h2 class="text-lg font-semibold text-gray-900">Price history</h2>
                @if ($history->isEmpty())
                    <p class="mt-2 text-gray-500">No price changes yet.</p>
                @else
                    <div class="mt-2 overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead>
                                <tr class="text-left text-xs uppercase tracking-wide text-gray-500">
                                    <th class="px-2 py-2">Date</th><th class="px-2 py-2">Price</th><th class="px-2 py-2 text-right">Old</th>
                                    <th class="px-2 py-2 text-right">New</th><th class="px-2 py-2">How</th><th class="px-2 py-2">By</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach ($history as $change)
                                    <tr>
                                        <td class="px-2 py-2 whitespace-nowrap">{{ $change->created_at->format('d M Y, g:i A') }}</td>
                                        <td class="px-2 py-2">{{ $change->price_type === \App\Enums\PriceType::Level ? ($change->priceLevel?->name ?? 'Price level').' price' : $change->price_type->label() }}</td>
                                        <td class="px-2 py-2 text-right tabular-nums">{{ $change->old_price !== null ? number_format($change->old_price, 2) : '—' }}</td>
                                        <td class="px-2 py-2 text-right tabular-nums font-semibold">{{ $change->new_price !== null ? number_format($change->new_price, 2) : '—' }}</td>
                                        <td class="px-2 py-2">{{ $change->sourceLabel() }}</td>
                                        <td class="px-2 py-2">{{ $change->changedBy?->name ?? 'System' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </section>
        @endcan
    </div>
</x-app-layout>