<script setup>
/*
 * MelissaConversasSidebar — aside col-1 do CRM de conversas Melissa.
 * --------------------------------------------------------------
 * Concentra:
 *   - Alerta unlinked (numeros sem paciente vinculado)
 *   - Filtros rapidos (Todas / Nao lidas)
 *   - Atribuicao (Todas / Minhas / Nao atribuidas)
 *   - Por status (kanban resumo — display-only)
 *   - Canais (Todos / WhatsApp / SMS / E-mail)
 *   - Footer fixo "Limpar filtros" (aparece quando algum filtro ativo)
 *
 * Constantes KANBAN_COLUMNS e CHANNEL_OPTIONS vivem aqui (uso unico no
 * MelissaConversas; se outras paginas precisarem do mesmo conceito,
 * sobem pra um composable shared como useChannelMeta/useKanbanMeta).
 *
 * Pattern de mutacao de prop: `filters` eh um Ref do composable
 * useConversations. Component muta props.filters.search etc direto —
 * aceitavel em Vue 3 (refs nao sao readonly por padrao). Alternativa
 * com emit('update:filters', ...) seria verboso pra cada filter.
 *
 * Props:
 *   - filters: { search, unreadOnly, assigned, channel } — mutavel
 *   - summary: { total, unreadTotal, urgent, awaiting_us, awaiting_patient, resolved }
 *   - unlinkedCount: numero de threads sem paciente vinculado
 *   - mineCount: threads atribuidas ao user atual
 *   - unassignedCount: threads sem atribuicao
 */
import { computed } from 'vue';
import { CHANNEL_OPTIONS, channelIcon } from '@/utils/channelMeta';
import { KANBAN_COLUMNS } from '@/composables/useConversations';

const props = defineProps({
    filters: { type: Object, required: true },
    summary: { type: Object, required: true },
    unlinkedCount: { type: Number, default: 0 },
    mineCount: { type: Number, default: 0 },
    unassignedCount: { type: Number, default: 0 }
});

// Internal — controla render do footer "Limpar filtros"
const hasActiveFilters = computed(() => {
    const f = props.filters;
    return !!(f.search || f.unreadOnly || f.assigned || f.channel);
});
function clearAllFilters() {
    props.filters.search = '';
    props.filters.unreadOnly = false;
    props.filters.assigned = null;
    props.filters.channel = null;
}
</script>

