<script setup lang="ts">
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
import { breakpointsTailwind, useDebounce } from '@vueuse/core'
import PublicationDetail from '~/components/PublicationDetail.vue'
import { useSettingsStore } from '~/stores/settings'

interface Props {
  paragraphsCollection: string
  mainCollection: string
  groupByField: string
  favoritesCollection: string
  panelId: string
  navTitleKey: string
  accentColor: 'green' | 'blue'
  emptyDetailText: string
  showDraft?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  showDraft: false
})

const QUERY_BY = 'text'

const { $i18n } = useNuxtApp()
const t = $i18n.t
const { locale } = useI18n()

const filterBy = computed(() => `locale:=${locale.value}`)
const REQUEST_TIMEOUT_MS = 15000

const settings = useSettingsStore()

// ── Restaurar estado desde URL antes de crear los refs ─────────────────────
const { query: q0, page: p0, scroll: s0, selectedId: sid0 } = useSearchUrlState()

const query = ref(q0)
const debouncedQuery = useDebounce(query, 150)
const loading = ref(false)
const loadingMore = ref(false)
const errorMsg = ref<string | null>(null)

// ---- Types ----------------------------------------------------------------

interface ParagraphDoc {
  id?: string
  document_id: string
  text: string
  number: number
  locale: string
  type: string
}

interface DocMeta {
  id: string
  title: string
  date?: string
  timestamp?: number
  place?: string
  city?: string
  state?: string
  country?: string
  type?: string
  slug?: string
  draft?: string
}

interface DocumentDoc extends DocMeta {
  code: string
  locale: string
  files?: {
    youtube?: string
    video?: string
    audio?: string
    booklet?: string
    simple?: string
  }
  body?: string
  [key: string]: unknown
}

interface TypesenseHighlight {
  field?: string
  snippet?: string
  value?: string
  matched_tokens?: string[]
}

interface TypesenseParagraphHit {
  document: ParagraphDoc
  highlights?: TypesenseHighlight[]
  highlight?: Record<string, { snippet?: string, value?: string }>
  text_match?: number
}

interface TypesenseGroupedHit {
  groupKey: string[]
  hits: TypesenseParagraphHit[]
}

interface TypesenseSearchResponse {
  found: number
  groupedHits?: TypesenseGroupedHit[]
}

interface SearchGroup {
  docId: string
  firstHit: TypesenseParagraphHit
  allHits: TypesenseParagraphHit[]
}

interface BrowseItem {
  docId: string
  meta: DocMeta
}

interface DisplayGroup {
  docId: string
  meta: DocMeta | undefined
  firstHit: TypesenseParagraphHit | null
}

// ---- Colors ----------------------------------------------------------------

const colors = computed(() => {
  if (props.accentColor === 'green') {
    return {
      selectedItem: 'border-carpagreen bg-carpagreen/10',
      hoverItem: 'border-gray-200 hover:border-carpagreen hover:bg-carpagreen/5',
      icon: 'text-carpagreen',
    }
  }
  return {
    selectedItem: 'border-carpablue bg-carpablue/10',
    hoverItem: 'border-gray-200 hover:border-carpablue hover:bg-carpablue/5',
    icon: 'text-carpablue',
  }
})

// ---- State ----------------------------------------------------------------

const groupedHits = ref<SearchGroup[]>([])
const total = ref(0)
const currentPage = ref(1)

const hasMore = computed(() =>
  settings.paginationType === 'infinite_scroll' ? groupedHits.value.length < total.value : false
)

const visibleGroupCount = ref(10)

const visibleGroups = computed(() =>
  settings.paginationType === 'infinite_scroll'
    ? groupedHits.value.slice(0, visibleGroupCount.value)
    : groupedHits.value
)

const hasMoreVisible = computed(() =>
  settings.paginationType === 'infinite_scroll' &&
  visibleGroupCount.value < groupedHits.value.length
)

const browseItems = ref<BrowseItem[]>([])
const browseTotal = ref(0)
const browsePage = ref(1)

const hasMoreBrowse = computed(() =>
  settings.paginationType === 'infinite_scroll'
    ? browseItems.value.length < browseTotal.value
    : false
)

const displayGroups = computed((): DisplayGroup[] => {
  if (!debouncedQuery.value.trim()) {
    return browseItems.value.map(item => ({
      docId: item.docId,
      meta: item.meta,
      firstHit: null
    }))
  }
  return visibleGroups.value.map(g => ({
    docId: g.docId,
    meta: docCache.value[g.docId],
    firstHit: g.firstHit
  }))
})

const activePage = ref(p0)

