@props(['store', 'compact' => false])

@php
use Carbon\Carbon;
$now = Carbon::now();
$day = $now->dayOfWeek;
$time = $now->format('H:i:s');
$todayHour = $store->hours->firstWhere('day_of_week', $day);
$isOpen = $todayHour && !$todayHour->is_closed && $time >= $todayHour->opens_at->format('H:i:s') && $time <= $todayHour->closes_at->format('H:i:s');

$statusLabel = $store->status?->label();
$statusColor = match ($store->status?->value) {
    'open' => 'bg-green-100 text-green-800',
    'renovation' => 'bg-amber-100 text-amber-800',
    'closed' => 'bg-red-100 text-red-800',
    default => 'bg-gray-100 text-gray-800',
};

$typeLabel = match ($store->type?->value) {
    'hypermarket' => 'Hipermercado',
    'supermarket' => 'Supermercado',
    'express' => 'Express',
    default => 'Loja',
};

$hasCoords = $store->latitude && $store->longitude;
@endphp

<div {{ $attributes->merge(['class' => 'group bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-lg hover:border-brand-200 transition-all duration-300 flex flex-col']) }}>
    @if (!$compact)
    <div class="relative h-44 bg-gradient-to-br from-brand-50 to-brand-100 flex items-center justify-center overflow-hidden">
        @if ($store->photo)
            <img src="{{ asset('storage/' . $store->photo) }}" alt="{{ $store->name }}" loading="lazy" class="w-full h-full object-cover">
        @else
            <div class="flex flex-col items-center gap-2 text-brand-300">
                <svg class="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z" />
                </svg>
                <span class="text-sm font-medium text-brand-400">{{ $typeLabel }}</span>
            </div>
        @endif

        <div class="absolute top-3 left-3 flex flex-wrap gap-2">
            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold shadow-sm {{ $statusColor }}">
                {{ $statusLabel }}
            </span>
            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-white/90 text-gray-700 shadow-sm">
                {{ $typeLabel }}
            </span>
        </div>

        @if ($hasCoords)
        <a href="https://www.google.com/maps/dir/?api=1&destination={{ $store->latitude }},{{ $store->longitude }}" target="_blank" rel="noopener noreferrer"
           class="absolute top-3 right-3 p-2 rounded-full bg-white/90 text-brand hover:bg-white hover:text-brand-700 shadow-sm transition" title="Obter direcções">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
            </svg>
        </a>
        @endif
    </div>
    @endif

    <div class="flex-1 p-5 flex flex-col">
        <div class="flex items-start justify-between gap-2">
            <h3 class="text-lg font-bold text-gray-900 group-hover:text-brand transition-colors">
                {{ $store->name }}
            </h3>
            @if ($compact && $store->status?->value === 'renovation')
                <span class="shrink-0 inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-amber-100 text-amber-800">Em renovação</span>
            @elseif ($compact && $store->status?->value === 'closed')
                <span class="shrink-0 inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-red-100 text-red-800">Encerrado</span>
            @endif
        </div>

        <div class="mt-2 space-y-1.5 text-sm text-gray-600">
            <div class="flex items-start gap-2">
                <x-mg-icon name="location" size="sm" class="mt-0.5 shrink-0 text-gray-400" />
                <span>
                    {{ $store->neighborhood ? $store->neighborhood . ', ' : '' }}
                    {{ $store->municipality?->name ?? $store->province?->name ?? '' }}
                </span>
            </div>
            @if ($store->address_line)
            <div class="flex items-start gap-2">
                <x-mg-icon name="home" size="sm" class="mt-0.5 shrink-0 text-gray-400" />
                <span>{{ $store->address_line }}</span>
            </div>
            @endif
        </div>

        @if ($todayHour)
        <div class="mt-3 flex items-center gap-2 text-sm">
            @if ($isOpen)
                <span class="w-2.5 h-2.5 rounded-full bg-green-500 shrink-0"></span>
                <span class="text-green-700 font-medium">Aberto</span>
                <span class="text-gray-500">· Fecha às {{ $todayHour->closes_at->format('H:i') }}</span>
            @elseif ($todayHour->is_closed)
                <span class="w-2.5 h-2.5 rounded-full bg-red-500 shrink-0"></span>
                <span class="text-red-600 font-medium">Fechado hoje</span>
            @else
                <span class="w-2.5 h-2.5 rounded-full bg-gray-400 shrink-0"></span>
                <span class="text-gray-600 font-medium">Fechado</span>
                <span class="text-gray-500">· Abre às {{ $todayHour->opens_at->format('H:i') }}</span>
            @endif
        </div>
        @else
        <div class="mt-3 flex items-center gap-2 text-sm text-gray-400">
            <span class="w-2.5 h-2.5 rounded-full bg-gray-300 shrink-0"></span>
            <span>Horário indisponível</span>
        </div>
        @endif

        @if ($store->services && $store->services->isNotEmpty())
        <div class="mt-3 flex flex-wrap gap-1.5">
            @foreach ($store->services->take(4) as $service)
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-brand-50 text-brand-700">
                    {{ $service->service }}
                </span>
            @endforeach
            @if ($store->services->count() > 4)
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-500">
                    +{{ $store->services->count() - 4 }}
                </span>
            @endif
        </div>
        @endif

        @isset($distance)
        <div class="mt-2 text-xs text-gray-400 flex items-center gap-1">
            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
            </svg>
            <span>A ~{{ number_format($distance, 1) }} km</span>
        </div>
        @endisset

        <div class="mt-auto pt-4 flex items-center gap-3">
            <a href="{{ route('lojas.detalhes', $store->slug) }}"
               class="flex-1 inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg bg-brand text-white hover:bg-brand-700 transition">
                Ver detalhes
            </a>
            @if ($hasCoords)
            <a href="https://www.google.com/maps/dir/?api=1&destination={{ $store->latitude }},{{ $store->longitude }}"
               target="_blank" rel="noopener noreferrer"
               class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition">
                Direcções
            </a>
            @endif
        </div>
    </div>
</div>
