@php
    $customFieldEndpoints = [
        'data' => route('custom-fields.data'),
        'saveSettings' => route('custom-fields.save-settings'),
        'updateFeature' => route('custom-fields.update-feature'),
        'create' => route('custom-fields.create'),
        'update' => route('custom-fields.update'),
        'delete' => route('custom-fields.delete'),
        'toggleStatus' => route('custom-fields.toggle-status'),
        'toggleRequired' => route('custom-fields.toggle-required'),
        'updateConsent' => route('custom-fields.update-consent'),
    ];
@endphp

<x-filament-panels::page>
    <div id="custom-fields-page-root">
        <div class="full-page-loader" id="cf-page-loader" style="display: none;">
            <div class="loader-content">
                <div class="spinner" aria-hidden="true"></div>
                <div class="loader-text" id="cf-page-loader-text">Loading custom fields...</div>
            </div>
        </div>

        <div
            class="cf-page"
            id="custom-fields-page"
            data-endpoints='@json($customFieldEndpoints)'
        >
            <div class="cf-page-header">
                <div>
                    <h1 class="cf-page-title">Custom Fields</h1>
                    <p class="cf-page-subtitle">Manage profile questions, consent settings, and tenant-specific registration details.</p>
                </div>
            </div>

            <div class="cf-section-tabs" id="cf-section-tabs"></div>

            <div class="cf-page-content" id="cf-page-content" hidden>
                <section class="cf-card" id="cf-section-feature" data-cf-section="feature">
                    <div class="cf-card-header cf-card-header-inline">
                        <div>
                            <h2 class="cf-card-title">Enable Custom Fields</h2>
                            <p class="cf-card-description">
                                By enabling this feature, you will be able to gather more information about your customers.
                                This creates an additional step during your checkout or customer flow.
                            </p>
                            <button type="button" class="cf-link-button" id="cf-read-more-btn">Read more</button>
                            <p class="cf-read-more-copy" id="cf-read-more-copy" hidden>
                                Custom profile fields appear in the user account flow for the active tenant. You can enable
                                system fields, define consent language, and create additional text, dropdown, or checkbox questions.
                            </p>
                        </div>
                        <div class="cf-inline-toggle" id="cf-feature-toggle"></div>
                    </div>
                </section>

                <section class="cf-card" id="cf-section-predefined" data-cf-section="predefined">
                    <div class="cf-card-header">
                        <div>
                            <h2 class="cf-card-title">Pre-defined Profile Fields</h2>
                            <p class="cf-card-description">Control which default profile inputs appear and which ones are mandatory.</p>
                        </div>
                    </div>
                    <div class="cf-table-wrap">
                        <table class="cf-table">
                            <thead>
                                <tr>
                                    <th>Field</th>
                                    <th>Enabled</th>
                                    <th>Mark as Required</th>
                                </tr>
                            </thead>
                            <tbody id="cf-predefined-table-body"></tbody>
                        </table>
                    </div>
                </section>

                <section class="cf-card" id="cf-section-consent" data-cf-section="consent">
                    <div class="cf-card-header">
                        <div>
                            <h2 class="cf-card-title">Consent Fields</h2>
                            <p class="cf-card-description">Configure consent copy, default state, and consent versioning for the tenant.</p>
                        </div>
                    </div>
                    <div class="cf-table-wrap">
                        <table class="cf-table">
                            <thead>
                                <tr>
                                    <th>Field</th>
                                    <th>Details</th>
                                    <th>Enabled</th>
                                    <th>Checked by Default</th>
                                    <th class="cf-actions-col">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="cf-consent-table-body"></tbody>
                        </table>
                    </div>
                </section>

                <section class="cf-card" id="cf-section-custom" data-cf-section="custom">
                    <div class="cf-card-header cf-card-header-inline">
                        <div>
                            <h2 class="cf-card-title">Custom Profile Fields</h2>
                            <p class="cf-card-description">Create tenant-specific questions and define how the answers should be collected.</p>
                        </div>
                        <button type="button" class="cf-primary-button" id="cf-add-question-btn">+ Add question</button>
                    </div>
                    <div class="cf-table-wrap">
                        <table class="cf-table">
                            <thead>
                                <tr>
                                    <th>Question</th>
                                    <th>Answer Type</th>
                                    <th>Details</th>
                                    <th>Enabled</th>
                                    <th>Mark as Required</th>
                                    <th class="cf-actions-col">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="cf-custom-fields-table-body"></tbody>
                        </table>
                    </div>
                </section>

                <div class="cf-footer-bar">
                    <button type="button" class="cf-primary-button" id="cf-save-settings-btn" disabled>Save</button>
                </div>
            </div>
        </div>

        <div class="cf-modal-backdrop" id="cf-field-modal" hidden>
            <div class="cf-modal">
                <div class="cf-modal-header">
                    <h3 id="cf-field-modal-title">Create Custom Field</h3>
                    <button type="button" class="cf-icon-button" data-close-modal="cf-field-modal" aria-label="Close">×</button>
                </div>
                <div class="cf-modal-body" id="cf-field-form">
                    <input type="hidden" id="cf-field-id" value="">
                    <div class="cf-form-grid">
                        <label class="cf-field">
                            <span>Question</span>
                            <input type="text" id="cf-field-question" maxlength="255" placeholder="Which option do you prefer?">
                            <small class="cf-field-error" data-error-for="question"></small>
                        </label>

                        <div class="cf-inline-fields">
                            <div class="cf-field">
                                <span>Enabled</span>
                                <div class="cf-inline-toggle" id="cf-field-enabled-toggle"></div>
                                <small class="cf-field-error" data-error-for="is_enabled"></small>
                            </div>
                            <div class="cf-field">
                                <span>Mark as Required</span>
                                <div class="cf-inline-toggle" id="cf-field-required-toggle"></div>
                                <small class="cf-field-error" data-error-for="is_required"></small>
                            </div>
                        </div>

                        <label class="cf-field">
                            <span>Type</span>
                            <select id="cf-field-type">
                                <option value="text">Text</option>
                                <option value="dropdown">Dropdown</option>
                                <option value="checkbox">Checkbox</option>
                            </select>
                            <small class="cf-field-error" data-error-for="field_type"></small>
                        </label>

                        <label class="cf-field">
                            <span>Placeholder</span>
                            <input type="text" id="cf-field-placeholder" maxlength="255" placeholder="Enter placeholder text">
                            <small class="cf-field-error" data-error-for="placeholder"></small>
                        </label>

                        <div class="cf-field" id="cf-field-options-block" hidden>
                            <div class="cf-options-header">
                                <span>Options</span>
                                <button type="button" class="cf-secondary-button" id="cf-add-option-btn">Add option</button>
                            </div>
                            <div class="cf-options-list" id="cf-options-list"></div>
                            <small class="cf-field-error" data-error-for="field_options"></small>
                        </div>
                    </div>

                    <div class="cf-modal-footer">
                        <button type="button" class="cf-secondary-button" data-close-modal="cf-field-modal">Cancel</button>
                        <button type="button" class="cf-primary-button" id="cf-field-submit-btn">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="cf-modal-backdrop" id="cf-consent-modal" hidden>
            <div class="cf-modal">
                <div class="cf-modal-header">
                    <h3 id="cf-consent-modal-title">Edit Consent Details</h3>
                    <button type="button" class="cf-icon-button" data-close-modal="cf-consent-modal" aria-label="Close">×</button>
                </div>
                <div class="cf-modal-body" id="cf-consent-form">
                    <input type="hidden" id="cf-consent-id" value="">
                    <label class="cf-field">
                        <span>Display Text</span>
                        <textarea id="cf-consent-display-text" rows="4" placeholder="Enter consent copy"></textarea>
                        <small class="cf-field-error" data-consent-error-for="display_text"></small>
                    </label>
                    <label class="cf-field">
                        <span>Consent Version</span>
                        <input type="number" id="cf-consent-version" min="1" step="1">
                        <small class="cf-field-error" data-consent-error-for="consent_version"></small>
                    </label>
                    <div class="cf-modal-footer">
                        <button type="button" class="cf-secondary-button" data-close-modal="cf-consent-modal">Cancel</button>
                        <button type="button" class="cf-primary-button" id="cf-consent-submit-btn">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="cf-modal-backdrop" id="cf-delete-modal" hidden>
            <div class="cf-modal cf-modal-sm">
                <div class="cf-modal-header">
                    <h3>Delete Custom Field</h3>
                    <button type="button" class="cf-icon-button" data-close-modal="cf-delete-modal" aria-label="Close">×</button>
                </div>
                <div class="cf-modal-body">
                    <p class="cf-delete-copy">This will permanently remove <strong id="cf-delete-label"></strong>.</p>
                    <div class="cf-modal-footer">
                        <button type="button" class="cf-secondary-button" data-close-modal="cf-delete-modal">Cancel</button>
                        <button type="button" class="cf-danger-button" id="cf-confirm-delete-btn">Delete</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="cf-modal-backdrop" id="cf-feature-enable-modal" hidden>
            <div class="cf-modal cf-modal-sm">
                <div class="cf-modal-header">
                    <h3 id="cf-feature-toggle-modal-title">Are you sure you want to enable custom fields?</h3>
                    <button type="button" class="cf-icon-button" data-close-modal="cf-feature-enable-modal" aria-label="Close">×</button>
                </div>
                <div class="cf-modal-body">
                    <p class="cf-delete-copy" id="cf-feature-toggle-modal-copy">
                        Enabling custom fields will create an additional step in your checkout or customer flow.
                        Hosted Customer Flows will display custom fields in the User Account widget.
                    </p>
                    <div class="cf-modal-footer">
                        <button type="button" class="cf-secondary-button" data-close-modal="cf-feature-enable-modal">Cancel</button>
                        <button type="button" class="cf-primary-button" id="cf-confirm-feature-enable-btn">Turn on</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="cf-floating-action-menu" id="cf-floating-action-menu" hidden></div>
    </div>
