<template>
  <!-- Renderiza apenas se modo suporte estiver ativo -->
  <Teleport to="body">
    <Transition name="support-slide">
      <div v-if="store.isActive" class="support-banner">
        <!-- Barra superior fixa -->
        <div class="support-banner__bar">
          <div class="support-banner__bar-left">
            <span class="support-banner__pulse" />
            <strong>MODO SUPORTE ATIVO</strong>
            <span class="support-banner__tenant">tenant: {{ store.tenantId }}</span>
          </div>
          <div class="support-banner__bar-right">
            <button class="support-banner__toggle" @click="panelOpen = !panelOpen">
              <i :class="panelOpen ? 'pi pi-chevron-up' : 'pi pi-chevron-down'" />
              {{ panelOpen ? 'Ocultar Logs' : 'Ver Logs' }}
              <span v-if="store.errorLogs.length" class="support-banner__err-badge">
                {{ store.errorLogs.length }} erro(s)
              </span>
            </button>
            <button class="support-banner__clear" title="Limpar logs" @click="store.clearLogs()">
              <i class="pi pi-trash" />
            </button>
            <button class="support-banner__close" title="Desativar suporte" @click="store.deactivate()">
              <i class="pi pi-times" />
            </button>
          </div>
        </div>

        <!-- Painel expansível de logs -->
        <div v-if="panelOpen" class="support-banner__panel">
          <!-- Filtros de nível -->
          <div class="support-banner__filters">
            <button
              v-for="lvl in levels"
              :key="lvl.value"
              class="support-banner__filter-btn"
              :class="{ 'support-banner__filter-btn--active': activeLevel === lvl.value }"
              @click="activeLevel = activeLevel === lvl.value ? null : lvl.value"
            >
              {{ lvl.label }}
              <span class="support-banner__filter-count">
                {{ countByLevel(lvl.value) }}
              </span>
            </button>
          </div>

          <!-- Lista de logs -->
          <div ref="logListRef" class="support-banner__logs">
            <div v-if="filteredLogs.length === 0" class="support-banner__empty">
              Nenhum log capturado ainda. Os eventos da agenda aparecerão aqui.
            </div>
            <div
              v-for="log in filteredLogs"
              :key="log.id"
              class="support-banner__log-entry"
              :class="`support-banner__log-entry--${log.level}`"
            >
              <span class="support-banner__log-time">{{ formatTime(log.timestamp) }}</span>
              <span class="support-banner__log-level">{{ log.level }}</span>
              <span class="support-banner__log-source">[{{ log.source }}]</span>
              <span class="support-banner__log-msg">{{ log.message }}</span>
              <button
                v-if="log.data"
                class="support-banner__log-expand"
                @click="toggleData(log.id)"
              >
                { }
              </button>
              <pre
                v-if="log.data && expandedIds.has(log.id)"
                class="support-banner__log-data"
              >{{ JSON.stringify(log.data, null, 2) }}</pre>
            </div>
          </div>

          <!-- Rodapé do painel -->
          <div class="support-banner__footer">
            <span>{{ store.logs.length }} entrada(s) total</span>
            <span>·</span>
            <span>{{ store.errorLogs.length }} erro(s)</span>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useSupportDebugStore } from '@/support/supportDebugStore'

const store = useSupportDebugStore()

const panelOpen   = ref(false)
const activeLevel = ref(null)
const expandedIds = ref(new Set())
const logListRef  = ref(null)

const levels = [
  { label: 'Eventos',     value: 'event'      },
  { label: 'API',         value: 'api'        },
  { label: 'Recorrência', value: 'recurrence' },
  { label: 'Guard',       value: 'guard'      },
  { label: 'Perf',        value: 'perf'       },
  { label: 'Erros',       value: 'error'      },
]

const filteredLogs = computed(() => {
  const all = store.recentLogs
  if (!activeLevel.value) return all
  return all.filter(l => l.level === activeLevel.value)
})

function countByLevel (level) {
  return store.logs.filter(l => l.level === level).length
}

function toggleData (id) {
  const s = new Set(expandedIds.value)
  if (s.has(id)) s.delete(id)
  else s.add(id)
  expandedIds.value = s
}

function formatTime (iso) {
  return new Date(iso).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
}
</script>

<style scoped>
.support-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  font-family: 'JetBrains Mono', 'Fira Code', monospace, sans-serif;
  font-size: 12px;
}

.support-banner__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #b45309;
  color: #fff;
  padding: 6px 16px;
  gap: 12px;
}

.support-banner__bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.support-banner__bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.support-banner__pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fcd34d;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}

.support-banner__tenant {
  font-weight: 400;
  opacity: 0.75;
  font-size: 11px;
}

.support-banner__toggle,
.support-banner__clear,
.support-banner__close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s;
}
.support-banner__toggle:hover,
.support-banner__clear:hover,
.support-banner__close:hover {
  background: rgba(255,255,255,0.28);
}

.support-banner__err-badge {
  background: #ef4444;
  color: #fff;
  border-radius: 10px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 700;
}

/* Painel */
.support-banner__panel {
  background: #0f172a;
  border-top: 2px solid #b45309;
  display: flex;
  flex-direction: column;
  max-height: 360px;
}

.support-banner__filters {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid #1e293b;
  flex-shrink: 0;
}

.support-banner__filter-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.support-banner__filter-btn--active {
  background: #b45309;
  border-color: #b45309;
  color: #fff;
}

.support-banner__filter-count {
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 0 5px;
  font-size: 10px;
}

.support-banner__logs {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}

.support-banner__empty {
  color: #475569;
  text-align: center;
  padding: 20px;
}

.support-banner__log-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 3px 12px;
  border-bottom: 1px solid #1e293b;
  transition: background 0.1s;
}
.support-banner__log-entry:hover { background: #1e293b; }

.support-banner__log-entry--error  { border-left: 3px solid #ef4444; }
.support-banner__log-entry--api    { border-left: 3px solid #3b82f6; }
.support-banner__log-entry--recurrence { border-left: 3px solid #8b5cf6; }
.support-banner__log-entry--guard  { border-left: 3px solid #10b981; }
.support-banner__log-entry--perf   { border-left: 3px solid #f59e0b; }
.support-banner__log-entry--event  { border-left: 3px solid #64748b; }

.support-banner__log-time   { color: #475569; font-size: 10px; flex-shrink: 0; }
.support-banner__log-level  { color: #f59e0b; font-size: 10px; font-weight: 700; text-transform: uppercase; flex-shrink: 0; }
.support-banner__log-source { color: #7c3aed; font-size: 10px; flex-shrink: 0; }
.support-banner__log-msg    { color: #e2e8f0; flex: 1; }

.support-banner__log-expand {
  background: #1e293b;
  border: 1px solid #334155;
  color: #64748b;
  border-radius: 3px;
  padding: 0 5px;
  cursor: pointer;
  font-size: 10px;
  font-family: monospace;
}
.support-banner__log-expand:hover { color: #e2e8f0; }

.support-banner__log-data {
  width: 100%;
  margin: 4px 0 0;
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #94a3b8;
  padding: 8px;
  border-radius: 4px;
  font-size: 10px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.support-banner__footer {
  display: flex;
  gap: 8px;
  padding: 4px 12px;
  color: #475569;
  font-size: 10px;
  border-top: 1px solid #1e293b;
  flex-shrink: 0;
}

/* Transition */
.support-slide-enter-active,
.support-slide-leave-active { transition: transform 0.25s ease; }
.support-slide-enter-from,
.support-slide-leave-to    { transform: translateY(100%); }
</style>
