<script setup>
import { ref } from 'vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import AppCard from '@/Components/ui/AppCard.vue';
import AppTabs from '@/Components/ui/AppTabs.vue';
import FormField from '@/Components/ui/FormField.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';

const props = defineProps({
    settings: {
        type: Object,
        required: true,
    },
});
const activeTab = ref('overview');
const pageTabs = [
    { key: 'overview', label: 'Overview' },
    { key: 'monnify', label: 'Monnify' },
    { key: 'paymentpoint', label: 'PaymentPoint' },
    { key: 'paystack', label: 'Paystack' },
    { key: 'reports', label: 'Reports' },
    { key: 'webhooks', label: 'Webhooks' },
];

const form = useForm({
    monnify_base_url: props.settings.monnify_base_url || '',
    monnify_contract_code: props.settings.monnify_contract_code || '',
    monnify_timeout: props.settings.monnify_timeout || 30,
    monnify_api_key: '',
    monnify_secret_key: '',
    paystack_base_url: props.settings.paystack_base_url || '',
    paystack_timeout: props.settings.paystack_timeout || 30,
    paystack_public_key: '',
    paystack_secret_key: '',
    paymentpoint_base_url: props.settings.paymentpoint_base_url || '',
    paymentpoint_timeout: props.settings.paymentpoint_timeout || 30,
    paymentpoint_business_id: props.settings.paymentpoint_business_id || '',
    paymentpoint_bank_codes_csv: props.settings.paymentpoint_bank_codes_csv || '20946,20897',
    paymentpoint_api_key: '',
    paymentpoint_secret_key: '',
    monnify_reserved_account_enabled: !!props.settings.monnify_reserved_account_enabled,
    paymentpoint_reserved_account_enabled: !!props.settings.paymentpoint_reserved_account_enabled,
    monnify_instant_checkout_enabled: !!props.settings.monnify_instant_checkout_enabled,
    paystack_checkout_enabled: !!props.settings.paystack_checkout_enabled,
    require_bvn_for_monnify: !!props.settings.require_bvn_for_monnify,
    admin_report_daily_enabled: !!props.settings.admin_report_daily_enabled,
    admin_report_weekly_enabled: !!props.settings.admin_report_weekly_enabled,
    admin_report_recipients: props.settings.admin_report_recipients || '',
    monnify_webhook_secret: '',
    monnify_signature_header: props.settings.monnify_signature_header || 'monnify-signature',
    paymentpoint_webhook_secret: '',
    paymentpoint_signature_header: props.settings.paymentpoint_signature_header || 'Paymentpoint-Signature',
    smeplug_webhook_secret: '',
    paystack_webhook_secret: '',
    clear_monnify_api_key: false,
    clear_monnify_secret_key: false,
    clear_paystack_public_key: false,
    clear_paystack_secret_key: false,
    clear_paymentpoint_api_key: false,
    clear_paymentpoint_secret_key: false,
    clear_monnify_webhook_secret: false,
    clear_smeplug_webhook_secret: false,
    clear_paystack_webhook_secret: false,
    clear_paymentpoint_webhook_secret: false,
});

const submit = () => {
    form.put(route('admin.settings.integrations.update'), {
        preserveScroll: true,
        onSuccess: () => {
            form.monnify_api_key = '';
            form.monnify_secret_key = '';
            form.paystack_public_key = '';
            form.paystack_secret_key = '';
            form.paymentpoint_api_key = '';
            form.paymentpoint_secret_key = '';
            form.monnify_webhook_secret = '';
            form.paymentpoint_webhook_secret = '';
            form.smeplug_webhook_secret = '';
            form.paystack_webhook_secret = '';
            form.clearErrors();
        },
    });
};

const sendTestReport = (frequency) => {
    useForm({ frequency }).post(route('admin.settings.integrations.test-report'), {
        preserveScroll: true,
    });
};
</script>

