@extends('app.shell')

@section('body')
  @php
    /** @var \Illuminate\Support\Collection<int, \App\Models\SharedPurchase> $sharedPurchases */
    $locale = app()->getLocale();
    $displayCurrency = request()->user()?->profile?->currency ?: 'USD';
    $planningCount = $sharedPurchases->where('status', 'planning')->count();
    $decidedCount = $sharedPurchases->where('status', 'decided')->count();
    $boughtCount = $sharedPurchases->where('status', 'bought')->count();
    $targetTotal = (float) $sharedPurchases->whereNotNull('target_amount')->sum('target_amount');
    $targetTotalFmt = \App\Support\Money::formatConvertedWithOriginal($targetTotal, $displayCurrency, $displayCurrency, $locale);
  @endphp

  <div class="min-h-screen safe-bottom animate-fade-in">
    <div class="app-page-wrap pt-6 md:pt-6 lg:pt-8 pb-10 md:pb-10 space-y-6" data-collection-root>
      <x-page-header title="{{ __('Shared purchases') }}" back>
        <x-slot:right>
          <a
            href="{{ route('app.shared-purchases.new') }}"
            class="tap-target w-9 h-9 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-sm active:scale-95 transition-transform"
            aria-label="{{ __('Create shared purchase') }}"
          >
            <x-lucide-plus class="w-5 h-5" />
          </a>
        </x-slot:right>
      </x-page-header>

      <div class="apple-card p-5 space-y-4">
        <div class="flex items-start justify-between gap-4">
          <div class="min-w-0">
            <p class="text-[13px] text-muted-foreground">{{ __('Keep bigger decisions visible so everyone knows what is being planned, decided, or bought.') }}</p>
            <p class="mt-1 text-[21px] font-semibold text-foreground">
              {{ trans_choice(':count purchase|:count purchases', $sharedPurchases->count(), ['count' => $sharedPurchases->count()]) }}
            </p>
          </div>
          <div class="w-12 h-12 rounded-[18px] bg-primary/10 text-[24px] flex items-center justify-center shrink-0">
            🛋️
          </div>
        </div>

        <div class="grid grid-cols-2 gap-2.5">
          <div class="rounded-2xl bg-secondary/70 px-3 py-3">
            <p class="text-[11px] uppercase tracking-wide text-muted-foreground">{{ __('Planning') }}</p>
            <p class="mt-1 text-[18px] font-semibold text-foreground">{{ $planningCount }}</p>
          </div>
          <div class="rounded-2xl bg-secondary/70 px-3 py-3">
            <p class="text-[11px] uppercase tracking-wide text-muted-foreground">{{ __('Decided') }}</p>
            <p class="mt-1 text-[18px] font-semibold text-foreground">{{ $decidedCount }}</p>
          </div>
          <div class="rounded-2xl bg-secondary/70 px-3 py-3">
            <p class="text-[11px] uppercase tracking-wide text-muted-foreground">{{ __('Bought') }}</p>
            <p class="mt-1 text-[18px] font-semibold text-foreground">{{ $boughtCount }}</p>
          </div>
          <div class="rounded-2xl bg-secondary/70 px-3 py-3">
            <p class="text-[11px] uppercase tracking-wide text-muted-foreground">{{ __('Target total') }}</p>
            <p class="mt-1 text-[18px] font-semibold text-foreground tabular-nums">{{ $targetTotalFmt['primary'] }}</p>
          </div>
        </div>
      </div>

      <div class="space-y-3" @class(['hidden' => $sharedPurchases->count() === 0])>
        <div class="relative">
          <x-lucide-search class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/60" />
          <input
            type="text"
            placeholder="{{ __('Search purchases, notes, or members') }}"
            class="w-full rounded-xl bg-secondary/80 border-0 py-3 pl-10 pr-4 text-[15px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary/30"
            data-collection-search
          />
        </div>

        <div class="flex gap-2 overflow-x-auto pb-1">
          <button type="button" class="shrink-0 rounded-full px-3.5 py-2 text-[13px] font-medium bg-primary text-primary-foreground shadow-sm" data-collection-chip="all" data-active="true">
            {{ __('All') }}
          </button>
          <button type="button" class="shrink-0 rounded-full px-3.5 py-2 text-[13px] font-medium bg-secondary/80 text-foreground" data-collection-chip="planning" data-active="false">
            {{ __('Planning') }}
          </button>
          <button type="button" class="shrink-0 rounded-full px-3.5 py-2 text-[13px] font-medium bg-secondary/80 text-foreground" data-collection-chip="decided" data-active="false">
            {{ __('Decided') }}
          </button>
          <button type="button" class="shrink-0 rounded-full px-3.5 py-2 text-[13px] font-medium bg-secondary/80 text-foreground" data-collection-chip="bought" data-active="false">
            {{ __('Bought') }}
          </button>
        </div>
      </div>

      <div class="space-y-3">
        @foreach ($sharedPurchases as $purchase)
          @php
            $status = $purchase->status ?? 'planning';
            $statusLabel = $status === 'bought' ? __('Bought') : ($status === 'decided' ? __('Decided') : __('Planning'));
            $statusColor = $status === 'bought'
              ? 'bg-[hsl(var(--success)/0.12)] text-[hsl(var(--success))]'
              : ($status === 'decided' ? 'bg-primary/10 text-primary' : 'bg-secondary text-muted-foreground');
            $fmt = $purchase->target_amount !== null && $purchase->target_amount > 0
              ? \App\Support\Money::formatConvertedWithOriginal((float) $purchase->target_amount, $displayCurrency, $displayCurrency, $locale)
              : null;
            $searchText = collect([
              $purchase->name,
              $purchase->notes,
              $statusLabel,
              $purchase->members->pluck('name')->join(' '),
            ])->filter()->join(' ');
          @endphp

          <a
            href="{{ route('app.shared-purchases.detail', ['id' => $purchase->id]) }}"
            class="apple-card px-4 py-4 active:scale-[0.98] transition-transform block"
            data-collection-item
            data-collection-filters="{{ $status }}"
            data-collection-text="{{ strtolower($searchText) }}"
          >
            <div class="flex items-start gap-3">
              <div class="w-12 h-12 rounded-[16px] bg-primary-muted flex items-center justify-center text-xl shrink-0">
                {{ $purchase->emoji }}
              </div>
              <div class="min-w-0 flex-1 space-y-4">
                <div class="flex items-start justify-between gap-3">
                  <div class="min-w-0">
                    <p class="font-semibold text-[16px] text-foreground leading-tight truncate">{{ $purchase->name }}</p>
                    <p class="text-[13px] text-muted-foreground mt-1">
                      {{ $purchase->members->count() }} {{ __('members') }}
                    </p>
                  </div>
                  <span class="shrink-0 inline-flex rounded-full px-2.5 py-1 text-[12px] font-medium {{ $statusColor }}">
                    {{ $statusLabel }}
                  </span>
                </div>

                <div class="grid grid-cols-2 gap-3">
                  <div class="rounded-2xl bg-secondary/60 px-3 py-3">
                    <p class="text-[11px] uppercase tracking-wide text-muted-foreground">{{ __('Target') }}</p>
                    @if ($fmt)
                      <p class="mt-1 text-[15px] font-semibold text-foreground tabular-nums">{{ $fmt['primary'] }}</p>
                    @else
                      <p class="mt-1 text-[13px] text-muted-foreground">{{ __('No target set') }}</p>
                    @endif
                  </div>
                  <div class="rounded-2xl bg-secondary/60 px-3 py-3">
                    <p class="text-[11px] uppercase tracking-wide text-muted-foreground">{{ __('Notes') }}</p>
                    <p class="mt-1 text-[13px] text-foreground line-clamp-2">
                      {{ filled($purchase->notes) ? $purchase->notes : __('No notes yet') }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </a>
        @endforeach
      </div>

      <a
        href="{{ route('app.shared-purchases.new') }}"
        class="apple-card border-2 border-dashed border-border/60 px-4 py-4 flex items-center gap-3 active:scale-[0.98] transition-transform"
        @class(['hidden' => $sharedPurchases->count() === 0])
      >
        <div class="w-11 h-11 rounded-2xl bg-primary/10 flex items-center justify-center shrink-0">
          <x-lucide-plus class="w-5 h-5 text-primary" />
        </div>
        <div>
          <p class="text-[15px] font-semibold text-foreground">{{ __('Create another shared purchase') }}</p>
          <p class="text-[13px] text-muted-foreground">{{ __('Track the next bigger buy with everyone involved.') }}</p>
        </div>
      </a>

      <div class="hidden text-center py-12 space-y-3" data-collection-no-results>
        <div class="w-14 h-14 rounded-2xl bg-secondary/80 text-[26px] flex items-center justify-center mx-auto">🔎</div>
        <div>
          <p class="text-[17px] font-semibold text-foreground">{{ __('No shared purchases match that search') }}</p>
          <p class="text-[14px] text-muted-foreground mt-1">{{ __('Try another name, note, member, or status.') }}</p>
        </div>
      </div>

      <div class="space-y-8" data-collection-empty @class(['hidden' => $sharedPurchases->count() > 0])>
        <div class="text-center space-y-4">
          <div class="w-[72px] h-[72px] rounded-[20px] bg-primary-muted flex items-center justify-center text-[36px] mx-auto">
            🛋️
          </div>
          <p class="text-[15px] text-muted-foreground leading-relaxed px-2">
            {{ __('Plan a purchase together, track status, and keep notes in one place.') }}
          </p>
        </div>

        <ul class="space-y-3 px-1">
          @foreach ([
            'Add members to decide together',
            'Set an optional target amount',
            'Track status: planning → decided → bought',
          ] as $line)
            <li class="flex gap-3 items-start">
              <span class="mt-0.5 w-6 h-6 rounded-full bg-primary/15 flex items-center justify-center shrink-0">
                <x-lucide-check class="w-3.5 h-3.5 text-primary" />
              </span>
              <span class="text-[15px] text-foreground leading-snug pt-0.5">{{ __($line) }}</span>
            </li>
          @endforeach
        </ul>

        <a
          href="{{ route('app.shared-purchases.new') }}"
          class="w-full py-4 rounded-2xl bg-primary text-primary-foreground text-[17px] font-semibold active:scale-[0.98] transition-transform text-center block"
        >
          {{ __('Create a shared purchase') }}
        </a>
      </div>
    </div>
  </div>
@endsection