<script setup>
import { ref, onMounted } from 'vue'
import { Button } from '@/components/ui/button'
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle
} from '@/components/ui/card'

//import { useRouter } from 'vue-router'

//import { useGameStore } from '@/stores/game'
import { useAPIStore } from '@/stores/api'

//const gameStore = useGameStore()
const apiStore = useAPIStore()

const highScores = ref([])

/* const startGame = () => {
    gameStore.difficulty = selectedDifficulty.value
    router.push({ name: 'singleplayer' })
} */

onMounted(async () => {
    const response = await apiStore.getGames()

    highScores.value = response.data.data
        .map(item => ({
            points: item.player1_points,
            time: item.total_time,
            username: item.player1?.name
        }))
        .sort((a, b) => a.time - b.time == 0 ? a.player1_points - b.player1_points : a.time - b.time)
        .slice(0, 3)
})
</script>

<template>
    <div class="flex flex-row justify-center items-stretch gap-5 mt-10">
        <Card class="w-full max-w-md">
            <CardHeader>
                <CardTitle class="text-3xl font-bold text-center">
                    Single Player
                </CardTitle>
                <CardDescription class="text-center">
                    Test your memory by finding matching pairs!
                </CardDescription>
            </CardHeader>
            <CardContent class="space-y-6">
                <div class="space-y-2">
                    <label class="text-sm font-medium">High Scores (local)</label>
                    <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
                        <div class="max-h-64 overflow-y-auto">
                            <div v-if="highScores.length === 0" class="p-6 text-center text-sm text-muted-foreground">
                                No high scores yet. Be the first!
                            </div>
                            <div v-else class="divide-y">
                                <div v-for="(score, index) in highScores" :key="index"
                                    class="flex items-center justify-between p-3 hover:bg-muted/50 transition-colors">
                                    <div class="flex items-center gap-3">
                                        <div class="flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold"
                                            :class="{
                                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300': index === 0,
                                                'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300': index === 1,
                                                'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300': index === 2,
                                                'bg-muted text-muted-foreground': index > 2
                                            }">
                                            {{ index + 1 }}
                                        </div>
                                        <div>
                                            <div class="font-medium text-sm">{{ score.player1_points }} Moves -- {{
                                                score.username }}</div>
                                            <div class="text-xs text-muted-foreground">{{ score.time }} /s</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex justify-center">
                    <Button @click="startGame" size="lg" variant="secondary"
                        class="hover:bg-purple-500 hover:text-slate-200">
                        Start Game
                    </Button>
                </div>
            </CardContent>
        </Card>
        <Card class="w-full max-w-md">
            <CardHeader>
                <CardTitle class="text-3xl font-bold text-center">
                    MultiPlayer
                </CardTitle>
                <CardDescription class="text-center">
                    Comming Soon!!
                </CardDescription>
            </CardHeader>
            <CardContent class="space-y-6">

            </CardContent>
        </Card>
    </div>
</template>
