<template>
  <!-- ═══════════════════════════════════════ BANDEAU BAS ═══════════════════ -->
  <!-- DESKTOP uniquement (≥1024px) — mobile a le FAB séparé -->
  <footer
    v-if="!isMobile"
    ref="bandeauEl"
    class="bandeau-bas shrink-0"
    :class="{ 'bandeau-collapsed': isCollapsed }"
    aria-label="Informations projet AEP"
    @mouseenter="onMouseEnter"
    @mouseleave="onMouseLeave"
  >
    <!-- Contenu plein -->
    <div class="bandeau-inner" :class="{ 'bandeau-inner--hidden': isCollapsed }">

      <!-- ── GAUCHE : Transparence IA ──────────────────────────────────────── -->
      <div class="bandeau-col">
        <p class="bandeau-label">Transparence IA</p>
        <template v-if="stats">
          <p class="bandeau-value">
            Coût IA ce mois : <strong>{{ stats.cout_mois_eur.toFixed(2) }} €</strong>
            &nbsp;·&nbsp;
            Tokens : <strong>{{ stats.tokens_mois.toLocaleString('fr-FR') }}</strong>
          </p>
          <!-- Jauge -->
          <div class="jauge-track" aria-label="Budget IA consommé" role="progressbar" :aria-valuenow="jaugePct" aria-valuemin="0" aria-valuemax="100">
            <div class="jauge-fill" :style="{ width: jaugePct + '%' }" />
          </div>
          <p class="bandeau-sub">
            {{ stats.requetes_mois }} requête{{ stats.requetes_mois !== 1 ? 's' : '' }} ce mois
          </p>
        </template>
        <template v-else-if="loading">
          <p class="bandeau-sub">Chargement…</p>
        </template>
        <template v-else>
          <p class="bandeau-sub">Données indisponibles</p>
        </template>
      </div>

      <!-- ── MILIEU : CTA Soutien ──────────────────────────────────────────── -->
      <div class="bandeau-col bandeau-col--center">
        <div class="soutenir-wrap">
          <button
            class="btn-soutenir"
            type="button"
            @click="modalOpen = true"
            @mouseenter="tooltipVisible = true"
            @mouseleave="tooltipVisible = false"
            @focus="tooltipVisible = true"
            @blur="tooltipVisible = false"
            aria-label="Soutenir le projet AEP sur Liberapay"
          >
            Soutenir le projet
          </button>
          <!-- Tooltip au hover -->
          <div v-if="tooltipVisible" class="soutenir-tooltip" role="tooltip">
            1 € = 30 fiches mises en ligne
          </div>
        </div>
      </div>

      <!-- ── DROITE : Compteurs semaine ────────────────────────────────────── -->
      <div class="bandeau-col bandeau-col--right">
        <p class="bandeau-label">Cette semaine</p>
        <template v-if="stats">
          <p class="bandeau-value">
            {{ stats.fiches_semaine }} fiche{{ stats.fiches_semaine !== 1 ? 's' : '' }} ajoutée{{ stats.fiches_semaine !== 1 ? 's' : '' }}
          </p>
          <p class="bandeau-sub">
            {{ stats.requetes_chatbot_semaine }} requête{{ stats.requetes_chatbot_semaine !== 1 ? 's' : '' }} chatbot
          </p>
        </template>
        <template v-else>
          <p class="bandeau-sub">—</p>
        </template>
      </div>

    </div>

    <!-- Barre fine (état collapsed) -->
    <div class="bandeau-thin" :class="{ 'bandeau-thin--visible': isCollapsed }">
      <span class="bandeau-thin-label">AEP · Transparence IA</span>
    </div>

    <!-- ── MODAL Liberapay ───────────────────────────────────────────────── -->
    <Teleport to="body">
      <Transition name="backdrop">
        <div
          v-if="modalOpen"
          class="modal-backdrop"
          @click="modalOpen = false"
          aria-hidden="true"
        />
      </Transition>
      <Transition name="modal">
        <div
          v-if="modalOpen"
          class="modal-box"
          role="dialog"
          aria-modal="true"
          aria-label="Soutenir AEP sur Liberapay"
        >
          <button
            class="modal-close"
            type="button"
            @click="modalOpen = false"
            aria-label="Fermer"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </button>
          <h2 class="modal-title">Soutenir AEP</h2>
          <p class="modal-desc">
            AEP est un outil libre, sans publicité, financé par les dons.
            1 € finance environ 30 fiches mises en ligne.
          </p>
          <div class="modal-widget">
            <iframe
              src="https://liberapay.com/trans-former.fr/widgets/button.html"
              width="95"
              height="22"
              style="border: 0;"
              title="Faire un don sur Liberapay"
            />
          </div>
          <a
            href="https://liberapay.com/trans-former.fr/donate"
            target="_blank"
            rel="noopener noreferrer"
            class="modal-link"
          >
            Faire un don sur Liberapay →
          </a>
        </div>
      </Transition>
    </Teleport>

  </footer>

  <!-- Mobile (< 1024px) : pas de FAB — Soutenir est dans le menu hamburger -->
</template>

<script setup lang="ts">
interface Stats {
  cout_mois_eur: number
  budget_mois: number
  tokens_mois: number
  co2_kg: number
  requetes_mois: number
  fiches_semaine: number
  requetes_chatbot_semaine: number
}

