<!-- pages/search.vue -->
<script setup lang="ts">
import { search, type Result } from '~/openapi/search'

// Define route query params
const route = useRoute()
const searchQuery = ref(route.query.title as string || '')

// Search results state
const results = ref<Result[]>([])
const isLoading = ref(false)
const error = ref<unknown>(null)

// Perform search when query changes
watchEffect(async () => {
    if (!searchQuery.value) return

    try {
        isLoading.value = true
        error.value = null
        const response = await search({ title: searchQuery.value })
        results.value = response.data.results || []
    } catch (err) {
        error.value = err
        console.error('Search failed:', err)
    } finally {
        isLoading.value = false
    }
})
</script>

<template>
    <div class="search-page">
        <div class="search-box">
            <input v-model="searchQuery" type="text" placeholder="Search anime..."
                @keyup.enter="navigateTo({ path: '/search', query: { title: searchQuery } })">
        </div>

        <!-- Loading State -->
        <div v-if="isLoading" class="loading">
            Loading results...
        </div>

        <!-- Error State -->
        <div v-if="error" class="error">
            Error loading results: {{ error.message }}
        </div>

        <!-- Results List -->
        <div v-if="results.length > 0" class="results-grid">
            <div v-for="item in results" :key="item.id" class="result-card">
                <NuxtLink :to="`/anime/${item.id}`">
                    <img v-if="item.material_data?.anime_poster_url" :src="item.material_data.anime_poster_url"
                        :alt="item.title" class="poster">
                    <div class="details">
                        <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">{{ item.title }}</h3>
                        <p v-if="item.material_data?.year">Year: {{ item.material_data.year }}</p>
                        <p v-if="item.material_data?.anime_kind">Type: {{ item.material_data.anime_kind }}</p>
                        <p v-if="item.material_data?.episodes_total">Episodes: {{ item.material_data.episodes_total }}
                        </p>
                    </div>
                </NuxtLink>
            </div>
        </div>

        <!-- No Results -->
        <div v-if="!isLoading && !error && results.length === 0 && searchQuery" class="no-results">
            No results found for "{{ searchQuery }}"
        </div>
    </div>
</template>

<style scoped>
.search-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.search-box {
    margin-bottom: 30px;
}

.search-box input {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 4px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.result-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.result-card:hover {
    transform: translateY(-5px);
}

.poster {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.details {
    padding: 15px;
}

.details p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}

.loading,
.no-results,
.error {
    text-align: center;
    padding: 40px;
    font-size: 18px;
}
</style>
