@php
    $multiProfileBaseEndpoint = url('/admin/api/core/multi-profile');
@endphp

<x-filament-panels::page>
    <section
        id="multi-profile-root"
        class="mpage"
        data-base-endpoint="{{ $multiProfileBaseEndpoint }}"
    >
        <div class="mpage-shell">
            <div class="mpage-header">
                <div>
                    <h1 class="mpage-title">Multi Profile</h1>
                    <p class="mpage-subtitle">Manage country-wise profile rules and tenant-safe customer profile operations for owner accounts.</p>
                </div>
                <div class="mpage-actions">
                    <button type="button" class="mpage-btn mpage-btn-secondary" id="mpage-refresh-btn">Refresh</button>
                    <button type="button" class="mpage-btn mpage-btn-primary" id="mpage-add-policy-btn">Add Country Policy</button>
                </div>
            </div>

            <div class="mpage-status" id="mpage-status" hidden></div>

            <div class="mpage-section">
                <div class="mpage-card mpage-filter-card">
                    <div class="mpage-filter-grid">
                        <label class="mpage-field">
                            <span>Country</span>
                            <select id="mpage-filter-country"></select>
                        </label>
                        <label class="mpage-field">
                            <span>Status</span>
                            <select id="mpage-filter-status">
                                <option value="ALL">All statuses</option>
                                <option value="ACTIVE">Active</option>
                                <option value="DRAFT">Draft</option>
                                <option value="INACTIVE">Inactive</option>
                            </select>
                        </label>
                        <label class="mpage-field">
                            <span>Kids availability</span>
                            <select id="mpage-filter-kids">
                                <option value="ALL">All</option>
                                <option value="ENABLED">Kids enabled</option>
                                <option value="DISABLED">Kids disabled</option>
                            </select>
                        </label>
                        <label class="mpage-field mpage-field-search">
                            <span>Search</span>
                            <input id="mpage-filter-search" type="text" placeholder="Search country, code, maturity..." />
                        </label>
                    </div>
                    <div class="mpage-filter-actions">
                        <button type="button" class="mpage-btn mpage-btn-secondary" id="mpage-filter-reset-btn">Reset</button>
                        <button type="button" class="mpage-btn mpage-btn-primary" id="mpage-filter-search-btn">Search</button>
                    </div>
                </div>

                <div class="mpage-kpi-grid" id="mpage-kpis">
                    <article class="mpage-kpi mpage-kpi-card--lavender">
                        <span>Supported Countries</span>
                        <strong id="mpage-kpi-supported">0</strong>
                        <small>Configured countries including the global fallback.</small>
                    </article>
                    <article class="mpage-kpi mpage-kpi-card--amber">
                        <span>Country Overrides</span>
                        <strong id="mpage-kpi-overrides">0</strong>
                        <small>Tenant-specific profile rules beyond the global default.</small>
                    </article>
                    <article class="mpage-kpi mpage-kpi-card--sky">
                        <span>Kids Enabled Markets</span>
                        <strong id="mpage-kpi-kids">0</strong>
                        <small>Markets where Kids profiles can be created.</small>
                    </article>
                    <article class="mpage-kpi mpage-kpi-card--mint">
                        <span>Global Profile Limit</span>
                        <strong id="mpage-kpi-global-limit">1</strong>
                        <small>Safe fallback when no country override is active.</small>
                    </article>
                </div>

                <div class="mpage-card">
                    <div class="mpage-card-header">
                        <div>
                            <h2>Country Policy Configuration</h2>
                            <p>Draft, publish, and maintain country-level profile controls without touching the current subscription or billing schema.</p>
                        </div>
                    </div>
                    <div class="mpage-table-shell">
                        <div class="mpage-table-wrap">
                            <table class="mpage-table">
                                <thead>
                                    <tr>
                                        <th>Country</th>
                                        <th>Max profiles</th>
                                        <th>Kids rule</th>
                                        <th>Owner controls</th>
                                        <th>Maturity</th>
                                        <th>Status</th>
                                        <th class="mpage-text-right">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="mpage-policies-body">
                                    <tr>
                                        <td colspan="7" class="mpage-empty">Loading policies...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mpage-section">
                <div class="mpage-card">
                    <div class="mpage-card-header">
                        <div>
                            <h2>Customer Profile Workspace</h2>
                            <p>Look up a subscriber, manage child profiles, inspect account-level package context, and switch the admin session profile context safely.</p>
                        </div>
                    </div>
                    <div class="mpage-customer-lookup">
                        <input id="mpage-customer-query" type="text" placeholder="Search by customer ID, SMS ID, email, phone, or client customer ID" />
                        <button type="button" class="mpage-btn mpage-btn-primary mpage-btn-lookup" id="mpage-customer-search-btn">Search</button>
                    </div>
                    <div id="mpage-customer-results" class="mpage-customer-results" hidden></div>
                    <div id="mpage-workspace" hidden>
                        <div class="mpage-workspace-header">
                            <div>
                                <h3 id="mpage-customer-name">Subscriber</h3>
                                <p id="mpage-customer-meta">Select a customer to view profiles.</p>
                            </div>
                            <div class="mpage-actions mpage-workspace-actions">
                                <button type="button" class="mpage-btn mpage-btn-secondary" id="mpage-clear-context-btn">Clear Active Context</button>
                                <button type="button" class="mpage-btn mpage-btn-primary" id="mpage-add-profile-btn">Add Profile</button>
                            </div>
                        </div>

                        <div class="mpage-kpi-grid mpage-kpi-grid-compact">
                            <article class="mpage-kpi mpage-kpi-card--lavender">
                                <span>Profiles</span>
                                <strong id="mpage-workspace-profile-count">0/1</strong>
                                <small>Active profiles vs resolved allowance.</small>
                            </article>
                            <article class="mpage-kpi mpage-kpi-card--sky">
                                <span>Resolved Country Policy</span>
                                <strong id="mpage-workspace-country">GLOBAL</strong>
                                <small id="mpage-workspace-policy-source">SAFE_DEFAULT</small>
                            </article>
                            <article class="mpage-kpi mpage-kpi-card--amber">
                                <span>Active Packages</span>
                                <strong id="mpage-workspace-package-count">0</strong>
                                <small id="mpage-workspace-packages">No package context loaded.</small>
                            </article>
                            <article class="mpage-kpi mpage-kpi-card--mint">
                                <span>Active Profile Context</span>
                                <strong id="mpage-workspace-context">None</strong>
                                <small id="mpage-workspace-context-meta">No admin profile context selected.</small>
                            </article>
                        </div>

                        <div class="mpage-workspace-grid">
                            <div class="mpage-card">
                                <div class="mpage-subsection-head">
                                    <h3>Profiles</h3>
                                    <p>Owner is created automatically and remains protected from delete/deactivate actions.</p>
                                </div>
                                <div class="mpage-table-shell">
                                    <div class="mpage-table-wrap">
                                        <table class="mpage-table">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Type</th>
                                                    <th>Maturity</th>
                                                    <th>PIN</th>
                                                    <th>Status</th>
                                                    <th class="mpage-text-right">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody id="mpage-profiles-body">
                                                <tr>
                                                    <td colspan="6" class="mpage-empty">Search for a customer to load profiles.</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="mpage-card">
                                <div class="mpage-subsection-head">
                                    <h3>Activity Log</h3>
                                    <p>Audit trail for policy writes, owner backfill, profile updates, and switch events.</p>
                                </div>
                                <div id="mpage-activity-log" class="mpage-activity-log">
                                    <div class="mpage-empty">Search for a customer to load recent activity.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mpage-modal" id="mpage-policy-modal" hidden>
            <div class="mpage-modal-card">
                <div class="mpage-modal-header">
                    <div>
                        <h3 id="mpage-policy-modal-title">Add Country Policy</h3>
                    </div>
                    <button type="button" class="mpage-close-btn" data-close-modal="policy">&times;</button>
                </div>
                <form id="mpage-policy-form" class="mpage-form-grid">
                    <input type="hidden" id="mpage-policy-id" />
                    <label class="mpage-field">
                        <span>Country</span>
                        <select id="mpage-policy-country" required></select>
                    </label>
                    <label class="mpage-field">
                        <span>Status</span>
                        <select id="mpage-policy-status">
                            <option value="ACTIVE">Active</option>
                            <option value="DRAFT">Draft</option>
                            <option value="INACTIVE">Inactive</option>
                        </select>
                    </label>
                    <label class="mpage-field">
                        <span>Max profiles</span>
                        <select id="mpage-policy-max-profiles">
                            @for ($i = 1; $i <= 10; $i++)
                                <option value="{{ $i }}">{{ $i }} profiles</option>
                            @endfor
                        </select>
                    </label>
                    <div class="mpage-policy-settings mpage-field-full">
                        <label class="mpage-policy-toggle-row">
                            <div class="mpage-policy-toggle-copy">
                                <span class="mpage-policy-toggle-title">Enable Kids profiles</span>
                                <small>Makes the Kids option available to the owner.</small>
                            </div>
                            <span class="mpage-switch">
                                <input type="checkbox" id="mpage-policy-kids-enabled" />
                                <span class="mpage-switch-slider"></span>
                            </span>
                        </label>
                        <div class="mpage-policy-inline-card is-disabled" id="mpage-policy-kids-limit-card">
                            <div class="mpage-policy-inline-copy">
                                <span class="mpage-policy-toggle-title">Maximum Kids profiles</span>
                                <small>Included within the total profile limit.</small>
                            </div>
                            <label class="mpage-field mpage-policy-inline-field">
                                <select id="mpage-policy-max-kids" disabled>
                                    @for ($i = 0; $i <= 9; $i++)
                                        <option value="{{ $i }}">{{ $i }} kids profiles</option>
                                    @endfor
                                </select>
                            </label>
                        </div>
                        <label class="mpage-policy-toggle-row">
                            <div class="mpage-policy-toggle-copy">
                                <span class="mpage-policy-toggle-title">Owner can enable Kids mode</span>
                                <small>Owner sees the Kids option in the master login.</small>
                            </div>
                            <span class="mpage-switch">
                                <input type="checkbox" id="mpage-policy-owner-enable-kids" />
                                <span class="mpage-switch-slider"></span>
                            </span>
                        </label>
                        <label class="mpage-policy-toggle-row">
                            <div class="mpage-policy-toggle-copy">
                                <span class="mpage-policy-toggle-title">Owner can set maturity level</span>
                                <small>Owner selects from the allowed maturity values below.</small>
                            </div>
                            <span class="mpage-switch">
                                <input type="checkbox" id="mpage-policy-owner-set-maturity" />
                                <span class="mpage-switch-slider"></span>
                            </span>
                        </label>
                        <label class="mpage-policy-toggle-row">
                            <div class="mpage-policy-toggle-copy">
                                <span class="mpage-policy-toggle-title">Allow profile PIN</span>
                                <small>Owner sees the PIN; SMS never stores or displays it.</small>
                            </div>
                            <span class="mpage-switch">
                                <input type="checkbox" id="mpage-policy-pin-allowed" />
                                <span class="mpage-switch-slider"></span>
                            </span>
                        </label>
                        <label class="mpage-policy-toggle-row">
                            <div class="mpage-policy-toggle-copy">
                                <span class="mpage-policy-toggle-title">Require PIN to exit Kids mode</span>
                                <small>Applies when the owner enables a Kids profile.</small>
                            </div>
                            <span class="mpage-switch">
                                <input type="checkbox" id="mpage-policy-parent-pin-required" checked />
                                <span class="mpage-switch-slider"></span>
                            </span>
                        </label>
                    </div>
                    <label class="mpage-field mpage-field-full">
                        <span>Allowed maturity levels</span>
                        <small class="mpage-field-hint">Select one or more maturity levels.</small>
                        <div class="mpage-maturity-options" id="mpage-policy-maturity-options">
                            <label class="mpage-maturity-chip">
                                <input type="checkbox" value="ALL" data-mpage-maturity-option checked />
                                <span>All ages</span>
                            </label>
                            <label class="mpage-maturity-chip">
                                <input type="checkbox" value="7_PLUS" data-mpage-maturity-option />
                                <span>7+</span>
                            </label>
                            <label class="mpage-maturity-chip">
                                <input type="checkbox" value="13_PLUS" data-mpage-maturity-option />
                                <span>13+</span>
                            </label>
                            <label class="mpage-maturity-chip">
                                <input type="checkbox" value="16_PLUS" data-mpage-maturity-option />
                                <span>16+</span>
                            </label>
                            <label class="mpage-maturity-chip">
                                <input type="checkbox" value="18_PLUS" data-mpage-maturity-option />
                                <span>18+</span>
                            </label>
                        </div>
                    </label>
                    <label class="mpage-field mpage-field-full">
                        <span>Effective at</span>
                        <input id="mpage-policy-effective-at" type="datetime-local" />
                    </label>
                    <div class="mpage-modal-actions mpage-field-full">
                        <button type="button" class="mpage-btn mpage-btn-secondary" data-close-modal="policy">Cancel</button>
                        <button type="submit" class="mpage-btn mpage-btn-primary" id="mpage-policy-save-btn">Save Policy</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="mpage-modal" id="mpage-profile-modal" hidden>
            <div class="mpage-modal-card">
                <div class="mpage-modal-header">
                    <div>
                        <h3 id="mpage-profile-modal-title">Add Profile</h3>
                    </div>
                    <button type="button" class="mpage-close-btn" data-close-modal="profile">&times;</button>
                </div>
                <form id="mpage-profile-form" class="mpage-form-grid">
                    <input type="hidden" id="mpage-profile-id" />
                    <label class="mpage-field">
                        <span>Profile name</span>
                        <input id="mpage-profile-name" type="text" maxlength="80" required />
                    </label>
                    <label class="mpage-field">
                        <span>Profile type</span>
                        <select id="mpage-profile-type">
                            <option value="ADULT">Adult</option>
                            <option value="KIDS">Kids</option>
                        </select>
                    </label>
                    <label class="mpage-field">
                        <span>Maturity code</span>
                        <input id="mpage-profile-maturity" type="text" placeholder="ALL" maxlength="32" />
                    </label>
                    <label class="mpage-field">
                        <span>Status</span>
                        <select id="mpage-profile-status">
                            <option value="ACTIVE">Active</option>
                            <option value="INACTIVE">Inactive</option>
                        </select>
                    </label>
                    <label class="mpage-toggle">
                        <input type="checkbox" id="mpage-profile-pin-enabled" />
                        <span>PIN enabled</span>
                    </label>
                    <label class="mpage-field mpage-field-full">
                        <span>Notes</span>
                        <textarea id="mpage-profile-notes" rows="4" maxlength="500" placeholder="Optional admin note for this profile."></textarea>
                    </label>
                    <div class="mpage-modal-actions mpage-field-full">
                        <button type="button" class="mpage-btn mpage-btn-secondary" data-close-modal="profile">Cancel</button>
                        <button type="submit" class="mpage-btn mpage-btn-primary" id="mpage-profile-save-btn">Save Profile</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="mpage-modal" id="mpage-confirm-modal" hidden>
            <div class="mpage-modal-card mpage-confirm-modal-card" role="dialog" aria-modal="true" aria-labelledby="mpage-confirm-title">
                <div class="mpage-modal-header">
                    <div>
                        <h3 id="mpage-confirm-title">Please confirm</h3>
                    </div>
                    <button type="button" class="mpage-close-btn" id="mpage-confirm-close-btn" aria-label="Close confirmation">&times;</button>
                </div>
                <div class="mpage-confirm-body">
                    <p class="mpage-confirm-message" id="mpage-confirm-message">Are you sure you want to continue?</p>
                    <p class="mpage-confirm-note" id="mpage-confirm-note" hidden></p>
                </div>
                <div class="mpage-modal-actions">
                    <button type="button" class="mpage-btn mpage-btn-secondary" id="mpage-confirm-cancel-btn">Cancel</button>
                    <button type="button" class="mpage-btn mpage-btn-primary" id="mpage-confirm-submit-btn">Confirm</button>
                </div>
            </div>
        </div>
    </section>