<template>
    <aside class="mw-side w-[280px] flex-shrink-0 flex flex-col bg-[var(--m-bg-soft)] border-r border-[var(--m-border)] overflow-hidden">
        <div class="mw-side__scroll flex-1 min-h-0 overflow-y-auto flex flex-col">
            <!-- Alerta unlinked -->
            <div
                v-if="unlinkedCount > 0"
                class="mw-alert flex gap-2.5 mx-3 mt-3 last:mb-3 p-3 rounded-[10px] border border-[rgba(251,191,36,0.3)] bg-[rgba(251,191,36,0.05)] text-[rgb(251,191,36)] flex-shrink-0 shadow-[0_2px_8px_rgba(0,0,0,0.12)] [&>i]:text-[0.85rem] [&>i]:mt-0.5"
            >
                <i class="pi pi-exclamation-circle" aria-hidden="true" />
                <div>
                    <div class="mw-alert__title text-[0.78rem] font-semibold">{{ unlinkedCount }} sem paciente vinculado</div>
                    <div class="mw-alert__hint text-[0.7rem] text-[var(--m-text-muted)] mt-0.5">Números de telefone que não batem com pacientes cadastrados.</div>
                </div>
            </div>

            <!-- Filtros rápidos -->
            <div class="mw-w mw-w--side mx-3 mt-3 first:mt-3 flex-shrink-0 shadow-[0_2px_8px_rgba(0,0,0,0.12)] bg-[var(--m-bg-medium)] border border-[var(--m-border)] rounded-xl p-3">
                <div class="mw-w__head flex items-center justify-between mb-2.5">
                    <span class="mw-w__title inline-flex items-center gap-1.5 text-[0.78rem] font-semibold [&>i]:text-[var(--m-text-muted)] [&>i]:text-[0.78rem]"><i class="pi pi-filter" aria-hidden="true" /> Filtros rápidos</span>
                    <button
                        v-if="filters.unreadOnly"
                        class="mw-side__clear-inline w-[18px] h-[18px] grid place-items-center bg-transparent border border-[color-mix(in_srgb,rgb(220,38,38)_30%,var(--m-border))] text-[rgb(220,38,38)] rounded cursor-pointer [font-family:inherit] transition-[background-color,border-color] duration-[140ms] hover:bg-[rgba(220,38,38,0.10)] hover:border-[rgba(220,38,38,0.55)] [&>i]:text-[0.6rem]"
                        v-tooltip.top="'Limpar filtro de não lidas'"
                        aria-label="Limpar filtro de não lidas"
                        @click="filters.unreadOnly = false"
                    >
                        <i class="pi pi-times" aria-hidden="true" />
                    </button>
                </div>
                <div class="mw-side__list flex flex-col gap-1">
                    <button
                        class="mw-side__item w-full flex items-center gap-2.5 px-2.5 py-2 bg-transparent border border-transparent text-[var(--m-text)] rounded-[10px] cursor-pointer [font-family:inherit] text-[0.82rem] text-left transition-[background-color,border-color] duration-[140ms] hover:bg-[var(--m-bg-soft-hover)] [&>i]:text-[var(--m-text-muted)] [&>i]:text-[0.75rem] [&>i]:w-3.5 [&>i]:text-center [&>span:first-of-type]:flex-1"
                        :class="{ 'is-active': !filters.unreadOnly }"
                        :aria-pressed="!filters.unreadOnly"
                        @click="filters.unreadOnly = false"
                    >
                        <i class="pi pi-list" aria-hidden="true" />
                        <span>Todas</span>
                        <span class="mw-side__count text-[0.65rem] font-semibold text-[var(--m-text-muted)] bg-[var(--m-bg-medium)] px-1.5 py-px rounded-full min-w-[22px] text-center">{{ summary.total }}</span>
                    </button>
                    <button
                        class="mw-side__item w-full flex items-center gap-2.5 px-2.5 py-2 bg-transparent border border-transparent text-[var(--m-text)] rounded-[10px] cursor-pointer [font-family:inherit] text-[0.82rem] text-left transition-[background-color,border-color] duration-[140ms] hover:bg-[var(--m-bg-soft-hover)] [&>i]:text-[var(--m-text-muted)] [&>i]:text-[0.75rem] [&>i]:w-3.5 [&>i]:text-center [&>span:first-of-type]:flex-1"
                        :class="{ 'is-active': filters.unreadOnly, 'is-warn': summary.unreadTotal > 0 }"
                        :aria-pressed="filters.unreadOnly"
                        @click="filters.unreadOnly = !filters.unreadOnly"
                    >
                        <i class="pi pi-bell" aria-hidden="true" />
                        <span>Não lidas</span>
                        <span
                            class="mw-side__count text-[0.65rem] font-semibold text-[var(--m-text-muted)] bg-[var(--m-bg-medium)] px-1.5 py-px rounded-full min-w-[22px] text-center"
                            :class="{ 'is-danger': summary.unreadTotal > 0 }"
                        >{{ summary.unreadTotal }}</span>
                    </button>
                </div>
            </div>

            <!-- Atribuição -->
            <div class="mw-w mw-w--side mx-3 mt-3 flex-shrink-0 shadow-[0_2px_8px_rgba(0,0,0,0.12)] bg-[var(--m-bg-medium)] border border-[var(--m-border)] rounded-xl p-3">
                <div class="mw-w__head flex items-center justify-between mb-2.5">
                    <span class="mw-w__title inline-flex items-center gap-1.5 text-[0.78rem] font-semibold [&>i]:text-[var(--m-text-muted)] [&>i]:text-[0.78rem]"><i class="pi pi-user" aria-hidden="true" /> Atribuição</span>
                    <button
                        v-if="filters.assigned"
                        class="mw-side__clear-inline w-[18px] h-[18px] grid place-items-center bg-transparent border border-[color-mix(in_srgb,rgb(220,38,38)_30%,var(--m-border))] text-[rgb(220,38,38)] rounded cursor-pointer [font-family:inherit] transition-[background-color,border-color] duration-[140ms] hover:bg-[rgba(220,38,38,0.10)] hover:border-[rgba(220,38,38,0.55)] [&>i]:text-[0.6rem]"
                        v-tooltip.top="'Limpar filtro de atribuição'"
                        aria-label="Limpar filtro de atribuição"
                        @click="filters.assigned = null"
                    >
                        <i class="pi pi-times" aria-hidden="true" />
                    </button>
                </div>
                <div class="mw-side__list flex flex-col gap-1">
                    <button
                        class="mw-side__item w-full flex items-center gap-2.5 px-2.5 py-2 bg-transparent border border-transparent text-[var(--m-text)] rounded-[10px] cursor-pointer [font-family:inherit] text-[0.82rem] text-left transition-[background-color,border-color] duration-[140ms] hover:bg-[var(--m-bg-soft-hover)] [&>i]:text-[var(--m-text-muted)] [&>i]:text-[0.75rem] [&>i]:w-3.5 [&>i]:text-center [&>span:first-of-type]:flex-1"
                        :class="{ 'is-active': !filters.assigned }"
                        :aria-pressed="!filters.assigned"
                        @click="filters.assigned = null"
                    >
                        <i class="pi pi-list" aria-hidden="true" />
                        <span>Todas</span>
                    </button>
                    <button
                        class="mw-side__item w-full flex items-center gap-2.5 px-2.5 py-2 bg-transparent border border-transparent text-[var(--m-text)] rounded-[10px] cursor-pointer [font-family:inherit] text-[0.82rem] text-left transition-[background-color,border-color] duration-[140ms] hover:bg-[var(--m-bg-soft-hover)] [&>i]:text-[var(--m-text-muted)] [&>i]:text-[0.75rem] [&>i]:w-3.5 [&>i]:text-center [&>span:first-of-type]:flex-1"
                        :class="{ 'is-active': filters.assigned === 'me' }"
                        :aria-pressed="filters.assigned === 'me'"
                        @click="filters.assigned = 'me'"
                    >
                        <i class="pi pi-user" aria-hidden="true" />
                        <span>Minhas</span>
                        <span class="mw-side__count text-[0.65rem] font-semibold text-[var(--m-text-muted)] bg-[var(--m-bg-medium)] px-1.5 py-px rounded-full min-w-[22px] text-center">{{ mineCount }}</span>
                    </button>
                    <button
                        class="mw-side__item w-full flex items-center gap-2.5 px-2.5 py-2 bg-transparent border border-transparent text-[var(--m-text)] rounded-[10px] cursor-pointer [font-family:inherit] text-[0.82rem] text-left transition-[background-color,border-color] duration-[140ms] hover:bg-[var(--m-bg-soft-hover)] [&>i]:text-[var(--m-text-muted)] [&>i]:text-[0.75rem] [&>i]:w-3.5 [&>i]:text-center [&>span:first-of-type]:flex-1"
                        :class="{ 'is-active': filters.assigned === 'unassigned' }"
                        :aria-pressed="filters.assigned === 'unassigned'"
                        @click="filters.assigned = 'unassigned'"
                    >
                        <i class="pi pi-user-minus" aria-hidden="true" />
                        <span>Não atribuídas</span>
                        <span
                            class="mw-side__count text-[0.65rem] font-semibold text-[var(--m-text-muted)] bg-[var(--m-bg-medium)] px-1.5 py-px rounded-full min-w-[22px] text-center"
                            :class="{ 'is-warn': unassignedCount > 0 }"
                        >{{ unassignedCount }}</span>
                    </button>
                </div>
            </div>

            <!-- Por status (kanban resumo — display-only, sem X) -->
            <div class="mw-w mw-w--side mx-3 mt-3 flex-shrink-0 shadow-[0_2px_8px_rgba(0,0,0,0.12)] bg-[var(--m-bg-medium)] border border-[var(--m-border)] rounded-xl p-3">
                <div class="mw-w__head flex items-center justify-between mb-2.5">
                    <span class="mw-w__title inline-flex items-center gap-1.5 text-[0.78rem] font-semibold [&>i]:text-[var(--m-text-muted)] [&>i]:text-[0.78rem]"><i class="pi pi-chart-bar" aria-hidden="true" /> Por status</span>
                </div>
                <div class="mw-side__list flex flex-col gap-1">
                    <div
                        v-for="col in KANBAN_COLUMNS"
                        :key="col.key"
                        class="mw-side__row flex items-center gap-2.5 px-2.5 py-1.5 rounded-[10px] border border-[var(--m-border)] bg-[var(--m-bg-medium)] text-[0.78rem] [&>span:first-of-type]:flex-1 [&>i]:text-[0.75rem]"
                        :class="`is-${col.color}`"
                    >
                        <i :class="col.icon" aria-hidden="true" />
                        <span>{{ col.label }}</span>
                        <span class="mw-side__count text-[0.65rem] font-semibold text-[var(--m-text-muted)] bg-[var(--m-bg-medium)] px-1.5 py-px rounded-full min-w-[22px] text-center">{{ summary[col.key] || 0 }}</span>
                    </div>
                </div>
            </div>

            <!-- Canais -->
            <div class="mw-w mw-w--side mx-3 mt-3 last:mb-3 flex-shrink-0 shadow-[0_2px_8px_rgba(0,0,0,0.12)] bg-[var(--m-bg-medium)] border border-[var(--m-border)] rounded-xl p-3">
                <div class="mw-w__head flex items-center justify-between mb-2.5">
                    <span class="mw-w__title inline-flex items-center gap-1.5 text-[0.78rem] font-semibold [&>i]:text-[var(--m-text-muted)] [&>i]:text-[0.78rem]"><i class="pi pi-send" aria-hidden="true" /> Canais</span>
                    <button
                        v-if="filters.channel"
                        class="mw-side__clear-inline w-[18px] h-[18px] grid place-items-center bg-transparent border border-[color-mix(in_srgb,rgb(220,38,38)_30%,var(--m-border))] text-[rgb(220,38,38)] rounded cursor-pointer [font-family:inherit] transition-[background-color,border-color] duration-[140ms] hover:bg-[rgba(220,38,38,0.10)] hover:border-[rgba(220,38,38,0.55)] [&>i]:text-[0.6rem]"
                        v-tooltip.top="'Limpar filtro de canal'"
                        aria-label="Limpar filtro de canal"
                        @click="filters.channel = null"
                    >
                        <i class="pi pi-times" aria-hidden="true" />
                    </button>
                </div>
                <div class="mw-side__list flex flex-col gap-1">
                    <button
                        v-for="opt in CHANNEL_OPTIONS"
                        :key="String(opt.value)"
                        class="mw-side__item w-full flex items-center gap-2.5 px-2.5 py-2 bg-transparent border border-transparent text-[var(--m-text)] rounded-[10px] cursor-pointer [font-family:inherit] text-[0.82rem] text-left transition-[background-color,border-color] duration-[140ms] hover:bg-[var(--m-bg-soft-hover)] [&>i]:text-[var(--m-text-muted)] [&>i]:text-[0.75rem] [&>i]:w-3.5 [&>i]:text-center [&>span:first-of-type]:flex-1"
                        :class="{ 'is-active': filters.channel === opt.value }"
                        :aria-pressed="filters.channel === opt.value"
                        @click="filters.channel = opt.value"
                    >
                        <i v-if="opt.value" :class="['pi', channelIcon(opt.value)]" aria-hidden="true" />
                        <i v-else class="pi pi-list" aria-hidden="true" />
                        <span>{{ opt.label }}</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Footer fixo: "Limpar filtros" global -->
        <Transition name="mw-clear">
            <div
                v-if="hasActiveFilters"
                class="mw-side__footer flex-shrink-0 p-3 bg-[var(--m-bg-soft)] border-t border-[var(--m-border)]"
            >
                <button
                    class="mw-side__clear-all w-full inline-flex items-center justify-center gap-2 px-3 py-2.5 bg-[var(--m-bg-medium)] border border-[var(--m-border)] text-[var(--m-text)] rounded-[10px] cursor-pointer [font-family:inherit] text-[0.78rem] font-semibold transition-[background-color,border-color,color] duration-[140ms] hover:bg-[var(--m-bg-soft-hover)] hover:border-[var(--m-border-strong)] hover:text-[var(--m-text)] [&>i]:text-[0.78rem] [&>i]:text-[var(--m-text-muted)] [&>i]:transition-colors [&>i]:duration-[140ms] hover:[&>i]:text-[var(--m-text)]"
                    @click="clearAllFilters"
                >
                    <i class="pi pi-filter-slash" aria-hidden="true" />
                    <span>Limpar filtros</span>
                </button>
            </div>
        </Transition>
    </aside>
