<template>
    <div
        class="fmt-modal__panel"
        role="tabpanel"
        aria-labelledby="fmt-tab-notifications"
        id="fmt-panel-notifications"
    >
        <label class="fmt-setting fmt-setting--switch">
            <span>{{ __("Send email notifications") }}</span>
            <input type="checkbox" v-model="local.send_email" />
        </label>

        <div v-if="local.send_email" class="fmt-setting-group">

            <div class="fmt-email-global-controls fmt-setting-group">
                <label class="fmt-setting fmt-setting--switch">
                    <span>{{ __("Use global email delivery settings") }}</span>
                    <input type="checkbox" v-model="local.use_global_email_delivery" />
                </label>

                <label class="fmt-setting fmt-setting--switch">
                    <span>{{ __("Use global Recipient email") }}</span>
                    <input type="checkbox" v-model="local.use_global_recipient" />
                </label>
                <label class="fmt-setting fmt-setting--switch">
                    <span>{{ __("Use global From email") }}</span>
                    <input type="checkbox" v-model="local.use_global_from_email" />
                </label>
                <label class="fmt-setting fmt-setting--switch">
                    <span>{{ __("Use global From name") }}</span>
                    <input type="checkbox" v-model="local.use_global_from_name" />
                </label>
            </div>

            <label class="fmt-setting" :class="{ 'fmt-setting--dim': local.use_global_recipient }">
                <span>{{ __("Recipient email") }}</span>
                <input type="email" v-model="local.email_recipient" :disabled="local.use_global_recipient" />
                <small v-if="local.use_global_recipient" class="fmt-setting__hint">{{ __("Using the global default recipient from Settings.") }}</small>
            </label>
            <label class="fmt-setting">
                <span>{{ __("Email subject") }}</span>
                <input type="text" v-model="local.email_subject" />
            </label>
            <label class="fmt-setting" :class="{ 'fmt-setting--dim': local.use_global_from_name }">
                <span>{{ __("From name") }}</span>
                <input type="text" v-model="local.email_from_name" :disabled="local.use_global_from_name" />
            </label>
            <label class="fmt-setting" :class="{ 'fmt-setting--dim': local.use_global_from_email }">
                <span>{{ __("From email") }}</span>
                <input type="email" v-model="local.email_from_address" :disabled="local.use_global_from_email" />
                <small class="fmt-setting__hint">
                    {{
                        __(
                            "Use an address on the same domain as your site (for example, noreply@yourdomain.com) and publish SPF and DKIM DNS records so messages avoid spam filters. Especially important if using the default wp_mail method.",
                            "formatrica",
                        )
                    }}
                </small>
            </label>
            <button type="button" class="button" @click="requestTestEmail">
                {{ __("Send test email") }}
            </button>

            <div class="fmt-setting" v-if="!local.use_global_email_delivery">
                <span>{{ __("Delivery method", "formatrica") }}</span>
                <select v-model="local.email_delivery.provider">
                    <option value="wordpress">
                        {{ __("WordPress default (wp_mail)", "formatrica") }}
                    </option>
                    <option value="sendgrid">
                        {{ __("SendGrid API", "formatrica") }}
                    </option>
                        <option value="mailgun">
                            {{ __("Mailgun API", "formatrica") }}
                        </option>
                        <option value="postmark">
                            {{ __("Postmark API", "formatrica") }}
                        </option>
                        <option value="brevo">
                            {{ __("Brevo API", "formatrica") }}
                        </option>
                        <option value="amazon_ses">
                            {{ __("Amazon SES", "formatrica") }}
                        </option>
                    <option value="smtp2go">
                        {{ __("SMTP2GO API", "formatrica") }}
                    </option>
                    <option value="smtp">
                        {{ __("Custom SMTP", "formatrica") }}
                    </option>
                    <option value="mailpit">
                        {{
                            __(
                                "Mailpit (SMTP - local testing only)",
                                "formatrica",
                            )
                        }}
                    </option>
                </select>
            </div>
            <small
                v-if="!local.use_global_email_delivery && local.email_delivery.provider === 'wordpress'"
                class="fmt-setting__hint"
            >
                {{
                    __(
                        "The WordPress mailer sends through your server. DNS records (SPF, DKIM, DMARC) for your domain greatly improve deliverability. Switch to SMTP or an email API if you need guaranteed delivery.",
                        "formatrica",
                    )
                }}
            </small>

            <small v-else-if="local.use_global_email_delivery" class="fmt-setting__hint">
                {{ __("This form will use the plugin's global email delivery provider and credentials (configured under Settings).") }}
            </small>

            <div
                v-if="!local.use_global_email_delivery && local.email_delivery.provider === 'sendgrid'"
                class="fmt-setting fmt-setting--stacked"
            >
                <span>{{ __("SendGrid API key", "formatrica") }}</span>
                <input
                    type="password"
                    v-model="local.email_delivery.sendgrid.api_key"
                    :placeholder="local.email_delivery.sendgrid.api_key_set ? '••••••' : ''"
                    autocomplete="new-password"
                />
            </div>

            <div
                v-if="!local.use_global_email_delivery && local.email_delivery.provider === 'mailgun'"
                class="fmt-setting-group"
            >
                <label class="fmt-setting">
                    <span>{{ __("Mailgun API key", "formatrica") }}</span>
                    <input
                        type="password"
                        v-model="local.email_delivery.mailgun.api_key"
                        :placeholder="local.email_delivery.mailgun.api_key_set ? '••••••' : ''"
                        autocomplete="new-password"
                    />
                </label>
                <div class="fmt-setting fmt-setting--split">
                    <label>
                        <span>{{ __("Domain", "formatrica") }}</span>
                        <input type="text" v-model="local.email_delivery.mailgun.domain" />
                    </label>
                    <label>
                        <span>{{ __("Region", "formatrica") }}</span>
                        <select v-model="local.email_delivery.mailgun.region">
                            <option value="us">US</option>
                            <option value="eu">EU</option>
                        </select>
                    </label>
                </div>
                <small class="fmt-setting__hint">
                    {{ __("Use your Mailgun sending domain (e.g. mg.example.com).", "formatrica") }}
                </small>
            </div>

            <div
                v-if="!local.use_global_email_delivery && local.email_delivery.provider === 'postmark'"
                class="fmt-setting fmt-setting--stacked"
            >
                <span>{{ __("Postmark Server API Token", "formatrica") }}</span>
                <input
                    type="password"
                    v-model="local.email_delivery.postmark.api_token"
                    :placeholder="local.email_delivery.postmark.api_token_set ? '••••••' : ''"
                    autocomplete="new-password"
                />
            </div>

            <div
                v-if="!local.use_global_email_delivery && local.email_delivery.provider === 'brevo'"
                class="fmt-setting fmt-setting--stacked"
            >
                <span>{{ __("Brevo API key", "formatrica") }}</span>
                <input
                    type="password"
                    v-model="local.email_delivery.brevo.api_key"
                    :placeholder="local.email_delivery.brevo.api_key_set ? '••••••' : ''"
                    autocomplete="new-password"
                />
            </div>

            <div
                v-if="!local.use_global_email_delivery && local.email_delivery.provider === 'amazon_ses'"
                class="fmt-setting-group"
            >
                <div class="fmt-setting fmt-setting--split">
                    <label>
                        <span>{{ __("Access key", "formatrica") }}</span>
                        <input
                            type="text"
                            v-model="local.email_delivery.amazon_ses.access_key"
                            autocomplete="off"
                        />
                    </label>
                    <label>
                        <span>{{ __("Secret key", "formatrica") }}</span>
                        <input
                            type="password"
                            v-model="local.email_delivery.amazon_ses.secret_key"
                            :placeholder="local.email_delivery.amazon_ses.secret_key_set ? '••••••' : ''"
                            autocomplete="new-password"
                        />
                    </label>
                </div>
                <label class="fmt-setting">
                    <span>{{ __("Region", "formatrica") }}</span>
                    <input
                        type="text"
                        placeholder="us-east-1"
                        v-model="local.email_delivery.amazon_ses.region"
                    />
                </label>
                <small class="fmt-setting__hint">
                    {{ __("Ensure your sender identity is verified in SES and the region matches your SES settings.", "formatrica") }}
                </small>
            </div>

            <div
                v-if="!local.use_global_email_delivery && local.email_delivery.provider === 'mailpit'"
                class="fmt-setting fmt-setting--split"
            >
                <label>
                    <span>{{ __("Mailpit host", "formatrica") }}</span>
                    <input
                        type="text"
                        v-model="local.email_delivery.mailpit.host"
                    />
                </label>
                <label>
                    <span>{{ __("Mailpit port", "formatrica") }}</span>
                    <input
                        type="number"
                        min="1"
                        v-model.number="local.email_delivery.mailpit.port"
                    />
                </label>
            </div>

            <div
                v-if="!local.use_global_email_delivery && local.email_delivery.provider === 'smtp2go'"
                class="fmt-setting fmt-setting--stacked"
            >
                <span>{{ __("SMTP2GO API key", "formatrica") }}</span>
                <input
                    type="password"
                    v-model="local.email_delivery.smtp2go.api_key"
                    :placeholder="local.email_delivery.smtp2go.api_key_set ? '••••••' : ''"
                    autocomplete="new-password"
                />
            </div>

            <div
                v-if="!local.use_global_email_delivery && local.email_delivery.provider === 'smtp'"
                class="fmt-setting-group"
            >
                <div class="fmt-setting fmt-setting--split">
                    <label>
                        <span>{{ __("SMTP host", "formatrica") }}</span>
                        <input
                            type="text"
                            v-model="local.email_delivery.smtp.host"
                        />
                    </label>
                    <label>
                        <span>{{ __("Port", "formatrica") }}</span>
                        <input
                            type="number"
                            min="1"
                            v-model.number="local.email_delivery.smtp.port"
                        />
                    </label>
                </div>
                <div class="fmt-setting fmt-setting--split">
                    <label>
                        <span>{{ __("Encryption", "formatrica") }}</span>
                        <select v-model="local.email_delivery.smtp.encryption">
                            <option value="none">
                                {{ __("None", "formatrica") }}
                            </option>
                            <option value="ssl">SSL</option>
                            <option value="tls">TLS</option>
                        </select>
                    </label>
                    <div></div>
                </div>
                <label class="fmt-setting">
                    <span>{{ __("Username", "formatrica") }}</span>
                    <input
                        type="text"
                        v-model="local.email_delivery.smtp.username"
                        autocomplete="off"
                    />
                </label>
                <label class="fmt-setting">
                    <span>{{ __("Password", "formatrica") }}</span>
                    <input
                        type="password"
                        v-model="local.email_delivery.smtp.password"
                        :placeholder="
                            local.email_delivery.smtp.password_set
                                ? '••••••'
                                : ''
                        "
                        autocomplete="new-password"
                    />
                    <small
                        v-if="local.email_delivery.smtp.password_set"
                        class="fmt-setting__hint"
                    >
                        {{
                            __(
                                "Existing password is stored securely. Enter a new value to replace it.",
                                "formatrica",
                            )
                        }}
                    </small>
                </label>
            </div>
        </div>

        <div
            class="fmt-setting-group"
            v-if="local.submitter_email && (PRO_UI || local.submitter_email.enabled)"
        >
            <label class="fmt-setting fmt-setting--switch">
                <span>
                    {{ __("Send a confirmation email to the submitter") }}
                    <span v-if="PRO_UI && !hasSubmitterEmail" class="fmt-setting__pro">{{ __("Pro") }}</span>
                </span>
                <input
                    type="checkbox"
                    v-model="local.submitter_email.enabled"
                    :disabled="!hasSubmitterEmail && !local.submitter_email.enabled"
                />
            </label>
            <template v-if="local.submitter_email.enabled">
                <label class="fmt-setting">
                    <span>{{ __("Send to (email field)") }}</span>
                    <select v-model="local.submitter_email.recipient_email_field">
                        <option value="">{{ __("— Select an email field —") }}</option>
                        <option v-for="opt in emailFieldOptions" :key="opt.value" :value="opt.value">
                            {{ opt.label }}
                        </option>
                    </select>
                    <small v-if="!emailFieldOptions.length" class="fmt-setting__hint">
                        {{ __("Add an email field to the form to enable this.") }}
                    </small>
                </label>
                <label class="fmt-setting">
                    <span>{{ __("Subject") }}</span>
                    <input type="text" v-model="local.submitter_email.subject" maxlength="200" />
                </label>
                <label class="fmt-setting">
                    <span>{{ __("Message") }}</span>
                    <textarea rows="5" v-model="local.submitter_email.body" maxlength="4000"></textarea>
                    <small class="fmt-setting__hint">{{ tokenHint }}</small>
                </label>
                <label class="fmt-setting fmt-setting--switch">
                    <span>{{ __("Use the notification sender name") }}</span>
                    <input type="checkbox" v-model="local.submitter_email.use_global_from_name" />
                </label>
                <label class="fmt-setting" v-if="!local.submitter_email.use_global_from_name">
                    <span>{{ __("From name") }}</span>
                    <input type="text" v-model="local.submitter_email.from_name" maxlength="150" />
                </label>
                <label class="fmt-setting fmt-setting--switch">
                    <span>{{ __("Use the notification sender email") }}</span>
                    <input type="checkbox" v-model="local.submitter_email.use_global_from_email" />
                </label>
                <label class="fmt-setting" v-if="!local.submitter_email.use_global_from_email">
                    <span>{{ __("From email") }}</span>
                    <input type="email" v-model="local.submitter_email.from_email" />
                </label>
                <label class="fmt-setting">
                    <span>{{ __("Reply-To (optional)") }}</span>
                    <input type="email" v-model="local.submitter_email.reply_to_email" />
                </label>
            </template>
        </div>

        <div class="fmt-setting-group" v-if="local.email_template && PRO_UI">
            <div class="fmt-setting">
                <span>
                    {{ __("Email appearance") }}
                    <span v-if="!hasEmailTemplate" class="fmt-setting__pro">{{ __("Pro") }}</span>
                </span>
            </div>
            <label class="fmt-setting fmt-setting--switch">
                <span>{{ __("Show the form title") }}</span>
                <input type="checkbox" v-model="local.email_template.show_title" :disabled="!hasEmailTemplate" />
            </label>
            <label class="fmt-setting fmt-setting--switch">
                <span>{{ __("Show submission metadata (IP)") }}</span>
                <input type="checkbox" v-model="local.email_template.show_metadata" :disabled="!hasEmailTemplate" />
            </label>
            <label class="fmt-setting">
                <span>{{ __("Font") }}</span>
                <select v-model="local.email_template.font_stack" :disabled="!hasEmailTemplate">
                    <option value="system">{{ __("System") }}</option>
                    <option value="sans">{{ __("Sans-serif") }}</option>
                    <option value="serif">{{ __("Serif") }}</option>
                    <option value="humanist">{{ __("Humanist") }}</option>
                    <option value="geometric">{{ __("Geometric") }}</option>
                </select>
            </label>
            <label class="fmt-setting fmt-setting--switch">
                <span>{{ __("Use the site accent colour") }}</span>
                <input type="checkbox" v-model="local.email_template.use_global_accent" :disabled="!hasEmailTemplate" />
            </label>
            <div class="fmt-setting" v-if="!local.email_template.use_global_accent">
                <span>{{ __("Accent colour") }}</span>
                <span class="fmt-color-field">
                    <input
                        type="color"
                        class="fmt-color-field__swatch"
                        v-model="local.email_template.accent_color"
                        :disabled="!hasEmailTemplate"
                        :aria-label="__('Accent colour')"
                    />
                    <input
                        type="text"
                        class="fmt-color-field__hex"
                        v-model="local.email_template.accent_color"
                        :disabled="!hasEmailTemplate"
                        placeholder="#3b82f6"
                        pattern="^#[A-Fa-f0-9]{6}$"
                        maxlength="7"
                        spellcheck="false"
                        autocomplete="off"
                    />
                </span>
            </div>
            <label class="fmt-setting">
                <span>{{ __("Intro text (above the fields)") }}</span>
                <textarea rows="2" maxlength="1000" v-model="local.email_template.intro_text" :disabled="!hasEmailTemplate"></textarea>
            </label>
            <label class="fmt-setting">
                <span>{{ __("Footer text") }}</span>
                <textarea rows="2" maxlength="1000" v-model="local.email_template.footer_text" :disabled="!hasEmailTemplate"></textarea>
            </label>
        </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, requestTestEmail, emailFieldOptions } = ctx;

// Submitter confirmation email (Pro emails.submitter_confirmation). Toggle locked
// on Free unless already enabled (preserve-existing). Bound as a JS string so the
// {{...}} token names aren't parsed as Vue interpolation.
const { has } = useCapabilities();
const hasSubmitterEmail = has("emails.submitter_confirmation");
const hasEmailTemplate = has("emails.template_controls");
const tokenHint = __("Tokens: {{form_title}} and {{field:name}}.", "formatrica");
</script>

<style scoped>
/* Dim the label text when the corresponding input is disabled via global settings */
.fmt-setting--dim > span:first-child {
    color: #abb1b7;
}

/* Stack the global email toggles cleanly, one per line */
.fmt-email-global-controls {
    display: grid;
    gap: 10px;
}

.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>