const displayTotal = computed(() =>
  debouncedQuery.value.trim() ? total.value : browseTotal.value
)

const totalPages = computed(() =>
  Math.max(1, Math.ceil(displayTotal.value / settings.pageSize))
)

const docCache = ref<Record<string, DocMeta>>({})

const { documentsApi } = useTypesenseApi()

// ---- Batch fetch de metadatos ---------------------------------------------

async function fetchDocumentMeta(docIds: string[]) {
  const unique = docIds.filter(id => id && !(id in docCache.value))
  if (!unique.length) return
  try {
    const res = await documentsApi.multiSearch({
      multiSearchParameters: {},
      multiSearchSearchesParameter: {
        searches: [{
          collection: props.mainCollection,
          q: '*',
          queryBy: 'title',
          filterBy: `id:=[${unique.join(',')}]`,
          includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug,draft',
          perPage: unique.length,
          page: 1
        }]
      }
    })
    const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocMeta }> })?.hits ?? []
    for (const hit of docHits) {
      if (hit.document.id) docCache.value[hit.document.id] = hit.document
    }
  } catch (err) {
    console.error('Error fetching document metadata', err)
  }
}

// ---- Búsqueda de párrafos (con query) -------------------------------------

let searchSeq = 0
let timeoutId: ReturnType<typeof setTimeout> | null = null

async function runSearch(q: string, page = 1, append = false) {
  const seq = ++searchSeq
  if (append) loadingMore.value = true
  else loading.value = true
  errorMsg.value = null

  if (timeoutId) clearTimeout(timeoutId)
  timeoutId = setTimeout(() => {
    if (seq === searchSeq) {
      loading.value = false
      loadingMore.value = false
      errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
    }
  }, REQUEST_TIMEOUT_MS)

  const isInfinite = settings.paginationType === 'infinite_scroll'
  const typePage = isInfinite ? (append ? currentPage.value + 1 : 1) : page

  try {
    const multi = await documentsApi.multiSearch({
      multiSearchParameters: {},
      multiSearchSearchesParameter: {
        searches: [{
          collection: props.paragraphsCollection,
          q: q || '*',
          queryBy: QUERY_BY,
          filterBy: filterBy.value,
          perPage: settings.pageSize,
          page: typePage,
          highlightFullFields: QUERY_BY,
          highlightFields: QUERY_BY,
          highlightStartTag: '<mark class="search-match">',
          highlightEndTag: '</mark>',
          highlightAffixNumTokens: 30,
          groupBy: props.groupByField
        }]
      }
    })
    if (seq !== searchSeq) return

    const res = (multi?.results?.[0] ?? {}) as TypesenseSearchResponse
    const rawGroups = res?.groupedHits ?? []
    const newGroups: SearchGroup[] = rawGroups.map(g => ({
      docId: g.groupKey[0]!,
      firstHit: g.hits[0]!,
      allHits: g.hits
    }))

    if (!append) docCache.value = {}
    await fetchDocumentMeta(newGroups.map(g => g.docId).filter(Boolean))

    if (seq !== searchSeq) return

    groupedHits.value = append ? groupedHits.value.concat(newGroups) : newGroups
    total.value = res?.found ?? groupedHits.value.length
    currentPage.value = typePage
    if (!append) activePage.value = page
  } catch (err: unknown) {
    if (seq !== searchSeq) return
    console.error('Typesense error', err)
    errorMsg.value = (err as Error)?.message || 'Error al buscar.'
    if (!append) { groupedHits.value = []; total.value = 0 }
  } finally {
    if (seq === searchSeq) {
      if (timeoutId) clearTimeout(timeoutId)
      loading.value = false
      loadingMore.value = false
    }
  }
}

// ---- Exploración por fecha (sin query) ------------------------------------

