<template>
    <div>
        <div class="fb-settings-group">
            <label class="fb-settings-label">After Submission</label>
            <select class="fb-settings-select" v-model="state.settings.after_submit_action">
                <option value="message">Show success message</option>
                <option value="redirect">Redirect to URL</option>
            </select>
        </div>

        <div v-if="state.settings.after_submit_action === 'redirect'" class="fb-settings-group">
            <label class="fb-settings-label">Redirect URL</label>
            <input type="url" class="fb-settings-input" v-model="state.settings.redirect_url" placeholder="https://yoursite.com/thank-you">
        </div>
        <div v-else class="fb-settings-group">
            <label class="fb-settings-label">Success Message</label>
            <textarea class="fb-settings-textarea" v-model="state.settings.success_message"></textarea>
        </div>

        <hr class="fb-divider">

        <div class="fb-settings-group">
            <label class="fb-settings-label">Add to Lists</label>
            <div class="check-grid">
                <label v-for="l in allLists" :key="l.id" class="check-chip">
                    <input type="checkbox" :value="l.id" v-model="state.list_ids">
                    <span class="color-dot" :style="{ background: l.color }"></span>
                    {{ l.title }}
                </label>
                <span v-if="!allLists.length" class="optional">No lists yet - create one under Audience → Lists.</span>
            </div>
        </div>

        <div class="fb-settings-group">
            <label class="fb-settings-label">Add Tags</label>
            <div class="check-grid">
                <label v-for="t in allTags" :key="t.id" class="check-chip">
                    <input type="checkbox" :value="t.id" v-model="state.tag_ids">
                    <span class="color-dot" :style="{ background: t.color }"></span>
                    {{ t.title }}
                </label>
                <span v-if="!allTags.length" class="optional">No tags yet - create one under Audience → Tags.</span>
            </div>
        </div>

        <template v-if="state.type === 'popup'">
            <hr class="fb-divider">
            <div class="fb-settings-group">
                <label class="fb-settings-label">Trigger</label>
                <select class="fb-settings-select" v-model="state.settings.popup_trigger">
                    <option value="immediate">Show immediately</option>
                    <option value="delay">After a delay</option>
                    <option value="scroll">On scroll</option>
                    <option value="exit_intent">On exit intent</option>
                </select>
            </div>
            <div v-if="state.settings.popup_trigger === 'delay'" class="fb-settings-group">
                <label class="fb-settings-label">Delay (seconds)</label>
                <input type="number" min="0" class="fb-settings-input" v-model.number="state.settings.popup_trigger_value">
            </div>
            <div v-if="state.settings.popup_trigger === 'scroll'" class="fb-settings-group">
                <label class="fb-settings-label">Scroll Percentage</label>
                <input type="number" min="0" max="100" class="fb-settings-input" v-model.number="state.settings.popup_trigger_value">
            </div>

            <div class="fb-settings-group">
                <label class="fb-settings-label">Display Style</label>
                <select class="fb-settings-select" v-model="state.settings.popup_display_style">
                    <option value="center_modal">Centered modal</option>
                    <option value="corner">Bottom-right corner</option>
                    <option value="top_bar">Top announcement bar</option>
                </select>
            </div>

            <div class="fb-settings-group">
                <label class="fb-settings-label">Frequency</label>
                <select class="fb-settings-select" v-model="state.settings.popup_frequency">
                    <option value="every_visit">Every visit</option>
                    <option value="once_per_visitor">Once per visitor</option>
                </select>
            </div>
        </template>
    </div>
</template>

<script setup>
import { inject } from 'vue';

const { state, allLists, allTags } = inject('formBuilderState');
</script>

<style scoped>
.check-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 140px;
    overflow-y: auto;
    padding: 10px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
}
.check-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #374151);
    background: var(--bg-hover, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 20px;
    padding: 4px 10px 4px 8px;
    cursor: pointer;
}
.color-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.optional { font-size: 12px; font-weight: 400; color: #9ca3af; }
</style>
