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

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

    $isWatched = auth()->check() && $episode->userWatched(auth()->id());

    $badgeColor = $isWatched
        ? 'bg-green-600/80'
        : 'bg-rose-700/70';

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

<div
    class="group relative w-full p-1 md:p-2 transition-all duration-300 ease-out md:hover:-translate-y-1 md:hover:scale-[1.03]">

    <a
        href="{{ route('hentai.index', ['title' => $episode->slug]) }}"
        class="block overflow-hidden rounded-2xl dark:bg-neutral-950 bg-white shadow-lg">

        
        <div class="relative">
            {{-- Switch between Cover and Thumbnail --}}
            @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"
            >
            @elseif ($view === 'thumbnail')
            <img
                src="{{ $episode->gallery->first()?->thumbnail_url }}"
                alt="{{ $episode->title }} - {{ $episode->episode }}"
                loading="lazy"
                width="1000"
                class="aspect-video w-full object-cover object-center "
            >
            @endif

            {{-- Resolution Badge --}}
            <div class="absolute top-0 right-0 z-20">
                <span class="{{ $badgeColor }} rounded-bl-xl px-3 py-1.5 text-sm font-semibold text-white">
                    {{ $episode->getResolution() }}
                </span>
            </div>

            {{-- Stats --}}
            <div class="absolute bottom-0 left-0 z-20">
                <div class="{{ $badgeColor }} flex items-center gap-3 rounded-tr-xl px-3 py-1 text-sm font-semibold text-white">

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

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

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

            {{-- Problematic Tags --}}
            @if (!empty($problematic))
                <div class="absolute top-0 left-0 z-20">
                    <span class="rounded-br-xl bg-red-700/80 px-3 py-1.5 text-sm font-semibold text-white backdrop-blur">
                        <i class="fa-solid fa-triangle-exclamation"></i>
                        {{ $problematic }}
                    </span>
                </div>
            @endif


        </div>

        {{-- Title --}}
        <div class="p-3 text-center">
            <p class="text-sm font-bold text-black dark:text-white">
                {{ $title }}
            </p>
        </div>
    </a>
</div>