<script setup lang="ts">
import HeroSection from '@/components/ui/internal/HeroSection.vue';
import { Search, SlidersHorizontal } from 'lucide-vue-next';
import MediaImageCard from '~/components/ui/internal/MediaImageCard.vue';
import SkeletonMediaImageCard from '~/components/ui/internal/SkeletonMediaImageCard.vue';

const tooltipCollisionBoundary = ref<Element | undefined>(undefined);

const trendingAnime = [
    {
        id: 1,
        image_url: "example/jigokuraku.jpg",
        title: "Jigokuraku 2nd Season",
        studio: "MAPPA",
        type: "TV Show",
        episodes: 12,
        rating: 78,
        tags: ["action", "adventure", "dark fantasy"],
        status: "Ongoing",
        duration: "23 min"

    },
    {
        id: 2,
        image_url: "example/jujutsukaisen.jpg",
        title: "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen",
        studio: "MAPPA",
        type: "TV Show",
        episodes: 24,
        rating: 85,
        tags: ["action", "supernatural", "dark fantasy"],
        status: "Finished",
        duration: "23 min"

    },
    {
        id: 3,
        image_url: "example/okiraku.jpg",
        title: "Okiraku Ryoushu no Tanoshii Ryouchi Bouei",
        studio: "CloverWorks",
        type: "TV Show",
        episodes: 13,
        rating: 72,
        tags: ["comedy", "fantasy", "slice of life"],
        status: "Ongoing",
        duration: "24 min"

    },
    {
        id: 4,
        image_url: "example/oshi no ko.jpg",
        title: "[Oshi no Ko] 3rd Season",
        studio: "Doga Kobo",
        type: "TV Show",
        episodes: 11,
        rating: 88,
        tags: ["drama", "psychological", "showbiz"],
        status: "Airing",
        duration: "24 min"

    },
    {
        id: 5,
        image_url: "example/shibou.jpg",
        title: "Shibou Yuugi de Meshi wo Kuu.",
        studio: "Studio Bind",
        type: "TV Show",
        episodes: 12,
        rating: 75,
        tags: ["cooking", "fantasy", "isekai"],
        status: "Finished",
        duration: "23 min"

    },
    {
        id: 6,
        image_url: "example/sousounofrieren.jpg",
        title: "Sousou no Frieren 2nd Season",
        studio: "Madhouse",
        type: "TV Show",
        episodes: 28,
        rating: 92,
        tags: ["adventure", "drama", "fantasy"],
        status: "Airing",
        duration: "24 min"

    },
    {
        id: 7,
        image_url: "example/tamonkun.jpg",
        title: "Tamon-kun Ima Docchi!?",
        studio: "Kyoto Animation",
        type: "TV Show",
        episodes: 12,
        rating: 68,
        tags: ["comedy", "romance", "school"],
        status: "Ongoing",
        duration: "24 min"

    },
    {
        id: 8,
        image_url: "example/yuusha party.jpg",
        title: "Yuusha Party wo Oidasareta Kiyou Binbou",
        studio: "Wit Studio",
        type: "TV Show",
        episodes: 13,
        rating: 70,
        tags: ["action", "adventure", "fantasy"],
        status: "Finished",
        duration: "23 min"

    },
    {
        id: 9,
        image_url: "example/jujutsukaisen.jpg",
        title: "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen soetjsot giwjiagjwiag wgi wajig wig gwi",
        studio: "MAPPA",
        type: "TV Show",
        episodes: 24,
        rating: 85,
        tags: ["action", "supernatural", "dark fantasy"],
        status: "Finished",
        duration: "23 min"

    },
    {
        id: 10,
        image_url: "example/okiraku.jpg",
        title: "Okiraku Ryoushu no Tanoshii Ryouchi Bouei teisotsoeitj wgjiwag wgj wigwji",
        studio: "CloverWorks",
        type: "TV Show",
        episodes: 13,
        rating: 72,
        tags: ["comedy", "fantasy", "slice of life"],
        status: "Ongoing",
        duration: "24 min"

    },
    {
        id: 11,
        image_url: "example/oshi no ko.jpg",
        title: "[Oshi no Ko] 3rd Season iaowjegiogjoiawgio waiogjawiog wag",
        studio: "Doga Kobo",
        type: "TV Show",
        episodes: 11,
        rating: 88,
        tags: ["drama", "psychological", "showbiz"],
        status: "Airing",
        duration: "24 min"
    }
];
</script>

<template>
    <div class="space-y-16">
        <HeroSection />
        <div class="flex flex-col items-center m-8 gap-8">
            <div class="flex gap-4 max-w-1/4 md:min-w-3xl sm:min-w-64">
                <InputGroup>
                    <InputGroupInput placeholder="Search" />
                    <InputGroupAddon>
                        <Search />
                    </InputGroupAddon>
                </InputGroup>
                <Button>
                    <SlidersHorizontal />
                </Button>
            </div>
            <div class="w-full flex flex-col items-center gap-4 max-w-full xl:max-w-3/4">
                <div class="flex w-full justify-between">
                    <Button variant="ghost" class="text-2xl font-bold tracking-tight">
                        TRENDING NOW
                    </Button>
                    <Button variant="ghost" class="text-muted-foreground text-xl font-semibold tracking-tight">
                        View all
                    </Button>
                </div>
                <div ref="tooltipCollisionBoundary"
                    class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4 gap-y-12 justify-items-center w-full">
                    <MediaImageCard v-for="anime in trendingAnime" :key="anime.id" :id="anime.id"
                        :image_url="anime.image_url" :title="anime.title" :type="anime.type" :tooltipEnabled="true"
                        :tooltipMetadata="anime" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                    <SkeletonMediaImageCard v-for="index in 10" />
                </div>
            </div>
        </div>
    </div>
</template>