</template>

<style scoped>
/* Scrollbar (sem utility Tailwind) e state modifiers de cor (kanban
   colors fixas + .is-active/.is-warn/.is-danger com vars accent) ficam
   em scoped — sao dificeis de expressar em utilities sem repetir N
   classes em cada filho. */

.mw-side__scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mw-side__scroll::-webkit-scrollbar { width: 5px; }
.mw-side__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

/* State modifier: filtro ativo (item selecionado) */
.mw-side__item.is-active {
    background: var(--m-accent-soft);
    border-color: color-mix(in srgb, var(--m-accent) 35%, var(--m-border));
}
/* State modifier: warn — quando ha threads nao lidas no item "Nao lidas" */
.mw-side__item.is-warn { background: rgba(248, 113, 113, 0.05); }

/* Counts variantes */
.mw-side__count.is-danger {
    background: rgba(248, 113, 113, 0.15);
    color: rgb(248, 113, 113);
}
.mw-side__count.is-warn {
    background: rgba(251, 191, 36, 0.15);
    color: rgb(251, 191, 36);
}

/* Kanban row colors — uma cor por status (red/amber/blue/emerald) */
.mw-side__row.is-red { border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.05); }
.mw-side__row.is-red > i { color: rgb(248, 113, 113); }
.mw-side__row.is-amber { border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.05); }
.mw-side__row.is-amber > i { color: rgb(251, 191, 36); }
.mw-side__row.is-blue { border-color: rgba(96, 165, 250, 0.3); background: rgba(96, 165, 250, 0.05); }
.mw-side__row.is-blue > i { color: rgb(96, 165, 250); }
.mw-side__row.is-emerald { border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.05); }
.mw-side__row.is-emerald > i { color: rgb(74, 222, 128); }

/* Transition do footer "Limpar filtros" */
.mw-clear-enter-active,
.mw-clear-leave-active {
    transition: opacity 220ms ease, transform 220ms ease, max-height 240ms ease;
    overflow: hidden;
}
.mw-clear-enter-from,
.mw-clear-leave-to {
    opacity: 0;
    transform: translateY(6px);
    max-height: 0;
}
.mw-clear-enter-to,
.mw-clear-leave-from {
    opacity: 1;
    transform: translateY(0);
    max-height: 80px;
}
</style>