async function runBrowse(page = 1, append = false) {
  const seq = ++searchSeq
  if (append) loadingMore.value = true
  else loading.value = true
  errorMsg.value = null

  if (timeoutId) clearTimeout(timeoutId)
  timeoutId = setTimeout(() => {
    if (seq === searchSeq) {
      loading.value = false
      loadingMore.value = false
      errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
    }
  }, REQUEST_TIMEOUT_MS)

  const isInfinite = settings.paginationType === 'infinite_scroll'
  const typePage = isInfinite ? (append ? browsePage.value + 1 : 1) : page

  try {
    const multi = await documentsApi.multiSearch({
      multiSearchParameters: {},
      multiSearchSearchesParameter: {
        searches: [{
          collection: props.paragraphsCollection,
          q: '*',
          queryBy: QUERY_BY,
          filterBy: filterBy.value,
          sortBy: `$${props.mainCollection}(timestamp:desc)`,
          groupBy: props.groupByField,
          perPage: settings.pageSize,
          page: typePage,
          includeFields: `$${props.mainCollection}(id,title,date,timestamp,place,city,state,country,type,slug,draft)`
        }]
      }
    })
    console.log('Browse result', multi)
    if (seq !== searchSeq) return
    const result = (multi?.results?.[0] as TypesenseSearchResponse | undefined)
    const rawGroups = result?.groupedHits ?? []
    const newItems = rawGroups.map(g => {
      const docId = g.groupKey[0]!
      const parentMeta = (g.hits[0]?.document as unknown as Record<string, unknown>)[props.mainCollection] as Partial<DocMeta> | undefined
      return { docId, meta: { id: docId, ...parentMeta } as DocMeta }
    })

    browseItems.value = append ? browseItems.value.concat(newItems) : newItems
    browseTotal.value = result?.found ?? browseItems.value.length
    browsePage.value = typePage
    if (!append) activePage.value = page
  } catch (err: unknown) {
    if (seq !== searchSeq) return
    console.error('Typesense error', err)
    errorMsg.value = (err as Error)?.message || 'Error al buscar.'
    if (!append) { browseItems.value = []; browseTotal.value = 0 }
  } finally {
    if (seq === searchSeq) {
      if (timeoutId) clearTimeout(timeoutId)
      loading.value = false
      loadingMore.value = false
    }
  }
}

function loadMore() {
  if (settings.paginationType !== 'infinite_scroll') return
  if (loadingMore.value || loading.value || !hasMore.value) return
  runSearch(query.value, currentPage.value, true)
}

function goToPage(p: number) {
  activePage.value = p
  if (!debouncedQuery.value.trim()) {
    browseItems.value = []
    runBrowse(p, false)
  } else {
    groupedHits.value = []
    runSearch(query.value, p, false)
  }
}

const listContainer = ref<HTMLElement | null>(null)

function onListScroll() {
  if (settings.paginationType !== 'infinite_scroll') return
  const el = listContainer.value
  if (!el) return
  if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
    if (!debouncedQuery.value.trim()) {
      if (hasMoreBrowse.value && !loadingMore.value && !loading.value) runBrowse(browsePage.value, true)
    } else {
      if (hasMoreVisible.value) visibleGroupCount.value += 10
      else if (hasMore.value && !loadingMore.value && !loading.value) loadMore()
    }
  }
}

function retry() {
  if (!query.value.trim()) runBrowse(activePage.value, false)
  else runSearch(query.value, activePage.value, false)
}

onBeforeUnmount(() => { if (timeoutId) clearTimeout(timeoutId) })

watch(debouncedQuery, (q) => {
  activePage.value = 1
  if (!q.trim()) {
    groupedHits.value = []; total.value = 0; currentPage.value = 1; visibleGroupCount.value = 10
    browseItems.value = []; browseTotal.value = 0; browsePage.value = 1
    runBrowse(1, false)
  } else {
    browseItems.value = []; browseTotal.value = 0; browsePage.value = 1
    groupedHits.value = []; total.value = 0; currentPage.value = 1; visibleGroupCount.value = 10
    runSearch(q, 1, false)
  }
})

// ---- Selección y carga del detalle ----------------------------------------

const selectedDocId = ref<string | null>(null)
const selectedDocument = ref<DocumentDoc | null>(null)
const documentLoading = ref(false)
const selectedParagraphs = ref<TypesenseParagraphHit[]>([])
const paragraphsLoading = ref(false)
const selectedHit = ref<TypesenseParagraphHit | null>(null)
const selectedMatchingHits = ref<TypesenseParagraphHit[]>([])

async function fetchDocumentWithParagraphs(docId: string) {
  documentLoading.value = true
  paragraphsLoading.value = true
  selectedDocument.value = null
  selectedParagraphs.value = []
  try {
    const res = await documentsApi.multiSearch({
      multiSearchParameters: {},
      multiSearchSearchesParameter: {
        searches: [{
          collection: props.mainCollection,
          q: '*',
          queryBy: 'title',
          filterBy: `id:=${docId} && $${props.paragraphsCollection}(id: *)`,
          includeFields: `*, $${props.paragraphsCollection}(*)`
        }]
      }
    })
    const hit = (res?.results?.[0] as { hits?: Array<{ document: Record<string, unknown> }> })?.hits?.[0]
    if (hit) {
      const docRaw = { ...hit.document }
      const rawParagraphs = (docRaw[props.paragraphsCollection] as ParagraphDoc[] | undefined) ?? []
      delete docRaw[props.paragraphsCollection]
      selectedDocument.value = docRaw as unknown as DocumentDoc
      selectedParagraphs.value = [...rawParagraphs]
        .sort((a, b) => (a.number ?? 0) - (b.number ?? 0))
        .map(p => ({ document: p }))
    }
  } catch (err) {
    console.error('Error fetching document with paragraphs', err)
    selectedDocument.value = null
    selectedParagraphs.value = []
  } finally {
    documentLoading.value = false
    paragraphsLoading.value = false
  }
}

