<script setup lang="ts">
const { id } = useRoute().params

interface Artist {
    id: number
    year: number
    country_fi: string
    artist: string
    title: string
    running_order: number
    lyrics_original: string
    lyrics_translation_fi: string
    tags: string[]
    img: string
    flag: string
}

const { data: artist } = await useFetch<Artist>(`/api/artist?id=${id}`)

if (!artist.value) {
    throw createError({
        statusCode: 404,
        statusMessage: 'Artist not found'
    })
}



// State for toggling lyrics visibility
const showOriginalLyrics = ref(false)
const toggleOriginalLyrics = () => {
    showOriginalLyrics.value = !showOriginalLyrics.value
}

const showTranslationLyrics = ref(false)
const toggleTranslationLyrics = () => {
    showTranslationLyrics.value = !showTranslationLyrics.value
}

const submitReview = () => {
    // Get slider values
    const songEl = document.getElementById('slider-song') as HTMLInputElement
    const showEl = document.getElementById('slider-show') as HTMLInputElement
    const costumeEl = document.getElementById('slider-costume') as HTMLInputElement
    
    const songRating = songEl?.value || '0'
    const showRating = showEl?.value || '0'
    const costumeRating = costumeEl?.value || '0'
    
    // Create review object
    const review = {
        artistId: id,
        ratings: {
            song: parseInt(songRating),
            show: parseInt(showRating),
            costume: parseInt(costumeRating)
        },
        timestamp: new Date().toISOString()
    }
    
    console.log('Submitting review:', review)
    
    // TODO: Send review to API
    // await useFetch('/api/reviews', {
    //   method: 'POST',
    //   body: review
    // })
}
</script>

<template>
    <div v-if="artist" class="space-y-4">
        <div>
            <h1 class="text-2xl font-bold text-center">{{ artist.artist }}</h1>
            <p class="text-center italic">{{ artist.title }}</p>
        </div>
        <img class="w-1/2 mx-auto" :src="artist.img" alt="">
        <div>
            <h2 
                @click="toggleOriginalLyrics" 
                class="cursor-pointer hover:text-blue-600 flex items-center"
            >
                Sanat
                <span class="ml-2 text-sm">
                    {{ showOriginalLyrics ? '▼' : '►' }}
                </span>
            </h2>
            <pre v-show="showOriginalLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyrics_original }}</pre>
        </div>
        <div v-if="artist.lyrics_translation_fi">
            <h2 
                @click="toggleTranslationLyrics" 
                class="cursor-pointer hover:text-blue-600 flex items-center"
            >
                Käännös
                <span class="ml-2 text-sm">
                    {{ showTranslationLyrics ? '▼' : '►' }}
                </span>
            </h2>
            <pre v-show="showTranslationLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyrics_translation_fi }}</pre>
        </div>
        <ul class="flex flex-wrap justify-center list-none gap-2 p-0 m-0">
            <li class="tag" v-for="tag in artist.tags" :key="tag">{{ tag }}</li>
        </ul>
        <form @submit.prevent="submitReview">
            <ReviewSlider id="song" category="Kappale"/>
            <ReviewSlider id="show" category="Lava show"/>
            <ReviewSlider id="costume" category="Asuste"/>
            <button type="submit" class="btn-primary">Arvostele</button>
        </form>
    </div>
    <div v-else>
        <h1>Artist not found</h1>
    </div>
</template>

<style>
.tag {
    display: inline-block;
    padding: 2px 6px;
    background-color: #ccc;
    margin: 2px;
    border-radius: 6px;
    font-size: 0.8rem;
}

.lyricsFont {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    text-align: center;
}
</style>