<template>
  <div class="flex h-full overflow-hidden" style="background: var(--nav-bg);">

    <!-- ═══════════════════════════════════════ SIDEBAR DESKTOP (≥ 1024px) -->
    <div class="hidden lg:flex w-80 shrink-0 flex-col overflow-hidden">
      <PratiqueSidebar
        :search="search"
        :criteres="criteres"
        :typesEntite="typesEntite"
        :critereCount="critereCount"
        :typeCount="typeCount"
        :resultCount="filtered.length"
        :pratiques="filtered"
        :selectedId="selectedId"
        :hasActiveFilters="hasActiveFilters"
        :pending="pending"
        @update:search="onSearch"
        @update:criteres="onCriteres"
        @update:typesEntite="onTypesEntite"
        @select-pratique="onSelectPratique"
        @hover-pratique="onHoverPratique"
        @reset-filters="resetFilters"
      />
    </div>

    <!-- ═══════════════════════════════════════ ZONE CENTRALE (carte) -->
    <main class="flex-1 flex flex-col overflow-hidden relative">

      <!-- ── VUE DESKTOP : Onglets Europe / Outre-mer + carte pleine hauteur ── -->
      <div class="hidden lg:flex lg:flex-1 lg:flex-col lg:overflow-hidden">

        <!-- Onglets Europe / Outre-mer (desktop) -->
        <div class="shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
          <button
            type="button"
            class="flex-1 py-2 text-sm font-medium transition-colors"
            :style="desktopMapView === 'europe'
              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
            @click="desktopMapView = 'europe'"
          >
            Europe
            <span class="ml-1 text-xs opacity-70">({{ europeOrgs.length }})</span>
          </button>
          <button
            type="button"
            class="flex-1 py-2 text-sm font-medium transition-colors"
            :style="desktopMapView === 'outremer'
              ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
              : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
            @click="desktopMapView = 'outremer'"
          >
            Outre-mer
            <span class="ml-1 text-xs opacity-70">({{ outremerOrgs.length }})</span>
          </button>
        </div>

        <!-- Carte Europe (pleine hauteur) -->
        <div v-show="desktopMapView === 'europe'" class="flex flex-col flex-1 overflow-hidden">
          <div class="relative flex-1" style="min-height: 200px;">
            <ClientOnly>
              <EuropeMap
                ref="europeMapRef"
                :orgs="europeOrgs"
                :selectedId="selectedId"
                @select-org="onSelectPratique"
              />
              <template #fallback>
                <div
                  class="w-full h-full flex items-center justify-center"
                  style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
                >
                  Chargement de la carte…
                </div>
              </template>
            </ClientOnly>
          </div>
        </div>

        <!-- Carte Outre-mer (pleine hauteur, scroll) -->
        <div v-show="desktopMapView === 'outremer'" class="flex-1 overflow-y-auto" style="background: var(--nav-bg);">
          <ClientOnly>
            <OutremerMapPratiques
              :orgs="outremerOrgs"
              :selectedId="selectedId"
              @select-org="onSelectPratique"
            />
            <template #fallback>
              <div
                class="flex items-center justify-center h-48 text-sm"
                style="color: var(--nav-text-muted);"
              >
                Chargement…
              </div>
            </template>
          </ClientOnly>
        </div>
      </div>

      <!-- ── VUE MOBILE : Onglets Europe/Outre-mer + carte pleine hauteur + sheet swipable ── -->

      <!-- Onglets Europe / Outre-mer -->
      <div class="lg:hidden shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
        <button
          class="flex-1 py-2 text-sm font-medium transition-colors"
          :style="mobileMapView === 'europe'
            ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
            : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
          @click="mobileMapView = 'europe'"
        >Europe</button>
        <button
          class="flex-1 py-2 text-sm font-medium transition-colors"
          :style="mobileMapView === 'outremer'
            ? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
            : 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
          @click="mobileMapView = 'outremer'"
        >Outre-mer</button>
      </div>

      <div class="lg:hidden flex-1 relative overflow-hidden">

        <!-- Carte Europe -->
        <div v-show="mobileMapView === 'europe'" class="absolute inset-0">
          <ClientOnly>
            <EuropeMap
              ref="europeMapMobileRef"
              :orgs="europeOrgs"
              :selectedId="selectedId"
              @select-org="onSelectPratiqueMobile"
            />
            <template #fallback>
              <div
                class="w-full h-full flex items-center justify-center"
                style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
              >
                Chargement de la carte…
              </div>
            </template>
          </ClientOnly>
        </div>

        <!-- Carte Outre-mer -->
        <div v-show="mobileMapView === 'outremer'" class="absolute inset-0 overflow-y-auto" style="background: var(--nav-bg);">
          <ClientOnly>
            <OutremerMapPratiques
              :orgs="outremerOrgs"
              :selectedId="selectedId"
              @select-org="onSelectPratiqueMobile"
            />
            <template #fallback>
              <div class="flex items-center justify-center h-48" style="color: var(--nav-text-muted);">
                Chargement…
              </div>
            </template>
          </ClientOnly>
        </div>

        <!-- Bottom sheet swipable (Europe et Outre-mer) -->
        <ClientOnly>
          <MobileSheet :resultCount="filtered.length" :pending="pending">
            <!-- Barre recherche -->
            <div class="px-3 pt-2 pb-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
              <label class="mobile-search-label" aria-label="Rechercher une pratique">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-muted); flex-shrink: 0;">
                  <circle cx="11" cy="11" r="8"/>
                  <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
                <input
                  v-model="mobileSearch"
                  type="search"
                  placeholder="Rechercher…"
                  class="mobile-search-input"
                  autocomplete="off"
                  @input="onSearch(mobileSearch)"
                />
                <button
                  v-if="mobileSearch"
                  type="button"
                  class="mobile-search-clear"
                  aria-label="Effacer"
                  @click.stop="mobileSearch = ''; onSearch('')"
                >
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                  </svg>
                </button>
              </label>

              <!-- Filtres CRITÈRES — chips -->
              <div class="mt-2">
                <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">CRITÈRES</span>
                <div class="flex flex-wrap gap-1">
                  <span
                    v-for="c in CRITERES"
                    :key="c.id"
                    class="cursor-pointer px-2 py-0.5 rounded-full text-xs transition-all"
                    :style="criteres.includes(c.id)
                      ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
                      : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
                    @click="toggleCritere(c.id)"
                  >{{ c.label }}</span>
                </div>
              </div>

              <!-- Filtres TYPE — chips -->
              <div class="mt-2">
                <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">TYPE</span>
                <div class="flex flex-wrap gap-1">
                  <span
                    v-for="t in TYPES_ENTITE"
                    :key="t"
                    class="cursor-pointer px-2 py-0.5 rounded-full text-xs transition-all"
                    :style="typesEntite.includes(t)
                      ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
                      : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
                    @click="toggleType(t)"
                  >{{ TYPES_ENTITE_LABELS[t] ?? t }}</span>
                </div>
              </div>

              <button
                v-if="hasActiveFilters"
                @click="resetFilters"
                class="mt-2 text-xs"
                style="color: var(--nav-text-muted); text-decoration: underline;"
              >Effacer les filtres</button>
            </div>

            <!-- Compteur + Liste fiches -->
            <div class="px-3 py-2">
              <div class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">
                {{ filtered.length }} résultat{{ filtered.length > 1 ? 's' : '' }}
              </div>
              <div v-if="pending" class="flex items-center justify-center py-8" style="color: var(--nav-text-muted);">
                Chargement des fiches…
              </div>
              <div v-else-if="filtered.length === 0" class="text-center py-8">
                <p class="text-sm mb-2" style="color: var(--nav-text-muted);">Aucun résultat pour ces filtres.</p>
                <button @click="resetFilters" class="text-sm underline" style="color: var(--nav-primary-solid);">
                  Effacer les filtres
                </button>
              </div>
              <div class="space-y-2">
                <div
                  v-for="pratique in filtered"
                  :key="pratique.id"
                  class="block rounded-lg p-3 transition-all cursor-pointer"
                  :style="selectedId === pratique.id
                    ? 'background: var(--nav-bg-alt); border-left: 3px solid var(--nav-accent);'
                    : 'background: var(--nav-surface); border-left: 3px solid transparent;'"
                  @click="onSelectPratiqueMobile(pratique.id)"
                >
                  <div class="flex items-start justify-between gap-2">
                    <span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ pratique.nom }}</span>
                    <span
                      v-if="pratique.pays"
                      class="shrink-0 px-2 py-0.5 rounded-full text-xs font-medium"
                      style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
                    >{{ pratique.pays }}</span>
                  </div>
                  <div v-if="pratique.criteres?.length" class="mt-1 flex flex-wrap gap-1">
                    <span
                      v-for="cId in pratique.criteres.slice(0, 3)"
                      :key="cId"
                      class="px-1.5 py-0.5 rounded text-xs"
                      style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
                    >{{ CRITERES.find(c => c.id === cId)?.label }}</span>
                  </div>
                  <div v-if="pratique.ville" class="mt-1 text-xs" style="color: var(--nav-text-muted);">
                    {{ pratique.ville }}
                  </div>
                </div>
              </div>
            </div>
          </MobileSheet>
        </ClientOnly>
      </div>

    </main>

    <!-- ═══════════════════════════════════════ BOUTON CHATBOT FLOTTANT (mobile) — désactivé V1 -->
    <button
      v-if="false"
      class="lg:hidden fixed bottom-6 right-4 z-[1000] flex items-center gap-2 px-4 rounded-full shadow-lg"
      style="
        height: 48px;
        background: var(--nav-primary);
        opacity: 0.5;
        color: var(--nav-text-on-primary);
        box-shadow: 0 4px 16px rgba(26,34,56,0.25);
        font-family: var(--nav-font);
        font-size: 0.875rem;
        font-weight: 600;
      "
      aria-label="Chatbot (bientôt disponible)"
      disabled
    >
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
      </svg>
      <span>Chatbot</span>
    </button>

  </div>
