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

const aberto = ref(false)
const nivelFonte = ref(0)   // 0 = normal, 1 = grande, 2 = extra-grande
const altoContraste = ref(false)

const opcoesFonte = [
    { nivel: 0, label: 'A',   title: 'Texto normal' },
    { nivel: 1, label: 'A+',  title: 'Texto grande' },
    { nivel: 2, label: 'A++', title: 'Texto extra-grande' },
]

watch(nivelFonte, (val) => {
    document.documentElement.classList.remove('a11y-font-lg', 'a11y-font-xl')
    if (val === 1) document.documentElement.classList.add('a11y-font-lg')
    if (val === 2) document.documentElement.classList.add('a11y-font-xl')
}, { immediate: true })

watch(altoContraste, (val) => {
    document.documentElement.classList.toggle('a11y-contrast', val)
})
</script>

<template>
    <div class="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3">

        <!-- Painel -->
        <Transition
            enter-active-class="transition-all duration-200 ease-out"
            enter-from-class="opacity-0 translate-y-2 scale-95"
            enter-to-class="opacity-100 translate-y-0 scale-100"
            leave-active-class="transition-all duration-150 ease-in"
            leave-from-class="opacity-100 translate-y-0 scale-100"
            leave-to-class="opacity-0 translate-y-2 scale-95"
        >
            <div
                v-if="aberto"
                id="a11y-panel"
                role="dialog"
                aria-label="Opções de acessibilidade"
                class="bg-white rounded-2xl shadow-2xl border border-slate-200 p-5 w-64 origin-bottom-right"
            >
                <div class="flex items-center gap-2 mb-4">
                    <i class="pi pi-eye text-primary text-sm" aria-hidden="true" />
                    <p class="text-xs font-bold text-slate-600 uppercase tracking-wide">Acessibilidade</p>
                </div>

                <!-- Tamanho do texto -->
                <div class="mb-5">
                    <p class="text-sm font-semibold text-slate-700 mb-2">Tamanho do texto</p>
                    <div class="flex gap-2" role="group" aria-label="Escolha o tamanho do texto">
                        <button
                            v-for="op in opcoesFonte"
                            :key="op.nivel"
                            :title="op.title"
                            :aria-pressed="nivelFonte === op.nivel"
                            :class="[
                                'flex-1 py-2 rounded-lg border text-sm font-bold transition-colors',
                                nivelFonte === op.nivel
                                    ? 'bg-primary text-white border-primary'
                                    : 'bg-white text-slate-600 border-slate-200 hover:border-primary/40 hover:text-primary'
                            ]"
                            @click="nivelFonte = op.nivel"
                        >
                            {{ op.label }}
                        </button>
                    </div>
                </div>

                <!-- Alto contraste -->
                <div class="flex items-center justify-between pt-4 border-t border-slate-100">
                    <div>
                        <p class="text-sm font-semibold text-slate-700">Alto contraste</p>
                        <p class="text-xs text-slate-400 mt-0.5">Melhora a legibilidade</p>
                    </div>
                    <ToggleSwitch
                        v-model="altoContraste"
                        :aria-label="altoContraste ? 'Desativar alto contraste' : 'Ativar alto contraste'"
                    />
                </div>
            </div>
        </Transition>

        <!-- Botão flutuante -->
        <button
            :class="[
                'w-12 h-12 rounded-full shadow-lg border flex items-center justify-center transition-all hover:scale-105',
                aberto
                    ? 'bg-primary text-white border-primary shadow-primary/30'
                    : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300 hover:shadow-xl'
            ]"
            :aria-label="aberto ? 'Fechar painel de acessibilidade' : 'Abrir painel de acessibilidade'"
            :aria-expanded="aberto"
            aria-controls="a11y-panel"
            @click="aberto = !aberto"
        >
            <i class="pi pi-eye text-lg" aria-hidden="true" />
        </button>

    </div>
</template>
