@props([
    'episode',
    'view',
    'displayjapanese' => false
])

@php
    $title = $displayjapanese
        ? "{$episode->title_jpn} ({$episode->title}) - {$episode->episode}"
        : "{$episode->title} - {$episode->episode}";

    $isLoggedIn = auth()->check();

    $isWatched = $isLoggedIn
        ? $episode->userWatched(auth()->id())
        : false;

    $problematic = cache()->rememberForever(
        "episodeProblematic{$episode->id}",
        fn () => $episode->getProblematicTags()
    );
@endphp

<div class="group w-full p-1">
    <a
        href="{{ route('hentai.index', ['title' => $episode->slug]) }}"
        class="block overflow-hidden rounded-2xl border border-neutral-200 bg-white transition-all duration-300 hover:-translate-y-1 hover:border-neutral-400 hover:shadow-xl dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-neutral-700"
    >
        <div class="relative overflow-hidden">

            {{-- Thumbnail / Cover --}}
            @if ($view === 'poster')
                <img
                    src="{{ $episode->cover_url }}"
                    alt="{{ $episode->title }} - {{ $episode->episode }}"
                    loading="lazy"
                    width="400"
                    class="aspect-[11/16] w-full object-cover object-center transition-transform duration-500 group-hover:scale-[1.03]"
                >
            @elseif ($view === 'thumbnail')
                @php
                    $galleryImages = $episode->gallery
                        ->pluck('thumbnail_url')
                        ->filter()
                        ->values();
                @endphp
                <img
                    src="{{ $galleryImages->first() }}"
                    alt="{{ $episode->title }} - {{ $episode->episode }}"
                    loading="lazy"
                    width="1000"
                    data-gallery='@json($galleryImages)'
                    class="preview-gallery aspect-video w-full object-cover object-center transition-transform duration-500 group-hover:scale-[1.03]"
                >
            @endif

            {{-- Dark Overlay --}}
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent"></div>

            {{-- Top Meta --}}
            <div class="pointer-events-none absolute inset-x-0 top-0 z-20 flex items-start justify-between p-3">

                {{-- Problematic Tags --}}
                @if (!empty($problematic))
                    <div class="rounded-full bg-red-700/40 px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-white ring-1 ring-red-700/70">
                        <i class="fa-solid fa-triangle-exclamation mr-1"></i>
                        {{ $problematic }}
                    </div>
                @endif

                {{-- Resolution --}}
                <div class="ml-auto rounded-full bg-black/70 px-2 py-1 text-[11px] font-semibold tracking-wide text-white ring-1 ring-white/10">
                    {{ $episode->getResolution() }}
                </div>
            </div>

            {{-- Bottom Content --}}
            <div class="pointer-events-none absolute inset-x-0 bottom-0 z-20 p-4">

                {{-- Title --}}
                <h3 class=" text-sm font-semibold leading-snug text-white md:text-base">
                    {{ $title }}
                </h3>

                {{-- Bottom Row --}}
                <div class="mt-3 flex items-center justify-between gap-3">

                    {{-- Stats --}}
                    <div class="flex flex-wrap items-center gap-3 text-sm font-bold text-neutral-200">

                        <span class="flex items-center gap-1">
                            <i class="fa-regular fa-eye text-neutral-200 font-bold"></i>
                            {{ $episode->viewCountFormatted() }}
                        </span>

                        <span class="flex items-center gap-1">
                            <i class="fa-regular fa-heart text-neutral-200 font-bold"></i>
                            {{ $episode->likeCount() }}
                        </span>

                        <span class="flex items-center gap-1">
                            <i class="fa-regular fa-comment text-neutral-200 font-bold"></i>
                            {{ $episode->commentCount() }}
                        </span>
                    </div>

                    {{-- Watched Status (logged in users only) --}}
                    @auth
                        @if ($isWatched)
                            <div class="shrink-0 rounded-full bg-emerald-800/40 px-2.5 py-1 text-xs font-semibold text-emerald-300 ring-1 ring-emerald-500/30">
                                @if ($view === 'thumbnail')
                                <i class="fa-solid fa-eye mr-1"></i> Watched
                                @else
                                <i class="fa-solid fa-eye"></i>
                                @endif
                            </div>
                        @else
                            <div class="shrink-0 rounded-full bg-rose-800/40 px-2.5 py-1 text-xs font-semibold text-rose-300 ring-1 ring-rose-500/30">
                                <i class="fa-solid fa-eye-slash"></i>
                            </div>
                        @endif
                    @endauth

                </div>
            </div>

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