</template>

<script setup lang="ts">
import type { Pratique } from '~/types/pratique'
import { CRITERES, TYPES_ENTITE, TYPES_ENTITE_LABELS, EUROPE_CODES, OUTREMER_CODES } from '~/types/pratique'

// ── URL query params sync ─────────────────────────────────────────────────
const route = useRoute()
const router = useRouter()

const search = ref<string>((route.query.q as string) ?? '')
const criteres = ref<number[]>(
  route.query.criteres
    ? (route.query.criteres as string).split(',').map(Number).filter(Boolean)
    : []
)
const typesEntite = ref<string[]>(
  route.query.types
    ? (route.query.types as string).split(',').filter(Boolean)
    : []
)
const pays = ref<string[]>(
  route.query.pays
    ? (route.query.pays as string).split(',').filter(Boolean)
    : []
)

const selectedId = ref<number | null>(null)
const mobileMapView = ref<'europe' | 'outremer'>('europe')
const desktopMapView = ref<'europe' | 'outremer'>('europe')

// Refs vers les instances EuropeMap
const europeMapRef = ref<any>(null)
const europeMapMobileRef = ref<any>(null)

// Ref locale barre de recherche mobile
const mobileSearch = ref<string>((route.query.q as string) ?? '')

// Sync URL <-> état filtres
function syncUrl() {
  const q: Record<string, string> = {}
  if (search.value) q.q = search.value
  if (criteres.value.length) q.criteres = criteres.value.join(',')
  if (typesEntite.value.length) q.types = typesEntite.value.join(',')
  if (pays.value.length) q.pays = pays.value.join(',')
  router.replace({ query: Object.keys(q).length ? q : undefined })
}

