{{--
    Deal Explorer — Grid Card Component
    Props: $property (PropertyData), $userId (nullable int)
--}}
@props(['property', 'userId' => null])

@php
    $isFavourited = $userId && $property->favourites->isNotEmpty();
    $primaryImage = $property->primaryImage?->image_url;

    $hasSalePrice = !is_null($property->list_price);
    $hasRentPrice = !is_null($property->rent_price);
    $hasFmr = !is_null($property->fair_market_rent);

    $op = strtolower($property->operation ?? '');
    $showSaleStatus = str_contains($op, 'sale');
    $showRentStatus = str_contains($op, 'rent');

    $isSaleOnly = $op === 'sale' || $op === 'for sale';
    $isRentOnly = $op === 'rent' || $op === 'for rent';

    $isSaleRent = str_contains($op, 'sale') && str_contains($op, 'rent');
@endphp

<div class="de-card group relative flex flex-col overflow-hidden rounded-xl border border-border bg-card shadow-card transition-shadow hover:shadow-hover cursor-pointer"
    @click.prevent.stop="openModal('{{ $property->internal_property_id }}')">

    {{-- Image --}}
    <div class="relative aspect-video w-full overflow-hidden bg-muted">
        @if ($primaryImage)
            <img src="{{ $primaryImage }}" alt="{{ $property->property_title }}"
                class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
                loading="lazy" />
        @else
            <div class="flex h-full w-full items-center justify-center bg-muted text-muted-foreground">
                <x-heroicon-o-home class="h-12 w-12 opacity-30" />
                <span class="sr-only">No image available</span>
            </div>
        @endif

        {{-- Operation badges --}}
        <div class="absolute start-2 top-2 flex flex-wrap gap-1">
            @if (str_contains(strtolower($property->operation ?? ''), 'rent'))
                <span
                    class="inline-flex items-center rounded-full bg-blue-600 px-2 py-0.5 text-[10px] font-semibold text-white">For
                    Rent</span>
            @endif
            @if (str_contains(strtolower($property->operation ?? ''), 'sale'))
                <span
                    class="inline-flex items-center rounded-full bg-purple-600 px-2 py-0.5 text-[10px] font-semibold text-white">For
                    Sale</span>
            @endif
        </div>

        {{-- Favourite button --}}
        <button type="button" data-fav-id="{{ $property->internal_property_id }}"
            data-fav-active="{{ $isFavourited ? 'true' : 'false' }}"
            @click.prevent.stop="toggleFavourite('{{ $property->internal_property_id }}', $el)"
            class="de-fav-btn absolute end-2 top-2 flex h-8 w-8 items-center justify-center rounded-full bg-card/85 shadow backdrop-blur-sm transition-all hover:scale-110 hover:bg-card {{ $isFavourited ? 'de-fav-active' : '' }}"
            aria-label="{{ $isFavourited ? 'Remove from favourites' : 'Add to favourites' }}">
            <x-heroicon-s-heart class="de-fav-active-svg h-4 w-4 text-red-500 {{ $isFavourited ? '' : 'hidden' }}" />
            <x-heroicon-o-heart
                class="de-fav-inactive-svg h-4 w-4 text-muted-foreground {{ $isFavourited ? 'hidden' : '' }}" />
        </button>
    </div>

    {{-- Card body --}}
    <div class="flex flex-1 flex-col p-3">


        {{-- Title --}}
        <h3 class="mb-1 line-clamp-2 text-sm font-semibold text-foreground leading-snug">
            {{ $property->property_title ?: 'Untitled Property' }}
        </h3>

        {{-- Address --}}
        <p class="mb-2 line-clamp-1 text-xs text-muted-foreground">
            {{ implode(', ', array_filter([$property->full_address, $property->city, $property->state, $property->postal_code])) }}
        </p>

        {{-- Stats Card --}}
        <div class="border border-border bg-muted/30 p-2 rounded-xl mb-3 grid grid-cols-3 gap-1 text-center text-xs">
            <div>
                <p class="font-bold text-foreground">
                    {{ !is_null($property->bedrooms) ? (int) $property->bedrooms : '-' }}</p>
                <p class="text-[10px] text-muted-foreground uppercase font-semibold flex items-center justify-center gap-1">
                    <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M22 15v4a1 1 0 01-1 1H3a1 1 0 01-1-1v-4M22 15V9a1 1 0 00-1-1H3a1 1 0 00-1 1v6M22 15H2M5 10h5v4H5zm9 0h5v4h-5z" />
                    </svg>
                    Beds
                </p>
            </div>
            <div class="border-x border-border/60">
                <p class="font-bold text-foreground">
                    {{ !is_null($property->bathrooms) ? (int) $property->bathrooms : '-' }}</p>
                <p class="text-[10px] text-muted-foreground uppercase font-semibold flex items-center justify-center gap-1">
                    <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 8v2a6 6 0 01-12 0V8" />
                        <path d="M6 8V5a2 2 0 012-2h8a2 2 0 012 2v3" />
                        <path d="M2 18h20v2a1 1 0 01-1 1H3a1 1 0 01-1-1v-2z" />
                    </svg>
                    Baths
                </p>
            </div>
            <div>
                <p class="font-bold text-foreground">
                    {{ $property->total_area ? number_format($property->total_area) : '-' }}</p>
                <p class="text-[10px] text-muted-foreground uppercase font-semibold flex items-center justify-center gap-1">
                    <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M8 4H4v4M16 4h4v4M4 16v4h4m8-4h4v4" />
                        <path d="M4 12h16M12 4v16" />
                    </svg>
                    SQM
                </p>
            </div>
        </div>

        {{-- Type + status badges --}}
        <div class="mb-3 flex flex-wrap gap-2">

            @if ($property->property_type)
                <span
                    class="inline-flex items-center gap-1 rounded-full bg-primary-50 px-3 py-1 text-xs font-semibold text-primary-700 ring-1 ring-inset ring-primary-200 dark:bg-primary-950/50 dark:text-primary-300 dark:ring-primary-800">
                    <x-heroicon-m-home class="h-3.5 w-3.5" />
                    {{ $property->property_type }}
                </span>
            @endif

            @if ($showSaleStatus && $property->property_sale_status && $showSaleStatus)
                <span
                    class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-300 dark:ring-emerald-800">
                    <x-heroicon-m-currency-dollar class="h-3.5 w-3.5" />
                    <span class="tracking-wide">Sale Status: </span>
                    <span>{{ $property->property_sale_status }}</span>
                </span>
            @endif

            @if ($showRentStatus && $property->property_rent_status && $showRentStatus)
                <span
                    class="inline-flex items-center gap-1 rounded-full bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700 ring-1 ring-inset ring-sky-200 dark:bg-sky-950/50 dark:text-sky-300 dark:ring-sky-800">
                    <x-heroicon-m-key class="h-3.5 w-3.5" />
                    <span class="tracking-wide">Rent Status: </span>
                    <span>{{ $property->property_rent_status }}</span>
                </span>
            @endif

        </div>


        {{-- Prices Card --}}
        <div class="mt-auto border border-border bg-muted/30 p-2 rounded-xl space-y-1 text-xs">

            {{-- Sale Price --}}
            <div class="flex items-center justify-between">
                <span class="text-muted-foreground font-medium">Sale Price</span>

                @if ($isRentOnly)
                    <span class="font-bold text-muted-foreground">-</span>
                @elseif ($hasSalePrice)
                    <span class="font-bold text-foreground">
                        ₹{{ number_format($property->list_price, 2) }}
                    </span>
                @else
                    <span class="font-bold text-muted-foreground">-</span>
                @endif
            </div>

            {{-- Rent Price --}}
            <div class="flex items-center justify-between">
                <span class="text-muted-foreground font-medium">Rent Price</span>

                @if ($isSaleOnly)
                    <span class="font-bold text-muted-foreground">-</span>
                @elseif ($hasRentPrice)
                    @php
                        $rentPeriodSymbol = 'M';
                        if (!empty($property->rent_period)) {
                            $period = strtolower($property->rent_period);
                            if (str_contains($period, 'yearly')) {
                                $rentPeriodSymbol = 'Y';
                            } elseif (str_contains($period, 'quarterly')) {
                                $rentPeriodSymbol = 'Q';
                            }
                        }
                    @endphp
                    <span class="font-bold text-foreground">
                        ₹{{ number_format((float) $property->rent_price, 2) }}/{{ $rentPeriodSymbol }}
                    </span>
                @else
                    <span class="font-bold text-muted-foreground">-</span>
                @endif
            </div>

            {{-- FMR --}}
            @if ($hasFmr)
                <div class="flex items-center justify-between">
                    <span class="text-muted-foreground font-medium">FMR</span>
                    <span class="font-bold text-foreground">
                        ₹{{ number_format($property->fair_market_rent, 2) }}
                    </span>
                </div>
            @endif

        </div>
    </div>
</div>