@php
    /** @var \App\Models\Catalog\Product $record */

    $stock = (float) ($record->stock ?? 0);

    $imageUrl = null;

    if (filled($record->image_url)) {
        $imageUrl = \App\Models\Catalog\Product::resolveStoredImage(
            $record->image_url
        );
    }

    $category = $record->mainCategory?->name ?? '—';
    $subCategory = $record->subCategory?->name ?? null;
    $unit = $record->baseUnit?->name ?? '';

    $productEditUrl = \App\Filament\Resources\ProductResource::getUrl(
        'edit',
        ['record' => $record]
    );
@endphp

<div
    class="group w-full overflow-hidden rounded-xl border border-gray-200
           bg-white shadow-sm ring-1 ring-black/[0.03] transition-shadow
           duration-200 hover:shadow-md hover:ring-black/[0.06]
           dark:border-gray-700 dark:bg-gray-900 dark:ring-white/5 dark:hover:ring-white/10
           {{ $record->is_active
                ? 'border-l-4 border-l-success-500 dark:border-l-success-400'
                : 'border-l-4 border-l-gray-300 dark:border-l-gray-600' }}"
>
    {{-- ============================================================= --}}
    {{-- ROW 1: PRODUCT DETAILS                                        --}}
    {{-- ============================================================= --}}

    <div class="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:gap-4 sm:px-5">

        {{-- Product image --}}
        <div class="shrink-0">

            @if ($imageUrl)
                <img
                    src="{{ $imageUrl }}"
                    alt="{{ $record->name }}"
                    class="h-16 w-16 rounded-lg object-cover shadow-sm ring-1 ring-gray-950/5
                           transition-transform duration-200 group-hover:scale-105
                           dark:ring-white/10"
                >
            @else
                <div
                    class="flex h-16 w-16 items-center justify-center rounded-lg
                           bg-gradient-to-br from-gray-50 to-gray-100 text-gray-300
                           ring-1 ring-inset ring-gray-950/[0.06]
                           dark:from-gray-800 dark:to-gray-800/60 dark:text-gray-600 dark:ring-white/10"
                >
                    <x-filament::icon
                        icon="heroicon-o-cube"
                        class="h-7 w-7"
                    />
                </div>
            @endif

        </div>

        {{-- Product identity --}}
        <div class="min-w-0 flex-1">

            <div class="flex flex-wrap items-center gap-x-2.5 gap-y-1">

                <h3
                    class="truncate text-base font-semibold tracking-tight text-gray-950 dark:text-white"
                >
                    <span class="font-medium text-gray-400 dark:text-gray-500">Name:</span>
                    {{ $record->name }}
                </h3>

                @if ($record->is_active)
                    <span
                        class="inline-flex items-center gap-1 rounded-full
                               bg-success-50 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide
                               text-success-700 ring-1 ring-inset ring-success-600/20
                               dark:bg-success-500/10 dark:text-success-400 dark:ring-success-400/20"
                    >
                        <span class="h-1.5 w-1.5 rounded-full bg-success-500 dark:bg-success-400"></span>
                        Active
                    </span>
                @else
                    <span
                        class="inline-flex items-center gap-1 rounded-full
                               bg-gray-100 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide
                               text-gray-600 ring-1 ring-inset ring-gray-500/10
                               dark:bg-gray-800 dark:text-gray-400 dark:ring-white/5"
                    >
                        <span class="h-1.5 w-1.5 rounded-full bg-gray-400 dark:bg-gray-500"></span>
                        Inactive
                    </span>
                @endif

            </div>

            <div class="mt-1.5 flex flex-wrap items-center gap-x-4 gap-y-1 text-[13px]">

                <span class="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
                    <x-filament::icon icon="heroicon-o-hashtag" class="h-3.5 w-3.5 shrink-0 text-gray-400 dark:text-gray-500" />
                    <span class="text-gray-400 dark:text-gray-500">SKU:</span>
                    <span class="font-medium text-gray-700 dark:text-gray-300">
                        {{ $record->sku }}
                    </span>
                </span>

                <span class="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
                    <x-filament::icon icon="heroicon-o-folder" class="h-3.5 w-3.5 shrink-0 text-gray-400 dark:text-gray-500" />
                    <span class="text-gray-400 dark:text-gray-500">Category:</span>
                    <span class="font-medium text-gray-700 dark:text-gray-300">
                        {{ $category }}
                    </span>
                    @if ($subCategory)
                        <span class="text-gray-400 dark:text-gray-500">Sub:</span>
                        <span class="font-medium text-gray-700 dark:text-gray-300">
                            {{ $subCategory }}
                        </span>
                    @endif
                </span>

            </div>

            @if ($record->barcode)
                <div class="mt-1.5 inline-flex items-center gap-1 rounded-md bg-gray-50 px-2 py-0.5 text-[12px] text-gray-500 ring-1 ring-gray-950/5 dark:bg-gray-800/60 dark:text-gray-400 dark:ring-white/5">
                    <x-filament::icon icon="heroicon-o-qr-code" class="h-3.5 w-3.5 shrink-0 text-gray-400 dark:text-gray-500" />
                    <span class="text-gray-400 dark:text-gray-500">Barcode:</span>
                    <span class="font-mono tracking-tight text-gray-700 dark:text-gray-300">
                        {{ $record->barcode }}
                    </span>
                </div>
            @endif

        </div>

        {{-- Stock --}}
        <div class="hidden shrink-0 text-right sm:block">

            <div class="flex items-center justify-end gap-1 text-[11px] font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">
                <x-filament::icon icon="heroicon-o-archive-box" class="h-3.5 w-3.5" />
                Stock:
            </div>

            <div
                class="mt-1 text-lg font-bold tabular-nums
                    {{ $stock > 0
                        ? 'text-success-600 dark:text-success-400'
                        : 'text-gray-400 dark:text-gray-500' }}"
            >
                {{ \App\Support\Quantity::format($stock, $record->baseUnit) }}
            </div>

        </div>

    </div>


    {{-- ============================================================= --}}
    {{-- ROW 2: TOGGLES + ACTIONS                                      --}}
    {{-- ============================================================= --}}

    <div
        class="border-t border-gray-200 bg-gray-50 px-5 py-4
               dark:border-gray-800 dark:bg-gray-800/30"
    >

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">

            {{-- ===================================================== --}}
            {{-- LEFT SIDE: STOCK + TOGGLES                            --}}
            {{-- ===================================================== --}}

            <div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">

                {{-- Stock --}}
                <div class="flex shrink-0 items-center gap-1.5 pr-1 text-sm">
                    <span class="text-gray-400 dark:text-gray-500">
                        Stock:
                    </span>

                    <span class="font-semibold tabular-nums text-gray-900 dark:text-white">
                        {{ \App\Support\Quantity::format($stock, $record->baseUnit) }}
                    </span>
                </div>


                {{-- Batch --}}
                <button
                    type="button"
                    wire:click.stop="toggleProductTracking({{ $record->getKey() }}, 'is_batch_tracked')"
                    wire:loading.attr="disabled"
                    wire:target="toggleProductTracking({{ $record->getKey() }}, 'is_batch_tracked')"
                    class="inline-flex shrink-0 items-center gap-2 rounded-xl
                           border-2 px-3.5 py-2 text-sm font-semibold transition-all duration-150
                           hover:shadow-md active:scale-95
                           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40
                           {{ $record->is_batch_tracked
                                ? 'border-primary-300 bg-primary-50 text-primary-700 dark:border-primary-500/40 dark:bg-primary-500/10 dark:text-primary-400'
                                : 'border-gray-200 bg-white text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-gray-600' }}"
                >
                    <span
                        class="relative h-6 w-11 shrink-0 rounded-full transition-colors duration-200
                               {{ $record->is_batch_tracked
                                    ? 'bg-primary-600'
                                    : 'bg-gray-300 dark:bg-gray-600' }}"
                    >
                        <span
                            class="absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-md transition-all duration-200
                                   {{ $record->is_batch_tracked
                                        ? 'left-[22px]'
                                        : 'left-0.5' }}"
                        ></span>
                    </span>

                    <span class="hidden sm:inline">Batch</span>
                </button>


                {{-- Serial --}}
                <button
                    type="button"
                    wire:click.stop="toggleProductTracking({{ $record->getKey() }}, 'is_serial_tracked')"
                    wire:loading.attr="disabled"
                    wire:target="toggleProductTracking({{ $record->getKey() }}, 'is_serial_tracked')"
                    class="inline-flex shrink-0 items-center gap-2 rounded-xl
                           border-2 px-3.5 py-2 text-sm font-semibold transition-all duration-150
                           hover:shadow-md active:scale-95
                           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40
                           {{ $record->is_serial_tracked
                                ? 'border-primary-300 bg-primary-50 text-primary-700 dark:border-primary-500/40 dark:bg-primary-500/10 dark:text-primary-400'
                                : 'border-gray-200 bg-white text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-gray-600' }}"
                >
                    <span
                        class="relative h-6 w-11 shrink-0 rounded-full transition-colors duration-200
                               {{ $record->is_serial_tracked
                                    ? 'bg-primary-600'
                                    : 'bg-gray-300 dark:bg-gray-600' }}"
                    >
                        <span
                            class="absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-md transition-all duration-200
                                   {{ $record->is_serial_tracked
                                        ? 'left-[22px]'
                                        : 'left-0.5' }}"
                        ></span>
                    </span>

                    <span class="hidden sm:inline">Serial</span>
                </button>


                {{-- Expiry --}}
                <button
                    type="button"
                    wire:click.stop="toggleProductTracking({{ $record->getKey() }}, 'is_expiry_tracked')"
                    wire:loading.attr="disabled"
                    wire:target="toggleProductTracking({{ $record->getKey() }}, 'is_expiry_tracked')"
                    @disabled(! $record->is_batch_tracked)
                    class="inline-flex shrink-0 items-center gap-2 rounded-xl
                           border-2 px-3.5 py-2 text-sm font-semibold transition-all duration-150
                           hover:shadow-md active:scale-95
                           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-warning-500/40
                           {{ ! $record->is_batch_tracked
                                ? 'cursor-not-allowed border-gray-200 bg-gray-100 text-gray-400 opacity-60 hover:shadow-none active:scale-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-500'
                                : ($record->is_expiry_tracked
                                    ? 'border-warning-300 bg-warning-50 text-warning-700 dark:border-warning-500/40 dark:bg-warning-500/10 dark:text-warning-400'
                                    : 'border-gray-200 bg-white text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-gray-600') }}"
                >
                    <span
                        class="relative h-6 w-11 shrink-0 rounded-full transition-colors duration-200
                               {{ $record->is_expiry_tracked
                                    ? 'bg-warning-500'
                                    : 'bg-gray-300 dark:bg-gray-600' }}"
                    >
                        <span
                            class="absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-md transition-all duration-200
                                   {{ $record->is_expiry_tracked
                                        ? 'left-[22px]'
                                        : 'left-0.5' }}"
                        ></span>
                    </span>

                    <span class="hidden sm:inline">Expiry</span>
                </button>


                {{-- Active --}}
                <span
                    class="inline-flex shrink-0 items-center gap-2 rounded-xl
                           border-2 border-gray-200 bg-white px-3.5 py-2
                           text-sm font-semibold
                           dark:border-gray-700 dark:bg-gray-900"
                >
                    @if ($record->is_active)
                        <span class="h-2.5 w-2.5 rounded-full bg-success-500 dark:bg-success-400"></span>

                        <span class="hidden text-success-700 sm:inline dark:text-success-400">
                            Active
                        </span>
                    @else
                        <span class="h-2.5 w-2.5 rounded-full bg-gray-400 dark:bg-gray-500"></span>

                        <span class="hidden text-gray-500 sm:inline dark:text-gray-400">
                            Inactive
                        </span>
                    @endif
                </span>

            </div>


            {{-- ===================================================== --}}
            {{-- VERTICAL SEPARATOR                                    --}}
            {{-- ===================================================== --}}

            <div
                class="hidden h-11 w-1 shrink-0 rounded-full bg-gray-300
                       dark:bg-gray-600 sm:block"
            ></div>


            {{-- ===================================================== --}}
            {{-- RIGHT SIDE: ACTION BUTTONS                            --}}
            {{-- ===================================================== --}}

            <div class="flex w-full flex-wrap items-center gap-2 sm:w-auto sm:shrink-0">

                {{-- Barcode actions, grouped as a single segmented control --}}
                <div
                    class="inline-flex overflow-hidden rounded-xl border-2 border-gray-200 shadow-sm
                           dark:border-gray-700"
                >
                    {{-- View Barcode --}}
                    <button
                        type="button"
                        wire:click.stop="$dispatch('open-modal', {
                            id: 'product-barcode-{{ $record->getKey() }}'
                        })"
                        class="inline-flex items-center gap-2 border-r-2 border-gray-200 bg-white px-4 py-2
                               text-sm font-semibold text-gray-700
                               transition-colors duration-150 hover:bg-gray-50
                               focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500/40
                               dark:border-gray-700 dark:bg-gray-900
                               dark:text-gray-300 dark:hover:bg-gray-800"
                    >
                        <x-filament::icon
                            icon="heroicon-o-eye"
                            class="h-5 w-5 text-gray-400 dark:text-gray-500"
                        />

                        <span class="hidden md:inline">View</span>
                    </button>


                    {{-- Download Barcode --}}
                    <a
                        href="{{ route('barcode.show', [
                            'product' => $record,
                            'format' => 'png',
                            'download' => 1,
                        ]) }}"
                        class="inline-flex items-center gap-2 bg-white px-4 py-2
                               text-sm font-semibold text-gray-700
                               transition-colors duration-150 hover:bg-gray-50
                               focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500/40
                               dark:bg-gray-900
                               dark:text-gray-300 dark:hover:bg-gray-800"
                    >
                        <x-filament::icon
                            icon="heroicon-o-arrow-down-tray"
                            class="h-5 w-5 text-gray-400 dark:text-gray-500"
                        />

                        <span class="hidden md:inline">Download</span>
                    </a>
                </div>


                {{-- Edit --}}
                <a
                    href="{{ $productEditUrl }}"
                    class="inline-flex items-center gap-2 rounded-xl
                           border-2 border-primary-300 bg-primary-50 px-4 py-2
                           text-sm font-semibold text-primary-700 shadow-sm
                           transition-all duration-150 hover:bg-primary-100 hover:shadow-md
                           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40
                           active:scale-95
                           dark:border-primary-500/40 dark:bg-primary-500/10
                           dark:text-primary-400 dark:hover:bg-primary-500/20"
                >
                    <x-filament::icon
                        icon="heroicon-o-pencil-square"
                        class="h-5 w-5"
                    />

                    <span class="hidden md:inline">Edit</span>
                </a>


                {{-- Delete --}}
                <button
                    type="button"
                    wire:click.stop="deleteProduct({{ $record->getKey() }})"
                    wire:loading.attr="disabled"
                    wire:target="deleteProduct({{ $record->getKey() }})"
                    class="inline-flex items-center gap-2 rounded-xl
                           border-2 border-danger-300 bg-danger-50 px-4 py-2
                           text-sm font-semibold text-danger-700 shadow-sm
                           transition-all duration-150 hover:bg-danger-100 hover:shadow-md
                           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-danger-500/40
                           active:scale-95
                           dark:border-danger-500/40 dark:bg-danger-500/10
                           dark:text-danger-400 dark:hover:bg-danger-500/20"
                >
                    <x-filament::icon
                        icon="heroicon-o-trash"
                        class="h-5 w-5"
                    />

                    <span class="hidden md:inline">Delete</span>
                </button>

            </div>

        </div>

    </div>

</div>

<x-filament::modal
    id="product-barcode-{{ $record->getKey() }}"
    width="sm"
>
    <x-slot name="heading">
        Barcode — {{ $record->name }}
    </x-slot>

    <div class="flex justify-center py-6">
        @include(
            'filament.actions.view-barcode',
            ['product' => $record]
        )
    </div>
</x-filament::modal>