// Sauvegarde filtres pour bouton retour des fiches
function storeFiltersForBack() {
  if (typeof window === 'undefined') return
  const q: Record<string, string> = {}
  if (search.value) q.q = search.value
  if (criteres.value.length) q.criteres = criteres.value.join(',')
  if (typesEntite.value.length) q.types = typesEntite.value.join(',')
  if (pays.value.length) q.pays = pays.value.join(',')
  const qs = new URLSearchParams(q).toString()
  sessionStorage.setItem('pratiques_back_filters', qs)
}

function onSearch(v: string) { search.value = v; syncUrl(); storeFiltersForBack() }
function onCriteres(v: number[]) { criteres.value = v; syncUrl(); storeFiltersForBack() }
function onTypesEntite(v: string[]) { typesEntite.value = v; syncUrl(); storeFiltersForBack() }
function onPays(v: string[]) { pays.value = v; syncUrl(); storeFiltersForBack() }

function onSelectPratique(id: number) {
  selectedId.value = selectedId.value === id ? null : id
  // Desktop : naviguer vers la fiche
  if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
    storeFiltersForBack()
    router.push(`/pratique/${id}`)
  }
}

function onSelectPratiqueMobile(id: number) {
  selectedId.value = id
  storeFiltersForBack()
  router.push(`/pratique/${id}`)
}

