<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/layout/configuracoes/ConfiguracoesPagamentoPage.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, onMounted } from 'vue';
import { supabase } from '@/lib/supabase/client';
import { tenantDb } from '@/lib/supabase/tenantClient';
import { useTenantStore } from '@/stores/tenantStore';
import { useToast } from 'primevue/usetoast';

const toast = useToast();
const tenantStore = useTenantStore();

const loading = ref(true);
const ownerId = ref(null);
const CARDS = ['pix', 'deposito', 'dinheiro', 'cartao', 'convenio', 'observacoes'];
const expandedCard = ref(new Set());
const savingCard = ref(null);

// ── Defaults ────────────────────────────────────────────────────
const DEFAULT = {
    pix_ativo: false,
    pix_tipo: 'cpf',
    pix_chave: '',
    pix_nome_titular: '',

    deposito_ativo: false,
    deposito_banco: '',
    deposito_agencia: '',
    deposito_conta: '',
    deposito_tipo_conta: 'corrente',
    deposito_titular: '',
    deposito_cpf_cnpj: '',

    dinheiro_ativo: false,

    cartao_ativo: false,
    cartao_instrucao: '',

    convenio_ativo: false,
    convenio_lista: '',

    observacoes_pagamento: ''
};

const cfg = ref({ ...DEFAULT });

// ── Opções ───────────────────────────────────────────────────────
const pixTipoOptions = [
    { label: 'CPF', value: 'cpf' },
    { label: 'CNPJ', value: 'cnpj' },
    { label: 'E-mail', value: 'email' },
    { label: 'Celular', value: 'celular' },
    { label: 'Chave aleatória', value: 'aleatoria' }
];

const pixTipoLabel = {
    cpf: 'CPF (somente números)',
    cnpj: 'CNPJ (somente números)',
    email: 'E-mail',
    celular: 'Celular (+55DDD9XXXXXXXX)',
    aleatoria: 'Chave aleatória (UUID)'
};

const tipoConta = [
    { label: 'Conta-corrente', value: 'corrente' },
    { label: 'Poupança', value: 'poupanca' }
];

// Principais bancos BR
const bancos = [
    { label: 'Banco do Brasil', value: '001' },
    { label: 'Bradesco', value: '237' },
    { label: 'Caixa Econômica', value: '104' },
    { label: 'Itaú', value: '341' },
    { label: 'Nubank', value: '260' },
    { label: 'Santander', value: '033' },
    { label: 'Sicoob', value: '756' },
    { label: 'Sicredi', value: '748' },
    { label: 'Inter', value: '077' },
    { label: 'C6 Bank', value: '336' },
    { label: 'PicPay', value: '380' },
    { label: 'Mercado Pago', value: '323' },
    { label: 'PagBank', value: '290' },
    { label: 'Neon', value: '655' },
    { label: 'Next', value: '237' },
    { label: 'Outro', value: 'outro' }
];

// ── Toggle cards ─────────────────────────────────────────────────
function expandAll() {
    expandedCard.value = new Set(CARDS);
}
function collapseAll() {
    expandedCard.value = new Set();
}
function toggleCard(key) {
    const s = new Set(expandedCard.value);
    if (s.has(key)) s.delete(key);
    else s.add(key);
    expandedCard.value = s;
}

// ── Load ─────────────────────────────────────────────────────────
async function load() {
    loading.value = true;
    try {
        const uid = tenantStore.user?.id || null;
        if (!uid) return;
        ownerId.value = uid;

        const { data } = await tenantDb().from('payment_settings').select('*').eq('owner_id', uid).maybeSingle();

        if (data) {
            cfg.value = { ...DEFAULT, ...data };
        }
    } finally {
        loading.value = false;
    }
}

