<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/features/agenda/pages/CompromissosDeterminados.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';

import { useToast } from 'primevue/usetoast';

import InputSwitch from 'primevue/inputswitch';
import Menu from 'primevue/menu';

import DeterminedCommitmentDialog from '@/features/agenda/components/DeterminedCommitmentDialog.vue';

import { supabase } from '@/lib/supabase/client';
import { useTenantStore } from '@/stores/tenantStore';

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

// ── Hero sticky ───────────────────────────────────────────
const headerEl = ref(null);
const headerSentinelRef = ref(null);
const headerStuck = ref(false);
let _observer = null;

// ── Mobile ───────────────────────────────────────────────
const mobileMenuRef = ref(null);
const searchDlgOpen = ref(false);

const mobileMenuItems = computed(() => [
    { label: 'Novo compromisso', icon: 'pi pi-plus', command: () => openCreate() },
    { label: 'Recarregar', icon: 'pi pi-refresh', command: () => fetchAll() }
]);

onMounted(async () => {
    const rootMargin = `${document.querySelector('.l2-main') ? '0px' : '-56px'} 0px 0px 0px`;
    _observer = new IntersectionObserver(
        ([entry]) => {
            headerStuck.value = !entry.isIntersecting;
        },
        { threshold: 0, rootMargin }
    );
    if (headerSentinelRef.value) _observer.observe(headerSentinelRef.value);
    await tenantStore.loadSessionAndTenant();
    await fetchAll();
});

onBeforeUnmount(() => {
    _observer?.disconnect();
});

const loading = ref(false);
const hasLoaded = ref(false);
const saving = ref(false);

const filters = reactive({
    global: { value: null, matchMode: 'contains' },
    name: { value: null, matchMode: 'contains' },
    description: { value: null, matchMode: 'contains' }
});

const typeFilter = ref('all');
const typeOptions = [
    { label: 'Todos', value: 'all' },
    { label: 'Nativos', value: 'native' },
    { label: 'Meus', value: 'custom' }
];

const commitments = ref([]);
const totalsByCommitmentId = ref({});

const visibleCommitments = computed(() => {
    let list = commitments.value;
    if (typeFilter.value === 'native') list = list.filter((c) => !!c.is_native);
    if (typeFilter.value === 'custom') list = list.filter((c) => !c.is_native);
    return list;
});

const cardsCommitments = computed(() => {
    let list = visibleCommitments.value;
    const q = String(filters.global?.value ?? '')
        .trim()
        .toLowerCase();
    if (q) {
        list = list.filter(
            (c) =>
                String(c.name || '')
                    .toLowerCase()
                    .includes(q) ||
                String(c.description || '')
                    .toLowerCase()
                    .includes(q)
        );
    }
    return list;
});

// ── Stats ─────────────────────────────────────────────────
const stats = computed(() => {
    const all = commitments.value;
    const ativos = all.filter((c) => c.active).length;
    const inativos = all.filter((c) => !c.active).length;
    const nativos = all.filter((c) => c.is_native).length;
    const meus = all.filter((c) => !c.is_native).length;
    const totalMin = Object.values(totalsByCommitmentId.value).reduce((a, b) => a + b, 0);
    return [
        { label: 'Total', value: all.length, cls: '' },
        { label: 'Ativos', value: ativos, cls: ativos > 0 ? 'stat-ok' : '' },
        { label: 'Inativos', value: inativos, cls: inativos > 0 ? 'stat-warn' : '' },
        { label: 'Nativos', value: nativos, cls: '' },
        { label: 'Meus', value: meus, cls: '' },
        { label: 'Tempo total', value: formatMinutes(totalMin), cls: '' }
    ];
});

function clearSearch() {
    filters.global.value = null;
}

const dlgOpen = ref(false);
const dlgMode = ref('create');
const editing = ref(null);

const statsInfoDlg = reactive({ open: false, item: null });
function openStatsInfo(c) {
    statsInfoDlg.item = c;
    statsInfoDlg.open = true;
}

function getTenantId() {
    return tenantStore.activeTenantId || null;
}

