/*
 * useMelissaWallpaper — wallpaper/background do MelissaLayout
 * -----------------------------------------------------------
 * Encapsula o estado e as operacoes do plano de fundo:
 *   - bgUrl: data URL da imagem custom (vazio = usa gradiente default)
 *   - overlayOpacity: 0–0.8, escurecedor sobre o bg (sempre aplicado)
 *   - bgImageOpacity: 0.01–1, transparencia da foto custom (so quando bgUrl)
 *
 * Operacoes:
 *   - onFileChange(e): valida tipo + tamanho, gera data URL
 *   - clearBg(): zera bgUrl pra voltar ao gradiente default
 *
 * Estilos prontos:
 *   - defaultBgStyle: gradiente bloom radial + linear, sempre renderizado
 *     atras de tudo (cores via CSS vars que flipam com dark/light)
 *   - photoStyle: computed que liga url(bgUrl) + opacity(bgImageOpacity)
 *
 * Persistencia: NAO eh responsabilidade deste composable. O pai
 * (MelissaLayout) persiste estes refs junto com outras prefs em
 * localStorage + user_settings.melissa_prefs.
 */
import { ref, computed } from 'vue';
import { useToast } from 'primevue/usetoast';

// Limite de upload — protege quota do localStorage (~5MB) e evita data URL
// gigante atravessando a UI. JPG/PNG 1920×1080 cabe folgado nesse teto.
export const MAX_BG_BYTES = 2 * 1024 * 1024; // 2 MB

// Gradiente default — sempre renderizado no .win11-root (atras de tudo).
// Quando o user faz upload, .win11-photo aparece por cima com opacidade
// controlada pelo slider — permite blend natural com o gradiente abaixo.
// Cores vem de CSS vars que flipam com dark/light AND seguem o preset
// (ver style global no MelissaLayout: --bloom-c1/c2/base-1/base-2).
export const defaultBgStyle = Object.freeze({
    backgroundImage:
        'radial-gradient(circle at 70% 30%, var(--bloom-c1) 0%, transparent 55%), radial-gradient(circle at 25% 75%, var(--bloom-c2) 0%, transparent 50%), linear-gradient(135deg, var(--bloom-base-1) 0%, var(--bloom-base-2) 50%, var(--bloom-base-1) 100%)',
    backgroundSize: 'cover'
});

export function useMelissaWallpaper() {
    const toast = useToast();

    const bgUrl = ref('');           // vazio = usa gradiente default
    const overlayOpacity = ref(0.35); // 0–0.8 — escurecedor sobre o bg
    const bgImageOpacity = ref(1);    // 0.01–1 — transparencia da foto custom

    function onFileChange(e) {
        const file = e.target.files?.[0];
        if (!file) return;
        if (!file.type.startsWith('image/')) {
            toast.add({
                severity: 'warn',
                summary: 'Formato inválido',
                detail: 'Selecione um arquivo de imagem (JPG, PNG, WEBP).',
                life: 4000
            });
            e.target.value = '';
            return;
        }
        if (file.size > MAX_BG_BYTES) {
            toast.add({
                severity: 'warn',
                summary: 'Imagem muito grande',
                detail: 'Máximo 2 MB. Reduza a resolução ou compressão e tente novamente.',
                life: 4500
            });
            e.target.value = '';
            return;
        }
        const reader = new FileReader();
        reader.onload = (ev) => (bgUrl.value = ev.target.result);
        reader.readAsDataURL(file);
    }

    function clearBg() {
        bgUrl.value = '';
    }

    const photoStyle = computed(() => ({
        backgroundImage: bgUrl.value ? `url(${bgUrl.value})` : 'none',
        opacity: bgImageOpacity.value
    }));

    return {
        bgUrl,
        overlayOpacity,
        bgImageOpacity,
        MAX_BG_BYTES,
        defaultBgStyle,
        photoStyle,
        onFileChange,
        clearBg
    };
}