// ── Save card ────────────────────────────────────────────────────
async function saveCard(cardKey) {
    if (!ownerId.value) return;
    savingCard.value = cardKey;

    const payload = {
        owner_id: ownerId.value
    };

    if (cardKey === 'pix') {
        Object.assign(payload, {
            pix_ativo: cfg.value.pix_ativo,
            pix_tipo: cfg.value.pix_tipo,
            pix_chave: cfg.value.pix_chave?.trim() ?? '',
            pix_nome_titular: cfg.value.pix_nome_titular?.trim() ?? ''
        });
    } else if (cardKey === 'deposito') {
        Object.assign(payload, {
            deposito_ativo: cfg.value.deposito_ativo,
            deposito_banco: cfg.value.deposito_banco,
            deposito_agencia: cfg.value.deposito_agencia?.trim() ?? '',
            deposito_conta: cfg.value.deposito_conta?.trim() ?? '',
            deposito_tipo_conta: cfg.value.deposito_tipo_conta,
            deposito_titular: cfg.value.deposito_titular?.trim() ?? '',
            deposito_cpf_cnpj: cfg.value.deposito_cpf_cnpj?.trim() ?? ''
        });
    } else if (cardKey === 'dinheiro') {
        payload.dinheiro_ativo = cfg.value.dinheiro_ativo;
    } else if (cardKey === 'cartao') {
        Object.assign(payload, {
            cartao_ativo: cfg.value.cartao_ativo,
            cartao_instrucao: cfg.value.cartao_instrucao?.trim() ?? ''
        });
    } else if (cardKey === 'convenio') {
        Object.assign(payload, {
            convenio_ativo: cfg.value.convenio_ativo,
            convenio_lista: cfg.value.convenio_lista?.trim() ?? ''
        });
    } else if (cardKey === 'observacoes') {
        payload.observacoes_pagamento = cfg.value.observacoes_pagamento?.trim() ?? '';
    }

    try {
        const { error } = await tenantDb().from('payment_settings').upsert(payload, { onConflict: 'owner_id' });

        if (error) throw error;
        toast.add({ severity: 'success', summary: 'Salvo', detail: 'Configurações de pagamento atualizadas.', life: 2500 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro ao salvar', detail: e?.message, life: 4000 });
    } finally {
        savingCard.value = null;
    }
}

onMounted(load);
</script>

<template>
    <!-- ══ SKELETON ══════════════════════════════════════════════ -->
    <template v-if="loading">
        <div class="flex flex-col gap-4">
            <!-- Skeleton subheader -->
            <div class="cfg-subheader">
                <Skeleton width="2rem" height="2rem" border-radius="6px" />
                <div class="flex flex-col gap-1.5 flex-1">
                    <Skeleton width="7rem" height="13px" />
                    <Skeleton width="18rem" height="11px" />
                </div>
            </div>
            <!-- Skeleton cards de pagamento -->
            <div v-for="n in 4" :key="n" class="rounded-[6px] border border-[var(--surface-border)] bg-[var(--surface-card)] overflow-hidden">
                <div class="flex items-center gap-3 p-4">
                    <Skeleton width="40px" height="40px" border-radius="6px" />
                    <div class="flex flex-col gap-1.5 flex-1">
                        <Skeleton :width="n % 2 === 0 ? '8rem' : '10rem'" height="12px" />
                        <Skeleton :width="n % 3 === 0 ? '16rem' : '12rem'" height="10px" />
                    </div>
                    <Skeleton width="3rem" height="1.4rem" border-radius="999px" />
                </div>
            </div>
            <AppLoadingPhrases action="Carregando formas de pagamento..." containerClass="py-6" />
        </div>
    </template>

    <div v-else class="flex flex-col gap-4">
        <!-- Pix ──────────────────────────────────────────────────── -->
        <div class="rounded-[6px] border bg-[var(--surface-card)] overflow-hidden" :class="cfg.pix_ativo ? 'border-green-300' : 'border-[var(--surface-border)]'">
            <!-- Header -->
            <button type="button" class="pag-accordion__header" @click="toggleCard('pix')">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-[6px] flex items-center justify-center shrink-0" :class="cfg.pix_ativo ? 'bg-green-100 text-green-700' : 'bg-[var(--surface-ground)] text-[var(--text-color-secondary)]'">
                        <i class="pi pi-qrcode text-lg" />
                    </div>
                    <div>
                        <div class="font-semibold text-[var(--text-color)]">Pix</div>
                        <div class="text-sm text-[var(--text-color-secondary)]">
                            {{ cfg.pix_ativo && cfg.pix_chave ? `Chave: ${cfg.pix_chave}` : 'Pagamento instantâneo via chave Pix' }}
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-3 shrink-0">
                    <Tag v-if="cfg.pix_ativo" value="Ativo" severity="success" />
                    <Tag v-else value="Inativo" severity="secondary" />
                    <i class="pi text-[var(--text-color-secondary)]" :class="expandedCard.has('pix') ? 'pi-angle-up' : 'pi-angle-down'" />
                </div>
            </button>

            <!-- Body -->
            <div v-if="expandedCard.has('pix')" class="pag-accordion__body">
                <div class="flex items-center justify-between">
                    <span class="font-medium text-[var(--text-color)]">Habilitar Pix</span>
                    <ToggleSwitch v-model="cfg.pix_ativo" />
                </div>

                <template v-if="cfg.pix_ativo">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-[var(--text-color)] mb-1">Tipo de chave</label>
                            <Select v-model="cfg.pix_tipo" :options="pixTipoOptions" option-label="label" option-value="value" class="w-full" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-[var(--text-color)] mb-1">
                                {{ pixTipoLabel[cfg.pix_tipo] || 'Chave' }}
                            </label>
                            <InputText v-model="cfg.pix_chave" class="w-full" :placeholder="pixTipoLabel[cfg.pix_tipo]" />
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-[var(--text-color)] mb-1">Nome do titular</label>
                            <InputText v-model="cfg.pix_nome_titular" class="w-full" placeholder="Nome que aparece na chave" />
                        </div>
                    </div>
                </template>

                <div class="flex justify-end">
                    <Button label="Salvar" icon="pi pi-check" :loading="savingCard === 'pix'" @click="saveCard('pix')" />
                </div>
            </div>
        </div>

        <!-- Depósito bancário ───────────────────────────────────── -->
        <div class="rounded-[6px] border bg-[var(--surface-card)] overflow-hidden" :class="cfg.deposito_ativo ? 'border-blue-300' : 'border-[var(--surface-border)]'">
            <button type="button" class="pag-accordion__header" @click="toggleCard('deposito')">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-[6px] flex items-center justify-center shrink-0" :class="cfg.deposito_ativo ? 'bg-blue-100 text-blue-700' : 'bg-[var(--surface-ground)] text-[var(--text-color-secondary)]'">
                        <i class="pi pi-building-columns text-lg" />
                    </div>
                    <div>
                        <div class="font-semibold text-[var(--text-color)]">Depósito / TED</div>
                        <div class="text-sm text-[var(--text-color-secondary)]">
                            {{ cfg.deposito_ativo && cfg.deposito_banco ? `${cfg.deposito_banco} · Ag. ${cfg.deposito_agencia || '—'} · Conta ${cfg.deposito_conta || '—'}` : 'Transferência bancária ou depósito' }}
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-3 shrink-0">
                    <Tag v-if="cfg.deposito_ativo" value="Ativo" severity="success" />
                    <Tag v-else value="Inativo" severity="secondary" />
                    <i class="pi text-[var(--text-color-secondary)]" :class="expandedCard.has('deposito') ? 'pi-angle-up' : 'pi-angle-down'" />
                </div>
            </button>

            <div v-if="expandedCard.has('deposito')" class="pag-accordion__body">
                <div class="flex items-center justify-between">
                    <span class="font-medium text-[var(--text-color)]">Habilitar Depósito / TED</span>
                    <ToggleSwitch v-model="cfg.deposito_ativo" />
                </div>

                <template v-if="cfg.deposito_ativo">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-[var(--text-color)] mb-1">Banco</label>
                            <Select v-model="cfg.deposito_banco" :options="bancos" option-label="label" option-value="label" class="w-full" placeholder="Selecione o banco" filter />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-[var(--text-color)] mb-1">Tipo de conta</label>
                            <Select v-model="cfg.deposito_tipo_conta" :options="tipoConta" option-label="label" option-value="value" class="w-full" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-[var(--text-color)] mb-1">Agência</label>
                            <InputText v-model="cfg.deposito_agencia" class="w-full" placeholder="0000" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-[var(--text-color)] mb-1">Conta</label>
                            <InputText v-model="cfg.deposito_conta" class="w-full" placeholder="00000-0" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-[var(--text-color)] mb-1">Titular</label>
                            <InputText v-model="cfg.deposito_titular" class="w-full" placeholder="Nome completo ou razão social" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-[var(--text-color)] mb-1">CPF / CNPJ do titular</label>
                            <InputText v-model="cfg.deposito_cpf_cnpj" class="w-full" placeholder="000.000.000-00" />
                        </div>
                    </div>
                </template>

                <div class="flex justify-end">
                    <Button label="Salvar" icon="pi pi-check" :loading="savingCard === 'deposito'" @click="saveCard('deposito')" />
                </div>
            </div>
        </div>

        <!-- Dinheiro ─────────────────────────────────────────────── -->
        <div class="rounded-[6px] border bg-[var(--surface-card)] overflow-hidden" :class="cfg.dinheiro_ativo ? 'border-yellow-300' : 'border-[var(--surface-border)]'">
            <button type="button" class="pag-accordion__header" @click="toggleCard('dinheiro')">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-[6px] flex items-center justify-center shrink-0" :class="cfg.dinheiro_ativo ? 'bg-yellow-100 text-yellow-700' : 'bg-[var(--surface-ground)] text-[var(--text-color-secondary)]'">
                        <i class="pi pi-wallet text-lg" />
                    </div>
                    <div>
                        <div class="font-semibold text-[var(--text-color)]">Dinheiro (espécie)</div>
                        <div class="text-sm text-[var(--text-color-secondary)]">Pagamento presencial em dinheiro</div>
                    </div>
                </div>
                <div class="flex items-center gap-3 shrink-0">
                    <Tag v-if="cfg.dinheiro_ativo" value="Ativo" severity="success" />
                    <Tag v-else value="Inativo" severity="secondary" />
                    <i class="pi text-[var(--text-color-secondary)]" :class="expandedCard.has('dinheiro') ? 'pi-angle-up' : 'pi-angle-down'" />
                </div>
            </button>

            <div v-if="expandedCard.has('dinheiro')" class="pag-accordion__body">
                <div class="flex items-center justify-between">
                    <div>
                        <span class="font-medium text-[var(--text-color)]">Habilitar pagamento em dinheiro</span>
                        <p class="text-sm text-[var(--text-color-secondary)] mt-1">Aceitar pagamento em espécie nas sessões presenciais.</p>
                    </div>
                    <ToggleSwitch v-model="cfg.dinheiro_ativo" />
                </div>

                <div class="flex justify-end">
                    <Button label="Salvar" icon="pi pi-check" :loading="savingCard === 'dinheiro'" @click="saveCard('dinheiro')" />
                </div>
            </div>
        </div>

        <!-- Cartão ───────────────────────────────────────────────── -->
        <div class="rounded-[6px] border bg-[var(--surface-card)] overflow-hidden" :class="cfg.cartao_ativo ? 'border-purple-300' : 'border-[var(--surface-border)]'">
            <button type="button" class="pag-accordion__header" @click="toggleCard('cartao')">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-[6px] flex items-center justify-center shrink-0" :class="cfg.cartao_ativo ? 'bg-purple-100 text-purple-700' : 'bg-[var(--surface-ground)] text-[var(--text-color-secondary)]'">
                        <i class="pi pi-credit-card text-lg" />
                    </div>
                    <div>
                        <div class="font-semibold text-[var(--text-color)]">Cartão (maquininha)</div>
                        <div class="text-sm text-[var(--text-color-secondary)]">Crédito e débito presencial</div>
                    </div>
                </div>
                <div class="flex items-center gap-3 shrink-0">
                    <Tag v-if="cfg.cartao_ativo" value="Ativo" severity="success" />
                    <Tag v-else value="Inativo" severity="secondary" />
                    <i class="pi text-[var(--text-color-secondary)]" :class="expandedCard.has('cartao') ? 'pi-angle-up' : 'pi-angle-down'" />
                </div>
            </button>

            <div v-if="expandedCard.has('cartao')" class="pag-accordion__body">
                <div class="flex items-center justify-between">
                    <div>
                        <span class="font-medium text-[var(--text-color)]">Habilitar pagamento por cartão</span>
                        <p class="text-sm text-[var(--text-color-secondary)] mt-1">Aceitar cartão de crédito e débito via maquininha nas sessões presenciais.</p>
                    </div>
                    <ToggleSwitch v-model="cfg.cartao_ativo" />
                </div>

                <template v-if="cfg.cartao_ativo">
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-color)] mb-1">Instrução ao paciente <span class="text-[var(--text-color-secondary)]">(opcional)</span></label>
                        <InputText v-model="cfg.cartao_instrucao" class="w-full" placeholder="Ex: Aceito todas as bandeiras. Parcelo em até 3x." />
                    </div>
                </template>

                <div class="flex justify-end">
                    <Button label="Salvar" icon="pi pi-check" :loading="savingCard === 'cartao'" @click="saveCard('cartao')" />
                </div>
            </div>
        </div>

        <!-- Plano de Saúde / Convênio ────────────────────────────── -->
        <div class="rounded-[6px] border bg-[var(--surface-card)] overflow-hidden" :class="cfg.convenio_ativo ? 'border-teal-300' : 'border-[var(--surface-border)]'">
            <button type="button" class="pag-accordion__header" @click="toggleCard('convenio')">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-[6px] flex items-center justify-center shrink-0" :class="cfg.convenio_ativo ? 'bg-teal-100 text-teal-700' : 'bg-[var(--surface-ground)] text-[var(--text-color-secondary)]'">
                        <i class="pi pi-heart text-lg" />
                    </div>
                    <div>
                        <div class="font-semibold text-[var(--text-color)]">Plano de saúde / Convênio</div>
                        <div class="text-sm text-[var(--text-color-secondary)]">
                            {{ cfg.convenio_ativo && cfg.convenio_lista ? cfg.convenio_lista.slice(0, 60) + (cfg.convenio_lista.length > 60 ? '…' : '') : 'Atendimento por convênio' }}
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-3 shrink-0">
                    <Tag v-if="cfg.convenio_ativo" value="Ativo" severity="success" />
                    <Tag v-else value="Inativo" severity="secondary" />
                    <i class="pi text-[var(--text-color-secondary)]" :class="expandedCard.has('convenio') ? 'pi-angle-up' : 'pi-angle-down'" />
                </div>
            </button>

            <div v-if="expandedCard.has('convenio')" class="pag-accordion__body">
                <div class="flex items-center justify-between">
                    <div>
                        <span class="font-medium text-[var(--text-color)]">Aceitar plano de saúde / convênio</span>
                        <p class="text-sm text-[var(--text-color-secondary)] mt-1">Habilite para informar quais convênios são aceitos.</p>
                    </div>
                    <ToggleSwitch v-model="cfg.convenio_ativo" />
                </div>

                <template v-if="cfg.convenio_ativo">
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-color)] mb-1">Convênios aceitos</label>
                        <Textarea v-model="cfg.convenio_lista" rows="3" class="w-full" placeholder="Ex: Unimed, Bradesco Saúde, Amil, SulAmérica..." autoResize />
                        <small class="text-[var(--text-color-secondary)]">Liste os convênios separados por vírgula ou um por linha.</small>
                    </div>
                </template>

                <div class="flex justify-end">
                    <Button label="Salvar" icon="pi pi-check" :loading="savingCard === 'convenio'" @click="saveCard('convenio')" />
                </div>
            </div>
        </div>

        <!-- Observações gerais ───────────────────────────────────── -->
        <div class="pag-accordion">
            <button type="button" class="pag-accordion__header" @click="toggleCard('observacoes')">
                <div class="flex items-center gap-3">
                    <div class="pag-accordion__icon bg-[var(--surface-ground)] text-[var(--text-color-secondary)]">
                        <i class="pi pi-comment text-lg" />
                    </div>
                    <div>
                        <div class="font-semibold text-[var(--text-color)]">Observações ao paciente</div>
                        <div class="text-sm text-[var(--text-color-secondary)]">Texto exibido junto às formas de pagamento</div>
                    </div>
                </div>
                <i class="pi text-[var(--text-color-secondary)]" :class="expandedCard.has('observacoes') ? 'pi-angle-up' : 'pi-angle-down'" />
            </button>

            <div v-if="expandedCard.has('observacoes')" class="pag-accordion__body">
                <Textarea v-model="cfg.observacoes_pagamento" rows="4" class="w-full" placeholder="Ex: O pagamento deve ser realizado no dia da sessão. Em caso de cancelamento com menos de 24h, a sessão será cobrada." autoResize />
                <div class="flex justify-end">
                    <Button label="Salvar" icon="pi pi-check" :loading="savingCard === 'observacoes'" @click="saveCard('observacoes')" />
                </div>
            </div>
        </div>

        <LoadedPhraseBlock />
    </div>
</template>

<style scoped>
/* ── Card wrap ────────────────────────────────────── */
.cfg-wrap {
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    background: var(--surface-card);
    overflow: hidden;
}
.cfg-wrap__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--surface-border);
    background: var(--surface-ground);
}
.cfg-wrap__icon {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--primary-color, #6366f1) 12%, transparent);
    color: var(--primary-color, #6366f1);
    font-size: 0.8rem;
}
.cfg-wrap__title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-color);
}
.cfg-wrap__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Empty state ──────────────────────────────────── */
.cfg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-color-secondary);
    border: 1px dashed var(--surface-border);
    border-radius: 6px;
    background: var(--surface-ground);
}

/* ── Pagamento accordions ─────────────────────────── */
.pag-accordion {
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    background: var(--surface-card);
    overflow: hidden;
    transition: border-color 0.15s;
}
.pag-accordion--on {
    border-color: color-mix(in srgb, #22c55e 40%, transparent);
}
.pag-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.12s;
    text-align: left;
}
.pag-accordion__header:hover {
    background: var(--surface-hover);
}
.pag-accordion__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
    flex-shrink: 0;
}
.pag-accordion__body {
    border-top: 1px solid var(--surface-border);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
</style>