</x-filament-panels::page>

@push('styles')
    <style>
        html.mpage-modal-open,
        body.mpage-modal-open {
            overflow: hidden !important;
        }

        .mpage {
            --mp-border: #e5e7eb;
            --mp-border-soft: #e8edf4;
            --mp-border-faint: #f2f5fa;
            --mp-text: #24324a;
            --mp-text-dark: #111827;
            --mp-text-muted: #667085;
            --mp-bg: #ffffff;
            --mp-bg-soft: #f9fafb;
            --mp-focus: rgba(99, 102, 241, 0.1);
            margin-right: 12px !important;
            margin-left: 15px !important;
            margin-top: -12px !important;
            color: var(--mp-text);
        }

        .mpage,
        .mpage button,
        .mpage input,
        .mpage select,
        .mpage textarea {
            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        }

        .mpage-shell {
            display: grid;
            gap: 16px;
        }

        .mpage-header,
        .mpage-card-header,
        .mpage-workspace-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px;
        }

        .mpage-title {
            margin: 0;
            font-size: 36px;
            line-height: 1.05;
            font-weight: 700;
            color: #0f172a;
        }

        .mpage-subtitle,
        .mpage-card-header p,
        .mpage-subsection-head p,
        .mpage-workspace-header p {
            margin: 6px 0 0;
            color: var(--mp-text-muted);
            font-size: 14px;
            line-height: 1.55;
        }

        .mpage-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .mpage-btn {
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.2s ease;
        }

        .mpage-btn:hover {
            transform: translateY(-1px);
        }

        .mpage-btn-primary {
            background: #111827;
            color: #fff;
            border-color: #111827;
            box-shadow: none;
        }

        .mpage-btn-primary:hover {
            background: #374151;
            border-color: #374151;
        }

        .mpage-btn-secondary {
            background: #fff;
            color: #374151;
            border-color: #d1d5db;
        }

        .mpage-btn-secondary:hover {
            background: #f9fafb;
            border-color: #9ca3af;
        }

        .mpage-card,
        .mpage-kpi {
            background: var(--mp-bg);
            border: 1px solid var(--mp-border);
            border-radius: 12px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        }

        .mpage-status {
            position: fixed;
            top: 90px;
            right: 24px;
            z-index: 120;
            max-width: min(420px, calc(100vw - 32px));
            padding: 12px 14px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
        }

        .mpage-status.is-success {
            color: #065f46;
            background: #ecfdf3;
            border: 1px solid #abefc6;
        }

        .mpage-status.is-error {
            color: #991b1b;
            background: #fef2f2;
            border: 1px solid #fecaca;
        }

        .mpage-section {
            display: grid;
            gap: 16px;
        }

        .mpage-card {
            padding: 18px;
        }

        .mpage-filter-card {
            padding: 1rem;
            display: flex;
            align-items: flex-end;
            gap: 12px;
        }

        .mpage-filter-grid {
            display: flex;
            flex: 1 1 auto;
            flex-wrap: nowrap;
            gap: 12px;
            align-items: flex-end;
        }

        .mpage-filter-actions {
            display: flex;
            justify-content: flex-start;
            gap: 10px;
            flex: 0 0 auto;
            flex-wrap: nowrap;
            margin-top: 0;
            padding-top: 0;
            min-height: 40px;
        }

        .mpage-form-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }

        .mpage-field,
        .mpage-toggle {
            display: grid;
            gap: 7px;
        }

        .mpage-filter-grid .mpage-field {
            min-width: 0;
            flex: 1 1 0;
        }

        .mpage-field span,
        .mpage-toggle span {
            font-size: 0.875rem;
            font-weight: 500;
            color: #000000;
            line-height: 0.6rem;
        }

        .mpage-field-hint {
            margin-top: -2px;
            font-size: 11px;
            line-height: 1.45;
            color: var(--mp-text-muted);
        }

        .mpage-field input,
        .mpage-field select,
        .mpage-field textarea,
        .mpage-customer-lookup input {
            width: 100%;
            min-height: 42px;
            border-radius: 8px;
            border: 1px solid #d1d5db;
            background: #fff;
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
            color: var(--mp-text-dark);
            box-sizing: border-box;
        }

        .mpage-field input:focus,
        .mpage-field select:focus,
        .mpage-field textarea:focus,
        .mpage-customer-lookup input:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px var(--mp-focus);
        }

        .mpage-field textarea {
            min-height: 110px;
            resize: vertical;
        }

        .mpage-field-full {
            grid-column: 1 / -1;
        }

        .mpage-field-search {
            flex: 1.7 1 0 !important;
        }

        .mpage-toggle {
            grid-template-columns: auto 1fr;
            align-items: center;
            min-height: 45px;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid #d1d5db;
            background: #fff;
        }

        .mpage-toggle input {
            width: 16px;
            height: 16px;
            margin: 0;
        }

        .mpage-policy-settings {
            display: grid;
            gap: 0;
            padding-top: 4px;
        }

        .mpage-policy-toggle-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            padding: 10px 0;
            border-top: 1px solid var(--mp-border-soft);
        }

        .mpage-policy-toggle-row:first-child {
            border-top: 0;
            padding-top: 0;
        }

        .mpage-policy-toggle-copy {
            display: grid;
            gap: 4px;
        }

        .mpage-policy-toggle-title {
            font-size: 12px;
            font-weight: 700;
            color: #111827;
        }

        .mpage-policy-toggle-copy small,
        .mpage-policy-inline-copy small {
            font-size: 11px;
            line-height: 1.5;
            color: var(--mp-text-muted);
        }

        .mpage-switch {
            position: relative;
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
        }

        .mpage-switch input {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .mpage-switch-slider {
            position: relative;
            width: 50px;
            height: 28px;
            border-radius: 999px;
            background: #d1d5db;
            border: 1px solid #cbd5e1;
            transition: background 0.2s ease, border-color 0.2s ease;
        }

        .mpage-switch-slider::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
            transition: transform 0.2s ease;
        }

        .mpage-switch input:checked + .mpage-switch-slider {
            background: #3b82f6;
            border-color: #3b82f6;
        }

        .mpage-switch input:checked + .mpage-switch-slider::after {
            transform: translateX(22px);
        }

        .mpage-switch input:focus-visible + .mpage-switch-slider {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
        }

        .mpage-policy-inline-card {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
            gap: 18px;
            align-items: center;
            margin: 6px 0 6px;
            padding: 12px 12px 12px 12px;
            border-radius: 12px;
            border: 1px solid #dbe5f1;
            border-left: 4px solid #3b82f6;
            background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
            transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .mpage-policy-inline-card.is-disabled {
            background: linear-gradient(180deg, #fafbfc 0%, #f7f8fa 100%);
            border-color: #e6ebf2;
            border-left-color: #d5dbe5;
            box-shadow: none;
        }

        .mpage-policy-inline-copy {
            display: grid;
            gap: 4px;
        }

        .mpage-policy-inline-card .mpage-policy-toggle-title {
            display: block;
            margin-bottom: 1px;
        }

        .mpage-policy-inline-card.is-disabled .mpage-policy-toggle-title,
        .mpage-policy-inline-card.is-disabled .mpage-policy-inline-copy small {
            color: #98a2b3;
        }

        .mpage-policy-inline-field {
            min-width: 0;
            gap: 0;
        }

        .mpage-policy-inline-field select:disabled {
            cursor: not-allowed;
            background: #f3f4f6;
            color: #98a2b3;
            border-color: #e3e8ef;
            box-shadow: none;
        }

        .mpage-maturity-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding-top: 2px;
        }

        .mpage-maturity-chip {
            position: relative;
            display: inline-flex;
        }

        .mpage-maturity-chip input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .mpage-maturity-chip span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
            padding: 0 14px;
            border-radius: 10px;
            border: 1px solid #cdd5df;
            background: #ffffff;
            color: #344054;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .mpage-maturity-chip input:checked + span {
            color: #1d4ed8;
            border-color: #93c5fd;
            background: #eff6ff;
            box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.12);
        }

        .mpage-maturity-chip input:focus-visible + span {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
        }

        .mpage-kpi-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
        }

        .mpage-kpi-grid-compact {
            margin-bottom: 16px;
        }

        .mpage-kpi {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-height: 125px;
            padding: 18px 20px;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .mpage-kpi:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
        }

        .mpage-kpi span {
            display: block;
            font-size: 12px;
            font-weight: 500;
            color: #475467;
            text-transform: none;
            letter-spacing: normal;
            line-height: 1.4;
            font-family: var(--global-admin-font-family) !important;
            color: var(--global-admin-heading-color) !important;
        }

        .mpage-kpi strong {
            display: block;
            margin-top: 2px;
            font-size: clamp(24px, 1.9vw, 28px);
            line-height: 1.08;
            font-weight: 700;
            color: var(--mp-text-dark);
            letter-spacing: -0.02em;
            word-break: break-word;
            overflow-wrap: anywhere;
            font-size: 1.255rem !important;
            line-height: 2.25rem !important;
        }

        .mpage-kpi small {
            display: block;
            margin-top: auto;
            padding-top: 4px;
            font-size: 11px;
            line-height: 1.5;
            color: var(--mp-text-muted);
        }

        .mpage-kpi-grid-compact .mpage-kpi {
            min-height: 128px;
            padding: 18px;
        }

        .mpage-kpi-grid-compact .mpage-kpi strong {
            font-size: clamp(18px, 1.55vw, 22px);
            line-height: 1.12;
        }

        .mpage-kpi-grid-compact .mpage-kpi small {
            font-size: 11px;
            line-height: 1.45;
        }

        #mpage-workspace-profile-count,
        #mpage-workspace-country,
        #mpage-workspace-package-count,
        #mpage-workspace-context {
            max-width: 100%;
        }

        #mpage-workspace-context {
            font-size: clamp(17px, 1.45vw, 20px);
            line-height: 1.18;
        }

        #mpage-workspace-context-meta {
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        .mpage-kpi-card--lavender {
            background: linear-gradient(180deg, #f0ecff 0%, #f8f6ff 100%);
            border-color: #e8e3ff;
        }

        .mpage-kpi-card--amber {
            background: linear-gradient(180deg, #fff7e3 0%, #fffcf1 100%);
            border-color: #fff1cf;
        }

        .mpage-kpi-card--sky {
            background: linear-gradient(180deg, #e8f7ff 0%, #f3fbff 100%);
            border-color: #cfeeff;
        }

        .mpage-kpi-card--mint {
            background: linear-gradient(180deg, #eafbf0 0%, #f5fdf8 100%);
            border-color: #d3f5df;
        }

        .mpage-card-header h2,
        .mpage-subsection-head h3,
        .mpage-workspace-header h3,
        .mpage-modal-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: var(--mp-text-dark);
        }

        .mpage-card-header {
            margin-bottom: 14px;
        }

        .mpage-table-shell {
            width: 100%;
            border: 1px solid var(--mp-border-soft);
            border-radius: 8px;
            background: #ffffff;
            overflow: hidden;
            margin-top: 14px;
        }

        .mpage-table-wrap {
            overflow-x: auto;
        }

        .mpage-table {
            width: 100%;
            width: 100% !important;
            border-collapse: separate;
            border-spacing: 0;
            table-layout: auto;
            min-width: 760px;
        }

        .mpage-table thead {
            background: #ffffff;
        }

        .mpage-table thead th {
            padding: 12px 16px;
            text-align: left;
            font-size: 0.875rem;
            font-weight: 700;
            color: #1f2a44;
            border-bottom: 1px solid #e9edf5;
            border-right: 1px solid #f2f5fa;
            white-space: nowrap;
            background: #ffffff;
            text-transform: none;
            letter-spacing: normal;
        }

        .mpage-table thead th:last-child,
        .mpage-table tbody td:last-child {
            border-right: none;
        }

        .mpage-table tbody td {
            padding: 12px 16px;
            font-size: 0.875rem;
            color: #24324a;
            border-bottom: 1px solid #f1f4f9;
            border-right: 1px solid #f7f9fc;
            vertical-align: middle;
        }

        .mpage-table tbody tr:hover {
            background: #fafcff !important;
        }

        .mpage-empty {
            text-align: center;
            color: var(--mp-text-muted);
            padding: 24px 16px !important;
        }

        .mpage-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: max-content;
            max-width: 100%;
            white-space: nowrap;
            line-height: 1.2;
            box-sizing: border-box;
            padding: 6px 12px;
            background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
            color: #4f46e5;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            border: 1px solid #e0e7ff;
            letter-spacing: 0.02em;
            box-shadow: 0 1px 2px rgba(79, 70, 229, 0.1);
        }

        .mpage-pill-active {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
            color: #059669;
            border-color: #a7f3d0;
        }

        .mpage-pill-draft {
            background: linear-gradient(135deg, #fff1d6 0%, #fde4b2 100%);
            color: #b45309;
            border-color: #fde4b2;
        }

        .mpage-pill-inactive {
            background: linear-gradient(135deg, #fee4e2 0%, #fecaca 100%);
            color: #dc2626;
            border-color: #fecaca;
        }

        .mpage-action-row {
            display: flex;
            justify-content: flex-end;
            gap: 6px;
            flex-wrap: wrap;
        }

        .mpage-link-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            padding: 6px 12px;
            border-radius: 8px;
            border: 1px solid #d1d5db;
            background: #ffffff;
            color: #111827;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .mpage-link-btn:hover {
            background: #f9fafb;
            border-color: #9ca3af;
        }

        .mpage-link-btn.is-danger {
            color: #dc2626;
            border-color: #fecaca;
            background: #fff5f5;
        }

        .mpage-customer-lookup {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 12px;
            align-items: end;
        }

        .mpage-btn-lookup {
            min-height: 40px;
            min-width: 88px;
            padding: 0.5rem 0.9rem;
            align-self: stretch;
        }

        .mpage-customer-results {
            display: grid;
            gap: 10px;
            margin-top: 14px;
        }

        .mpage-customer-result {
            border: 1px solid var(--mp-border);
            border-radius: 12px;
            padding: 14px;
            background: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }

        .mpage-customer-result strong {
            display: block;
            font-size: 14px;
            color: var(--mp-text-dark);
        }

        .mpage-customer-result small {
            display: block;
            margin-top: 5px;
            color: var(--mp-text-muted);
            line-height: 1.5;
        }

        .mpage-workspace-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
            gap: 16px;
        }

        .mpage-workspace-actions {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .mpage-activity-log {
            display: grid;
            gap: 10px;
            margin-top: 14px;
        }

        .mpage-activity-item {
            border: 1px solid #e8edf4;
            border-radius: 10px;
            padding: 12px 14px;
            background: #ffffff;
        }

        .mpage-activity-item strong {
            display: inline-block;
            font-size: 12px;
            color: var(--mp-text-dark);
            margin-bottom: 6px;
        }

        .mpage-activity-item p {
            margin: 0;
            font-size: 13px;
            line-height: 1.55;
            color: var(--mp-text);
        }

        .mpage-activity-item small {
            display: block;
            margin-top: 7px;
            color: var(--mp-text-muted);
            font-size: 11px;
        }

        .mpage-modal {
            position: fixed;
            inset: 0;
            z-index: 70;
            background: rgba(15, 23, 42, 0.5);
            display: grid;
            place-items: center;
            padding: 18px;
        }

        .mpage-modal[hidden] {
            display: none !important;
        }

        .mpage-modal-card {
            width: min(760px, 100%);
            max-height: 92vh;
            overflow: auto;
            background: #fff;
            border-radius: 12px;
            border: 1px solid var(--mp-border);
            box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
            padding: 18px;
        }

        .mpage-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px;
            margin: -18px -18px 18px;
            padding: 18px 18px 16px;
            border-bottom: 1px solid var(--mp-border-soft);
            background: #ffffff;
        }

        .mpage-close-btn {
            border: 0;
            background: #f3f6fb;
            color: #374151;
            width: 34px;
            height: 34px;
            border-radius: 999px;
            cursor: pointer;
            font-size: 22px;
            line-height: 1;
        }

        .mpage-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding-top: 12px;
            margin-top: 6px;
            border-top: 1px solid var(--mp-border-soft);
        }

        .mpage-confirm-modal-card {
            width: min(460px, 100%);
        }

        .mpage-confirm-body {
            display: grid;
            gap: 8px;
            padding: 4px 0 0;
        }

        .mpage-confirm-message {
            margin: 0;
            font-size: 14px;
            line-height: 1.6;
            color: var(--mp-text);
        }

        .mpage-confirm-note {
            margin: 0;
            font-size: 12px;
            line-height: 1.55;
            color: var(--mp-text-muted);
        }

        .mpage-btn-danger {
            background: #dc2626;
            color: #ffffff;
            border-color: #dc2626;
        }

        .mpage-btn-danger:hover {
            background: #b91c1c;
            border-color: #b91c1c;
        }

        .mpage-text-right {
            text-align: right !important;
        }

        h2,
        .text-xl {
            line-height: 1.5rem !important;
            font-size: 16px !important;
        }

        @media (max-width: 1100px) {
            .mpage-kpi-grid,
            .mpage-form-grid,
            .mpage-workspace-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .mpage-field-full {
                grid-column: 1 / -1;
            }

            .mpage-filter-card {
                flex-direction: column;
                align-items: stretch;
            }

            .mpage-filter-grid {
                flex-wrap: wrap;
            }

            .mpage-filter-grid .mpage-field {
                flex: 1 1 210px;
            }

            .mpage-filter-actions {
                justify-content: flex-end;
            }
        }

        @media (max-width: 760px) {
            .mpage,
            .mpage-actions,
            .mpage-customer-lookup,
            .mpage-kpi-grid,
            .mpage-form-grid,
            .mpage-workspace-grid,
            .mpage-header,
            .mpage-card-header,
            .mpage-workspace-header,
            .mpage-customer-result {
                grid-template-columns: 1fr;
                flex-direction: column;
                align-items: stretch;
            }

            .mpage-filter-grid .mpage-field,
            .mpage-field-search {
                min-width: 100%;
                flex-basis: 100% !important;
            }

            .mpage-title {
                font-size: 31px;
            }

            .mpage-kpi {
                min-height: 124px;
                padding: 16px;
            }

            .mpage-kpi strong {
                font-size: 22px;
            }

            .mpage-policy-inline-card {
                grid-template-columns: 1fr;
                gap: 12px;
                padding: 14px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        (function () {
            const root = document.getElementById('multi-profile-root');
            if (!root) {
                return;
            }

            const baseEndpoint = String(root.dataset.baseEndpoint || '').replace(/\/+$/, '');
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                || document.querySelector('input[name="_token"]')?.value
                || '';
            const state = {
                countries: [],
                policies: [],
                selectedCustomer: null,
                workspace: null,
                confirmResolver: null,
            };
            let statusTimer = null;

            const els = {
                status: document.getElementById('mpage-status'),
                filterCountry: document.getElementById('mpage-filter-country'),
                filterStatus: document.getElementById('mpage-filter-status'),
                filterKids: document.getElementById('mpage-filter-kids'),
                filterSearch: document.getElementById('mpage-filter-search'),
                filterSearchBtn: document.getElementById('mpage-filter-search-btn'),
                filterResetBtn: document.getElementById('mpage-filter-reset-btn'),
                policiesBody: document.getElementById('mpage-policies-body'),
                refreshBtn: document.getElementById('mpage-refresh-btn'),
                addPolicyBtn: document.getElementById('mpage-add-policy-btn'),
                policyModal: document.getElementById('mpage-policy-modal'),
                confirmModal: document.getElementById('mpage-confirm-modal'),
                policyForm: document.getElementById('mpage-policy-form'),
                policyModalTitle: document.getElementById('mpage-policy-modal-title'),
                policyId: document.getElementById('mpage-policy-id'),
                policyCountry: document.getElementById('mpage-policy-country'),
                policyStatus: document.getElementById('mpage-policy-status'),
                policyMaxProfiles: document.getElementById('mpage-policy-max-profiles'),
                policyMaxKids: document.getElementById('mpage-policy-max-kids'),
                policyKidsLimitCard: document.getElementById('mpage-policy-kids-limit-card'),
                policyKidsEnabled: document.getElementById('mpage-policy-kids-enabled'),
                policyOwnerEnableKids: document.getElementById('mpage-policy-owner-enable-kids'),
                policyOwnerSetMaturity: document.getElementById('mpage-policy-owner-set-maturity'),
                policyPinAllowed: document.getElementById('mpage-policy-pin-allowed'),
                policyParentPinRequired: document.getElementById('mpage-policy-parent-pin-required'),
                policyMaturityOptions: Array.from(document.querySelectorAll('[data-mpage-maturity-option]')),
                policyEffectiveAt: document.getElementById('mpage-policy-effective-at'),
                customerQuery: document.getElementById('mpage-customer-query'),
                customerSearchBtn: document.getElementById('mpage-customer-search-btn'),
                customerResults: document.getElementById('mpage-customer-results'),
                workspace: document.getElementById('mpage-workspace'),
                customerName: document.getElementById('mpage-customer-name'),
                customerMeta: document.getElementById('mpage-customer-meta'),
                addProfileBtn: document.getElementById('mpage-add-profile-btn'),
                clearContextBtn: document.getElementById('mpage-clear-context-btn'),
                workspaceProfileCount: document.getElementById('mpage-workspace-profile-count'),
                workspaceCountry: document.getElementById('mpage-workspace-country'),
                workspacePolicySource: document.getElementById('mpage-workspace-policy-source'),
                workspacePackageCount: document.getElementById('mpage-workspace-package-count'),
                workspacePackages: document.getElementById('mpage-workspace-packages'),
                workspaceContext: document.getElementById('mpage-workspace-context'),
                workspaceContextMeta: document.getElementById('mpage-workspace-context-meta'),
                profilesBody: document.getElementById('mpage-profiles-body'),
                activityLog: document.getElementById('mpage-activity-log'),
                profileModal: document.getElementById('mpage-profile-modal'),
                profileForm: document.getElementById('mpage-profile-form'),
                profileModalTitle: document.getElementById('mpage-profile-modal-title'),
                profileId: document.getElementById('mpage-profile-id'),
                profileName: document.getElementById('mpage-profile-name'),
                profileType: document.getElementById('mpage-profile-type'),
                profileMaturity: document.getElementById('mpage-profile-maturity'),
                profileStatus: document.getElementById('mpage-profile-status'),
                profilePinEnabled: document.getElementById('mpage-profile-pin-enabled'),
                profileNotes: document.getElementById('mpage-profile-notes'),
                confirmTitle: document.getElementById('mpage-confirm-title'),
                confirmMessage: document.getElementById('mpage-confirm-message'),
                confirmNote: document.getElementById('mpage-confirm-note'),
                confirmCloseBtn: document.getElementById('mpage-confirm-close-btn'),
                confirmCancelBtn: document.getElementById('mpage-confirm-cancel-btn'),
                confirmSubmitBtn: document.getElementById('mpage-confirm-submit-btn'),
                kpiSupported: document.getElementById('mpage-kpi-supported'),
                kpiOverrides: document.getElementById('mpage-kpi-overrides'),
                kpiKids: document.getElementById('mpage-kpi-kids'),
                kpiGlobalLimit: document.getElementById('mpage-kpi-global-limit'),
            };

            const countryLabel = (row) => {
                const code = String(row.country_code || row.primary_code || '').trim();
                const name = String(row.country_name || row.name || '').trim();
                if (code === 'GLOBAL') {
                    return 'Global default';
                }
                return name && code ? `${name} (${code})` : (name || code || 'Country');
            };

            function showStatus(type, message) {
                if (!els.status) {
                    return;
                }

                if (statusTimer) {
                    window.clearTimeout(statusTimer);
                    statusTimer = null;
                }

                if (!message) {
                    els.status.hidden = true;
                    els.status.className = 'mpage-status';
                    els.status.textContent = '';
                    return;
                }
                els.status.hidden = false;
                els.status.className = `mpage-status ${type === 'error' ? 'is-error' : 'is-success'}`;
                els.status.textContent = normalizeDisplayMessage(message, type === 'error' ? 'Unable to complete the request right now. Please try again.' : 'Done.');

                statusTimer = window.setTimeout(() => {
                    els.status.hidden = true;
                    els.status.className = 'mpage-status';
                    els.status.textContent = '';
                }, type === 'error' ? 6500 : 4500);
            }

            function toFormDateTime(value) {
                if (!value) return '';
                const date = new Date(value);
                if (Number.isNaN(date.getTime())) return '';
                const pad = (n) => String(n).padStart(2, '0');
                return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
            }

            function badgeClass(status) {
                const normalized = String(status || '').toUpperCase();
                if (normalized === 'ACTIVE') return 'mpage-pill mpage-pill-active';
                if (normalized === 'DRAFT') return 'mpage-pill mpage-pill-draft';
                return 'mpage-pill mpage-pill-inactive';
            }

            function normalizeDisplayMessage(message, fallback = '') {
                const value = String(message || '').trim();
                if (!value) {
                    return fallback;
                }

                const mappings = [
                    {
                        match: ['CSRF token mismatch'],
                        text: 'Your session expired. Refresh the page and try again.',
                    },
                    {
                        match: ['SQLSTATE[', 'Undefined function:', 'operator does not exist:', 'syntax error at or near'],
                        text: 'Unable to load workspace package details right now. Please try again.',
                    },
                    {
                        match: ['ClickHouse query failed'],
                        text: 'Unable to load Multi Profile data right now. Please try again.',
                    },
                ];

                for (const entry of mappings) {
                    if (entry.match.some((needle) => value.includes(needle))) {
                        return entry.text;
                    }
                }

                if (value.startsWith('HTTP 404')) {
                    return fallback || 'Requested data was not found.';
                }

                if (value.startsWith('HTTP 419')) {
                    return 'Your session expired. Refresh the page and try again.';
                }

                if (value.length > 180) {
                    return fallback || 'Unable to complete the request right now. Please try again.';
                }

                return value;
            }

            async function requestJson(url, options = {}) {
                const method = String(options.method || 'GET').toUpperCase();
                const headers = {
                    Accept: 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    ...(options.headers || {}),
                };

                if (csrfToken && !['GET', 'HEAD', 'OPTIONS'].includes(method)) {
                    headers['X-CSRF-TOKEN'] = csrfToken;
                }

                const response = await window.SMSApi.fetchJson(url, {
                    ...options,
                    method,
                    headers,
                }, { auth: 'bearer', retryOn401: true });

                return response;
            }

            async function resolveErrorMessage(error, fallback) {
                if (error?.response) {
                    try {
                        const payload = await error.response.clone().json();
                        const validationErrors = payload?.errors && typeof payload.errors === 'object'
                            ? Object.values(payload.errors).flat().filter(Boolean)
                            : [];

                        if (validationErrors.length > 0) {
                            return String(validationErrors[0]);
                        }

                        if (payload?.message) {
                            return normalizeDisplayMessage(String(payload.message), fallback);
                        }
                    } catch (_) {
                        try {
                            const text = await error.response.clone().text();
                            if (text) {
                                return normalizeDisplayMessage(text, fallback);
                            }
                        } catch (_) {
                            // Ignore secondary parse failures.
                        }
                    }
                }

                if (error?.message) {
                    return normalizeDisplayMessage(String(error.message), fallback);
                }

                return normalizeDisplayMessage(fallback, fallback);
            }

            async function loadCountries() {
                const payload = await requestJson(`${baseEndpoint}/countries`, { method: 'GET' });
                state.countries = Array.isArray(payload.data) ? payload.data : [];

                const filterOptions = ['<option value="">All countries</option>']
                    .concat(state.countries.map((country) => `<option value="${country.primary_code}">${countryLabel(country)}</option>`));
                els.filterCountry.innerHTML = filterOptions.join('');

                const policyOptions = state.countries.map((country) => `<option value="${country.primary_code}" data-name="${country.name || country.country_name || ''}">${countryLabel(country)}</option>`);
                els.policyCountry.innerHTML = policyOptions.join('');
            }

            function renderPolicies(summary) {
                const rows = state.policies;
                els.kpiSupported.textContent = String(summary.supported_countries || 0);
                els.kpiOverrides.textContent = String(summary.country_overrides || 0);
                els.kpiKids.textContent = String(summary.kids_enabled_markets || 0);
                els.kpiGlobalLimit.textContent = String(summary.global_profile_limit || 1);

                if (!rows.length) {
                    els.policiesBody.innerHTML = '<tr><td colspan="7" class="mpage-empty">No policies matched the current filters.</td></tr>';
                    return;
                }

                els.policiesBody.innerHTML = rows.map((row) => {
                    const kidsLabel = row.kids_enabled ? `Enabled · max ${row.max_kids_profiles}` : 'Disabled';
                    const ownerControls = [
                        row.owner_can_enable_kids ? 'Kids' : null,
                        row.owner_can_set_maturity ? 'Maturity' : null,
                        row.profile_pin_allowed ? 'PIN' : null,
                    ].filter(Boolean).join(', ') || 'None';
                    const maturity = Array.isArray(row.allowed_maturity_levels) && row.allowed_maturity_levels.length
                        ? row.allowed_maturity_levels.join(', ')
                        : 'ALL';

                    return `
                        <tr>
                            <td>
                                <strong>${countryLabel(row)}</strong>
                                <div class="mpage-subtitle">${row.country_code === 'GLOBAL' ? 'Fallback scope' : 'Country override'}</div>
                            </td>
                            <td>${row.max_profiles}</td>
                            <td>${kidsLabel}</td>
                            <td>${ownerControls}</td>
                            <td>${maturity}</td>
                            <td><span class="${badgeClass(row.status)}">${row.status}</span></td>
                            <td class="mpage-text-right">
                                <div class="mpage-action-row">
                                    <button type="button" class="mpage-link-btn" data-action="edit-policy" data-policy-id="${row.policy_id}">Edit</button>
                                    <button type="button" class="mpage-link-btn" data-action="publish-policy" data-policy-id="${row.policy_id}">Publish</button>
                                    <button type="button" class="mpage-link-btn is-danger" data-action="delete-policy" data-policy-id="${row.policy_id}">Delete</button>
                                </div>
                            </td>
                        </tr>
                    `;
                }).join('');
            }

            async function loadPolicies() {
                const params = new URLSearchParams();
                if (els.filterCountry.value) params.set('country_code', els.filterCountry.value);
                if (els.filterStatus.value) params.set('status', els.filterStatus.value);
                if (els.filterKids.value) params.set('kids_enabled', els.filterKids.value);
                if (els.filterSearch.value.trim()) params.set('search', els.filterSearch.value.trim());

                const payload = await requestJson(`${baseEndpoint}/policies?${params.toString()}`, { method: 'GET' });
                state.policies = Array.isArray(payload.data) ? payload.data : [];
                renderPolicies(payload.summary || {});
                showStatus('', '');
            }

            async function applyPolicyFilters() {
                await loadPolicies();
            }

            async function resetPolicyFilters() {
                els.filterCountry.value = '';
                els.filterStatus.value = 'ALL';
                els.filterKids.value = 'ALL';
                els.filterSearch.value = '';
                await loadPolicies();
            }

            function openModal(which) {
                const modal = which === 'policy'
                    ? els.policyModal
                    : which === 'profile'
                        ? els.profileModal
                        : els.confirmModal;
                if (modal) {
                    modal.hidden = false;
                    document.documentElement.classList.add('mpage-modal-open');
                    document.body.classList.add('mpage-modal-open');
                }
            }

            function closeModal(which) {
                const modal = which === 'policy'
                    ? els.policyModal
                    : which === 'profile'
                        ? els.profileModal
                        : els.confirmModal;
                if (modal) {
                    modal.hidden = true;
                }

                if (els.policyModal.hidden && els.profileModal.hidden && els.confirmModal.hidden) {
                    document.documentElement.classList.remove('mpage-modal-open');
                    document.body.classList.remove('mpage-modal-open');
                }
            }

            function getPolicyById(policyId) {
                return state.policies.find((row) => String(row.policy_id) === String(policyId)) || null;
            }

            function getProfileById(profileId) {
                return Array.isArray(state.workspace?.profiles)
                    ? state.workspace.profiles.find((row) => String(row.profile_id) === String(profileId)) || null
                    : null;
            }

            function getSelectedPolicyMaturityLevels() {
                const selected = els.policyMaturityOptions
                    .filter((input) => input.checked)
                    .map((input) => String(input.value || '').trim())
                    .filter(Boolean);

                return selected.length ? selected : ['ALL'];
            }

            function setSelectedPolicyMaturityLevels(values = []) {
                const normalized = Array.isArray(values)
                    ? Array.from(new Set(values.map((value) => String(value || '').trim()).filter(Boolean)))
                    : [];
                const resolved = normalized.length ? normalized : ['ALL'];
                const hasSpecificValue = resolved.some((value) => value !== 'ALL');

                els.policyMaturityOptions.forEach((input) => {
                    if (hasSpecificValue) {
                        input.checked = input.value !== 'ALL' && resolved.includes(input.value);
                    } else {
                        input.checked = input.value === 'ALL';
                    }
                });
            }

            function handlePolicyMaturityChange(event) {
                const input = event.target;
                if (!input) {
                    return;
                }

                if (input.value === 'ALL' && input.checked) {
                    els.policyMaturityOptions.forEach((item) => {
                        if (item !== input) {
                            item.checked = false;
                        }
                    });
                    return;
                }

                if (input.checked && input.value !== 'ALL') {
                    const allAgesInput = els.policyMaturityOptions.find((item) => item.value === 'ALL');
                    if (allAgesInput) {
                        allAgesInput.checked = false;
                    }
                }

                if (!els.policyMaturityOptions.some((item) => item.checked)) {
                    const allAgesInput = els.policyMaturityOptions.find((item) => item.value === 'ALL');
                    if (allAgesInput) {
                        allAgesInput.checked = true;
                    }
                }
            }

            function closeConfirmDialog(confirmed = false) {
                closeModal('confirm');
                const resolver = state.confirmResolver;
                state.confirmResolver = null;

                if (typeof resolver === 'function') {
                    resolver(confirmed);
                }
            }

            function requestConfirmationDialog({
                title = 'Please confirm',
                message = 'Are you sure you want to continue?',
                note = '',
                confirmLabel = 'Confirm',
                variant = 'primary',
            } = {}) {
                if (typeof state.confirmResolver === 'function') {
                    state.confirmResolver(false);
                    state.confirmResolver = null;
                }

                els.confirmTitle.textContent = title;
                els.confirmMessage.textContent = message;
                els.confirmNote.textContent = note;
                els.confirmNote.hidden = !note;
                els.confirmSubmitBtn.textContent = confirmLabel;
                els.confirmSubmitBtn.classList.toggle('mpage-btn-danger', variant === 'danger');

                openModal('confirm');

                return new Promise((resolve) => {
                    state.confirmResolver = resolve;
                });
            }

            function syncPolicyKidsState() {
                const enabled = !!els.policyKidsEnabled.checked;
                els.policyMaxKids.disabled = !enabled;
                els.policyKidsLimitCard.classList.toggle('is-disabled', !enabled);
                els.policyKidsLimitCard.setAttribute('aria-disabled', enabled ? 'false' : 'true');
            }

            function resetPolicyForm() {
                els.policyForm.reset();
                els.policyId.value = '';
                els.policyModalTitle.textContent = 'Add Country Policy';
                els.policyParentPinRequired.checked = true;
                setSelectedPolicyMaturityLevels(['ALL']);
                syncPolicyKidsState();
            }

            function resetProfileForm() {
                els.profileForm.reset();
                els.profileId.value = '';
                els.profileModalTitle.textContent = 'Add Profile';
                els.profileType.innerHTML = '<option value="ADULT">Adult</option><option value="KIDS">Kids</option>';
            }

            async function openPolicyEditor(policyId = null) {
                resetPolicyForm();
                if (!policyId) {
                    openModal('policy');
                    return;
                }

                const payload = await requestJson(`${baseEndpoint}/policies/${policyId}`, { method: 'GET' });
                const row = payload.data || {};
                els.policyModalTitle.textContent = 'Edit Country Policy';
                els.policyId.value = String(row.policy_id || '');
                els.policyCountry.value = String(row.country_code || 'GLOBAL');
                els.policyStatus.value = String(row.status || 'DRAFT');
                els.policyMaxProfiles.value = String(row.max_profiles || 1);
                els.policyMaxKids.value = String(row.max_kids_profiles || 0);
                els.policyKidsEnabled.checked = !!row.kids_enabled;
                els.policyOwnerEnableKids.checked = !!row.owner_can_enable_kids;
                els.policyOwnerSetMaturity.checked = !!row.owner_can_set_maturity;
                els.policyPinAllowed.checked = !!row.profile_pin_allowed;
                els.policyParentPinRequired.checked = !!row.parent_exit_pin_required;
                setSelectedPolicyMaturityLevels(Array.isArray(row.allowed_maturity_levels) ? row.allowed_maturity_levels : ['ALL']);
                els.policyEffectiveAt.value = toFormDateTime(row.effective_at);
                syncPolicyKidsState();
                openModal('policy');
            }

            async function savePolicy(event) {
                event.preventDefault();

                const selectedOption = els.policyCountry.options[els.policyCountry.selectedIndex];
                const payload = {
                    country_code: els.policyCountry.value,
                    country_name: selectedOption ? selectedOption.dataset.name || selectedOption.textContent : '',
                    status: els.policyStatus.value,
                    max_profiles: Number.parseInt(els.policyMaxProfiles.value, 10),
                    max_kids_profiles: Number.parseInt(els.policyMaxKids.value, 10),
                    kids_enabled: els.policyKidsEnabled.checked,
                    owner_can_enable_kids: els.policyOwnerEnableKids.checked,
                    owner_can_set_maturity: els.policyOwnerSetMaturity.checked,
                    profile_pin_allowed: els.policyPinAllowed.checked,
                    parent_exit_pin_required: els.policyParentPinRequired.checked,
                    allowed_maturity_levels: getSelectedPolicyMaturityLevels(),
                    effective_at: els.policyEffectiveAt.value || null,
                };

                const policyId = els.policyId.value.trim();
                const method = policyId ? 'PUT' : 'POST';
                const url = policyId ? `${baseEndpoint}/policies/${policyId}` : `${baseEndpoint}/policies`;

                try {
                    const response = await requestJson(url, {
                        method,
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(payload),
                    });
                    closeModal('policy');
                    showStatus('success', response.message || 'Policy saved successfully.');
                    await loadPolicies();
                } catch (error) {
                    showStatus('error', await resolveErrorMessage(error, 'Unable to save the policy.'));
                }
            }

            async function publishPolicy(policyId) {
                const policy = getPolicyById(policyId);
                const confirmed = await requestConfirmationDialog({
                    title: 'Publish country policy?',
                    message: `${countryLabel(policy || {})} will become the latest published configuration for profile resolution.`,
                    note: 'Use this after reviewing the country-level settings.',
                    confirmLabel: 'Publish',
                });

                if (!confirmed) {
                    return;
                }

                const response = await requestJson(`${baseEndpoint}/policies/${policyId}/publish`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                });
                showStatus('success', response.message || 'Policy published successfully.');
                await loadPolicies();
            }

            async function deletePolicy(policyId) {
                const policy = getPolicyById(policyId);
                const confirmed = await requestConfirmationDialog({
                    title: 'Delete country policy?',
                    message: `${countryLabel(policy || {})} will be removed from the policy list.`,
                    note: 'This action cannot be undone.',
                    confirmLabel: 'Delete',
                    variant: 'danger',
                });
                if (!confirmed) return;

                const response = await requestJson(`${baseEndpoint}/policies/${policyId}`, { method: 'DELETE' });
                showStatus('success', response.message || 'Policy deleted successfully.');
                await loadPolicies();
            }

            function renderCustomerResults(results) {
                if (!Array.isArray(results) || !results.length) {
                    els.customerResults.hidden = false;
                    els.customerResults.innerHTML = '<div class="mpage-empty">No matching subscribers were found.</div>';
                    return;
                }

                els.customerResults.hidden = false;
                els.customerResults.innerHTML = results.map((row) => `
                    <div class="mpage-customer-result">
                        <div>
                            <strong>${row.display_name || 'Subscriber'}</strong>
                            <small>
                                Customer ID: ${row.id || '-'} · SMS ID: ${row.sms_cust_id || '-'} ·
                                Email: ${row.email || '-'} · Phone: ${row.phone || '-'}
                            </small>
                        </div>
                        <button type="button" class="mpage-btn mpage-btn-secondary" data-action="select-customer" data-customer-id="${row.id}">Open Workspace</button>
                    </div>
                `).join('');
            }

            function renderWorkspace(data) {
                const customer = data.customer || {};
                const summary = data.summary || {};
                const policy = data.policy || {};
                const packages = Array.isArray(data.subscription_summary?.package_names) ? data.subscription_summary.package_names : [];
                const context = data.active_profile_context || null;
                const profiles = Array.isArray(data.profiles) ? data.profiles : [];
                const activity = Array.isArray(data.activity) ? data.activity : [];

                state.workspace = data;
                state.selectedCustomer = customer;

                els.workspace.hidden = false;
                els.customerName.textContent = customer.display_name || 'Subscriber';
                els.customerMeta.textContent = `Customer ID: ${customer.id || '-'} · SMS ID: ${customer.sms_cust_id || '-'} · Email: ${customer.email || '-'}`;
                els.workspaceProfileCount.textContent = `${summary.active_profiles || 0}/${summary.allowed_profiles || 1}`;
                els.workspaceCountry.textContent = policy.resolved_country_code || policy.country_code || 'GLOBAL';
                els.workspacePolicySource.textContent = policy.source || 'SAFE_DEFAULT';
                els.workspacePackageCount.textContent = String(data.subscription_summary?.active_count || 0);
                els.workspacePackages.textContent = packages.length ? packages.join(', ') : 'No package context available.';
                els.workspaceContext.textContent = context ? (context.profile_name || 'Selected profile') : 'None';
                els.workspaceContextMeta.textContent = context
                    ? `${context.profile_type || 'PROFILE'} · ${context.last_switched_at || 'Current session'}`
                    : 'No admin profile context selected.';

                if (!profiles.length) {
                    els.profilesBody.innerHTML = '<tr><td colspan="6" class="mpage-empty">No profiles found for the selected customer.</td></tr>';
                } else {
                    els.profilesBody.innerHTML = profiles.map((profile) => {
                        const canToggle = !profile.is_owner;
                        const isActive = String(profile.status || '').toUpperCase() === 'ACTIVE';
                        return `
                            <tr>
                                <td>
                                    <strong>${profile.profile_name || 'Profile'}</strong>
                                    ${profile.is_owner ? '<div class="mpage-subtitle">Default owner profile</div>' : ''}
                                </td>
                                <td>${profile.profile_type || 'ADULT'}</td>
                                <td>${profile.maturity_code || 'ALL'}</td>
                                <td>${profile.pin_enabled ? 'Enabled' : 'Disabled'}</td>
                                <td><span class="${badgeClass(profile.status)}">${profile.status || 'ACTIVE'}</span></td>
                                <td class="mpage-text-right">
                                    <div class="mpage-action-row">
                                        <button type="button" class="mpage-link-btn" data-action="edit-profile" data-profile-id="${profile.profile_id}">Edit</button>
                                        <button type="button" class="mpage-link-btn" data-action="switch-profile" data-profile-id="${profile.profile_id}">Switch</button>
                                        ${canToggle ? `<button type="button" class="mpage-link-btn" data-action="${isActive ? 'deactivate-profile' : 'activate-profile'}" data-profile-id="${profile.profile_id}">${isActive ? 'Deactivate' : 'Activate'}</button>` : ''}
                                        ${canToggle ? `<button type="button" class="mpage-link-btn is-danger" data-action="delete-profile" data-profile-id="${profile.profile_id}">Delete</button>` : ''}
                                    </div>
                                </td>
                            </tr>
                        `;
                    }).join('');
                }

                if (!activity.length) {
                    els.activityLog.innerHTML = '<div class="mpage-empty">No recent activity found for this customer.</div>';
                } else {
                    els.activityLog.innerHTML = activity.map((item) => `
                        <article class="mpage-activity-item">
                            <strong>${item.entity_type || 'PROFILE'} · ${item.action_type || 'UPDATE'}</strong>
                            <p>${item.message || 'Updated Multi Profile state.'}</p>
                            <small>${item.event_time || ''} · Actor #${item.actor_user_id || 0}</small>
                        </article>
                    `).join('');
                }
            }

            async function searchCustomers() {
                const query = els.customerQuery.value.trim();
                if (!query) {
                    showStatus('error', 'Enter a subscriber identifier before searching.');
                    return;
                }

                const payload = await requestJson(`${baseEndpoint}/customers/lookup?query=${encodeURIComponent(query)}`, { method: 'GET' });
                renderCustomerResults(payload.data || []);
                showStatus('', '');
            }

            async function loadWorkspace(customerId) {
                const payload = await requestJson(`${baseEndpoint}/customers/${encodeURIComponent(customerId)}/workspace`, { method: 'GET' });
                renderWorkspace(payload.data || {});
                showStatus('', '');
            }

            function openProfileEditor(profileId = null) {
                resetProfileForm();
                if (!profileId || !state.workspace || !Array.isArray(state.workspace.profiles)) {
                    openModal('profile');
                    return;
                }

                const profile = state.workspace.profiles.find((row) => Number(row.profile_id) === Number(profileId));
                if (!profile) {
                    openModal('profile');
                    return;
                }

                els.profileModalTitle.textContent = 'Edit Profile';
                els.profileId.value = String(profile.profile_id || '');
                els.profileName.value = String(profile.profile_name || '');
                els.profileType.innerHTML = profile.is_owner
                    ? '<option value="OWNER">Owner</option>'
                    : '<option value="ADULT">Adult</option><option value="KIDS">Kids</option>';
                els.profileType.value = String(profile.profile_type || 'ADULT');
                els.profileMaturity.value = String(profile.maturity_code || 'ALL');
                els.profileStatus.value = String(profile.status || 'ACTIVE');
                els.profilePinEnabled.checked = !!profile.pin_enabled;
                els.profileNotes.value = String(profile.notes || '');
                openModal('profile');
            }

            async function saveProfile(event) {
                event.preventDefault();

                if (!state.selectedCustomer || !state.selectedCustomer.id) {
                    showStatus('error', 'Select a customer before saving a profile.');
                    return;
                }

                const profileId = els.profileId.value.trim();
                const payload = {
                    profile_name: els.profileName.value.trim(),
                    profile_type: els.profileType.value,
                    maturity_code: els.profileMaturity.value.trim() || 'ALL',
                    status: els.profileStatus.value,
                    pin_enabled: els.profilePinEnabled.checked,
                    notes: els.profileNotes.value.trim(),
                };

                const method = profileId ? 'PUT' : 'POST';
                const url = profileId
                    ? `${baseEndpoint}/customers/${state.selectedCustomer.id}/profiles/${profileId}`
                    : `${baseEndpoint}/customers/${state.selectedCustomer.id}/profiles`;

                try {
                    const response = await requestJson(url, {
                        method,
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(payload),
                    });
                    closeModal('profile');
                    showStatus('success', response.message || 'Profile saved successfully.');
                    await loadWorkspace(state.selectedCustomer.id);
                } catch (error) {
                    showStatus('error', await resolveErrorMessage(error, 'Unable to save the profile.'));
                }
            }

            async function mutateProfile(action, profileId) {
                if (!state.selectedCustomer || !state.selectedCustomer.id) {
                    return;
                }

                const customerId = state.selectedCustomer.id;
                const actionUrlMap = {
                    activate: `${baseEndpoint}/customers/${customerId}/profiles/${profileId}/activate`,
                    deactivate: `${baseEndpoint}/customers/${customerId}/profiles/${profileId}/deactivate`,
                    switch: `${baseEndpoint}/customers/${customerId}/profiles/${profileId}/switch`,
                    delete: `${baseEndpoint}/customers/${customerId}/profiles/${profileId}`,
                };

                const methodMap = {
                    activate: 'POST',
                    deactivate: 'POST',
                    switch: 'POST',
                    delete: 'DELETE',
                };

                const profile = getProfileById(profileId);
                const profileName = profile?.profile_name || 'This profile';

                if (action === 'activate') {
                    const confirmed = await requestConfirmationDialog({
                        title: 'Activate this profile?',
                        message: `${profileName} will become available again for customer profile actions.`,
                        note: 'Use this when the child profile should be enabled again.',
                        confirmLabel: 'Activate',
                    });
                    if (!confirmed) {
                        return;
                    }
                }

                if (action === 'deactivate') {
                    const confirmed = await requestConfirmationDialog({
                        title: 'Deactivate this profile?',
                        message: `${profileName} will be disabled until it is activated again.`,
                        note: 'The owner profile remains protected from deactivate actions.',
                        confirmLabel: 'Deactivate',
                    });
                    if (!confirmed) {
                        return;
                    }
                }

                if (action === 'delete') {
                    const confirmed = await requestConfirmationDialog({
                        title: 'Delete this profile?',
                        message: `${profileName} will be permanently removed from this customer workspace.`,
                        note: 'This action cannot be undone.',
                        confirmLabel: 'Delete',
                        variant: 'danger',
                    });
                    if (!confirmed) {
                        return;
                    }
                }

                const response = await requestJson(actionUrlMap[action], {
                    method: methodMap[action],
                    headers: { 'Content-Type': 'application/json' },
                });

                showStatus('success', response.message || 'Profile updated successfully.');
                await loadWorkspace(customerId);
            }

            async function clearProfileContext() {
                if (!state.selectedCustomer || !state.selectedCustomer.id) {
                    return;
                }

                const confirmed = await requestConfirmationDialog({
                    title: 'Clear active profile context?',
                    message: 'The admin session will return to the owner/default profile context for this subscriber workspace.',
                    note: 'No profile data will be deleted or updated by clearing the context.',
                    confirmLabel: 'Clear context',
                });

                if (!confirmed) {
                    return;
                }

                const response = await requestJson(`${baseEndpoint}/customers/${state.selectedCustomer.id}/context/clear`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                });
                showStatus('success', response.message || 'Profile context cleared successfully.');
                await loadWorkspace(state.selectedCustomer.id);
            }

            function bindStaticActions() {
                els.refreshBtn.addEventListener('click', async () => {
                    showStatus('', '');
                    await loadPolicies();
                    if (state.selectedCustomer?.id) {
                        await loadWorkspace(state.selectedCustomer.id);
                    }
                });
                els.addPolicyBtn.addEventListener('click', () => {
                    resetPolicyForm();
                    openModal('policy');
                });
                els.policyForm.addEventListener('submit', savePolicy);
                els.profileForm.addEventListener('submit', saveProfile);
                els.filterSearchBtn.addEventListener('click', () => {
                    applyPolicyFilters().catch(async (error) => showStatus('error', await resolveErrorMessage(error, 'Unable to load policies.')));
                });
                els.filterResetBtn.addEventListener('click', () => {
                    resetPolicyFilters().catch(async (error) => showStatus('error', await resolveErrorMessage(error, 'Unable to reset policy filters.')));
                });
                els.filterSearch.addEventListener('keydown', (event) => {
                    if (event.key === 'Enter') {
                        event.preventDefault();
                        applyPolicyFilters().catch(async (error) => showStatus('error', await resolveErrorMessage(error, 'Unable to load policies.')));
                    }
                });
                els.customerSearchBtn.addEventListener('click', searchCustomers);
                els.customerQuery.addEventListener('keydown', (event) => {
                    if (event.key === 'Enter') {
                        event.preventDefault();
                        searchCustomers();
                    }
                });
                els.addProfileBtn.addEventListener('click', () => {
                    resetProfileForm();
                    openModal('profile');
                });
                els.clearContextBtn.addEventListener('click', clearProfileContext);
                els.policyKidsEnabled.addEventListener('change', syncPolicyKidsState);
                els.policyMaturityOptions.forEach((input) => {
                    input.addEventListener('change', handlePolicyMaturityChange);
                });
                els.confirmCloseBtn.addEventListener('click', () => closeConfirmDialog(false));
                els.confirmCancelBtn.addEventListener('click', () => closeConfirmDialog(false));
                els.confirmSubmitBtn.addEventListener('click', () => closeConfirmDialog(true));

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

                [els.policyModal, els.profileModal, els.confirmModal].forEach((modal) => {
                    modal.addEventListener('click', (event) => {
                        if (event.target === modal) {
                            if (modal === els.confirmModal) {
                                closeConfirmDialog(false);
                            } else if (modal === els.policyModal) {
                                closeModal('policy');
                            } else {
                                closeModal('profile');
                            }
                        }
                    });
                });

                document.addEventListener('keydown', (event) => {
                    if (event.key !== 'Escape') {
                        return;
                    }

                    if (!els.confirmModal.hidden) {
                        closeConfirmDialog(false);
                        return;
                    }

                    if (!els.profileModal.hidden) {
                        closeModal('profile');
                        return;
                    }

                    if (!els.policyModal.hidden) {
                        closeModal('policy');
                    }
                });

                document.addEventListener('click', async (event) => {
                    const button = event.target.closest('[data-action]');
                    if (!button) return;

                    const action = button.getAttribute('data-action');
                    const policyId = button.getAttribute('data-policy-id');
                    const profileId = button.getAttribute('data-profile-id');
                    const customerId = button.getAttribute('data-customer-id');

                    try {
                        if (action === 'edit-policy' && policyId) {
                            await openPolicyEditor(policyId);
                        } else if (action === 'publish-policy' && policyId) {
                            await publishPolicy(policyId);
                        } else if (action === 'delete-policy' && policyId) {
                            await deletePolicy(policyId);
                        } else if (action === 'select-customer' && customerId) {
                            await loadWorkspace(customerId);
                        } else if (action === 'edit-profile' && profileId) {
                            openProfileEditor(profileId);
                        } else if (action === 'switch-profile' && profileId) {
                            await mutateProfile('switch', profileId);
                        } else if (action === 'activate-profile' && profileId) {
                            await mutateProfile('activate', profileId);
                        } else if (action === 'deactivate-profile' && profileId) {
                            await mutateProfile('deactivate', profileId);
                        } else if (action === 'delete-profile' && profileId) {
                            await mutateProfile('delete', profileId);
                        }
                    } catch (error) {
                        showStatus('error', await resolveErrorMessage(error, 'The requested Multi Profile action failed.'));
                    }
                });
            }

            async function init() {
                bindStaticActions();
                try {
                    await loadCountries();
                    await loadPolicies();
                } catch (error) {
                    showStatus('error', await resolveErrorMessage(error, 'Unable to initialize the Multi Profile workspace.'));
                }
            }

            init();
        })();
    </script>
@endpush