</x-filament-panels::page>

@push('styles')
        <link rel="stylesheet" href="{{ asset('css/loaders.css') }}">
        <style>
        #custom-fields-page-root {
            margin-top: 0px !important;
            margin-right: 12px !important;
            margin-bottom: 0px !important;
            margin-left: 15px !important;
        }
        .cf-page {
            --cf-sticky-offset: 88px;
            --cf-core-black-700: #374151;
            --cf-core-black-800: #1f2937;
            --cf-core-black-900: #111827;
            color: #111827;
        }

        .cf-page-header {
            margin-bottom: 1rem;
        }

        .cf-page-title {
            margin: 0;
            font-size: 1.875rem;
            font-weight: 700;
            line-height: 1.1;
            /* letter-spacing: -0.02em; */
        }

        .cf-page-subtitle {
            margin: 0.35rem 0 0;
            color: #6b7280;
            font-size: 0.95rem;
        }

        .cf-section-tabs {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            overflow-x: auto;
            position: sticky;
            top: var(--cf-sticky-offset);
            z-index: 25;
            padding: 0.375rem 0 0.75rem;
            margin-bottom: 1rem;
            background: linear-gradient(180deg, rgba(249, 250, 251, 0.98) 0%, rgba(249, 250, 251, 0.94) 82%, rgba(249, 250, 251, 0) 100%);
            backdrop-filter: blur(10px);
            scrollbar-width: none;
        }

        .cf-section-tabs::-webkit-scrollbar {
            display: none;
        }

        .cf-section-tab-button {
            border: 1px solid transparent;
            background: #f3f3f6;
            color: #6b7280;
            min-height: 2.5rem;
            padding: 0 1rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 1.2;
            cursor: pointer;
            transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
        }

        .cf-section-tab-button:hover {
            background: #eceff4;
            color: #1f2937;
        }

        .cf-section-tab-button:focus-visible {
            outline: none;
            border-color: #dbe4f0;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        }

        .cf-section-tab-button.is-active {
            background: #ffffff;
            color: #111827;
            border-color: #e5e7eb;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
        }

        .cf-section-tab-icon {
            width: 1rem;
            height: 1rem;
            display: block;
            flex: 0 0 auto;
            color: inherit;
        }

        .cf-page-content[hidden],
        .cf-read-more-copy[hidden],
        .cf-modal-backdrop[hidden],
        .cf-floating-action-menu[hidden],
        #cf-field-options-block[hidden] {
            display: none !important;
        }

        .cf-page-content {
            display: grid;
            gap: 1.25rem;
        }

        .cf-card {
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 1.1rem;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
            overflow: visible;
            scroll-margin-top: 168px;
        }

        .cf-card-header {
            padding: 1.35rem 1.5rem 0;
        }

        .cf-card-header-inline {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
        }

        .cf-card-title {
            margin: 0;
            font-size: 1.15rem;
            font-weight: 700;
            line-height: 1.3;
        }

        .cf-card-description {
            margin: 0.45rem 0 0;
            color: #6b7280;
            font-size: 0.92rem;
            line-height: 1.55;
            max-width: 68rem;
        }

        .cf-read-more-copy {
            margin: 0.75rem 0 0;
            color: #4b5563;
            font-size: 0.88rem;
            line-height: 1.6;
            max-width: 50rem;
        }

        .cf-table-wrap {
            padding: 1rem 1.5rem 1.5rem;
            overflow-x: auto;
            overflow-y: visible;
        }

        .cf-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            min-width: 860px;
            border: 1px solid #edf0f3;
            border-radius: 1rem;
            overflow: visible;
        }

        .cf-table th,
        .cf-table td {
            text-align: left;
            vertical-align: middle;
            padding: 1rem 1rem;
            border-bottom: 1px solid #edf0f3;
            background: #ffffff;
            font-size: 0.92rem;
        }

        .cf-table th {
            color: #6b7280;
            font-weight: 700;
            font-size: 0.82rem;
            text-transform: none;
            background: #fbfcfd;
        }

        .cf-table tr:last-child td {
            border-bottom: 0;
        }

        .cf-row-title {
            font-weight: 600;
            color: #111827;
        }

        .cf-row-detail {
            color: #6b7280;
            font-size: 0.84rem;
            line-height: 1.45;
            max-width: 26rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .cf-inline-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem;
            border-radius: 0.8rem;
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            min-width: 8.4rem;
        }

        .cf-toggle-button {
            flex: 1 1 0;
            border: 0;
            background: transparent;
            color: #374151;
            border-radius: 0.65rem;
            font-size: 0.84rem;
            font-weight: 700;
            padding: 0.52rem 0.8rem;
            cursor: pointer;
            transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
        }

        .cf-toggle-button.is-active {
            background: var(--cf-core-black-900);
            color: #ffffff;
            box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.2), 0 1px 2px rgba(17, 24, 39, 0.14);
        }

        .cf-toggle-button.is-muted-active {
            background: var(--cf-core-black-800);
            color: #ffffff;
            box-shadow: inset 0 0 0 1px rgba(31, 41, 55, 0.22), 0 1px 2px rgba(31, 41, 55, 0.14);
        }

        .cf-toggle-button:disabled {
            cursor: wait;
            opacity: 0.7;
        }

        .cf-actions-col {
            width: 5rem;
            text-align: center;
        }

        .cf-actions {
            position: relative;
            display: inline-flex;
            justify-content: center;
            width: 100%;
        }

        .cf-icon-button,
        .cf-action-trigger {
            border: 1px solid #d8e0e7;
            background: #ffffff;
            color: #4b5563;
            border-radius: 0.8rem;
            width: 2.4rem;
            height: 2.4rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
        }

        .cf-action-trigger:hover,
        .cf-icon-button:hover {
            background: #f9fafb;
            border-color: #cbd5e1;
            color: #111827;
        }

        .cf-action-menu {
            position: absolute;
            right: 0;
            top: calc(100% + 0.35rem);
            min-width: 8.5rem;
            padding: 0.4rem;
            border-radius: 0.9rem;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            box-shadow: 0 20px 32px rgba(15, 23, 42, 0.12);
            display: none;
            z-index: 20;
        }

        .cf-action-item {
            width: 100%;
            border: 0;
            background: transparent;
            text-align: left;
            padding: 0.65rem 0.75rem;
            border-radius: 0.7rem;
            font-size: 0.88rem;
            font-weight: 600;
            color: #111827;
            cursor: pointer;
        }

        .cf-action-item:hover {
            background: #f3f4f6;
        }

        .cf-action-item.is-danger {
            color: #dc2626;
        }

        .cf-floating-action-menu {
            position: fixed;
            min-width: 8.5rem;
            padding: 0.4rem;
            border-radius: 0.9rem;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            box-shadow: 0 20px 32px rgba(15, 23, 42, 0.12);
            display: grid;
            gap: 0.2rem;
            z-index: 1300;
        }

        .cf-primary-button,
        .cf-secondary-button,
        .cf-danger-button,
        .cf-link-button {
            border: 0;
            cursor: pointer;
            font-weight: 700;
            transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
        }

        .cf-primary-button,
        .cf-danger-button,
        .cf-secondary-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            min-height: 2.7rem;
            padding: 0.72rem 1.15rem;
            border-radius: 0.85rem;
            font-size: 0.92rem;
        }

        .cf-primary-button {
            background: var(--cf-core-black-900);
            color: #ffffff;
            box-shadow: 0 10px 22px rgba(17, 24, 39, 0.18);
        }

        .cf-primary-button:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            box-shadow: none;
        }

        .cf-secondary-button {
            background: #f3f4f6;
            color: #111827;
        }

        .cf-danger-button {
            background: #ef4444;
            color: #ffffff;
        }

        .cf-link-button {
            margin-top: 0.8rem;
            padding: 0;
            background: transparent;
            color: var(--cf-core-black-900);
            font-size: 0.9rem;
        }

        .cf-footer-bar {
            display: flex;
            justify-content: flex-end;
            padding: 0.1rem 0.1rem 0;
        }

        .cf-modal-backdrop {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(15, 23, 42, 0.45);
            padding: 1.25rem;
            z-index: 1200;
        }

        .cf-modal {
            width: min(100%, 38rem);
            background: #ffffff;
            border-radius: 1.2rem;
            border: 1px solid rgba(229, 231, 235, 0.9);
            box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
            overflow: hidden;
        }

        .cf-modal-sm {
            width: min(100%, 26rem);
        }

        .cf-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.15rem 1.35rem;
            border-bottom: 1px solid #edf0f3;
        }

        .cf-modal-header h3 {
            margin: 0;
            font-size: 1.08rem;
            font-weight: 700;
        }

        .cf-modal-body {
            padding: 1.3rem 1.35rem 1.4rem;
        }

        .cf-form-grid {
            display: grid;
            gap: 1rem;
        }

        .cf-inline-fields {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .cf-field {
            display: grid;
            gap: 0.45rem;
            color: #374151;
            font-size: 0.9rem;
            font-weight: 600;
        }

        .cf-field input,
        .cf-field select,
        .cf-field textarea {
            width: 100%;
            border: 1px solid #d6dde5;
            border-radius: 0.85rem;
            background: #ffffff;
            color: #111827;
            font-size: 0.94rem;
            font-weight: 500;
            padding: 0.78rem 0.9rem;
            outline: none;
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }

        .cf-field input:focus,
        .cf-field select:focus,
        .cf-field textarea:focus {
            border-color: var(--cf-core-black-900);
            box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.12);
        }

        .cf-field textarea {
            resize: vertical;
            min-height: 8rem;
        }

        .cf-field-error {
            color: #dc2626;
            min-height: 1rem;
            font-size: 0.78rem;
            font-weight: 600;
        }

        .cf-options-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .cf-options-list {
            display: grid;
            gap: 0.65rem;
        }

        .cf-option-row {
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        .cf-option-row input {
            flex: 1 1 auto;
        }

        .cf-option-remove {
            flex: 0 0 auto;
            width: 2.5rem;
            height: 2.5rem;
            border: 1px solid #f3c4c4;
            background: #fef2f2;
            color: #dc2626;
            border-radius: 0.85rem;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 700;
        }

        .cf-modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1.3rem;
        }

        .cf-delete-copy {
            margin: 0;
            color: #4b5563;
            line-height: 1.6;
        }

        .cf-empty-state {
            padding: 1.5rem 1rem;
            text-align: center;
            color: #6b7280;
            font-size: 0.92rem;
        }

        .cf-spinner {
            width: 1rem;
            height: 1rem;
            border-radius: 999px;
            border: 2px solid rgba(17, 24, 39, 0.18);
            border-top-color: #111827;
            animation: cf-spin 0.85s linear infinite;
        }

        .cf-button-loading {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        @keyframes cf-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @media (max-width: 860px) {
            .cf-page {
                --cf-sticky-offset: 80px;
            }

            .cf-section-tabs {
                gap: 0.625rem;
                padding-bottom: 0.375rem;
            }

            .cf-section-tab-button {
                min-height: 2.375rem;
                padding: 0 0.875rem;
            }

            .cf-card-header-inline {
                flex-direction: column;
                align-items: stretch;
            }

            .cf-inline-fields {
                grid-template-columns: 1fr;
            }

            .cf-footer-bar {
                justify-content: stretch;
            }

            .cf-footer-bar .cf-primary-button {
                width: 100%;
            }

            .cf-modal-footer {
                flex-direction: column-reverse;
            }

            .cf-modal-footer button {
                width: 100%;
            }
        }
        </style>
@endpush

@push('scripts')
        <script>
        (function () {
            const root = document.getElementById('custom-fields-page');

            if (!root || root.dataset.cfReady === 'true') {
                return;
            }

            root.dataset.cfReady = 'true';

            const endpoints = JSON.parse(root.dataset.endpoints || '{}');
            const sectionTabs = [
                { key: 'feature', label: 'Enable Fields', targetId: 'cf-section-feature' },
                { key: 'predefined', label: 'Pre-defined Fields', targetId: 'cf-section-predefined' },
                { key: 'consent', label: 'Consent Fields', targetId: 'cf-section-consent' },
                { key: 'custom', label: 'Custom Profile Fields', targetId: 'cf-section-custom' },
            ];
            const state = {
                loaded: false,
                activeSection: 'feature',
                featureEnabled: false,
                predefinedFields: [],
                consentFields: [],
                customFields: [],
                settingsDirty: false,
                fieldModal: {
                    mode: 'create',
                    enabled: true,
                    required: false,
                    placeholder: '',
                    options: [],
                },
                pendingFeatureEnabled: null,
                deletingField: null,
            };

            const refs = {
                loader: document.getElementById('cf-page-loader'),
                sectionTabs: document.getElementById('cf-section-tabs'),
                content: document.getElementById('cf-page-content'),
                readMoreButton: document.getElementById('cf-read-more-btn'),
                readMoreCopy: document.getElementById('cf-read-more-copy'),
                featureToggle: document.getElementById('cf-feature-toggle'),
                saveSettingsButton: document.getElementById('cf-save-settings-btn'),
                predefinedTableBody: document.getElementById('cf-predefined-table-body'),
                consentTableBody: document.getElementById('cf-consent-table-body'),
                customFieldsTableBody: document.getElementById('cf-custom-fields-table-body'),
                addQuestionButton: document.getElementById('cf-add-question-btn'),
                fieldModal: document.getElementById('cf-field-modal'),
                fieldModalTitle: document.getElementById('cf-field-modal-title'),
                fieldForm: document.getElementById('cf-field-form'),
                fieldId: document.getElementById('cf-field-id'),
                fieldQuestion: document.getElementById('cf-field-question'),
                fieldType: document.getElementById('cf-field-type'),
                fieldPlaceholder: document.getElementById('cf-field-placeholder'),
                fieldOptionsBlock: document.getElementById('cf-field-options-block'),
                fieldEnabledToggle: document.getElementById('cf-field-enabled-toggle'),
                fieldRequiredToggle: document.getElementById('cf-field-required-toggle'),
                fieldSubmitButton: document.getElementById('cf-field-submit-btn'),
                addOptionButton: document.getElementById('cf-add-option-btn'),
                optionsList: document.getElementById('cf-options-list'),
                consentModal: document.getElementById('cf-consent-modal'),
                consentForm: document.getElementById('cf-consent-form'),
                consentId: document.getElementById('cf-consent-id'),
                consentDisplayText: document.getElementById('cf-consent-display-text'),
                consentVersion: document.getElementById('cf-consent-version'),
                consentSubmitButton: document.getElementById('cf-consent-submit-btn'),
                deleteModal: document.getElementById('cf-delete-modal'),
                deleteLabel: document.getElementById('cf-delete-label'),
                confirmDeleteButton: document.getElementById('cf-confirm-delete-btn'),
                featureEnableModal: document.getElementById('cf-feature-enable-modal'),
                featureToggleModalTitle: document.getElementById('cf-feature-toggle-modal-title'),
                featureToggleModalCopy: document.getElementById('cf-feature-toggle-modal-copy'),
                confirmFeatureEnableButton: document.getElementById('cf-confirm-feature-enable-btn'),
                floatingActionMenu: document.getElementById('cf-floating-action-menu'),
            };

            function notify(message, type = 'success') {
                if (typeof window.showAppAlert === 'function') {
                    window.showAppAlert(message, type);
                    return;
                }

                window.alert(message);
            }

            function escapeHtml(value) {
                return String(value ?? '')
                    .replaceAll('&', '&amp;')
                    .replaceAll('<', '&lt;')
                    .replaceAll('>', '&gt;')
                    .replaceAll('"', '&quot;')
                    .replaceAll("'", '&#039;');
            }

            function firstError(errors) {
                if (!errors || typeof errors !== 'object') {
                    return null;
                }

                const firstKey = Object.keys(errors)[0];
                if (!firstKey || !Array.isArray(errors[firstKey]) || !errors[firstKey].length) {
                    return null;
                }

                return errors[firstKey][0];
            }

            function iconSectionFeature() {
                return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M6 3.75h8A2.25 2.25 0 0 1 16.25 6v8A2.25 2.25 0 0 1 14 16.25H6A2.25 2.25 0 0 1 3.75 14V6A2.25 2.25 0 0 1 6 3.75Z" stroke="currentColor" stroke-width="1.5"></path><path d="M7 10h6M10 7v6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>';
            }

            function iconSectionPredefined() {
                return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2" stroke="currentColor" stroke-width="1.5"></rect><path d="M6.5 8h7M6.5 11.25h7M6.5 14.5h4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>';
            }

            function iconSectionConsent() {
                return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 16.25s-4.75-2.8-4.75-7.25V5.75L10 3.75l4.75 2v3.25c0 4.45-4.75 7.25-4.75 7.25Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path><path d="m8.2 10 1.2 1.2 2.4-2.65" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
            }

            function iconSectionCustom() {
                return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m4.5 13.5 7.75-7.75a1.5 1.5 0 0 1 2.12 0l.88.88a1.5 1.5 0 0 1 0 2.12L7.5 16.5H4.5v-3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path><path d="M11.75 6.25 13.75 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>';
            }

            function sectionTabIcon(key) {
                return ({
                    feature: iconSectionFeature(),
                    predefined: iconSectionPredefined(),
                    consent: iconSectionConsent(),
                    custom: iconSectionCustom(),
                })[key] || iconSectionFeature();
            }

            function getSectionScrollOffset() {
                const stickyTop = refs.sectionTabs ? (parseFloat(window.getComputedStyle(refs.sectionTabs).top) || 88) : 88;
                const tabsHeight = refs.sectionTabs ? refs.sectionTabs.getBoundingClientRect().height : 0;

                return stickyTop + tabsHeight + 16;
            }

            function scrollToSection(targetId) {
                const element = document.getElementById(targetId);
                if (!element) {
                    return;
                }

                const top = element.getBoundingClientRect().top + window.scrollY - getSectionScrollOffset();
                window.scrollTo({
                    top: Math.max(0, top),
                    behavior: 'smooth',
                });
            }

            function syncActiveSectionFromScroll() {
                let nextActive = sectionTabs[0]?.key || 'feature';
                const activationLine = getSectionScrollOffset() + 24;

                sectionTabs.forEach(function (tab) {
                    const element = document.getElementById(tab.targetId);
                    if (!element) {
                        return;
                    }

                    if (element.getBoundingClientRect().top <= activationLine) {
                        nextActive = tab.key;
                    }
                });

                if (state.activeSection !== nextActive) {
                    state.activeSection = nextActive;
                    renderSectionTabs();
                }
            }

            function renderSectionTabs() {
                if (!refs.sectionTabs) {
                    return;
                }

                refs.sectionTabs.innerHTML = '';

                sectionTabs.forEach(function (tab) {
                    const button = document.createElement('button');
                    button.type = 'button';
                    button.className = 'cf-section-tab-button' + (tab.key === state.activeSection ? ' is-active' : '');
                    button.setAttribute('aria-pressed', tab.key === state.activeSection ? 'true' : 'false');
                    button.innerHTML = '<span class="cf-section-tab-icon">' + sectionTabIcon(tab.key) + '</span><span>' + escapeHtml(tab.label) + '</span>';
                    button.addEventListener('click', function () {
                        state.activeSection = tab.key;
                        renderSectionTabs();
                        scrollToSection(tab.targetId);
                    });
                    refs.sectionTabs.appendChild(button);
                });
            }

            function setButtonLoading(button, isLoading, label) {
                if (!button) {
                    return;
                }

                if (!button.dataset.defaultLabel) {
                    button.dataset.defaultLabel = button.textContent.trim();
                }

                button.disabled = isLoading || (button.id === 'cf-save-settings-btn' && !state.settingsDirty);

                if (isLoading) {
                    button.innerHTML = `<span class="cf-button-loading"><span class="cf-spinner" aria-hidden="true"></span><span>${escapeHtml(label)}</span></span>`;
                    return;
                }

                button.textContent = button.dataset.defaultLabel;
            }

            let pageLoaderShownAt = 0;

            function showAjaxLoader(message) {
                const loaderText = document.getElementById('cf-page-loader-text');
                if (loaderText && message) {
                    loaderText.textContent = message;
                }

                if (refs.loader) {
                    refs.loader.style.display = 'flex';
                    refs.loader.classList.add('show-loader');
                    pageLoaderShownAt = Date.now();
                }
            }

            function hideAjaxLoader() {
                if (!refs.loader) {
                    return;
                }

                const minVisibleMs = 300;
                const elapsed = Date.now() - pageLoaderShownAt;
                const remaining = Math.max(0, minVisibleMs - elapsed);

                window.setTimeout(function () {
                    refs.loader.style.display = 'none';
                    refs.loader.classList.remove('show-loader');
                }, remaining);
            }

            function setPageLoading(isLoading, message = 'Loading custom fields...') {
                if (isLoading) {
                    showAjaxLoader(message);
                    if (!state.loaded) {
                        refs.content.hidden = true;
                    }
                    return;
                }

                hideAjaxLoader();
                refs.content.hidden = false;
            }

            function request(url, method = 'GET', payload = null) {
                const headers = {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                };

                const options = {
                    method,
                    cache: 'no-store',
                    credentials: 'same-origin',
                    headers,
                };

                if (payload !== null) {
                    headers['Content-Type'] = 'application/json';
                    headers['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
                    options.body = JSON.stringify(payload);
                }

                const requester = (window.SMSApi && typeof window.SMSApi.fetchJson === 'function')
                    ? window.SMSApi.fetchJson(url, options, {
                        auth: 'if-available',
                        retryOn401: false,
                    })
                    : fetch(url, options).then(async (response) => {
                        const data = await response.json().catch(() => ({}));

                        if (!response.ok || data.success === false) {
                            const error = new Error(data.message || 'Request failed.');
                            error.payload = data;
                            throw error;
                        }

                        return data;
                    });

                return Promise.resolve(requester).then(function (data) {
                    if (!data || data.success === false) {
                        const error = new Error(data?.message || 'Request failed.');
                        error.payload = data;
                        throw error;
                    }

                    return data;
                });
            }

            function markSettingsDirty(isDirty = true) {
                state.settingsDirty = isDirty;
                refs.saveSettingsButton.disabled = !isDirty;
            }

            function renderToggle(target, value, labels, onChange, mode = 'primary') {
                if (!target) {
                    return;
                }

                target.innerHTML = '';

                labels.forEach((label, index) => {
                    const button = document.createElement('button');
                    button.type = 'button';
                    button.className = 'cf-toggle-button';
                    button.textContent = label;

                    const shouldBeActive = index === 0 ? Boolean(value) : !Boolean(value);

                    if (shouldBeActive) {
                        button.classList.add('is-active');

                        if (mode === 'dark') {
                            button.classList.add('is-muted-active');
                        }
                    }

                    button.addEventListener('click', function () {
                        onChange(index === 0);
                    });

                    target.appendChild(button);
                });
            }

            function renderFeatureToggle() {
                renderToggle(refs.featureToggle, state.featureEnabled, ['On', 'Off'], function (nextValue) {
                    if (nextValue === state.featureEnabled) {
                        return;
                    }

                    openFeatureToggleModal(nextValue);
                });
            }

            function renderPredefinedTable() {
                if (!state.predefinedFields.length) {
                    refs.predefinedTableBody.innerHTML = '<tr><td colspan="3" class="cf-empty-state">No predefined fields available.</td></tr>';
                    return;
                }

                refs.predefinedTableBody.innerHTML = '';

                state.predefinedFields.forEach((field) => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td><div class="cf-row-title">${escapeHtml(field.field_name)}</div></td>
                        <td><div class="cf-inline-toggle" data-role="enabled"></div></td>
                        <td><div class="cf-inline-toggle" data-role="required"></div></td>
                    `;

                    renderToggle(row.querySelector('[data-role="enabled"]'), field.is_enabled, ['Yes', 'No'], function (nextValue) {
                        field.is_enabled = nextValue;

                        if (!nextValue) {
                            field.is_required = false;
                        }

                        renderPredefinedTable();
                        markSettingsDirty(true);
                    });

                    renderToggle(row.querySelector('[data-role="required"]'), field.is_required, ['Yes', 'No'], function (nextValue) {
                        field.is_required = nextValue;

                        if (nextValue) {
                            field.is_enabled = true;
                        }

                        renderPredefinedTable();
                        markSettingsDirty(true);
                    }, 'dark');

                    refs.predefinedTableBody.appendChild(row);
                });
            }

            function consentDetails(field) {
                const detail = field.display_text || 'No details configured.';
                return `${detail}${field.consent_version ? ' Consent version: ' + field.consent_version : ''}`;
            }

            function openFloatingActionMenu(trigger, items) {
                if (!trigger || !Array.isArray(items) || !items.length) {
                    return;
                }

                const menu = refs.floatingActionMenu;

                if (!trigger.dataset.menuTriggerId) {
                    trigger.dataset.menuTriggerId = `menu-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
                }

                const sameTrigger = menu.dataset.triggerId === trigger.dataset.menuTriggerId;

                if (!menu.hidden && sameTrigger) {
                    closeActionMenus();
                    return;
                }

                closeActionMenus();

                menu.innerHTML = '';

                items.forEach(function (item) {
                    const button = document.createElement('button');
                    button.type = 'button';
                    button.className = `cf-action-item${item.danger ? ' is-danger' : ''}`;
                    button.textContent = item.label;
                    button.addEventListener('click', function (event) {
                        event.stopPropagation();
                        closeActionMenus();
                        item.onClick();
                    });
                    menu.appendChild(button);
                });

                menu.dataset.triggerId = trigger.dataset.menuTriggerId;
                menu.hidden = false;

                requestAnimationFrame(function () {
                    const triggerRect = trigger.getBoundingClientRect();
                    const menuRect = menu.getBoundingClientRect();
                    const viewportPadding = 16;
                    const openUpward = triggerRect.bottom + 8 + menuRect.height > window.innerHeight - viewportPadding;

                    let top = openUpward
                        ? triggerRect.top - menuRect.height - 8
                        : triggerRect.bottom + 8;

                    let left = triggerRect.right - menuRect.width;

                    top = Math.max(viewportPadding, Math.min(top, window.innerHeight - menuRect.height - viewportPadding));
                    left = Math.max(viewportPadding, Math.min(left, window.innerWidth - menuRect.width - viewportPadding));

                    menu.style.top = `${top}px`;
                    menu.style.left = `${left}px`;
                });
            }

            function closeActionMenus() {
                refs.floatingActionMenu.hidden = true;
                refs.floatingActionMenu.innerHTML = '';
                refs.floatingActionMenu.dataset.triggerId = '';
            }

            function renderConsentTable() {
                if (!state.consentFields.length) {
                    refs.consentTableBody.innerHTML = '<tr><td colspan="5" class="cf-empty-state">No consent fields configured.</td></tr>';
                    return;
                }

                refs.consentTableBody.innerHTML = '';

                state.consentFields.forEach((field) => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td><div class="cf-row-title">${escapeHtml(field.field_name)}</div></td>
                        <td><div class="cf-row-detail">${escapeHtml(consentDetails(field))}</div></td>
                        <td><div class="cf-inline-toggle" data-role="enabled"></div></td>
                        <td><div class="cf-inline-toggle" data-role="default"></div></td>
                        <td class="cf-actions-col">
                            <div class="cf-actions">
                                <button type="button" class="cf-action-trigger" aria-label="Actions">⋮</button>
                            </div>
                        </td>
                    `;

                    const enabledToggle = row.querySelector('[data-role="enabled"]');
                    const defaultToggle = row.querySelector('[data-role="default"]');

                    renderToggle(enabledToggle, field.is_enabled, ['Yes', 'No'], function (nextValue) {
                        updateConsentField(field.id, { is_enabled: nextValue }, enabledToggle);
                    });

                    renderToggle(defaultToggle, field.is_checked_by_default, ['Yes', 'No'], function (nextValue) {
                        updateConsentField(field.id, { is_checked_by_default: nextValue }, defaultToggle);
                    }, 'dark');

                    const trigger = row.querySelector('.cf-action-trigger');

                    trigger.addEventListener('click', function (event) {
                        event.stopPropagation();
                        openFloatingActionMenu(trigger, [
                            {
                                label: 'Edit',
                                onClick: function () {
                                    openConsentModal(field);
                                },
                            },
                        ]);
                    });

                    refs.consentTableBody.appendChild(row);
                });
            }

            function customFieldDetails(field) {
                if (field.field_type === 'text') {
                    return field.placeholder
                        ? `Free text response | Placeholder: ${field.placeholder}`
                        : 'Free text response';
                }

                if (!Array.isArray(field.field_options) || !field.field_options.length) {
                    return 'No options configured';
                }

                return field.field_options.join(', ');
            }

            function renderCustomFieldsTable() {
                if (!state.customFields.length) {
                    refs.customFieldsTableBody.innerHTML = '<tr><td colspan="6" class="cf-empty-state">No custom profile fields created yet.</td></tr>';
                    return;
                }

                refs.customFieldsTableBody.innerHTML = '';

                state.customFields.forEach((field) => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td><div class="cf-row-title">${escapeHtml(field.question)}</div></td>
                        <td>${escapeHtml(field.field_type_label)}</td>
                        <td><div class="cf-row-detail">${escapeHtml(customFieldDetails(field))}</div></td>
                        <td><div class="cf-inline-toggle" data-role="enabled"></div></td>
                        <td><div class="cf-inline-toggle" data-role="required"></div></td>
                        <td class="cf-actions-col">
                            <div class="cf-actions">
                                <button type="button" class="cf-action-trigger" aria-label="Actions">⋮</button>
                            </div>
                        </td>
                    `;

                    const enabledToggle = row.querySelector('[data-role="enabled"]');
                    const requiredToggle = row.querySelector('[data-role="required"]');

                    renderToggle(enabledToggle, field.is_enabled, ['Yes', 'No'], function () {
                        toggleCustomField(field.id, endpoints.toggleStatus, enabledToggle);
                    });

                    renderToggle(requiredToggle, field.is_required, ['Yes', 'No'], function () {
                        toggleCustomField(field.id, endpoints.toggleRequired, requiredToggle);
                    }, 'dark');

                    const trigger = row.querySelector('.cf-action-trigger');

                    trigger.addEventListener('click', function (event) {
                        event.stopPropagation();
                        openFloatingActionMenu(trigger, [
                            {
                                label: 'Edit',
                                onClick: function () {
                                    openFieldModal('edit', field);
                                },
                            },
                            {
                                label: 'Delete',
                                danger: true,
                                onClick: function () {
                                    openDeleteModal(field);
                                },
                            },
                        ]);
                    });

                    refs.customFieldsTableBody.appendChild(row);
                });
            }

            function clearFieldErrors() {
                refs.fieldForm.querySelectorAll('[data-error-for]').forEach((element) => {
                    element.textContent = '';
                });
            }

            function setFieldErrors(errors) {
                clearFieldErrors();

                if (!errors || typeof errors !== 'object') {
                    return;
                }

                Object.keys(errors).forEach((key) => {
                    const target = refs.fieldForm.querySelector(`[data-error-for="${key}"]`);

                    if (target && Array.isArray(errors[key]) && errors[key].length) {
                        target.textContent = errors[key][0];
                    }
                });
            }

            function clearConsentErrors() {
                refs.consentForm.querySelectorAll('[data-consent-error-for]').forEach((element) => {
                    element.textContent = '';
                });
            }

            function setConsentErrors(errors) {
                clearConsentErrors();

                if (!errors || typeof errors !== 'object') {
                    return;
                }

                Object.keys(errors).forEach((key) => {
                    const target = refs.consentForm.querySelector(`[data-consent-error-for="${key}"]`);

                    if (target && Array.isArray(errors[key]) && errors[key].length) {
                        target.textContent = errors[key][0];
                    }
                });
            }

            function openModal(modal) {
                if (!modal) {
                    return;
                }

                modal.hidden = false;
                document.body.style.overflow = 'hidden';
            }

            function closeModal(modal) {
                if (!modal) {
                    return;
                }

                modal.hidden = true;

                if (modal === refs.featureEnableModal) {
                    state.pendingFeatureEnabled = null;
                }

                if (!document.querySelector('.cf-modal-backdrop:not([hidden])')) {
                    document.body.style.overflow = '';
                }
            }

            function openFeatureToggleModal(nextValue) {
                state.pendingFeatureEnabled = Boolean(nextValue);

                if (state.pendingFeatureEnabled) {
                    refs.featureToggleModalTitle.textContent = 'Are you sure you want to enable custom fields?';
                    refs.featureToggleModalCopy.textContent = 'Enabling custom fields will create an additional step in your checkout or customer flow. Hosted Customer Flows will display custom fields in the User Account widget.';
                    refs.confirmFeatureEnableButton.dataset.defaultLabel = 'Turn on';
                } else {
                    refs.featureToggleModalTitle.textContent = 'Are you sure you want to disable custom fields?';
                    refs.featureToggleModalCopy.textContent = 'Disabling custom fields will hide tenant-specific profile questions from your checkout or customer flow after you save these settings.';
                    refs.confirmFeatureEnableButton.dataset.defaultLabel = 'Turn off';
                }

                refs.confirmFeatureEnableButton.textContent = refs.confirmFeatureEnableButton.dataset.defaultLabel;
                openModal(refs.featureEnableModal);
            }

            function confirmFeatureEnable() {
                if (state.pendingFeatureEnabled === null) {
                    closeModal(refs.featureEnableModal);
                    return;
                }

                const nextValue = Boolean(state.pendingFeatureEnabled);

                setButtonLoading(
                    refs.confirmFeatureEnableButton,
                    true,
                    nextValue ? 'Turning on...' : 'Turning off...'
                );

                request(endpoints.updateFeature, 'POST', {
                    feature_enabled: nextValue,
                })
                    .then(function (response) {
                        const payload = response.data || {};
                        state.featureEnabled = Boolean(payload.feature_enabled);
                        renderFeatureToggle();
                        closeModal(refs.featureEnableModal);
                        notify(response.message || 'Custom fields feature updated successfully.', 'success');
                    })
                    .catch(function (error) {
                        const message = error.payload?.message || firstError(error.payload?.errors) || error.message || 'Failed to update custom fields feature.';
                        notify(message, 'danger');
                    })
                    .finally(function () {
                        setButtonLoading(refs.confirmFeatureEnableButton, false);
                    });
            }

            function renderFieldModalToggles() {
                renderToggle(refs.fieldEnabledToggle, state.fieldModal.enabled, ['Yes', 'No'], function (nextValue) {
                    state.fieldModal.enabled = nextValue;
                    renderFieldModalToggles();
                });

                renderToggle(refs.fieldRequiredToggle, state.fieldModal.required, ['Yes', 'No'], function (nextValue) {
                    state.fieldModal.required = nextValue;
                    renderFieldModalToggles();
                }, 'dark');
            }

            function renderOptionsList() {
                refs.optionsList.innerHTML = '';

                if (!state.fieldModal.options.length) {
                    state.fieldModal.options.push('');
                }

                state.fieldModal.options.forEach((option, index) => {
                    const row = document.createElement('div');
                    row.className = 'cf-option-row';
                    row.innerHTML = `
                        <input type="text" value="${escapeHtml(option)}" placeholder="Option ${index + 1}">
                        <button type="button" class="cf-option-remove" aria-label="Remove option">×</button>
                    `;

                    const input = row.querySelector('input');
                    input.addEventListener('input', function () {
                        state.fieldModal.options[index] = input.value;
                    });

                    row.querySelector('.cf-option-remove').addEventListener('click', function () {
                        if (state.fieldModal.options.length === 1) {
                            state.fieldModal.options[0] = '';
                        } else {
                            state.fieldModal.options.splice(index, 1);
                        }

                        renderOptionsList();
                    });

                    refs.optionsList.appendChild(row);
                });
            }

            function updateFieldOptionsVisibility() {
                const showOptions = ['dropdown', 'checkbox'].includes(refs.fieldType.value);
                refs.fieldOptionsBlock.hidden = !showOptions;

                if (showOptions) {
                    renderOptionsList();
                }
            }

            function openFieldModal(mode, field = null) {
                clearFieldErrors();
                state.fieldModal.mode = mode;
                refs.fieldModalTitle.textContent = mode === 'create' ? 'Create Custom Field' : 'Edit Custom Field';
                refs.fieldSubmitButton.dataset.defaultLabel = mode === 'create' ? 'Save changes' : 'Update field';
                refs.fieldSubmitButton.textContent = refs.fieldSubmitButton.dataset.defaultLabel;

                if (mode === 'edit' && field) {
                    refs.fieldId.value = field.id;
                    refs.fieldQuestion.value = field.question;
                    refs.fieldType.value = field.field_type;
                    refs.fieldPlaceholder.value = field.placeholder || '';
                    state.fieldModal.enabled = Boolean(field.is_enabled);
                    state.fieldModal.required = Boolean(field.is_required);
                    state.fieldModal.placeholder = field.placeholder || '';
                    state.fieldModal.options = Array.isArray(field.field_options) ? [...field.field_options] : [];
                } else {
                    refs.fieldId.value = '';
                    refs.fieldQuestion.value = '';
                    refs.fieldType.value = 'text';
                    refs.fieldPlaceholder.value = '';
                    state.fieldModal.enabled = true;
                    state.fieldModal.required = false;
                    state.fieldModal.placeholder = '';
                    state.fieldModal.options = [''];
                }

                renderFieldModalToggles();
                updateFieldOptionsVisibility();
                openModal(refs.fieldModal);
            }

            function openConsentModal(field) {
                clearConsentErrors();
                refs.consentId.value = field.id;
                refs.consentDisplayText.value = field.display_text || '';
                refs.consentVersion.value = field.consent_version || 1;
                refs.consentSubmitButton.dataset.defaultLabel = 'Save changes';
                refs.consentSubmitButton.textContent = refs.consentSubmitButton.dataset.defaultLabel;
                openModal(refs.consentModal);
            }

            function openDeleteModal(field) {
                state.deletingField = field;
                refs.deleteLabel.textContent = field.question;
                refs.confirmDeleteButton.dataset.defaultLabel = 'Delete';
                refs.confirmDeleteButton.textContent = refs.confirmDeleteButton.dataset.defaultLabel;
                openModal(refs.deleteModal);
            }

            function refreshPageData() {
                return request(endpoints.data)
                    .then(function (response) {
                        const payload = response.data || {};
                        state.featureEnabled = Boolean(payload.feature_enabled);
                        state.predefinedFields = Array.isArray(payload.predefined_fields) ? payload.predefined_fields : [];
                        state.consentFields = Array.isArray(payload.consent_fields) ? payload.consent_fields : [];
                        state.customFields = Array.isArray(payload.custom_fields) ? payload.custom_fields : [];
                        state.loaded = true;
                        markSettingsDirty(false);
                        renderFeatureToggle();
                        renderPredefinedTable();
                        renderConsentTable();
                        renderCustomFieldsTable();
                    });
            }

            function saveSettings() {
                setButtonLoading(refs.saveSettingsButton, true, 'Saving...');

                request(endpoints.saveSettings, 'POST', {
                    feature_enabled: state.featureEnabled,
                    predefined_fields: state.predefinedFields.map(function (field) {
                        return {
                            id: field.id,
                            is_enabled: Boolean(field.is_enabled),
                            is_required: Boolean(field.is_required),
                            display_order: field.display_order,
                        };
                    }),
                })
                    .then(function (response) {
                        const payload = response.data || {};
                        state.featureEnabled = Boolean(payload.feature_enabled);
                        state.predefinedFields = Array.isArray(payload.predefined_fields) ? payload.predefined_fields : state.predefinedFields;
                        renderFeatureToggle();
                        renderPredefinedTable();
                        markSettingsDirty(false);
                        notify(response.message || 'Settings saved successfully.', 'success');
                    })
                    .catch(function (error) {
                        const message = error.payload?.message || firstError(error.payload?.errors) || error.message || 'Failed to save settings.';
                        notify(message, 'danger');
                    })
                    .finally(function () {
                        setButtonLoading(refs.saveSettingsButton, false);
                    });
            }

            function upsertCustomField(event) {
                event.preventDefault();
                clearFieldErrors();

                const payload = {
                    id: refs.fieldId.value || undefined,
                    question: refs.fieldQuestion.value.trim(),
                    field_type: refs.fieldType.value,
                    placeholder: refs.fieldPlaceholder.value.trim(),
                    is_enabled: state.fieldModal.enabled,
                    is_required: state.fieldModal.required,
                    field_options: state.fieldModal.options.map(function (option) {
                        return String(option || '').trim();
                    }).filter(Boolean),
                };

                const isEdit = state.fieldModal.mode === 'edit';
                const url = isEdit ? endpoints.update : endpoints.create;

                setButtonLoading(refs.fieldSubmitButton, true, isEdit ? 'Updating...' : 'Saving...');

                request(url, 'POST', payload)
                    .then(function (response) {
                        closeModal(refs.fieldModal);
                        return refreshPageData().then(function () {
                            notify(response.message || 'Custom field saved successfully.', 'success');
                        });
                    })
                    .catch(function (error) {
                        setFieldErrors(error.payload?.errors || {});
                        const message = error.payload?.message || firstError(error.payload?.errors) || error.message || 'Failed to save custom field.';
                        notify(message, 'danger');
                    })
                    .finally(function () {
                        setButtonLoading(refs.fieldSubmitButton, false);
                    });
            }

            function updateConsentField(id, payload, toggleTarget = null) {
                if (toggleTarget) {
                    toggleTarget.querySelectorAll('button').forEach((button) => {
                        button.disabled = true;
                    });
                }

                request(endpoints.updateConsent, 'POST', Object.assign({ id: id }, payload))
                    .then(function (response) {
                        return refreshPageData().then(function () {
                            notify(response.message || 'Consent field updated successfully.', 'success');
                        });
                    })
                    .catch(function (error) {
                        const message = error.payload?.message || firstError(error.payload?.errors) || error.message || 'Failed to update consent field.';
                        notify(message, 'danger');
                    })
                    .finally(function () {
                        if (toggleTarget) {
                            toggleTarget.querySelectorAll('button').forEach((button) => {
                                button.disabled = false;
                            });
                        }
                    });
            }

            function submitConsentForm(event) {
                event.preventDefault();
                clearConsentErrors();
                setButtonLoading(refs.consentSubmitButton, true, 'Saving...');

                request(endpoints.updateConsent, 'POST', {
                    id: Number(refs.consentId.value),
                    display_text: refs.consentDisplayText.value.trim(),
                    consent_version: Number(refs.consentVersion.value || 1),
                })
                    .then(function (response) {
                        closeModal(refs.consentModal);
                        return refreshPageData().then(function () {
                            notify(response.message || 'Consent field saved successfully.', 'success');
                        });
                    })
                    .catch(function (error) {
                        setConsentErrors(error.payload?.errors || {});
                        const message = error.payload?.message || firstError(error.payload?.errors) || error.message || 'Failed to update consent field.';
                        notify(message, 'danger');
                    })
                    .finally(function () {
                        setButtonLoading(refs.consentSubmitButton, false);
                    });
            }

            function toggleCustomField(id, url, toggleTarget) {
                if (toggleTarget) {
                    toggleTarget.querySelectorAll('button').forEach((button) => {
                        button.disabled = true;
                    });
                }

                request(url, 'POST', { id: id })
                    .then(function (response) {
                        return refreshPageData().then(function () {
                            notify(response.message || 'Custom field updated successfully.', 'success');
                        });
                    })
                    .catch(function (error) {
                        const message = error.payload?.message || firstError(error.payload?.errors) || error.message || 'Failed to update custom field.';
                        notify(message, 'danger');
                    })
                    .finally(function () {
                        if (toggleTarget) {
                            toggleTarget.querySelectorAll('button').forEach((button) => {
                                button.disabled = false;
                            });
                        }
                    });
            }

            function confirmDelete() {
                if (!state.deletingField) {
                    return;
                }

                setButtonLoading(refs.confirmDeleteButton, true, 'Deleting...');

                request(endpoints.delete, 'POST', { id: state.deletingField.id })
                    .then(function (response) {
                        closeModal(refs.deleteModal);
                        state.deletingField = null;
                        return refreshPageData().then(function () {
                            notify(response.message || 'Custom field deleted successfully.', 'success');
                        });
                    })
                    .catch(function (error) {
                        const message = error.payload?.message || firstError(error.payload?.errors) || error.message || 'Failed to delete custom field.';
                        notify(message, 'danger');
                    })
                    .finally(function () {
                        setButtonLoading(refs.confirmDeleteButton, false);
                    });
            }

            function bindEvents() {
                const handlePseudoFormSubmit = function (event, callback) {
                    if (event.key !== 'Enter' || event.target.tagName === 'TEXTAREA') {
                        return;
                    }

                    event.preventDefault();
                    callback(event);
                };

                refs.readMoreButton.addEventListener('click', function () {
                    refs.readMoreCopy.hidden = !refs.readMoreCopy.hidden;
                    refs.readMoreButton.textContent = refs.readMoreCopy.hidden ? 'Read more' : 'Show less';
                });

                refs.addQuestionButton.addEventListener('click', function () {
                    openFieldModal('create');
                });

                refs.saveSettingsButton.addEventListener('click', saveSettings);
                refs.fieldSubmitButton.addEventListener('click', upsertCustomField);
                refs.consentSubmitButton.addEventListener('click', submitConsentForm);
                refs.confirmFeatureEnableButton.addEventListener('click', confirmFeatureEnable);
                refs.fieldForm.addEventListener('keydown', function (event) {
                    handlePseudoFormSubmit(event, upsertCustomField);
                });
                refs.consentForm.addEventListener('keydown', function (event) {
                    handlePseudoFormSubmit(event, submitConsentForm);
                });
                refs.confirmDeleteButton.addEventListener('click', confirmDelete);

                refs.fieldType.addEventListener('change', updateFieldOptionsVisibility);
                refs.addOptionButton.addEventListener('click', function () {
                    state.fieldModal.options.push('');
                    renderOptionsList();
                });

                document.querySelectorAll('[data-close-modal]').forEach((button) => {
                    button.addEventListener('click', function () {
                        closeModal(document.getElementById(button.getAttribute('data-close-modal')));
                    });
                });

                document.querySelectorAll('.cf-modal-backdrop').forEach((backdrop) => {
                    backdrop.addEventListener('click', function (event) {
                        if (event.target === backdrop) {
                            closeModal(backdrop);
                        }
                    });
                });

                refs.floatingActionMenu.addEventListener('click', function (event) {
                    event.stopPropagation();
                });

                document.addEventListener('click', function () {
                    closeActionMenus();
                });

                window.addEventListener('resize', closeActionMenus);
                window.addEventListener('scroll', closeActionMenus, true);
                window.addEventListener('scroll', syncActiveSectionFromScroll, { passive: true });
                window.addEventListener('resize', syncActiveSectionFromScroll);
            }

            renderSectionTabs();
            bindEvents();
            setPageLoading(true);

            refreshPageData()
                .catch(function (error) {
                    const message = error.payload?.message || error.message || 'Failed to load custom fields.';
                    notify(message, 'danger');
                })
                .finally(function () {
                    setPageLoading(false);
                    syncActiveSectionFromScroll();
                });
        })();
        </script>
@endpush