<template>
    <div
        class="fmt-modal__panel"
        role="tabpanel"
        aria-labelledby="fmt-tab-security"
        id="fmt-panel-security"
    >
        <label class="fmt-setting fmt-setting--switch">
            <span>{{ __("Enable honeypot", "formatrica") }}</span>
            <input type="checkbox" v-model="local.honeypot" />
        </label>

        <div class="fmt-setting">
            <span>{{ __("Captcha provider", "formatrica") }}</span>
            <select v-model="local.captcha.provider">
                <option value="none">
                    {{ __("None (honeypot only)", "formatrica") }}
                </option>
                <option value="recaptcha_v3">
                    {{ __("Google reCAPTCHA v3", "formatrica") }}
                </option>
                <option value="turnstile">
                    {{ __("Cloudflare Turnstile", "formatrica") }}
                </option>
                <option value="friendlycaptcha">
                    {{ __("Friendly Captcha", "formatrica") }}
                </option>
            </select>
        </div>

        <div
            v-if="local.captcha.provider !== 'none'"
            class="fmt-setting-group"
        >
            <label class="fmt-setting">
                <span>{{ __("Site key", "formatrica") }}</span>
                <input
                    type="text"
                    v-model="local.captcha.site_key"
                    autocomplete="off"
                />
            </label>
            <label class="fmt-setting">
                <span>{{ __("Secret key", "formatrica") }}</span>
                <input
                    type="password"
                    v-model="local.captcha.secret_key"
                    :placeholder="hasStoredCaptchaSecret ? '••••••••' : ''"
                    autocomplete="new-password"
                />
                <small class="fmt-setting__hint" v-if="hasStoredCaptchaSecret">
                    {{
                        __(
                            "Secret key is stored encrypted. The masked placeholder indicates an existing key. Clear the field to remove it or type a new value to replace it.",
                            "formatrica",
                        )
                    }}
                </small>
                <small class="fmt-setting__hint" v-else>
                    {{
                        __(
                            "Secret keys are encrypted at rest.",
                            "formatrica",
                        )
                    }}
                </small>
            </label>
        </div>

        <div class="fmt-setting">
            <span>{{ __("Rate limiting", "formatrica") }}</span>
            <div class="fmt-setting__inline">
                <label>
                    <span>{{ __("Max submissions", "formatrica") }}</span>
                    <input
                        type="number"
                        min="1"
                        v-model.number="local.throttle.max_requests"
                    />
                </label>
                <label>
                    <span>{{ __("Per seconds", "formatrica") }}</span>
                    <input
                        type="number"
                        min="1"
                        v-model.number="local.throttle.per_seconds"
                    />
                </label>
            </div>
        </div>

        <div class="fmt-setting" v-if="PRO_UI || local.headless_submission_enabled">
            <span>
                {{ __("Headless API submissions", "formatrica") }}
                <span v-if="PRO_UI && !hasHeadless" class="fmt-pro-badge">{{ __("Pro", "formatrica") }}</span>
            </span>
            <label class="fmt-setting fmt-setting--switch">
                <span>{{ __("Accept anonymous JSON submissions via the REST API", "formatrica") }}</span>
                <input
                    type="checkbox"
                    v-model="local.headless_submission_enabled"
                    :disabled="!hasHeadless && !local.headless_submission_enabled"
                />
            </label>
            <template v-if="local.headless_submission_enabled">
                <label class="fmt-setting">
                    <span>{{ __("API key", "formatrica") }}</span>
                    <input
                        type="password"
                        v-model="local.headless_api_key"
                        :placeholder="local.headless_api_key_set ? '••••••••' : ''"
                        autocomplete="new-password"
                        spellcheck="false"
                    />
                    <small class="fmt-setting__hint">
                        {{ local.headless_api_key_set
                            ? __("A key is stored encrypted. Type a new value to replace it.", "formatrica")
                            : __("Clients send this in the X-Formatrica-Api-Key header. Stored encrypted, never shown again.", "formatrica") }}
                    </small>
                </label>
                <label class="fmt-setting">
                    <span>{{ __("Allowed IPs (optional, one per line)", "formatrica") }}</span>
                    <textarea
                        rows="3"
                        v-model="headlessIpsText"
                        :placeholder="'203.0.113.10\n198.51.100.0/24'"
                        spellcheck="false"
                    ></textarea>
                    <small class="fmt-setting__hint">
                        {{ __("Exact IPs or CIDR ranges. Empty = no IP restriction.", "formatrica") }}
                    </small>
                </label>
            </template>
            <small class="fmt-setting__hint" v-if="PRO_UI && !hasHeadless && !local.headless_submission_enabled">
                {{ HINT_HEADLESS_PRO }}
            </small>
        </div>
    </div>
</template>

<script setup>
import { computed, 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, hasStoredCaptchaSecret } = ctx;

// Headless API submissions (Pro api.headless). Toggle locked on Free unless
// already enabled (preserve-existing); the key input is write-only — only a
// newly-typed value is sent, the stored blob never round-trips.
const { has } = useCapabilities();
const hasHeadless = has("api.headless");
// eslint-disable-next-line no-undef
const HINT_HEADLESS_PRO = __FMT_PRO_UI__ ? __("Let trusted apps POST submissions directly to the REST endpoint, authenticated by an API key (Pro).", "formatrica") : "";

const headlessIpsText = computed({
    get() {
        return Array.isArray(local.headless_allowed_ips)
            ? local.headless_allowed_ips.join("\n")
            : "";
    },
    set(value) {
        local.headless_allowed_ips = String(value)
            .split(/\r\n|\r|\n/)
            .map((entry) => entry.trim())
            .filter(Boolean);
    },
});
</script>

<style scoped>
.fmt-pro-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8b5cf6;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
}
</style>
