<template>
    <div class="formatrica-feature-lock">
        <!-- Capability available: render the real control. -->
        <slot v-if="available" />

        <!-- Capability missing but config already exists: read-only preserve. -->
        <div
            v-else-if="hasExisting"
            class="formatrica-feature-lock__readonly"
            aria-disabled="true"
        >
            <slot name="readonly">
                <slot />
            </slot>
            <p class="formatrica-feature-lock__note">
                {{ readonlyNote }}
            </p>
        </div>

        <!-- Capability missing and nothing saved: locked Pro placeholder. -->
        <slot v-else name="locked">
            <div class="formatrica-feature-lock__placeholder">
                <span class="formatrica-feature-lock__badge">Pro</span>
                <p class="formatrica-feature-lock__note">{{ lockedNote }}</p>
            </div>
        </slot>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useCapabilities } from '../composables/useCapabilities.js';

const props = defineProps({
    // Canonical capability key, e.g. "layout.two_column".
    capability: { type: String, required: true },
    // True when the form already has Pro-authored config for this feature.
    hasExisting: { type: Boolean, default: false },
    // Optional human label for the locked/read-only note.
    label: { type: String, default: '' },
});

const { has } = useCapabilities();

const available = computed(() => has(props.capability));

const lockedNote = computed(
    () => props.label || 'This is a Pro feature. Upgrade to unlock it.'
);

const readonlyNote = computed(
    () =>
        (props.label ? props.label + ' — ' : '') +
        'read-only. A Pro license is required to change this.'
);
</script>