async function fetchAll() {
    const tenantId = getTenantId();
    if (!tenantId) {
        toast.add({ severity: 'warn', summary: 'Atenção', detail: 'Tenant inválido.', life: 3000 });
        return;
    }
    loading.value = true;
    try {
        const { data: cData, error: cErr } = await supabase
            .from('determined_commitments')
            .select('id, tenant_id, is_native, native_key, is_locked, active, name, description, bg_color, text_color, created_at, updated_at')
            .eq('tenant_id', tenantId)
            .order('is_native', { ascending: false })
            .order('created_at', { ascending: false });
        if (cErr) throw cErr;

        const ids = (cData || []).map((x) => x.id);
        let fieldsByCommitmentId = {};
        if (ids.length > 0) {
            const { data: fData, error: fErr } = await supabase
                .from('determined_commitment_fields')
                .select('id, tenant_id, commitment_id, key, label, field_type, required, sort_order')
                .eq('tenant_id', tenantId)
                .in('commitment_id', ids)
                .order('sort_order', { ascending: true });
            if (fErr) throw fErr;
            fieldsByCommitmentId = (fData || []).reduce((acc, row) => {
                if (!acc[row.commitment_id]) acc[row.commitment_id] = [];
                acc[row.commitment_id].push({
                    id: row.id,
                    key: row.key,
                    label: row.label,
                    type: row.field_type,
                    required: !!row.required,
                    sort_order: row.sort_order
                });
                return acc;
            }, {});
        }

        const { data: lData, error: lErr } = await supabase.from('commitment_time_logs').select('commitment_id, minutes').eq('tenant_id', tenantId);
        if (lErr) throw lErr;
        const totals = {};
        for (const row of lData || []) {
            const cid = row.commitment_id;
            totals[cid] = (totals[cid] || 0) + (Number(row.minutes ?? 0) || 0);
        }
        totalsByCommitmentId.value = totals;

        commitments.value = (cData || []).map((c) => ({
            ...c,
            fields: fieldsByCommitmentId[c.id] || []
        }));
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao carregar.', life: 4500 });
    } finally {
        loading.value = false;
        hasLoaded.value = true;
    }
}

function getTotalMinutes(id) {
    return Number(totalsByCommitmentId.value?.[id] ?? 0);
}

function formatMinutes(minutes) {
    const m = Math.max(0, Number(minutes) || 0);
    const h = Math.floor(m / 60);
    const mm = m % 60;
    if (h <= 0) return `${mm}m`;
    return `${h}h ${String(mm).padStart(2, '0')}m`;
}

function isActiveLocked(c) {
    return !!c.is_locked;
}
function isDeleteLocked(c) {
    return !!c.is_native;
}
function isEditLocked(_c) {
    return false;
}

function openCreate() {
    dlgMode.value = 'create';
    editing.value = null;
    dlgOpen.value = true;
}
function openEdit(c) {
    dlgMode.value = 'edit';
    editing.value = JSON.parse(JSON.stringify(c));
    dlgOpen.value = true;
}

async function onToggleActive(c) {
    if (isActiveLocked(c)) return;
    const tenantId = getTenantId();
    if (!tenantId) return;
    saving.value = true;
    try {
        const { error } = await supabase.from('determined_commitments').update({ active: !!c.active }).eq('tenant_id', tenantId).eq('id', c.id);
        if (error) throw error;
        toast.add({ severity: 'success', summary: 'Atualizado', detail: `"${c.name}" ${c.active ? 'ativo' : 'inativo'}.`, life: 2500 });
    } catch (e) {
        c.active = !c.active;
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao atualizar.', life: 4500 });
    } finally {
        saving.value = false;
    }
}

