<template>
    <div class="space-y-6 max-w-lg">
        <div class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-5">
            <h2 class="text-lg font-black text-zinc-800">Appearance</h2>
            <p class="text-sm text-zinc-500">Choose how FuelAlert looks to you.</p>

            <div class="grid grid-cols-3 gap-3">
                <button
                    v-for="option in themeOptions"
                    :key="option.value"
                    @click="setTheme(option.value)"
                    class="flex flex-col items-center gap-3 p-4 rounded-2xl border-2 transition-all"
                    :class="selectedTheme === option.value
                        ? 'border-accent bg-zinc-50'
                        : 'border-zinc-300 hover:border-zinc-500'"
                >
                    <iconify-icon :icon="option.icon" class="text-2xl text-accent"></iconify-icon>
                    <span class="text-sm font-bold text-zinc-800">{{ option.label }}</span>
                </button>
            </div>

            <p class="text-xs text-zinc-500">
                Current: <span class="font-bold capitalize">{{ selectedTheme }}</span>
            </p>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const selectedTheme = ref('system')

const themeOptions = [
    { value: 'light', label: 'Light', icon: 'lucide:sun' },
    { value: 'dark', label: 'Dark', icon: 'lucide:moon' },
    { value: 'system', label: 'System', icon: 'lucide:monitor' },
]

onMounted(() => {
    selectedTheme.value = localStorage.getItem('appearance') ?? 'system'
})

function setTheme(value) {
    selectedTheme.value = value
    localStorage.setItem('appearance', value)
    applyTheme(value)
}

function applyTheme(value) {
    const html = document.documentElement
    html.classList.remove('light', 'dark')
    if (value === 'system') {
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            html.classList.add('dark')
        }
    } else {
        html.classList.add(value)
    }
}
</script>
