<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/layout/AppConfigurator.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { computed, inject, onMounted, onBeforeUnmount, ref } from 'vue';
import { useLayout } from '@/layout/composables/layout';
import { useConfiguratorBar } from '@/layout/composables/useConfiguratorBar';
import { primaryColors, surfaces, presetOptions, applyThemeEngine } from '@/theme/theme.options';

const { layoutConfig, isDarkTheme, changeMenuMode, setVariant, setRailOpenMode } = useLayout();
const { open, close } = useConfiguratorBar();

// ── Fechar ao clicar fora ────────────────────────────────────
const panelEl = ref(null);
function onDocClick(e) {
    if (!open.value) return;
    if (!panelEl.value?.contains(e.target)) close();
}
onMounted(() => document.addEventListener('mousedown', onDocClick, true));
onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick, true));

// ✅ vem do AppTopbar (mesma instância)
const queuePatch = inject('queueUserSettingsPatch', null);

// menu mode options
const menuModeOptions = [
    { label: 'Static', value: 'static' },
    { label: 'Overlay', value: 'overlay' }
];

// ✅ v-model sincronizado (sem state local)
const presetModel = computed({
    get: () => layoutConfig.preset,
    set: (val) => {
        if (!val || val === layoutConfig.preset) return;
        layoutConfig.preset = val;

        applyThemeEngine(layoutConfig);
        queuePatch?.({ preset: val });
        saveThemeToStorage();
    }
});

const menuModeModel = computed({
    get: () => layoutConfig.menuMode,
    set: (val) => {
        if (!val || val === layoutConfig.menuMode) return;
        layoutConfig.menuMode = val;

        // ✅ changeMenuMode espera event.value (seu composable usa event.value)
        try {
            changeMenuMode({ value: val });
        } catch {}

        queuePatch?.({ menu_mode: val });
    }
});

function saveThemeToStorage() {
    try {
        localStorage.setItem('ui_theme_config', JSON.stringify({
            preset: layoutConfig.preset,
            primary: layoutConfig.primary,
            surface: layoutConfig.surface,
            menuMode: layoutConfig.menuMode
        }));
    } catch {}
}

function updateColors(type, item) {
    if (type === 'primary') {
        layoutConfig.primary = item.name;
        applyThemeEngine(layoutConfig);
        queuePatch?.({ primary_color: item.name });
        saveThemeToStorage();
        return;
    }

    if (type === 'surface') {
        layoutConfig.surface = item.name;
        applyThemeEngine(layoutConfig);
        queuePatch?.({ surface_color: item.name });
        saveThemeToStorage();
    }
}
</script>

<template>
    <Teleport to="body">
    <div
        v-if="open"
        ref="panelEl"
        class="config-panel fixed bottom-18 left-18 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-bottom-left shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] z-2000"
    >
        <div class="flex flex-col gap-4">
            <div>
                <span class="text-sm text-muted-color font-semibold">Primary</span>
                <div class="pt-2 flex gap-2 flex-wrap justify-between">
                    <button
                        v-for="c of primaryColors"
                        :key="c.name"
                        type="button"
                        :title="c.name"
                        @click="updateColors('primary', c)"
                        :class="['border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1', { 'outline-primary': layoutConfig.primary === c.name }]"
                        :style="{ backgroundColor: `${c.name === 'noir' ? 'var(--text-color)' : c.palette['500']}` }"
                    />
                </div>
            </div>

            <div>
                <span class="text-sm text-muted-color font-semibold">Surface</span>
                <div class="pt-2 flex gap-2 flex-wrap justify-between">
                    <button
                        v-for="s of surfaces"
                        :key="s.name"
                        type="button"
                        :title="s.name"
                        @click="updateColors('surface', s)"
                        :class="[
                            'border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1',
                            { 'outline-primary': layoutConfig.surface ? layoutConfig.surface === s.name : isDarkTheme ? s.name === 'zinc' : s.name === 'slate' }
                        ]"
                        :style="{ backgroundColor: `${s.palette['500']}` }"
                    />
                </div>
            </div>

            <div class="flex flex-col gap-2">
                <span class="text-sm text-muted-color font-semibold">Presets</span>
                <SelectButton v-model="presetModel" :options="presetOptions" :allowEmpty="false" />
            </div>

            <!-- Menu Mode: visível apenas no Layout Clássico -->
            <div v-show="layoutConfig.variant === 'classic'" class="flex flex-col gap-2">
                <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
                <SelectButton v-model="menuModeModel" :options="menuModeOptions" :allowEmpty="false" optionLabel="label" optionValue="value" />
            </div>

            <!-- Abrir Menu: visível apenas no Layout Rail -->
            <div v-show="layoutConfig.variant === 'rail'" class="flex flex-col gap-1">
                <span class="text-sm text-muted-color font-semibold">Abrir Menu</span>
                <div class="flex flex-col gap-1">
                    <button type="button" class="layout-option" :class="{ 'layout-option--active': layoutConfig.railOpenMode === 'hover' }" @click="setRailOpenMode('hover')">
                        <i :class="layoutConfig.railOpenMode === 'hover' ? 'pi pi-check-circle' : 'pi pi-circle'" class="layout-option__icon" />
                        <span class="layout-option__label">Mouse Hover</span>
                        <span v-if="layoutConfig.railOpenMode === 'hover'" class="layout-option__badge layout-option__badge--default">Padrão</span>
                    </button>
                    <button type="button" class="layout-option" :class="{ 'layout-option--active': layoutConfig.railOpenMode === 'click' }" @click="setRailOpenMode('click')">
                        <i :class="layoutConfig.railOpenMode === 'click' ? 'pi pi-check-circle' : 'pi pi-circle'" class="layout-option__icon" />
                        <span class="layout-option__label">Com Clique</span>
                    </button>
                </div>
            </div>

            <div class="flex flex-col gap-2">
                <span class="text-sm text-muted-color font-semibold">Layout</span>
                <div class="flex flex-col gap-1">
                    <!-- Layout Rail -->
                    <button type="button" class="layout-option" :class="{ 'layout-option--active': layoutConfig.variant === 'rail' }" @click="setVariant('rail')">
                        <i :class="layoutConfig.variant === 'rail' ? 'pi pi-check-circle' : 'pi pi-circle'" class="layout-option__icon" />
                        <span class="layout-option__label">Layout Rail</span>
                        <span v-if="layoutConfig.variant === 'rail'" class="layout-option__badge layout-option__badge--default">Padrão</span>
                    </button>

                    <!-- Layout Clássico -->
                    <button type="button" class="layout-option" :class="{ 'layout-option--active': layoutConfig.variant === 'classic' }" @click="setVariant('classic')">
                        <i :class="layoutConfig.variant === 'classic' ? 'pi pi-check-circle' : 'pi pi-circle'" class="layout-option__icon" />
                        <span class="layout-option__label">Layout Clássico</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    </Teleport>
</template>

<style scoped>
.layout-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--border-radius, 6px);
    border: 1px solid var(--surface-border);
    background: var(--surface-ground);
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
    transition:
        border-color 0.15s,
        background 0.15s;
    width: 100%;
}

.layout-option:hover {
    border-color: var(--primary-color);
}

.layout-option--active {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.layout-option__icon {
    font-size: 0.85rem;
    color: var(--text-color-secondary);
    flex-shrink: 0;
}

.layout-option--active .layout-option__icon {
    color: var(--primary-color);
}

.layout-option__label {
    flex: 1;
    font-weight: 500;
    color: var(--text-color);
}

.layout-option__badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.layout-option__badge--default {
    background: var(--primary-color);
    color: var(--primary-color-text, #fff);
}
</style>