async function onSave(payload) {
    const tenantId = getTenantId();
    if (!tenantId) return;
    saving.value = true;
    try {
        await supabase.auth.getUser();
        if (dlgMode.value === 'create') {
            const { data: newC, error: cErr } = await supabase
                .from('determined_commitments')
                .insert({
                    tenant_id: tenantId,
                    is_native: false,
                    native_key: null,
                    is_locked: false,
                    active: !!payload.active,
                    name: payload.name,
                    description: payload.description,
                    bg_color: payload.bg_color || null,
                    text_color: payload.text_color || null
                })
                .select('id, tenant_id, is_native, native_key, is_locked, active, name, description, bg_color, text_color, created_at, updated_at')
                .single();
            if (cErr) throw cErr;
            const fields = Array.isArray(payload.fields) ? payload.fields : [];
            if (fields.length > 0) {
                const { error: fErr } = await supabase.from('determined_commitment_fields').insert(
                    fields.map((f, idx) => ({
                        tenant_id: tenantId,
                        commitment_id: newC.id,
                        key: f.key,
                        label: f.label,
                        field_type: f.type,
                        required: !!f.required,
                        sort_order: Number(f.sort_order ?? (idx + 1) * 10)
                    }))
                );
                if (fErr) throw fErr;
            }
            toast.add({ severity: 'success', summary: 'Criado', detail: 'Compromisso criado.', life: 2500 });
        } else {
            const { error: upErr } = await supabase
                .from('determined_commitments')
                .update({
                    name: payload.name,
                    description: payload.description,
                    active: !!payload.active,
                    bg_color: payload.bg_color || null,
                    text_color: payload.text_color || null
                })
                .eq('tenant_id', tenantId)
                .eq('id', payload.id);
            if (upErr) throw upErr;
            const { error: delErr } = await supabase.from('determined_commitment_fields').delete().eq('tenant_id', tenantId).eq('commitment_id', payload.id);
            if (delErr) throw delErr;
            const fields = Array.isArray(payload.fields) ? payload.fields : [];
            if (fields.length > 0) {
                const { error: insErr } = await supabase.from('determined_commitment_fields').insert(
                    fields.map((f, idx) => ({
                        tenant_id: tenantId,
                        commitment_id: payload.id,
                        key: f.key,
                        label: f.label,
                        field_type: f.type,
                        required: !!f.required,
                        sort_order: Number(f.sort_order ?? (idx + 1) * 10)
                    }))
                );
                if (insErr) throw insErr;
            }
            toast.add({ severity: 'success', summary: 'Salvo', detail: 'Alterações salvas.', life: 2500 });
        }
        dlgOpen.value = false;
        await fetchAll();
    } catch (e) {
        const msg = e?.message || '';
        const detail = e?.code === '23505' || /duplicate key value/i.test(msg) ? 'Já existe um compromisso com esse nome. Escolha outro.' : msg || 'Falha ao salvar.';
        toast.add({ severity: 'error', summary: 'Erro', detail, life: 4500 });
    } finally {
        saving.value = false;
    }
}

function confirmDelete(c) {
    if (isDeleteLocked(c)) return;
    if (!window.confirm(`Excluir "${c.name}"? Essa ação não pode ser desfeita.`)) return;
    onDelete(c);
}

async function onDelete(c) {
    if (isDeleteLocked(c)) return;
    const tenantId = getTenantId();
    if (!tenantId) return;
    saving.value = true;
    try {
        const { error: fErr } = await supabase.from('determined_commitment_fields').delete().eq('tenant_id', tenantId).eq('commitment_id', c.id);
        if (fErr) throw fErr;
        const { error: lErr } = await supabase.from('commitment_time_logs').delete().eq('tenant_id', tenantId).eq('commitment_id', c.id);
        if (lErr) throw lErr;
        const { data: delRows, error: dErr } = await supabase.from('determined_commitments').delete().eq('tenant_id', tenantId).eq('id', c.id).eq('is_native', false).select('id');
        if (dErr) throw dErr;
        if (!delRows?.length) throw new Error('DELETE bloqueado por RLS.');
        toast.add({ severity: 'success', summary: 'Excluído', detail: 'Compromisso removido.', life: 2500 });
        dlgOpen.value = false;
        await fetchAll();
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao excluir.', life: 4500 });
    } finally {
        saving.value = false;
    }
}

const HIGHLIGHT_MS = 24 * 60 * 60 * 1000;
function isRecent(row) {
    if (!row?.created_at) return false;
    return Date.now() - new Date(row.created_at).getTime() < HIGHLIGHT_MS;
}
</script>