function onHoverPratique(id: number | null) {
  if (id !== null) selectedId.value = id
}

const hasActiveFilters = computed(() =>
  !!search.value || criteres.value.length > 0 || typesEntite.value.length > 0 || pays.value.length > 0
)

function resetFilters() {
  search.value = ''
  criteres.value = []
  typesEntite.value = []
  pays.value = []
  router.replace({ query: undefined })
}

function toggleCritere(id: number) {
  if (criteres.value.includes(id)) {
    onCriteres(criteres.value.filter(v => v !== id))
  } else {
    onCriteres([...criteres.value, id])
  }
}

function toggleType(t: string) {
  if (typesEntite.value.includes(t)) {
    onTypesEntite(typesEntite.value.filter(v => v !== t))
  } else {
    onTypesEntite([...typesEntite.value, t])
  }
}

// Sync recherche depuis URL ?q=
watch(() => route.query.q, (v) => {
  search.value = (v as string) ?? ''
})

// ── Données ───────────────────────────────────────────────────────────────
const { data, pending, error: fetchError } = await useFetch<{ list: Pratique[]; source: string }>('/api/pratiques')

const pratiques = computed<Pratique[]>(() => data.value?.list ?? [])

// ── Filtrage côté client ──────────────────────────────────────────────────
const filtered = computed<Pratique[]>(() => {
  let result = pratiques.value

  if (search.value.trim()) {
    const q = search.value.toLowerCase()
    result = result.filter(
      (o) =>
        o.nom?.toLowerCase().includes(q) ||
        o.ville?.toLowerCase().includes(q) ||
        o.description?.toLowerCase().includes(q)
    )
  }

  if (criteres.value.length) {
    result = result.filter((o) =>
      criteres.value.some((cId) => o.criteres?.includes(cId))
    )
    // Tri par score pondéré : priorité au premier critère cliqué
    const n = criteres.value.length
    const score = (o: Pratique) =>
      criteres.value.reduce((s, cId, i) => {
        return s + (o.criteres?.includes(cId) ? (n - i) : 0)
      }, 0)
    result = [...result].sort((a, b) => score(b) - score(a))
  }

  if (typesEntite.value.length) {
    result = result.filter((o) => o.type && typesEntite.value.includes(o.type))
  }

  if (pays.value.length) {
    result = result.filter((o) => o.pays && pays.value.includes(o.pays))
  }

  return result
})

// Séparation Europe / Outre-mer
const europeOrgs = computed<Pratique[]>(() =>
  filtered.value.filter(o => !o.pays || (EUROPE_CODES as readonly string[]).includes(o.pays))
)

const outremerOrgs = computed<Pratique[]>(() =>
  filtered.value.filter(o => o.pays && (OUTREMER_CODES as readonly string[]).includes(o.pays))
)

// ── Compteurs ─────────────────────────────────────────────────────────────
const critereCount = computed<Record<number, number>>(() => {
  const counts: Record<number, number> = {}
  CRITERES.forEach(c => { counts[c.id] = 0 })
  pratiques.value.forEach(o => {
    o.criteres?.forEach(cId => { counts[cId] = (counts[cId] ?? 0) + 1 })
  })
  return counts
})

const typeCount = computed<Record<string, number>>(() => {
  const counts: Record<string, number> = {}
  TYPES_ENTITE.forEach(t => { counts[t] = 0 })
  pratiques.value.forEach(o => {
    if (o.type) counts[o.type] = (counts[o.type] ?? 0) + 1
  })
  return counts
})

useHead({ title: 'AEP — Pratiques régénératives en Europe' })
</script>
