<template>
  <Teleport to="body">
    <transition name="backdrop">
      <div
        v-if="modelValue"
        class="fixed inset-0 z-[1010]"
        style="background: rgba(26,34,56,0.5);"
        @click="emit('update:modelValue', false)"
        aria-hidden="true"
      />
    </transition>

    <transition name="sheet">
      <div
        v-if="modelValue"
        class="fixed inset-x-0 bottom-0 z-[1011] flex flex-col"
        style="background: var(--nav-surface); height: 100dvh; max-height: 100dvh; box-shadow: 0 -4px 32px rgba(26,34,56,0.18);"
        role="dialog"
        aria-modal="true"
        aria-label="Assistant Réseaux AEP"
      >
        <div class="flex justify-center pt-3 pb-1 shrink-0">
          <div class="rounded-full" style="width: 36px; height: 4px; background: var(--nav-bg-alt);" />
        </div>

        <div class="flex items-center justify-between px-4 py-3 shrink-0 border-b" style="border-color: var(--nav-bg-alt);">
          <button
            @click="emit('update:modelValue', false)"
            class="flex items-center gap-2 text-sm font-medium transition-opacity hover:opacity-70"
            style="color: var(--nav-text-muted);"
            aria-label="Retour"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="15 18 9 12 15 6"/>
            </svg>
            Retour
          </button>
          <div class="flex items-center gap-2">
            <div class="w-7 h-7 rounded-full flex items-center justify-center shrink-0" style="background: var(--nav-primary);">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--nav-text-on-primary);">
                <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>
            </div>
            <span class="font-bold text-sm" style="color: var(--nav-text);">Réseaux AEP</span>
          </div>
        </div>

        <div ref="messagesContainer" class="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-3">
          <div v-if="messages.length === 0" class="onboarding-bubble">
            <p>Je connais les <strong>120 réseaux, collectifs et agences</strong> cartographiés dans AEP — ceux qui portent une vision écologique et politique de l'architecture.</p>
            <p>Décris ta situation : tu cherches un collectif, une agence inspirante, un partenaire sur un projet en Occitanie, en transition énergétique ?</p>
          </div>

          <template v-for="(msg, i) in messages" :key="i">
            <div v-if="msg.role === 'user'" class="user-bubble">{{ msg.content }}</div>
            <div v-else class="assistant-bubble">
              <div v-html="renderMd(msg.content)" />
              <div v-if="msg.fiches && msg.fiches.length > 0" class="fiches-list" style="margin-top:12px;">
                <p class="fiches-title">Structures recommandées :</p>
                <a
                  v-for="fiche in msg.fiches"
                  :key="fiche.id"
                  :href="`/agences#${fiche.id}`"
                  class="fiche-card"
                >
                  <span class="fiche-nom">{{ fiche.nom }}</span>
                  <span v-if="fiche.explication" class="fiche-expl">{{ fiche.explication }}</span>
                </a>
              </div>
            </div>
          </template>

          <div v-if="loading" class="assistant-bubble loading-bubble">
            <span class="dot" /><span class="dot" /><span class="dot" />
          </div>
          <div v-if="errorMsg" class="error-bubble">{{ errorMsg }}</div>
        </div>

        <div class="shrink-0 px-4 pt-3 border-t" style="border-color: var(--nav-bg-alt); padding-bottom: max(1rem, env(safe-area-inset-bottom));">
          <div class="flex items-center gap-2">
            <input
              v-model="inputText"
              type="text"
              :disabled="loading"
              placeholder="Décris ta situation…"
              class="flex-1 px-4 py-3 rounded-xl text-sm border"
              style="border-color: var(--nav-bg-alt); background: var(--nav-bg); color: var(--nav-text); font-family: var(--nav-font); font-size: 16px;"
              @keydown.enter.prevent="sendMessage"
            />
            <button
              :disabled="loading || !inputText.trim()"
              class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 transition-opacity"
              style="background: var(--nav-primary);"
              :style="{ opacity: (loading || !inputText.trim()) ? 0.4 : 1 }"
              aria-label="Envoyer"
              @click="sendMessage"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--nav-text-on-primary);">
                <line x1="22" y1="2" x2="11" y2="13"/>
                <polygon points="22 2 15 22 11 13 2 9 22 2"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </transition>
  </Teleport>
