@props(['product', 'tone' => 'light'])
@php
  if (! $product->relationLoaded('variants') || ! $product->relationLoaded('media') || ! $product->relationLoaded('options')) {
      $product->loadMissing(['variants', 'media', 'options.values']);
  }
  $variant = $product->variants->sortBy('price_cents')->first();
  $priced = $variant
    ? app(\App\Domain\Markets\Services\MarketService::class)->priceForVariant($variant)
    : ['labeled' => 'AUD 0.00'];
  $thumb = $product->thumbnailMedia() ?? ($product->relationLoaded('media') ? $product->media->first() : null);
  $imageUrl = $thumb?->publicUrl() ?: ($thumb?->path ? asset('storage/'.$thumb->path) : null);
  $isDark = $tone === 'dark';

  $colourOption = $product->options->first(fn ($o) => in_array(strtolower($o->name), ['colour', 'color'], true));
  $sizeOption = $product->options->first(fn ($o) => strtolower($o->name) === 'size');
  $styleOption = $product->options->first(fn ($o) => strtolower($o->name) === 'style');

  $colours = $colourOption
    ? $colourOption->values->pluck('value')->filter()->unique()->values()
    : collect();

  $sizes = $sizeOption
    ? $sizeOption->values->pluck('value')->filter()->unique()->values()
    : collect();

  $styles = $styleOption
    ? $styleOption->values->pluck('value')->filter()->unique()->values()
    : collect();

  // Fallback when options relation is sparse but variants carry Shopify-style option columns
  if ($colours->isEmpty() && $sizes->isEmpty() && $styles->isEmpty()) {
      $option2 = $product->variants->pluck('option2')->filter()->unique()->values();
      $knownColours = ['black', 'grey', 'gray', 'red', 'blue', 'white'];
      if ($option2->isNotEmpty() && $option2->every(fn ($v) => in_array(strtolower($v), $knownColours, true))) {
          $colours = $option2;
      }
      $option1 = $product->variants->pluck('option1')->filter()->unique()->values();
      if ($option1->isNotEmpty() && $option1->contains(fn ($v) => preg_match('/\bft\b/i', (string) $v))) {
          $sizes = $option1;
      } elseif ($option1->count() > 1) {
          $styles = $option1;
      }
  }

  // Prefer variant image_path for colour swatches when available
  $colourImages = [];
  foreach ($product->variants as $v) {
    $colour = $v->option2;
    if ($colour && $v->image_path && ! isset($colourImages[$colour])) {
      $colourImages[$colour] = str_starts_with($v->image_path, 'http')
        ? $v->image_path
        : asset('storage/'.$v->image_path);
    }
  }

  $variantCount = $product->variants->count();
@endphp
<article {{ $attributes->merge(['class' => 'store-product-card group '.($isDark ? 'store-product-card-dark' : '')]) }}>
  <a href="{{ route('products.show', $product->handle) }}" class="store-product-card-link">
    <div class="store-product-card-media {{ $isDark ? 'is-dark' : '' }}">
      @if($imageUrl)
        <img
          src="{{ $imageUrl }}"
          alt="{{ $product->title }}"
          class="store-product-card-img"
          loading="lazy"
          width="800"
          height="1000"
        >
      @else
        <div class="store-product-card-fallback" aria-hidden="true"></div>
      @endif
      @if($product->grade)
        <span class="store-product-card-badge">{{ $product->grade }}</span>
      @endif
      @if($variantCount > 1)
        <span class="store-product-card-options-hint">{{ $variantCount }} options</span>
      @endif
      <span class="store-product-card-go" aria-hidden="true"><i data-lucide="arrow-up-right"></i></span>
    </div>

    <div class="store-product-card-body">
      <h3 class="store-product-card-title">{{ $product->title }}</h3>
      <p class="store-product-card-price">From {{ $priced['labeled'] }}</p>

      @if($colours->count() > 1)
        <div class="store-product-card-swatches" aria-label="Available colours">
          @foreach($colours->take(6) as $colour)
            @php
              $slug = \Illuminate\Support\Str::slug($colour);
              $bg = $colourImages[$colour] ?? null;
            @endphp
            <span
              class="store-product-card-swatch"
              data-swatch="{{ $slug }}"
              title="{{ $colour }}"
              @if($bg) style="background-image:url('{{ $bg }}')" @endif
            ><span class="sr-only">{{ $colour }}</span></span>
          @endforeach
          @if($colours->count() > 6)
            <span class="store-product-card-more">+{{ $colours->count() - 6 }}</span>
          @endif
        </div>
      @endif

      @if($sizes->count() > 1)
        <div class="store-product-card-sizes" aria-label="Available sizes">
          @foreach($sizes->take(5) as $size)
            <span class="store-product-card-size">{{ $size }}</span>
          @endforeach
          @if($sizes->count() > 5)
            <span class="store-product-card-more">+{{ $sizes->count() - 5 }}</span>
          @endif
        </div>
      @elseif($styles->count() > 1)
        <div class="store-product-card-sizes" aria-label="Available styles">
          @foreach($styles as $style)
            <span class="store-product-card-size">{{ $style }}</span>
          @endforeach
        </div>
      @endif
    </div>
  </a>

  @if($variant)
    <form method="post" action="{{ route('cart.add') }}" class="store-product-card-cta">
      @csrf
      <input type="hidden" name="variant_id" value="{{ $variant->id }}">
      <input type="hidden" name="quantity" value="1">
      @if($variantCount > 1)
        <a href="{{ route('products.show', $product->handle) }}" class="store-product-card-btn">Choose options</a>
      @else
        <button type="submit" class="store-product-card-btn">Shop now</button>
      @endif
    </form>
  @endif
</article>