<template>
    <div
        class="fmt-modal__panel"
        role="tabpanel"
        aria-labelledby="fmt-tab-general"
        id="fmt-panel-general"
    >
        <label class="fmt-setting fmt-setting--switch">
            <span>{{ __("Store submissions in WordPress") }}</span>
            <input type="checkbox" v-model="local.store_submissions" />
        </label>

        <div class="fmt-setting">
            <span>{{ __("Success message") }}</span>
            <textarea rows="3" v-model="local.success_message"></textarea>
        </div>

        <div class="fmt-setting">
            <span>{{ __("Error message") }}</span>
            <textarea rows="3" v-model="local.error_message"></textarea>
        </div>

        <div class="fmt-setting" v-if="PRO_UI || local.submit_action.type === 'url'">
            <span>
                {{ __("On submit") }}
                <span v-if="PRO_UI && !hasRedirect" class="fmt-setting__pro">{{ __("Pro") }}</span>
            </span>
            <select v-model="local.submit_action.type" :disabled="!hasRedirect">
                <option value="same_page">{{ __("Show the success message") }}</option>
                <option value="url">{{ __("Redirect to a page") }}</option>
            </select>
            <input
                v-if="local.submit_action.type === 'url'"
                type="text"
                v-model="local.submit_action.url"
                :disabled="!hasRedirect"
                :placeholder="__('/thank-you or a full URL on this site')"
            />
            <small class="fmt-setting__hint">
                {{ __("Redirects must stay on this site; off-site URLs are ignored on save.") }}
            </small>
        </div>

    </div>
</template>

<script setup>
import { inject } from "vue";
import { __ } from "@/utils/i18n";
import { useCapabilities } from "@/admin/composables/useCapabilities";
// Vite define — a literal after build, so the minifier deletes dead branches.
// eslint-disable-next-line no-undef
const PRO_UI = __FMT_PRO_UI__;

const ctx = inject("formSettingsContext");

if (!ctx) {
    throw new Error("Form settings context not provided");
}

const { local } = ctx;

const { has } = useCapabilities();
const hasRedirect = has("submissions.redirect");
</script>

<style scoped>
.fmt-setting__pro {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8b5cf6;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 0 4px;
    vertical-align: middle;
}
</style>