<template>
    <!-- Sentinel -->
    <div ref="headerSentinelRef" class="h-px" />

    <!-- ══════════════════════════════════════
       Hero sticky
  ═══════════════════════════════════════ -->
    <div
        ref="headerEl"
        class="sticky mx-3 md:mx-4 mb-3 z-20 overflow-hidden rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] px-3 py-2.5 transition-[border-radius] duration-200"
        :class="{ 'rounded-tl-none rounded-tr-none': headerStuck }"
        :style="{ top: 'var(--layout-sticky-top, 56px)' }"
    >
        <!-- Blobs decorativos -->
        <div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
            <div class="absolute w-64 h-64 -top-16 -right-8 rounded-full blur-[60px] bg-emerald-400/10" />
            <div class="absolute w-72 h-72 top-0 -left-16 rounded-full blur-[60px] bg-indigo-500/[0.09]" />
        </div>

        <div class="relative z-[1] flex items-center gap-3">
            <!-- Brand -->
            <div class="flex items-center gap-2 flex-shrink-0">
                <div class="grid place-items-center w-9 h-9 rounded-md flex-shrink-0 bg-indigo-500/10 text-indigo-500">
                    <i class="pi pi-list text-base" />
                </div>
                <div class="min-w-0 hidden lg:block">
                    <div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)]">Compromissos</div>
                    <div class="text-[0.75rem] text-[var(--text-color-secondary)]">Configure tipos de compromissos e campos adicionais</div>
                </div>
            </div>

            <!-- Filtros + busca (desktop) -->
            <div class="hidden xl:flex items-center gap-2 flex-1 min-w-0 mx-2">
                <SelectButton v-model="typeFilter" :options="typeOptions" optionLabel="label" optionValue="value" :disabled="loading" size="small" />
                <div class="w-56">
                    <FloatLabel variant="on">
                        <IconField class="w-full">
                            <InputIcon class="pi pi-search" />
                            <InputText id="cmprSearch" v-model="filters.global.value" class="w-full" :disabled="loading" />
                        </IconField>
                        <label for="cmprSearch">Buscar compromisso...</label>
                    </FloatLabel>
                </div>
            </div>

            <!-- Ações desktop -->
            <div class="hidden xl:flex items-center gap-1 flex-shrink-0">
                <Button label="Novo" icon="pi pi-plus" class="rounded-full" :disabled="loading" @click="openCreate()" />
                <Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full" :loading="loading" @click="fetchAll()" />
            </div>

            <!-- Mobile -->
            <div class="flex xl:hidden items-center gap-1 flex-shrink-0 ml-auto">
                <Button icon="pi pi-search" severity="secondary" outlined class="h-9 w-9 rounded-full" @click="searchDlgOpen = true" />
                <Button icon="pi pi-plus" class="h-9 w-9 rounded-full" @click="openCreate()" />
                <Button label="Ações" icon="pi pi-ellipsis-v" severity="secondary" size="small" class="rounded-full" @click="(e) => mobileMenuRef.toggle(e)" />
                <Menu ref="mobileMenuRef" :model="mobileMenuItems" :popup="true" />
            </div>
        </div>
    </div>

    <!-- Dialog busca mobile -->
    <Dialog v-model:visible="searchDlgOpen" modal :draggable="false" pt:mask:class="backdrop-blur-xs" header="Buscar compromisso" class="w-[94vw] max-w-sm">
        <div class="pt-1">
            <InputGroup>
                <InputGroupAddon><i class="pi pi-search" /></InputGroupAddon>
                <InputText v-model="filters.global.value" placeholder="Nome ou descrição..." autofocus />
                <Button v-if="filters.global.value" icon="pi pi-times" severity="secondary" @click="filters.global.value = null" />
            </InputGroup>
        </div>
        <template #footer>
            <Button label="Fechar" severity="secondary" outlined class="rounded-full" @click="searchDlgOpen = false" />
        </template>
    </Dialog>

    <!-- ══════════════════════════════════════
       Conteúdo principal
  ═══════════════════════════════════════ -->
    <div class="px-3 md:px-4 pb-5 flex flex-col xl:flex-row gap-3 xl:gap-4 items-start">
        <!-- ── Coluna principal ── -->
        <div class="w-full xl:flex-1 xl:min-w-0">
            <!-- Stats row -->
            <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-2">
                <template v-if="loading">
                    <Skeleton v-for="n in 6" :key="n" height="3.5rem" class="rounded-md" />
                </template>
                <template v-else>
                    <div v-for="s in stats" :key="s.label" class="flex flex-col gap-0.5 px-4 py-2.5 rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)]">
                        <div
                            class="text-[1.35rem] font-bold leading-none"
                            :class="{
                                'text-green-500': s.cls === 'stat-ok',
                                'text-red-500': s.cls === 'stat-warn',
                                'text-[var(--text-color)]': !s.cls
                            }"
                        >
                            {{ s.value }}
                        </div>
                        <div class="text-[1rem] text-[var(--text-color-secondary)] opacity-75 whitespace-nowrap">{{ s.label }}</div>
                    </div>
                </template>
            </div>

            <!-- Tabela -->
            <div class="rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] overflow-hidden">
                <!-- Cabeçalho da tabela -->
                <div class="flex items-center justify-between px-4 py-3 border-b border-[var(--surface-border,#e2e8f0)]">
                    <div class="flex items-center gap-2 min-w-0">
                        <i class="pi pi-table text-[var(--text-color-secondary)] opacity-60" />
                        <span class="font-semibold text-sm">Lista completa</span>
                    </div>
                    <span class="inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-full bg-[var(--primary-color,#6366f1)] text-white text-[1rem] font-bold">
                        {{ visibleCommitments.length }}
                    </span>
                </div>

                <DataTable
                    :value="visibleCommitments"
                    dataKey="id"
                    :loading="loading"
                    :paginator="visibleCommitments.length > 10"
                    :rows="10"
                    scrollable
                    scrollHeight="400px"
                    class="p-datatable-sm cmpr-datatable"
                    :rowClass="(r) => (isRecent(r) ? 'row-new-highlight' : '')"
                    :filters="filters"
                    filterDisplay="menu"
                    :globalFilterFields="['name', 'description']"
                >
                    <Column field="name" header="Nome" sortable style="min-width: 14rem">
                        <template #body="{ data }">
                            <div class="flex items-center gap-2">
                                <div v-if="data.bg_color" class="w-3 h-3 rounded-full flex-shrink-0" :style="{ background: `#${data.bg_color}` }" />
                                <span class="font-semibold text-sm">{{ data.name }}</span>
                                <Tag v-if="data.is_native" value="Nativo" severity="info" class="text-xs" />
                            </div>
                        </template>
                    </Column>

                    <Column field="description" header="Descrição" style="min-width: 16rem">
                        <template #body="{ data }">
                            <span class="text-sm opacity-75">{{ data.description || '—' }}</span>
                        </template>
                    </Column>

                    <Column header="Tempo total" sortable style="min-width: 9rem">
                        <template #body="{ data }">
                            <span class="text-sm font-medium">{{ formatMinutes(getTotalMinutes(data.id)) }}</span>
                        </template>
                    </Column>

                    <Column header="Campos" style="width: 7rem">
                        <template #body="{ data }">
                            <span class="text-sm opacity-70">{{ data.fields?.length || 0 }}</span>
                        </template>
                    </Column>

                    <Column field="active" header="Ativo" style="width: 7rem">
                        <template #body="{ data }">
                            <InputSwitch v-model="data.active" :disabled="isActiveLocked(data) || saving" @change="onToggleActive(data)" />
                        </template>
                    </Column>

                    <Column header="Ação" style="width: 9rem">
                        <template #body="{ data }">
                            <div class="flex items-center gap-1">
                                <Button icon="pi pi-pencil" severity="secondary" text rounded :disabled="isEditLocked(data) || saving" @click="openEdit(data)" />
                                <Button icon="pi pi-trash" severity="danger" text rounded :disabled="isDeleteLocked(data) || saving" v-tooltip.top="isDeleteLocked(data) ? 'Nativo — não excluível' : 'Excluir'" @click="confirmDelete(data)" />
                            </div>
                        </template>
                    </Column>

                    <template #empty>
                        <div class="py-8 text-center">
                            <i class="pi pi-search text-2xl opacity-20 mb-2 block" />
                            <div class="font-semibold text-sm">Nenhum compromisso encontrado</div>
                            <div class="text-xs opacity-60 mt-1">Limpe os filtros ou cadastre um novo</div>
                        </div>
                    </template>
                </DataTable>
            </div>

            <LoadedPhraseBlock v-if="hasLoaded" />
        </div>
        <!-- fim coluna principal -->

        <!-- ── PAINEL LATERAL: tipos de compromisso ─────────── -->
        <div class="w-full xl:w-[272px] xl:flex-shrink-0">
            <div class="rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] overflow-hidden">
                <!-- Header do painel -->
                <div class="flex items-center gap-2.5 px-3.5 pt-3 pb-2.5 border-b border-[var(--surface-border,#f1f5f9)]">
                    <div class="w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0 bg-indigo-500/10 text-indigo-500">
                        <i class="pi pi-chart-bar text-[0.9rem]" />
                    </div>
                    <div class="flex-1 min-w-0">
                        <span class="block text-[1rem] font-bold text-[var(--text-color)]">Estatísticas</span>
                        <span class="block text-[0.72rem] text-[var(--text-color-secondary)]">Tempo por tipo de compromisso</span>
                    </div>
                </div>

                <!-- Skeleton -->
                <div v-if="loading" class="flex flex-col gap-2 p-3">
                    <Skeleton v-for="n in 4" :key="n" height="2.75rem" class="rounded-md" />
                </div>

                <!-- Empty -->
                <div v-else-if="cardsCommitments.length === 0" class="flex flex-col items-center justify-center gap-2 px-4 py-8 text-center text-[var(--text-color-secondary)]">
                    <i class="pi pi-list text-2xl opacity-20" />
                    <div class="font-semibold text-[0.8rem]">Nenhum compromisso</div>
                    <div class="text-[0.72rem] opacity-70 leading-relaxed">Cadastre tipos de compromissos para vê-los aqui.</div>
                </div>

                <!-- Lista de compromissos -->
                <div v-else class="flex flex-col max-h-[480px] overflow-y-auto">
                    <button
                        v-for="(c, idx) in cardsCommitments"
                        :key="c.id"
                        class="flex items-center gap-2.5 px-3.5 py-2.5 text-left w-full bg-transparent border-none hover:bg-[var(--surface-ground,#f8fafc)] transition-colors duration-100 cursor-pointer group"
                        :class="{ 'border-b border-[var(--surface-border,#f1f5f9)]': idx < cardsCommitments.length - 1 }"
                        @click="openStatsInfo(c)"
                    >
                        <!-- Dot cor -->
                        <div class="w-2.5 h-2.5 rounded-full flex-shrink-0" :style="c.bg_color ? { background: `#${c.bg_color}` } : { background: 'var(--surface-border)' }" />
                        <div class="flex-1 min-w-0">
                            <div class="font-semibold text-[0.8rem] truncate text-[var(--text-color)]">{{ c.name }}</div>
                            <div class="text-[0.72rem] text-[var(--text-color-secondary)]">
                                {{ formatMinutes(getTotalMinutes(c.id)) }}
                            </div>
                        </div>
                        <i class="pi pi-chevron-right text-[0.6rem] text-[var(--text-color-secondary)] opacity-30 group-hover:opacity-100 group-hover:text-[var(--primary-color,#6366f1)] transition-all duration-150 flex-shrink-0" />
                    </button>
                </div>

                <!-- Footer hint -->
                <div v-if="cardsCommitments.length" class="px-3.5 py-2 text-[1rem] text-[var(--text-color-secondary)] opacity-50 border-t border-[var(--surface-border,#f1f5f9)] text-center"></div>
            </div>
        </div>
    </div>

    <!-- Dialog -->
    <DeterminedCommitmentDialog v-model="dlgOpen" :mode="dlgMode" :saving="saving" :commitment="editing" @save="onSave" @delete="onDelete" />

    <!-- Dialog: Stats info -->
    <Dialog v-model:visible="statsInfoDlg.open" modal :draggable="false" class="w-[96vw] max-w-sm" pt:mask:class="backdrop-blur-xs">
        <template #header>
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-lg flex items-center justify-center text-white font-bold text-base" :style="{ background: statsInfoDlg.item?.bg_color ? `#${statsInfoDlg.item.bg_color}` : 'var(--primary-color,#6366f1)' }">
                    {{ (statsInfoDlg.item?.name || '?')[0].toUpperCase() }}
                </div>
                <div>
                    <div class="text-[1rem] font-bold" :style="{ color: statsInfoDlg.item?.bg_color ? `#${statsInfoDlg.item.bg_color}` : 'var(--primary-color,#6366f1)' }">
                        {{ statsInfoDlg.item?.name }}
                    </div>
                    <div class="text-[0.72rem] text-[var(--text-color-secondary)]">Estatísticas</div>
                </div>
            </div>
        </template>

        <div class="flex flex-col items-center justify-center gap-4 py-6 text-center">
            <div class="w-16 h-16 rounded-full bg-indigo-500/10 flex items-center justify-center">
                <i class="pi pi-chart-bar text-3xl text-indigo-500" />
            </div>
            <div class="flex flex-col gap-1">
                <div class="text-[1rem] font-semibold text-[var(--text-color)]">Em breve</div>
                <div class="text-[0.85rem] text-[var(--text-color-secondary)] leading-relaxed max-w-[220px]">O tempo total investido neste tipo de compromisso será exibido aqui após você ter eventos concluídos.</div>
            </div>
            <div class="flex items-center gap-2 px-3 py-2 rounded-md bg-[var(--surface-ground,#f8fafc)]">
                <i class="pi pi-clock text-[0.75rem] text-[var(--text-color-secondary)]" />
                <span class="text-[0.78rem] text-[var(--text-color-secondary)]"> Atual: {{ statsInfoDlg.item ? formatMinutes(getTotalMinutes(statsInfoDlg.item.id)) : '0m' }} </span>
            </div>
        </div>

        <template #footer>
            <Button label="Fechar" severity="secondary" outlined class="rounded-full" @click="statsInfoDlg.open = false" />
        </template>
    </Dialog>
</template>