</template>

<script setup lang="ts">
import { useMarkdown } from '~/composables/useMarkdown'
const { render: renderMd } = useMarkdown()

interface FicheReco { id: number | string; nom: string; explication?: string }
interface ChatMessage { role: 'user' | 'assistant'; content: string; fiches?: FicheReco[] }

const props = defineProps<{ modelValue: boolean }>()
const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()

const messages = ref<ChatMessage[]>([])
const inputText = ref('')
const loading = ref(false)
const errorMsg = ref('')
const messagesContainer = ref<HTMLElement | null>(null)

watch(() => props.modelValue, (open) => {
  if (typeof document === 'undefined') return
  document.body.style.overflow = open ? 'hidden' : ''
  document.documentElement.style.overflow = open ? 'hidden' : ''
})

onUnmounted(() => {
  if (typeof document !== 'undefined') {
    document.body.style.overflow = ''
    document.documentElement.style.overflow = ''
  }
})

async function sendMessage() {
  const question = inputText.value.trim()
  if (!question || loading.value) return
  inputText.value = ''
  errorMsg.value = ''
  messages.value.push({ role: 'user', content: question })
  loading.value = true
  await nextTick()
  if (messagesContainer.value) messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight

  try {
    const res = await $fetch<{ reponse_texte: string; fiches_recommandees: FicheReco[] }>(
      '/api/chatbot-reseaux',
      { method: 'POST', body: { question } }
    )
    messages.value.push({ role: 'assistant', content: res.reponse_texte, fiches: res.fiches_recommandees || [] })
  } catch (e: any) {
    const s = e?.statusCode ?? e?.status
    errorMsg.value = s === 429
      ? 'Limite de 20 questions par jour atteinte.'
      : 'Une erreur est survenue. Réessaie dans quelques instants.'
  } finally {
    loading.value = false
    await nextTick()
    if (messagesContainer.value) messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}
</script>

<style scoped>
.backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
.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%); }

.onboarding-bubble {
  background: var(--nav-bg); border: 1px solid var(--nav-bg-alt);
  border-radius: 12px; padding: 16px;
  font-size: 0.85rem; line-height: 1.65; color: var(--nav-text-muted);
}
.onboarding-bubble p { margin-bottom: 10px; }
.onboarding-bubble strong { font-weight: 700; color: var(--nav-text); }

.user-bubble {
  align-self: flex-end; max-width: 80%;
  background: var(--nav-primary); color: var(--nav-text-on-primary);
  border-radius: 16px 16px 4px 16px; padding: 10px 14px;
  font-size: 0.875rem; line-height: 1.5;
}
.assistant-bubble {
  align-self: flex-start; max-width: 90%;
  background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);
  border-radius: 16px 16px 16px 4px; padding: 12px 14px;
  font-size: 0.875rem; line-height: 1.6; color: var(--nav-text);
}
.loading-bubble { display: flex; gap: 5px; align-items: center; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nav-text-muted); animation: blink 1.2s infinite; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,80%,100% { opacity: 0.3; } 40% { opacity: 1; } }

.error-bubble { align-self: flex-start; max-width: 90%; color: #a85d3e; font-size: 0.8rem; padding: 8px 12px; border-radius: 8px; background: rgba(168,93,62,0.08); }

.fiches-list { display: flex; flex-direction: column; gap: 6px; }
.fiches-title { font-size: 0.75rem; font-weight: 600; color: var(--nav-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.fiche-card { display: block; background: var(--nav-bg); border: 1px solid var(--nav-bg-alt); border-radius: 8px; padding: 8px 12px; text-decoration: none; transition: background 0.15s; }
.fiche-card:hover { background: var(--nav-bg-alt); }
.fiche-nom { display: block; font-size: 0.875rem; font-weight: 600; color: var(--nav-text); }
.fiche-expl { display: block; font-size: 0.8rem; color: var(--nav-text-muted); margin-top: 2px; }
</style>