async function selectGroup(group: DisplayGroup) {
  selectedDocId.value = group.docId
  selectedHit.value = group.firstHit
  selectedMatchingHits.value = groupedHits.value.find(g => g.docId === group.docId)?.allHits ?? []
  fetchDocumentWithParagraphs(group.docId)
}

const isPanelOpen = computed({
  get() { return !!selectedDocId.value },
  set(v: boolean) {
    if (!v) {
      selectedDocId.value = null
      selectedDocument.value = null
      selectedParagraphs.value = []
      selectedHit.value = null
      selectedMatchingHits.value = []
    }
  }
})

watch(groupedHits, () => {
  if (!selectedDocId.value || !debouncedQuery.value.trim()) return
  if (!groupedHits.value.find(g => g.docId === selectedDocId.value)) {
    selectedDocId.value = null
    selectedDocument.value = null
    selectedParagraphs.value = []
    selectedHit.value = null
    selectedMatchingHits.value = []
  }
})

const selectedId = computed(() => selectedDocId.value)

useSearchUrlSync({ query, page: activePage, selectedId, scrollEl: listContainer })

onMounted(async () => {
  if (q0.trim()) await runSearch(q0, p0, false)
  else await runBrowse(p0, false)

  restoreScrollPosition(listContainer.value, s0)

  if (sid0) {
    const group = displayGroups.value.find(g => g.docId === sid0)
    if (group) selectGroup(group)
    else {
      selectedDocId.value = sid0
      fetchDocumentWithParagraphs(sid0)
    }
  }
})

const breakpoints = useBreakpoints(breakpointsTailwind)
const isMobile = breakpoints.smaller('lg')

useDetailHistory(isPanelOpen, isMobile)

// ---- Helpers de presentación ----------------------------------------------

function highlightedFor(hit: TypesenseParagraphHit, field: string): string | null {
  const fromArr = hit.highlights?.find(h => h.field === field)
  if (fromArr?.snippet) return fromArr.snippet
  if (fromArr?.value) return fromArr.value
  const fromObj = hit.highlight?.[field]
  if (fromObj?.snippet) return fromObj.snippet
  if (fromObj?.value) return fromObj.value
  return null
}

function metaDate(meta: DocMeta | undefined): string {
  if (!meta) return ''
  const ts = meta.timestamp || (meta.date ? Math.floor(new Date(meta.date).getTime() / 1000) : null)
  if (!ts) return meta.date || ''
  return formatDate(ts)
}

function metaLocation(meta: DocMeta | undefined): string {
  if (!meta) return ''
  return formatLocation({
    id: meta.id, date: meta.timestamp ?? 0, slug: meta.slug ?? '',
    type: meta.type ?? '', place: meta.place ?? '', city: meta.city ?? '',
    state: meta.state ?? '', country: meta.country ?? '', thumbnail: ''
  })
}
</script>

