<template>
    <div class="afm-menu" @click.stop>
        <template v-if="!subPicker">
            <div class="afm-scroll">
                <div v-for="cat in menu" :key="cat.category" class="afm-category">
                    <div class="afm-category-title">{{ cat.category }}</div>
                    <button v-for="f in cat.fields" :key="f.key" type="button" class="afm-item" @click="pick(f)">{{ f.label }}</button>
                    <div v-for="grp in cat.groups" :key="grp.label" class="afm-group">
                        <div class="afm-group-title">{{ grp.label }}</div>
                        <button v-for="f in grp.fields" :key="f.key" type="button" class="afm-item afm-item--nested" @click="pick(f)">{{ f.label }}</button>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="afm-subpicker-hdr">
                <button type="button" class="afm-back" @click="subPicker = null">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="12" height="12"><path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd"/></svg>
                    {{ subPicker.label }}
                </button>
            </div>
            <input v-model="subSearch" type="text" class="afm-search" placeholder="Search…">
            <div class="afm-scroll afm-subpicker-list">
                <button v-for="item in filteredSubItems" :key="item.id" type="button" class="afm-item" @click="pickSub(item)">{{ item.title }}</button>
                <div v-if="filteredSubItems.length === 0" class="afm-empty">None found.</div>
            </div>
        </template>
    </div>
</template>

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

const props = defineProps({
    menu: { type: Array, default: () => [] },
    campaigns: { type: Array, default: () => [] },
    automations: { type: Array, default: () => [] },
});

const emit = defineEmits(['select']);

const subPicker = ref(null);
const subSearch = ref('');

const NEEDS_SUBPICKER = ['activity.campaign_email', 'activity.automation'];

const filteredSubItems = computed(() => {
    const items = subPicker.value?.key === 'activity.campaign_email' ? props.campaigns : props.automations;
    const q = subSearch.value.trim().toLowerCase();

    return q ? items.filter(i => i.title.toLowerCase().includes(q)) : items;
});

function pick(field) {
    if (NEEDS_SUBPICKER.includes(field.key)) {
        subPicker.value = field;
        subSearch.value = '';
        return;
    }

    emit('select', { field: field.key, operator: field.operators[0], value: null });
}

function pickSub(item) {
    const key = subPicker.value.key;
    const payload = { field: key, operator: subPicker.value.operators[0], value: null };

    if (key === 'activity.campaign_email') payload.campaign_id = item.id;
    if (key === 'activity.automation') payload.automation_id = item.id;

    emit('select', payload);
    subPicker.value = null;
}
</script>

<style scoped>
.afm-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    width: 260px;
    max-width: min(260px, calc(100vw - 32px));
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    padding: 6px;
    box-sizing: border-box;
}
.afm-menu, .afm-menu *, .afm-menu *::before, .afm-menu *::after { box-sizing: border-box; }

.afm-scroll { max-height: 320px; overflow-y: auto; }

.afm-category + .afm-category { margin-top: 4px; border-top: 1px solid var(--border-color); padding-top: 4px; }

.afm-category-title {
    padding: 6px 8px 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.afm-group { margin-top: 2px; }
.afm-group-title { padding: 4px 8px 2px 16px; font-size: 10px; font-weight: 600; color: var(--text-muted); }

.afm-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    border-radius: 5px;
}
.afm-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.afm-item--nested { padding-left: 20px; }

.afm-subpicker-hdr { padding: 2px 2px 6px; border-bottom: 1px solid var(--border-color); margin-bottom: 4px; }
.afm-back {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 4px 6px;
}
.afm-search {
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 4px;
    background: var(--bg-surface);
    color: var(--text-primary);
}
.afm-empty { padding: 10px 8px; font-size: 12px; color: var(--text-muted); text-align: center; }
</style>
