<template>
    <div
        class="fmt-modal__panel"
        role="tabpanel"
        aria-labelledby="fmt-tab-integrations"
        id="fmt-panel-integrations"
    >
                                <div class="fmt-integration-card">
                                    <div class="fmt-integration-header">
                                        <span class="fmt-integration-icon"><img :src="integrationIcons.zapier" alt="" /></span>
                                        <div>
                                            <h3>{{ __("Zapier", "formatrica") }}</h3>
                                            <p class="fmt-integration-description">
                                                {{
                                                    __(
                                                        "Connect your forms to 5,000+ apps using Zapier's Webhooks by Zapier trigger.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </p>
                                        </div>
                                    </div>
                                    <label class="fmt-setting fmt-setting--switch">
                                        <span>{{
                                            __("Enable Zapier", "formatrica")
                                        }}</span>
                                        <input
                                            type="checkbox"
                                            v-model="local.integrations.zapier.enabled"
                                        />
                                    </label>
                                    <div
                                        v-if="local.integrations.zapier.enabled"
                                        class="fmt-setting-group"
                                    >
                                        <label class="fmt-setting">
                                            <span>{{
                                                __(
                                                    "Zapier webhook URL",
                                                    "formatrica",
                                                )
                                            }}</span>
                                            <input
                                                type="url"
                                                v-model="
                                                    local.integrations.zapier.webhook_url
                                                "
                                                placeholder="https://hooks.zapier.com/hooks/catch/..."
                                            />
                                            <small class="fmt-setting__hint">
                                                {{
                                                    __(
                                                        "In Zapier, create a new Zap → choose 'Webhooks by Zapier' → select 'Catch Hook' → copy the URL and paste it here.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </small>
                                        </label>
                                    </div>
                                </div>

                                <div class="fmt-integration-card">
                                    <div class="fmt-integration-header">
                                        <span class="fmt-integration-icon"><img :src="integrationIcons.make" alt="" /></span>
                                        <div>
                                            <h3>{{ __("Make", "formatrica") }}</h3>
                                            <p class="fmt-integration-description">
                                                {{
                                                    __(
                                                        "Automate workflows with Make.com (formerly Integromat) using webhooks.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </p>
                                        </div>
                                    </div>
                                    <label class="fmt-setting fmt-setting--switch">
                                        <span>{{
                                            __("Enable Make", "formatrica")
                                        }}</span>
                                        <input
                                            type="checkbox"
                                            v-model="local.integrations.make.enabled"
                                        />
                                    </label>
                                    <div
                                        v-if="local.integrations.make.enabled"
                                        class="fmt-setting-group"
                                    >
                                        <label class="fmt-setting">
                                            <span>{{
                                                __(
                                                    "Make webhook URL",
                                                    "formatrica",
                                                )
                                            }}</span>
                                            <input
                                                type="url"
                                                v-model="
                                                    local.integrations.make.webhook_url
                                                "
                                                placeholder="https://hook.make.com/..."
                                            />
                                            <small class="fmt-setting__hint">
                                                {{
                                                    __(
                                                        "In Make.com, create a new Scenario → add 'Webhooks' module → choose 'Custom webhook' → copy the URL and paste it here.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </small>
                                        </label>
                                        <!-- Pro signed-auth header field (integrations.webhook_auth) —
                                             registered by the Pro entrypoint, absent in Free. -->
                                        <component
                                            v-if="MakeApiKeyField"
                                            :is="MakeApiKeyField"
                                        />
                                    </div>
                                </div>

                                <!-- Pro SMS card — registered by the Pro entrypoint, absent in Free. -->
                                <component v-if="TwilioCard" :is="TwilioCard" />

                                <div class="fmt-integration-card">
                                    <div class="fmt-integration-header">
                                        <span class="fmt-integration-icon"><img :src="integrationIcons.slack" alt="" /></span>
                                        <div>
                                            <h3>{{ __("Slack", "formatrica") }}</h3>
                                            <p class="fmt-integration-description">
                                                {{
                                                    __(
                                                        "Send channel notifications using Slack Incoming Webhooks.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </p>
                                        </div>
                                    </div>
                                    <label class="fmt-setting fmt-setting--switch">
                                        <span>{{
                                            __("Enable Slack", "formatrica")
                                        }}</span>
                                        <input
                                            type="checkbox"
                                            v-model="local.integrations.slack.enabled"
                                        />
                                    </label>
                                    <div
                                        v-if="local.integrations.slack.enabled"
                                        class="fmt-setting-group"
                                    >
                                        <label class="fmt-setting">
                                            <span>{{
                                                __("Slack webhook URL", "formatrica")
                                            }}</span>
                                            <input
                                                type="url"
                                                v-model="
                                                    local.integrations.slack.webhook_url
                                                "
                                                placeholder="https://hooks.slack.com/services/..."
                                            />
                                        </label>
                                        <label class="fmt-setting">
                                            <span>{{
                                                __(
                                                    "Message template (optional)",
                                                    "formatrica",
                                                )
                                            }}</span>
                                            <textarea
                                                rows="4"
                                                v-model="
                                                    local.integrations.slack
                                                        .message_template
                                                "
                                                :placeholder="slackTemplatePlaceholder"
                                            ></textarea>
                                            <small class="fmt-setting__hint">
                                                {{ slackTemplateHint }}
                                            </small>
                                        </label>
                                    </div>
                                </div>

                                <div class="fmt-integration-card">
                                    <div class="fmt-integration-header">
                                        <span class="fmt-integration-icon"><img :src="integrationIcons.mailchimp" alt="" /></span>
                                        <div>
                                            <h3>{{ __("Mailchimp", "formatrica") }}</h3>
                                            <p class="fmt-integration-description">
                                                {{
                                                    __(
                                                        "Subscribe contacts to a Mailchimp audience and optionally enable double opt-in.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </p>
                                        </div>
                                    </div>
                                    <label class="fmt-setting fmt-setting--switch">
                                        <span>{{
                                            __("Enable Mailchimp", "formatrica")
                                        }}</span>
                                        <input
                                            type="checkbox"
                                            v-model="local.integrations.mailchimp.enabled"
                                        />
                                    </label>
                                    <div
                                        v-if="local.integrations.mailchimp.enabled"
                                        class="fmt-setting-group"
                                    >
                                        <label class="fmt-setting">
                                            <span>{{
                                                __("API key", "formatrica")
                                            }}</span>
                                            <input
                                                type="password"
                                                v-model="local.integrations.mailchimp.api_key"
                                                autocomplete="off"
                                                placeholder="abcd1234-us1"
                                            />
                                            <small
                                                class="fmt-setting__hint"
                                                v-if="
                                                    local.integrations.mailchimp
                                                        .api_key_set &&
                                                    !local.integrations.mailchimp
                                                        .remove_api_key
                                                "
                                            >
                                                {{
                                                    __(
                                                        "A key is already stored. Leave this field blank to keep it.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </small>
                                        </label>
                                        <label
                                            class="fmt-setting fmt-setting--switch"
                                            v-if="local.integrations.mailchimp.api_key_set"
                                        >
                                            <span>{{
                                                __(
                                                    "Remove stored API key",
                                                    "formatrica",
                                                )
                                            }}</span>
                                            <input
                                                type="checkbox"
                                                v-model="
                                                    local.integrations.mailchimp
                                                        .remove_api_key
                                                "
                                            />
                                        </label>
                                        <div class="fmt-setting">
                                            <button
                                                type="button"
                                                class="button button-secondary"
                                                @click="fetchMailchimpAudiences"
                                                :disabled="mailchimpAudiencesLoading"
                                            >
                                                <span v-if="mailchimpAudiencesLoading">
                                                    {{ __("Fetching…", "formatrica") }}
                                                </span>
                                                <span v-else>
                                                    {{
                                                        __(
                                                            "Fetch audiences",
                                                            "formatrica",
                                                        )
                                                    }}
                                                </span>
                                            </button>
                                            <small class="fmt-integration-hint">
                                                {{
                                                    __(
                                                        "You can fetch available audiences once an API key is provided and saved.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </small>
                                            <p
                                                class="fmt-integration-inline-error"
                                                v-if="mailchimpAudiencesError"
                                            >
                                                {{ mailchimpAudiencesError }}
                                            </p>
                                        </div>
                                        <label class="fmt-setting">
                                            <span>{{
                                                __(
                                                    "Audience (list)",
                                                    "formatrica",
                                                )
                                            }}</span>
                                            <select
                                                v-model="local.integrations.mailchimp.list_id"
                                            >
                                                <option value="">
                                                    {{
                                                        __(
                                                            "Select audience…",
                                                            "formatrica",
                                                        )
                                                    }}
                                                </option>
                                                <option
                                                    v-for="audience in mailchimpAudiences"
                                                    :key="audience.id"
                                                    :value="audience.id"
                                                >
                                                    {{ audience.name }}
                                                </option>
                                            </select>
                                        </label>
                                        <label class="fmt-setting">
                                            <span>{{
                                                __("Email field", "formatrica")
                                            }}</span>
                                            <select
                                                v-model="
                                                    local.integrations.mailchimp
                                                        .email_field
                                                "
                                            >
                                                <option value="">
                                                    {{
                                                        __(
                                                            "Select field…",
                                                            "formatrica",
                                                        )
                                                    }}
                                                </option>
                                                <option
                                                    v-for="option in emailFieldOptions"
                                                    :key="option.value"
                                                    :value="option.value"
                                                >
                                                    {{ option.label }}
                                                </option>
                                            </select>
                                        </label>
                                        <label class="fmt-setting">
                                            <span>{{
                                                __(
                                                    "First name field (optional)",
                                                    "formatrica",
                                                )
                                            }}</span>
                                            <select
                                                v-model="
                                                    local.integrations.mailchimp
                                                        .first_name_field
                                                "
                                            >
                                                <option value="">
                                                    {{
                                                        __("None", "formatrica")
                                                    }}
                                                </option>
                                                <option
                                                    v-for="option in mappableFieldOptions"
                                                    :key="`mc-first-${option.value}`"
                                                    :value="option.value"
                                                >
                                                    {{ option.label }}
                                                </option>
                                            </select>
                                        </label>
                                        <label class="fmt-setting">
                                            <span>{{
                                                __(
                                                    "Last name field (optional)",
                                                    "formatrica",
                                                )
                                            }}</span>
                                            <select
                                                v-model="
                                                    local.integrations.mailchimp
                                                        .last_name_field
                                                "
                                            >
                                                <option value="">
                                                    {{
                                                        __("None", "formatrica")
                                                    }}
                                                </option>
                                                <option
                                                    v-for="option in mappableFieldOptions"
                                                    :key="`mc-last-${option.value}`"
                                                    :value="option.value"
                                                >
                                                    {{ option.label }}
                                                </option>
                                            </select>
                                        </label>
                                        <label class="fmt-setting">
                                            <span>{{
                                                __("Tags (comma separated)", "formatrica")
                                            }}</span>
                                            <textarea
                                                rows="3"
                                                v-model="
                                                    local.integrations.mailchimp.tags_input
                                                "
                                                placeholder="vip, customer, newsletter"
                                            ></textarea>
                                            <small class="fmt-setting__hint">
                                                {{
                                                    __(
                                                        "Each tag is activated for the subscriber. Leave blank to skip tagging.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </small>
                                        </label>
                                        <label class="fmt-setting fmt-setting--switch">
                                            <span>{{
                                                __("Enable double opt-in", "formatrica")
                                            }}</span>
                                            <input
                                                type="checkbox"
                                                v-model="
                                                    local.integrations.mailchimp
                                                        .double_opt_in
                                                "
                                            />
                                        </label>
                                    </div>
                                </div>

                                <div class="fmt-integration-card">
                                    <div class="fmt-integration-header">
                                        <span class="fmt-integration-icon"><img :src="integrationIcons.brevo" alt="" /></span>
                                        <div>
                                            <h3>{{ __("Brevo", "formatrica") }}</h3>
                                            <p class="fmt-integration-description">
                                                {{
                                                    __(
                                                        "Add contacts to a Brevo list. Separate from the Brevo email-delivery transport.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </p>
                                        </div>
                                    </div>
                                    <label class="fmt-setting fmt-setting--switch">
                                        <span>{{ __("Enable Brevo", "formatrica") }}</span>
                                        <input
                                            type="checkbox"
                                            v-model="local.integrations.brevo.enabled"
                                        />
                                    </label>
                                    <div
                                        v-if="local.integrations.brevo.enabled"
                                        class="fmt-setting-group"
                                    >
                                        <label class="fmt-setting">
                                            <span>{{ __("API key", "formatrica") }}</span>
                                            <input
                                                type="password"
                                                v-model="local.integrations.brevo.api_key"
                                                autocomplete="off"
                                                placeholder="xkeysib-…"
                                            />
                                            <small
                                                class="fmt-setting__hint"
                                                v-if="
                                                    local.integrations.brevo.api_key_set &&
                                                    !local.integrations.brevo.remove_api_key
                                                "
                                            >
                                                {{
                                                    __(
                                                        "A key is already stored. Leave this field blank to keep it.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </small>
                                        </label>
                                        <label
                                            class="fmt-setting fmt-setting--switch"
                                            v-if="local.integrations.brevo.api_key_set"
                                        >
                                            <span>{{
                                                __("Remove stored API key", "formatrica")
                                            }}</span>
                                            <input
                                                type="checkbox"
                                                v-model="local.integrations.brevo.remove_api_key"
                                            />
                                        </label>
                                        <div class="fmt-setting">
                                            <button
                                                type="button"
                                                class="button button-secondary"
                                                @click="fetchBrevoLists"
                                                :disabled="brevoListsLoading"
                                            >
                                                <span v-if="brevoListsLoading">
                                                    {{ __("Fetching…", "formatrica") }}
                                                </span>
                                                <span v-else>
                                                    {{ __("Fetch lists", "formatrica") }}
                                                </span>
                                            </button>
                                            <small class="fmt-integration-hint">
                                                {{
                                                    __(
                                                        "You can fetch available lists once an API key is provided and saved.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </small>
                                            <p
                                                class="fmt-integration-inline-error"
                                                v-if="brevoListsError"
                                            >
                                                {{ brevoListsError }}
                                            </p>
                                        </div>
                                        <label class="fmt-setting">
                                            <span>{{ __("List", "formatrica") }}</span>
                                            <select v-model="local.integrations.brevo.list_id">
                                                <option value="">
                                                    {{ __("Select list…", "formatrica") }}
                                                </option>
                                                <option
                                                    v-for="list in brevoLists"
                                                    :key="list.id"
                                                    :value="list.id"
                                                >
                                                    {{ list.name }}
                                                </option>
                                            </select>
                                        </label>
                                        <label class="fmt-setting">
                                            <span>{{ __("Email field", "formatrica") }}</span>
                                            <select v-model="local.integrations.brevo.email_field">
                                                <option value="">
                                                    {{ __("Select field…", "formatrica") }}
                                                </option>
                                                <option
                                                    v-for="option in emailFieldOptions"
                                                    :key="`brevo-email-${option.value}`"
                                                    :value="option.value"
                                                >
                                                    {{ option.label }}
                                                </option>
                                            </select>
                                        </label>
                                        <label class="fmt-setting">
                                            <span>{{
                                                __("First name field (optional)", "formatrica")
                                            }}</span>
                                            <select v-model="local.integrations.brevo.first_name_field">
                                                <option value="">
                                                    {{ __("None", "formatrica") }}
                                                </option>
                                                <option
                                                    v-for="option in mappableFieldOptions"
                                                    :key="`brevo-first-${option.value}`"
                                                    :value="option.value"
                                                >
                                                    {{ option.label }}
                                                </option>
                                            </select>
                                        </label>
                                        <label class="fmt-setting">
                                            <span>{{
                                                __("Last name field (optional)", "formatrica")
                                            }}</span>
                                            <select v-model="local.integrations.brevo.last_name_field">
                                                <option value="">
                                                    {{ __("None", "formatrica") }}
                                                </option>
                                                <option
                                                    v-for="option in mappableFieldOptions"
                                                    :key="`brevo-last-${option.value}`"
                                                    :value="option.value"
                                                >
                                                    {{ option.label }}
                                                </option>
                                            </select>
                                        </label>
                                        <label class="fmt-setting">
                                            <span>{{
                                                __("Tags (comma separated)", "formatrica")
                                            }}</span>
                                            <textarea
                                                rows="3"
                                                v-model="local.integrations.brevo.tags_input"
                                                placeholder="vip, customer, newsletter"
                                            ></textarea>
                                            <small class="fmt-setting__hint">
                                                {{
                                                    __(
                                                        "Tags are sent as a comma-separated TAGS attribute. Define a TAGS contact attribute in Brevo to receive them.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </small>
                                        </label>
                                    </div>
                                </div>

                                <!-- Pro Salesforce card — registered by the Pro entrypoint, absent in Free. -->
                                <component v-if="SalesforceCard" :is="SalesforceCard" />

                                <!-- Pro HubSpot card — registered by the Pro entrypoint, absent in Free. -->
                                <component v-if="HubspotCard" :is="HubspotCard" />

                                <div class="fmt-integration-card">
                                    <div class="fmt-integration-header">
                                        <span class="fmt-integration-icon"><img :src="integrationIcons.webhook" alt="" /></span>
                                        <div>
                                            <h3>
                                                {{
                                                    __(
                                                        "General webhook submissions",
                                                        "formatrica",
                                                    )
                                                }}
                                            </h3>
                                            <p class="fmt-integration-description">
                                                {{
                                                    __(
                                                        "Post submission payloads to your own endpoint using the built-in webhook sender.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </p>
                                        </div>
                                    </div>
                                    <label class="fmt-setting fmt-setting--switch">
                                        <span>{{
                                            __("Enable general webhook", "formatrica")
                                        }}</span>
                                        <input type="checkbox" v-model="local.webhooks.enabled" />
                                    </label>
                                    <div
                                        v-if="local.webhooks.enabled"
                                        class="fmt-setting-group"
                                    >
                                        <label class="fmt-setting">
                                            <span>{{
                                                __("Webhook endpoint URL", "formatrica")
                                            }}</span>
                                            <input
                                                type="url"
                                                v-model="local.webhooks.endpoint"
                                                placeholder="https://api.example.com/webhooks"
                                            />
                                        </label>
                                        <label class="fmt-setting">
                                            <span>{{
                                                __("Signing secret (optional)", "formatrica")
                                            }}</span>
                                            <input
                                                type="password"
                                                v-model="local.webhooks.secret"
                                                :placeholder="
                                                    local.webhooks.secret_set ? '••••••' : ''
                                                "
                                                autocomplete="new-password"
                                            />
                                            <small class="fmt-setting__hint" v-if="local.webhooks.secret_set">
                                                {{
                                                    __(
                                                        "Secrets are write-only. Leave blank to keep the existing secret or toggle removal below.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </small>
                                            <small class="fmt-setting__hint" v-else>
                                                {{
                                                    __(
                                                        "Secrets are write-only and encrypted when stored.",
                                                        "formatrica",
                                                    )
                                                }}
                                            </small>
                                        </label>
                                        <label
                                            class="fmt-setting fmt-setting--switch"
                                            v-if="local.webhooks.secret_set"
                                        >
                                            <span>{{
                                                __("Remove stored secret", "formatrica")
                                            }}</span>
                                            <input
                                                type="checkbox"
                                                v-model="local.webhooks.remove_secret"
                                            />
                                        </label>
                                    </div>
                                </div>
                            </div>
</template>

<script setup>
import { inject } from "vue";
import { __ } from "@/utils/i18n";
import ICON_ZAPIER from "../../../../assets/icons/bolt.svg";
import ICON_MAKE from "../../../../assets/icons/cloud-data-connection.svg";
import ICON_SLACK from "../../../../assets/icons/brand-slack.svg";
import ICON_MAILCHIMP from "../../../../assets/icons/mail-heart.svg";
import ICON_BREVO from "../../../../assets/icons/send-2.svg";
import ICON_WEBHOOK from "../../../../assets/icons/world-share.svg";
import { proUi } from "@/admin/pro-ui-registry";

// Pro integration cards (Phase 7.3): filled by the Pro entrypoint, null in
// Free — their config markup, icons, and capability keys never enter the
// Free bundle. Each card owns its own lock/grandfather logic; the server
// save-guard stays authoritative.
const TwilioCard = proUi("integrationsTwilioCard");
const SalesforceCard = proUi("integrationsSalesforceCard");
const HubspotCard = proUi("integrationsHubspotCard");
const MakeApiKeyField = proUi("integrationsMakeApiKeyField");

const ctx = inject("formSettingsContext");

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

const {
    local,
    fieldOptions,
    mappableFieldOptions,
    emailFieldOptions,
    slackTemplatePlaceholder,
    slackTemplateHint,
    mailchimpAudiences,
    mailchimpAudiencesLoading,
    mailchimpAudiencesError,
    fetchMailchimpAudiences,
    brevoLists,
    brevoListsLoading,
    brevoListsError,
    fetchBrevoLists,
} = ctx;

const integrationIcons = {
    zapier: ICON_ZAPIER,
    make: ICON_MAKE,
    slack: ICON_SLACK,
    mailchimp: ICON_MAILCHIMP,
    brevo: ICON_BREVO,
    webhook: ICON_WEBHOOK,
};
</script>