<template>
  <UDashboardPanel
    :id="panelId"
    :default-size="32"
    :min-size="24"
    :max-size="45"
    resizable
  >
    <UDashboardNavbar :title="t(navTitleKey)">
      <template #leading>
        <UDashboardSidebarCollapse :ui="{
          base: 'collapse-sidebar-icon'
        }" />
      </template>
      <template #trailing>
        <UBadge :label="displayTotal" variant="subtle" :ui="{
          base: 'total-results'
        }" />
      </template>
    </UDashboardNavbar>

    <div class="px-4 sm:px-6 py-3 border-b border-default" id="inputField">
      <UInput
        v-model="query"
        icon="i-lucide-search"
        :placeholder="t('search.placeholder')"
        :loading="loading"
        size="md"
        class="w-full"
      />
    </div>

    <UAlert
      v-if="errorMsg"
      :title="errorMsg"
      color="error"
      variant="subtle"
      icon="i-lucide-triangle-alert"
      class="mx-4 my-2"
      :actions="[{ label: 'Reintentar', color: 'neutral', variant: 'outline', onClick: retry }]"
    />

    <div ref="listContainer" class="overflow-y-auto divide-y divide-default flex-1" @scroll="onListScroll">
      <div
        v-if="loading && !displayGroups.length"
        class="flex items-center justify-center gap-2 py-16 text-sm text-muted"
      >
        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
        Buscando...
      </div>

      <div
        v-else-if="!displayGroups.length"
        class="flex flex-col items-center justify-center gap-2 py-16 text-dimmed text-sm"
      >
        <UIcon name="i-lucide-inbox" class="size-10" />
        <p>{{ query ? `Sin coincidencias para "${query}"` : 'Sin resultados' }}</p>
      </div>

      <div
        v-for="group in displayGroups"
        :key="group.docId"
        class="p-4 sm:px-6 text-sm cursor-pointer border-b-2 transition-colors"
        :class="selectedDocId === group.docId ? colors.selectedItem : colors.hoverItem"
        @click="selectGroup(group)"
      >
        <div class="mb-1">
          <p class="text-sm font-semibold line-clamp-2 text-highlighted">
            <UTooltip
              v-if="showDraft && group.meta?.draft"
              :text="$t('search.draft')"
              color="error"
            >
              <UIcon name="ph-file-dashed" class="bg-carpared" />
            </UTooltip>
            {{ group.meta?.title || group.docId }}
          </p>
        </div>

        <p class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 text-xs mb-2 text-muted justify-between">
          <span v-if="metaDate(group.meta)" class="flex items-center gap-1">
            <UIcon name="ph:calendar" :class="['size-4', colors.icon]" />
            {{ metaDate(group.meta) }}
          </span>
          <span v-if="metaLocation(group.meta)" class="flex items-center gap-1 truncate">
            <UIcon name="ph:map-pin" :class="['size-4 shrink-0', colors.icon]" />
            <span class="truncate">{{ metaLocation(group.meta) }}</span>
          </span>
        </p>

        <div
          v-if="group.firstHit"
          class="snippet-html text-sm text-dimmed"
          v-html="highlightedFor(group.firstHit, 'text') || group.firstHit.document.text"
        />
      </div>

      <div
        v-if="settings.paginationType === 'infinite_scroll' && loadingMore"
        class="flex items-center justify-center gap-2 py-4 text-sm text-muted"
      >
        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
        Cargando más...
      </div>

      <div
        v-else-if="settings.paginationType === 'infinite_scroll' && displayGroups.length && !hasMoreBrowse && !hasMoreVisible && !hasMore && !loading"
        class="py-3 text-center text-xs text-dimmed"
      >
        No hay más resultados
      </div>
    </div>

    <div
      v-if="settings.paginationType === 'numbered' && totalPages > 1 && !loading"
      class="px-4 py-3 border-t border-default flex justify-center shrink-0"
    >
      <UPagination
        :page="activePage"
        :total="displayTotal"
        :items-per-page="settings.pageSize"
        size="sm"
        @update:page="goToPage"
      />
    </div>
  </UDashboardPanel>

  <!-- Panel de detalle (escritorio) -->
  <PublicationDetail
    v-if="selectedDocId && !isMobile"
    :document="selectedDocument"
    :document-loading="documentLoading"
    :paragraphs="selectedParagraphs"
    :paragraphs-loading="paragraphsLoading"
    :collection="favoritesCollection"
    :query="debouncedQuery"
    :selected-hit="selectedHit"
    :selected-matching-hits="selectedMatchingHits"
    :accent-color="accentColor"
    @close="isPanelOpen = false"
  />
  <div v-else-if="!isMobile" class="hidden lg:flex flex-1 items-center justify-center">
    <div class="flex flex-col items-center gap-2 text-dimmed">
      <UIcon name="i-lucide-search" class="size-16" />
      <p class="text-sm">{{ emptyDetailText }}</p>
    </div>
  </div>

  <!-- Panel de detalle (móvil) -->
  <ClientOnly>
    <USlideover v-if="isMobile" v-model:open="isPanelOpen">
      <template #content>
        <PublicationDetail
          v-if="selectedDocId"
          :document="selectedDocument"
          :document-loading="documentLoading"
          :paragraphs="selectedParagraphs"
          :paragraphs-loading="paragraphsLoading"
          :collection="favoritesCollection"
          :query="debouncedQuery"
          :selected-hit="selectedHit"
          :selected-matching-hits="selectedMatchingHits"
          :accent-color="accentColor"
          @close="isPanelOpen = false"
        />
      </template>
    </USlideover>
  </ClientOnly>
</template>

<style scoped>
.snippet-html :deep(p) {
  display: inline;
  margin: 0;
}
.snippet-html :deep(br) {
  display: none;
}
</style>