<template>
    <Head title="Integration Settings" />

    <AdminLayout>
        <template #header>
            <div class="flex items-center justify-between gap-4">
                <div>
                    <h2 class="text-xl font-semibold text-gray-800">Integration Settings</h2>
                    <p class="mt-1 text-sm text-gray-500">Admin-managed API base URLs, keys, and webhook secrets (stored encrypted in database).</p>
                </div>
                <Link
                    :href="route('admin.vendors.index')"
                    class="rounded-md border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
                >
                    Vendors
                </Link>
            </div>
        </template>

        <div class="mx-auto max-w-5xl space-y-6 px-4 py-6 sm:px-6 lg:px-8">
            <AppTabs v-model="activeTab" :tabs="pageTabs" aria-label="Integration settings sections" />

            <AppCard
                v-if="activeTab === 'overview'"
                title="MSORG / SMEPlug Vendor Base URLs"
                subtitle="Vendor endpoints are already admin-controlled per vendor record. The system appends fixed endpoint paths to each vendor base URL."
            >
                <div class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
                    Example: if admin sets MSORG base URL to <span class="font-mono">https://yourvendor.com</span>, the provider calls
                    <span class="font-mono">https://yourvendor.com/api/data/</span>, <span class="font-mono">/api/topup/</span>, etc.
                </div>
                <div class="mt-3 text-sm text-gray-600">
                    Configure vendor base URLs and tokens under <Link :href="route('admin.vendors.index')" class="font-medium text-gray-900 underline">Admin Vendors</Link>.
                </div>
            </AppCard>

            <form class="space-y-6" @submit.prevent="submit">
                <AppCard
                    v-if="activeTab === 'overview'"
                    title="User Funding Method Toggles"
                    subtitle="Turn payment methods on/off. Disabled methods are blocked for users."
                >
                    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                        <label class="rounded-md border border-gray-200 bg-white px-4 py-3 text-sm">
                            <div class="font-semibold text-gray-800">Monnify Reserved Account</div>
                            <div class="mt-1 text-xs text-gray-500">Bank account funding details visibility.</div>
                            <div class="mt-3 inline-flex rounded-md border border-gray-300 bg-gray-50 p-1">
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="form.monnify_reserved_account_enabled ? 'bg-emerald-600 text-white' : 'text-gray-700'"
                                    @click="form.monnify_reserved_account_enabled = true"
                                >
                                    Turn On
                                </button>
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="!form.monnify_reserved_account_enabled ? 'bg-rose-600 text-white' : 'text-gray-700'"
                                    @click="form.monnify_reserved_account_enabled = false"
                                >
                                    Turn Off
                                </button>
                            </div>
                            <p v-if="form.errors.monnify_reserved_account_enabled" class="mt-2 text-xs text-rose-600">{{ form.errors.monnify_reserved_account_enabled }}</p>
                        </label>

                        <label class="rounded-md border border-gray-200 bg-white px-4 py-3 text-sm">
                            <div class="font-semibold text-gray-800">PaymentPoint Reserved Account</div>
                            <div class="mt-1 text-xs text-gray-500">Reserved account funding via PaymentPoint.</div>
                            <div class="mt-3 inline-flex rounded-md border border-gray-300 bg-gray-50 p-1">
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="form.paymentpoint_reserved_account_enabled ? 'bg-emerald-600 text-white' : 'text-gray-700'"
                                    @click="form.paymentpoint_reserved_account_enabled = true"
                                >
                                    Turn On
                                </button>
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="!form.paymentpoint_reserved_account_enabled ? 'bg-rose-600 text-white' : 'text-gray-700'"
                                    @click="form.paymentpoint_reserved_account_enabled = false"
                                >
                                    Turn Off
                                </button>
                            </div>
                            <p v-if="form.errors.paymentpoint_reserved_account_enabled" class="mt-2 text-xs text-rose-600">{{ form.errors.paymentpoint_reserved_account_enabled }}</p>
                        </label>

                        <label class="rounded-md border border-gray-200 bg-white px-4 py-3 text-sm">
                            <div class="font-semibold text-gray-800">Monnify Instant Checkout</div>
                            <div class="mt-1 text-xs text-gray-500">One-time payment link funding flow.</div>
                            <div class="mt-3 inline-flex rounded-md border border-gray-300 bg-gray-50 p-1">
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="form.monnify_instant_checkout_enabled ? 'bg-emerald-600 text-white' : 'text-gray-700'"
                                    @click="form.monnify_instant_checkout_enabled = true"
                                >
                                    Turn On
                                </button>
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="!form.monnify_instant_checkout_enabled ? 'bg-rose-600 text-white' : 'text-gray-700'"
                                    @click="form.monnify_instant_checkout_enabled = false"
                                >
                                    Turn Off
                                </button>
                            </div>
                            <p v-if="form.errors.monnify_instant_checkout_enabled" class="mt-2 text-xs text-rose-600">{{ form.errors.monnify_instant_checkout_enabled }}</p>
                        </label>

                        <label class="rounded-md border border-gray-200 bg-white px-4 py-3 text-sm">
                            <div class="font-semibold text-gray-800">Paystack Checkout</div>
                            <div class="mt-1 text-xs text-gray-500">Card/bank transfer checkout for wallet funding.</div>
                            <div class="mt-3 inline-flex rounded-md border border-gray-300 bg-gray-50 p-1">
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="form.paystack_checkout_enabled ? 'bg-emerald-600 text-white' : 'text-gray-700'"
                                    @click="form.paystack_checkout_enabled = true"
                                >
                                    Turn On
                                </button>
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="!form.paystack_checkout_enabled ? 'bg-rose-600 text-white' : 'text-gray-700'"
                                    @click="form.paystack_checkout_enabled = false"
                                >
                                    Turn Off
                                </button>
                            </div>
                            <p v-if="form.errors.paystack_checkout_enabled" class="mt-2 text-xs text-rose-600">{{ form.errors.paystack_checkout_enabled }}</p>
                        </label>

                        <label class="rounded-md border border-gray-200 bg-white px-4 py-3 text-sm">
                            <div class="font-semibold text-gray-800">Require BVN for Monnify</div>
                            <div class="mt-1 text-xs text-gray-500">If on, users must save BVN before Monnify reserved or instant funding.</div>
                            <div class="mt-3 inline-flex rounded-md border border-gray-300 bg-gray-50 p-1">
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="form.require_bvn_for_monnify ? 'bg-emerald-600 text-white' : 'text-gray-700'"
                                    @click="form.require_bvn_for_monnify = true"
                                >
                                    Turn On
                                </button>
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="!form.require_bvn_for_monnify ? 'bg-rose-600 text-white' : 'text-gray-700'"
                                    @click="form.require_bvn_for_monnify = false"
                                >
                                    Turn Off
                                </button>
                            </div>
                            <p v-if="form.errors.require_bvn_for_monnify" class="mt-2 text-xs text-rose-600">{{ form.errors.require_bvn_for_monnify }}</p>
                        </label>
                    </div>
                </AppCard>

                <AppCard v-if="activeTab === 'monnify'" title="Monnify API Credentials" subtitle="Used for reserved account provisioning and Monnify funding flows.">
                    <div class="grid gap-4 md:grid-cols-2">
                        <FormField label="Monnify Base URL" :error="form.errors.monnify_base_url" help="HTTPS only. Example: https://sandbox.monnify.com or https://api.monnify.com">
                            <input v-model="form.monnify_base_url" class="w-full rounded-md border-gray-300 text-sm shadow-sm" placeholder="https://sandbox.monnify.com" />
                        </FormField>

                        <FormField label="Monnify Timeout (seconds)" :error="form.errors.monnify_timeout">
                            <input v-model="form.monnify_timeout" type="number" min="5" max="120" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <FormField label="Monnify Contract Code" :error="form.errors.monnify_contract_code">
                            <input v-model="form.monnify_contract_code" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <div class="rounded-md border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
                            <p class="font-semibold text-gray-800">Secret fields behavior</p>
                            <p class="mt-1">Leave secret fields blank to keep the current value. Tick a clear option only if you want to remove the DB value and fall back to environment variables.</p>
                        </div>

                        <FormField :label="`Monnify API Key${settings.has_monnify_api_key ? ' (currently set)' : ''}`" :error="form.errors.monnify_api_key">
                            <input v-model="form.monnify_api_key" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <label class="mt-6 flex items-center gap-2 text-sm text-gray-700">
                            <input v-model="form.clear_monnify_api_key" type="checkbox" class="rounded border-gray-300" />
                            Clear Monnify API Key from DB
                        </label>

                        <FormField :label="`Monnify Secret Key${settings.has_monnify_secret_key ? ' (currently set)' : ''}`" :error="form.errors.monnify_secret_key">
                            <input v-model="form.monnify_secret_key" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <label class="mt-6 flex items-center gap-2 text-sm text-gray-700">
                            <input v-model="form.clear_monnify_secret_key" type="checkbox" class="rounded border-gray-300" />
                            Clear Monnify Secret Key from DB
                        </label>
                    </div>
                </AppCard>

                <AppCard v-if="activeTab === 'paymentpoint'" title="PaymentPoint API Credentials" subtitle="Used for PaymentPoint reserved account provisioning.">
                    <div class="grid gap-4 md:grid-cols-2">
                        <FormField label="PaymentPoint Base URL" :error="form.errors.paymentpoint_base_url" help="HTTPS only. Example: https://api.paymentpoint.co">
                            <input v-model="form.paymentpoint_base_url" class="w-full rounded-md border-gray-300 text-sm shadow-sm" placeholder="https://api.paymentpoint.co" />
                        </FormField>

                        <FormField label="PaymentPoint Timeout (seconds)" :error="form.errors.paymentpoint_timeout">
                            <input v-model="form.paymentpoint_timeout" type="number" min="5" max="120" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <FormField label="PaymentPoint Business ID" :error="form.errors.paymentpoint_business_id" help="Leave blank if API key should be reused as businessId.">
                            <input v-model="form.paymentpoint_business_id" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <FormField label="Partner Bank Codes (CSV)" :error="form.errors.paymentpoint_bank_codes_csv" help="Example: 20946,20897">
                            <input v-model="form.paymentpoint_bank_codes_csv" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <FormField :label="`PaymentPoint API Key${settings.has_paymentpoint_api_key ? ' (currently set)' : ''}`" :error="form.errors.paymentpoint_api_key">
                            <input v-model="form.paymentpoint_api_key" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <label class="mt-6 flex items-center gap-2 text-sm text-gray-700">
                            <input v-model="form.clear_paymentpoint_api_key" type="checkbox" class="rounded border-gray-300" />
                            Clear PaymentPoint API key from DB
                        </label>

                        <FormField :label="`PaymentPoint Secret Key${settings.has_paymentpoint_secret_key ? ' (currently set)' : ''}`" :error="form.errors.paymentpoint_secret_key">
                            <input v-model="form.paymentpoint_secret_key" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <label class="mt-6 flex items-center gap-2 text-sm text-gray-700">
                            <input v-model="form.clear_paymentpoint_secret_key" type="checkbox" class="rounded border-gray-300" />
                            Clear PaymentPoint secret key from DB
                        </label>
                    </div>
                </AppCard>

                <AppCard v-if="activeTab === 'reports'" title="Scheduled Admin Reports" subtitle="Automated dashboard reports sent via email queue.">
                    <div class="grid gap-4 md:grid-cols-2">
                        <label class="rounded-md border border-gray-200 bg-white px-4 py-3 text-sm">
                            <div class="font-semibold text-gray-800">Daily Report (07:05)</div>
                            <div class="mt-1 text-xs text-gray-500">Sends daily analytics summary.</div>
                            <div class="mt-3 inline-flex rounded-md border border-gray-300 bg-gray-50 p-1">
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="form.admin_report_daily_enabled ? 'bg-emerald-600 text-white' : 'text-gray-700'"
                                    @click="form.admin_report_daily_enabled = true"
                                >
                                    Turn On
                                </button>
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="!form.admin_report_daily_enabled ? 'bg-rose-600 text-white' : 'text-gray-700'"
                                    @click="form.admin_report_daily_enabled = false"
                                >
                                    Turn Off
                                </button>
                            </div>
                        </label>

                        <label class="rounded-md border border-gray-200 bg-white px-4 py-3 text-sm">
                            <div class="font-semibold text-gray-800">Weekly Report (Mon 07:10)</div>
                            <div class="mt-1 text-xs text-gray-500">Sends weekly analytics summary.</div>
                            <div class="mt-3 inline-flex rounded-md border border-gray-300 bg-gray-50 p-1">
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="form.admin_report_weekly_enabled ? 'bg-emerald-600 text-white' : 'text-gray-700'"
                                    @click="form.admin_report_weekly_enabled = true"
                                >
                                    Turn On
                                </button>
                                <button
                                    type="button"
                                    class="rounded px-3 py-1.5 text-xs font-semibold"
                                    :class="!form.admin_report_weekly_enabled ? 'bg-rose-600 text-white' : 'text-gray-700'"
                                    @click="form.admin_report_weekly_enabled = false"
                                >
                                    Turn Off
                                </button>
                            </div>
                        </label>

                        <FormField
                            class="md:col-span-2"
                            label="Report Recipients (comma separated emails)"
                            :error="form.errors.admin_report_recipients"
                            help="Example: ops@company.com, finance@company.com"
                        >
                            <textarea v-model="form.admin_report_recipients" rows="2" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <div class="md:col-span-2 flex flex-wrap items-center gap-2 rounded-md border border-dashed border-gray-300 bg-gray-50 px-3 py-3">
                            <span class="text-xs font-medium text-gray-700">Send test now:</span>
                            <button
                                type="button"
                                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-100"
                                @click="sendTestReport('daily')"
                            >
                                Send Daily Test
                            </button>
                            <button
                                type="button"
                                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-100"
                                @click="sendTestReport('weekly')"
                            >
                                Send Weekly Test
                            </button>
                        </div>
                    </div>
                </AppCard>

                <AppCard v-if="activeTab === 'paystack'" title="Paystack API Credentials" subtitle="Used for Paystack wallet funding checkout and signature verification support.">
                    <div class="grid gap-4 md:grid-cols-2">
                        <FormField label="Paystack Base URL" :error="form.errors.paystack_base_url" help="HTTPS only. Example: https://api.paystack.co">
                            <input v-model="form.paystack_base_url" class="w-full rounded-md border-gray-300 text-sm shadow-sm" placeholder="https://api.paystack.co" />
                        </FormField>

                        <FormField label="Paystack Timeout (seconds)" :error="form.errors.paystack_timeout">
                            <input v-model="form.paystack_timeout" type="number" min="5" max="120" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <FormField :label="`Paystack Public Key${settings.has_paystack_public_key ? ' (currently set)' : ''}`" :error="form.errors.paystack_public_key">
                            <input v-model="form.paystack_public_key" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <label class="mt-6 flex items-center gap-2 text-sm text-gray-700">
                            <input v-model="form.clear_paystack_public_key" type="checkbox" class="rounded border-gray-300" />
                            Clear Paystack public key from DB
                        </label>

                        <FormField :label="`Paystack Secret Key${settings.has_paystack_secret_key ? ' (currently set)' : ''}`" :error="form.errors.paystack_secret_key">
                            <input v-model="form.paystack_secret_key" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <label class="mt-6 flex items-center gap-2 text-sm text-gray-700">
                            <input v-model="form.clear_paystack_secret_key" type="checkbox" class="rounded border-gray-300" />
                            Clear Paystack secret key from DB
                        </label>
                    </div>
                </AppCard>

                <AppCard v-if="activeTab === 'webhooks'" title="Webhook Secrets" subtitle="Optional shared secrets/signature settings for incoming provider webhooks.">
                    <div class="grid gap-4 md:grid-cols-2">
                        <FormField :label="`Monnify Webhook Secret${settings.has_monnify_secret ? ' (currently set)' : ''}`" :error="form.errors.monnify_webhook_secret">
                            <input v-model="form.monnify_webhook_secret" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <label class="mt-6 flex items-center gap-2 text-sm text-gray-700">
                            <input v-model="form.clear_monnify_webhook_secret" type="checkbox" class="rounded border-gray-300" />
                            Clear Monnify webhook secret from DB
                        </label>

                        <FormField label="Monnify Signature Header" :error="form.errors.monnify_signature_header" help="Header name used to read Monnify signature (default: monnify-signature)">
                            <input v-model="form.monnify_signature_header" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <div />

                        <FormField :label="`PaymentPoint Webhook Secret${settings.has_paymentpoint_secret ? ' (currently set)' : ''}`" :error="form.errors.paymentpoint_webhook_secret">
                            <input v-model="form.paymentpoint_webhook_secret" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <label class="mt-6 flex items-center gap-2 text-sm text-gray-700">
                            <input v-model="form.clear_paymentpoint_webhook_secret" type="checkbox" class="rounded border-gray-300" />
                            Clear PaymentPoint webhook secret from DB
                        </label>

                        <FormField label="PaymentPoint Signature Header" :error="form.errors.paymentpoint_signature_header" help="Header name used to read PaymentPoint signature (default: Paymentpoint-Signature)">
                            <input v-model="form.paymentpoint_signature_header" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <div />

                        <FormField :label="`SMEPlug Webhook Secret${settings.has_smeplug_secret ? ' (currently set)' : ''}`" :error="form.errors.smeplug_webhook_secret">
                            <input v-model="form.smeplug_webhook_secret" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <label class="mt-6 flex items-center gap-2 text-sm text-gray-700">
                            <input v-model="form.clear_smeplug_webhook_secret" type="checkbox" class="rounded border-gray-300" />
                            Clear SMEPlug webhook secret from DB
                        </label>

                        <FormField :label="`Paystack Webhook Secret${settings.has_paystack_secret ? ' (currently set)' : ''}`" :error="form.errors.paystack_webhook_secret">
                            <input v-model="form.paystack_webhook_secret" type="password" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <label class="mt-6 flex items-center gap-2 text-sm text-gray-700">
                            <input v-model="form.clear_paystack_webhook_secret" type="checkbox" class="rounded border-gray-300" />
                            Clear Paystack webhook secret from DB
                        </label>
                    </div>
                </AppCard>

                <div class="flex justify-end">
                    <PrimaryButton :disabled="form.processing">
                        {{ form.processing ? 'Saving...' : 'Save Integration Settings' }}
                    </PrimaryButton>
                </div>
            </form>
        </div>
    </AdminLayout>
</template>