const stats = ref<Stats | null>(null)
const loading = ref(true)
const modalOpen = ref(false)
const tooltipVisible = ref(false)

// Desktop — replié par défaut, déploie au hover, replie immédiatement à la sortie
const bandeauEl = ref<HTMLElement | null>(null)
const isCollapsed = ref(true) // replié par défaut

const REFRESH_MS = 5 * 60 * 1000 // 5 minutes

// Détection mobile côté client
const isMobile = ref(false)

onMounted(() => {
  isMobile.value = window.innerWidth < 1024

  const handleResize = () => {
    isMobile.value = window.innerWidth < 1024
  }
  window.addEventListener('resize', handleResize)
  onUnmounted(() => window.removeEventListener('resize', handleResize))

  fetchStats()
  const interval = setInterval(fetchStats, REFRESH_MS)
  onUnmounted(() => clearInterval(interval))
})

function onMouseEnter() {
  isCollapsed.value = false
}

function onMouseLeave() {
  // Repli immédiat — pas de timer
  isCollapsed.value = true
}

async function fetchStats() {
  try {
    const res = await $fetch<Stats>('/api/stats')
    stats.value = res
  } catch {
    stats.value = null
  } finally {
    loading.value = false
  }
}

const jaugePct = computed(() => {
  if (!stats.value) return 0
  return Math.min(100, Math.round((stats.value.cout_mois_eur / stats.value.budget_mois) * 100))
})
</script>

<style scoped>
/* ── Bandeau bas ─────────────────────────────────────────────────────────── */
.bandeau-bas {
  background: rgba(26, 34, 56, 0.7); /* opacité 70% */
  color: var(--nav-text-on-primary);
  font-family: var(--nav-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: min-height 0.25s ease;
  position: relative;
  overflow: hidden;
}

.bandeau-collapsed {
  min-height: 32px !important;
  cursor: pointer;
}

.bandeau-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 64px;
  transition: opacity 0.2s ease, max-height 0.3s ease;
  max-height: 200px;
  opacity: 1;
}

.bandeau-inner--hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}

/* Barre fine (collapsed) */
.bandeau-thin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.bandeau-thin--visible {
  opacity: 1;
}

.bandeau-thin-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

/* ── Colonnes ────────────────────────────────────────────────────────────── */
.bandeau-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.bandeau-col--center {
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding-top: 8px; /* décaler légèrement vers le bas pour mieux centrer dans la hauteur */
}

.bandeau-col--right {
  align-items: flex-end;
}

/* ── Typo ────────────────────────────────────────────────────────────────── */
.bandeau-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.65;
  margin: 0;
  line-height: 1.3;
}

.bandeau-value {
  font-size: 0.775rem;
  font-weight: 500;
  color: var(--nav-text-on-primary);
  margin: 0;
  line-height: 1.4;
}

.bandeau-value strong {
  font-weight: 700;
}

.bandeau-sub {
  font-size: 0.68rem;
  opacity: 0.7;
  margin: 0;
  line-height: 1.4;
}

/* ── Jauge budget ────────────────────────────────────────────────────────── */
.jauge-track {
  width: 100%;
  max-width: 180px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  margin: 3px 0;
}

.jauge-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--nav-accent);
  transition: width 0.6s ease;
}

/* ── Bouton soutenir + tooltip ───────────────────────────────────────────── */
.soutenir-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.btn-soutenir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  background: var(--nav-accent);
  color: var(--nav-text);
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
  flex-shrink: 0;
}

.btn-soutenir:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-soutenir:active { opacity: 1; transform: translateY(0); }

.soutenir-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--nav-primary-solid, #1a2238);
  color: var(--nav-text-on-primary);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.soutenir-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--nav-primary-solid, #1a2238);
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(26, 34, 56, 0.55);
}

.modal-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2001;
  background: var(--nav-surface, #ffffff);
  border-radius: 16px;
  padding: 28px 24px 24px;
  width: min(380px, 90vw);
  box-shadow: 0 8px 40px rgba(26, 34, 56, 0.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: var(--nav-bg-alt, #eee9df);
  color: var(--nav-text-muted, rgba(26,34,56,0.55));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.modal-close:hover { background: var(--nav-bg, #f8f6f1); }

.modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--nav-text, #1a2238);
  margin: 0;
}

.modal-desc {
  font-size: 0.85rem;
  color: var(--nav-text-muted, rgba(26,34,56,0.55));
  line-height: 1.6;
  margin: 0;
}

.modal-widget {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.modal-link {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--nav-primary-solid, #1a2238);
  text-decoration: underline;
  transition: opacity 0.15s;
}
.modal-link:hover { opacity: 0.7; }

/* ── Transitions ─────────────────────────────────────────────────────────── */
.backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }

.modal-enter-active, .modal-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
.modal-enter-from, .modal-leave-to { opacity: 0; transform: translate(-50%, -48%); }

.sheet-enter-active, .sheet-leave-active { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.sheet-enter-from, .sheet-leave-to { transform: translateY(100%); }

@media (prefers-reduced-motion: reduce) {
  .btn-soutenir { transition: none; }
  .jauge-fill { transition: none; }
  .modal-enter-active, .modal-leave-active { transition: none; }
  .backdrop-enter-active, .backdrop-leave-active { transition: none; }
  .sheet-enter-active, .sheet-leave-active { transition: none; }
  .bandeau-bas { transition: none; }
  .bandeau-inner { transition: none; }
}
</style>
