<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useFavoritesStore } from '~/stores/favorites'
import { useHistoryStore } from '~/stores/history'
import type { SearchHit } from '~/types'

interface Study {
  id?: number
  title?: string
  date?: string
  place?: string
  link?: string
}

interface EntrelineaDoc {
  id?: string
  image?: string
  link?: string
  locale?: string
  origin?: string
  page?: number | string
  text?: string
  studies?: Study[]
  [key: string]: unknown
}

const props = defineProps<{
  document: EntrelineaDoc
  collection?: string
  highlightedText?: string | null
}>()

const emits = defineEmits<{ close: [] }>()

const showStudies = ref(false)

// Volver al detalle cuando cambia el documento
watch(() => props.document?.id, () => { showStudies.value = false })

const imageUrl = computed<string | null>(() =>
  getEntrelineaImageUrl(props.document?.image, 'detail')
)

const origin = computed(() => (props.document?.origin as string) || '')

const title = computed(() =>
  origin.value || (props.document?.id as string) || 'Entrelínea'
)

const bodyHtml = computed<string>(() =>
  props.highlightedText || props.document?.text || ''
)

/* -------------------------------------------------------------------------- */
/*  Favoritos / Historial                                                      */
/* -------------------------------------------------------------------------- */

const favorites = useFavoritesStore()
const history = useHistoryStore()
const toast = useToast()

function toSearchHit(doc: EntrelineaDoc): SearchHit {
  const id = doc.id || ''
  return { _id: id, id, title: id || 'Entrelínea', body: doc.text, ...doc }
}

watch(
  () => [props.collection, props.document?.id] as const,
  ([collection, id]) => {
    if (!collection || !id) return
    history.visit(collection, toSearchHit(props.document))
  },
  { immediate: true }
)

const isFav = computed(() => {
  if (!props.collection || !props.document?.id) return false
  return favorites.isFavorite(props.collection, props.document.id)
})

function onToggleFavorite() {
  if (!props.collection || !props.document?.id) return
  const wasFav = isFav.value
  favorites.toggle(props.collection, toSearchHit(props.document))
  toast.add({
    title: wasFav ? 'Eliminado de tu lista' : 'Guardado en tu lista',
    description: props.document.id,
    icon: wasFav ? 'i-lucide-bookmark-x' : 'i-lucide-bookmark-check',
    color: wasFav ? 'neutral' : 'primary',
    duration: 1800
  })
}
</script>

<template>
  <UDashboardPanel id="entrelinea-detail">
    <UDashboardNavbar
      :toggle="false"
      :ui="{
        root: 'h-auto min-h-(--ui-header-height) py-2 items-start sm:items-center',
        left: 'flex-1 min-w-0 py-1',
        title: 'flex items-center gap-1.5 font-semibold text-highlighted min-w-0 whitespace-normal'
      }"
    >
      <template #leading>
        <!-- En sub-pantalla de estudios: volver al detalle -->
        <UButton
          v-if="showStudies"
          icon="i-lucide-arrow-left"
          color="neutral"
          variant="ghost"
          class="-ms-1.5"
          @click="showStudies = false"
        />
        <!-- En detalle: cerrar el panel -->
        <UButton
          v-else
          icon="i-lucide-arrow-left"
          color="neutral"
          variant="ghost"
          class="-ms-1.5"
          @click="emits('close')"
        />
      </template>

      <template #title>
        <span
          v-if="showStudies"
          class="font-semibold text-sm block"
        >
          Estudios relacionados
          <span class="text-muted font-normal">({{ document.studies?.length }})</span>
        </span>
        <span
          v-else
          class="font-semibold text-sm min-w-0 max-w-full block whitespace-normal leading-snug pr-1 [overflow-wrap:anywhere]"
          :title="title"
        >
          {{ title }}
        </span>
      </template>

      <template #right>
        <template v-if="!showStudies">
          <UTooltip
            v-if="document.studies?.length"
            :text="`Estudios relacionados (${document.studies.length})`"
          >
            <UChip
              :text="document.studies.length"
              color="primary"
              size="sm"
              :show="!!document.studies?.length"
            >
              <UButton
                icon="i-lucide-book-open"
                color="neutral"
                variant="ghost"
                aria-label="Estudios relacionados"
                @click="showStudies = true"
              />
            </UChip>
          </UTooltip>
          <UTooltip v-if="collection" :text="isFav ? 'Quitar de mi lista' : 'Guardar en mi lista'">
            <UButton
              :icon="isFav ? 'i-lucide-bookmark-check' : 'i-lucide-bookmark-plus'"
              :color="isFav ? 'primary' : 'neutral'"
              variant="ghost"
              :aria-label="isFav ? 'Quitar de mi lista' : 'Guardar en mi lista'"
              @click="onToggleFavorite"
            />
          </UTooltip>
        </template>
      </template>
    </UDashboardNavbar>

    <div
      v-if="!showStudies"
      class="flex items-start justify-between gap-3 px-4 sm:px-6 py-2.5 border-b border-default bg-elevated/40 min-w-0 w-full"
    >
      <div class="flex flex-wrap items-center gap-2 min-w-0 flex-1">
        <UBadge
          v-if="document.locale"
          :label="String(document.locale).toUpperCase()"
          color="neutral"
          variant="subtle"
          size="xs"
          class="shrink-0"
        />
        <span
          v-if="origin && origin !== document.id"
          class="inline-flex items-start rounded-md bg-primary/10 text-primary text-xs font-medium px-2 py-0.5 min-w-0 max-w-full whitespace-normal leading-snug [overflow-wrap:anywhere]"
          :title="origin"
        >
          {{ origin }}
        </span>
        <span v-if="document.page != null" class="text-xs text-muted flex items-center gap-1 shrink-0">
          <UIcon name="i-lucide-file-text" class="size-3" />
          Pág. {{ document.page }}
        </span>
        <span
          v-if="document.id && document.id !== origin"
          class="text-xs text-dimmed font-mono truncate max-w-[160px] shrink-0"
          :title="String(document.id)"
        >
          {{ document.id }}
        </span>
      </div>
      <UButton
        v-if="document.link"
        :to="document.link"
        target="_blank"
        icon="i-lucide-external-link"
        label="Ver en sitio"
        color="primary"
        variant="soft"
        size="xs"
        class="shrink-0"
      />
    </div>

    <!-- ------------------------------------------------------------------ -->
    <!--  VISTA PRINCIPAL: imagen + texto + accesos                          -->
    <!-- ------------------------------------------------------------------ -->
    <div v-if="!showStudies" class="flex-1 overflow-y-auto">
      <div class="p-4 sm:p-6 pb-10 flex flex-col gap-6">

        <!-- Imagen -->
        <div
          v-if="imageUrl"
          class="rounded-xl overflow-hidden border border-default shadow-sm bg-elevated flex items-center justify-center"
        >
          <img :src="imageUrl" :alt="title" loading="lazy" class="max-w-full h-auto">
        </div>
        <div
          v-else
          class="rounded-xl border border-dashed border-default p-8 text-center text-xs text-dimmed"
        >
          <UIcon name="i-lucide-image-off" class="size-6 mb-1 mx-auto" />
          <p>Sin imagen disponible</p>
        </div>

        <!-- Texto -->
        <div v-if="bodyHtml" class="rounded-xl border border-default bg-white dark:bg-neutral-900 shadow-sm p-4 sm:p-6">
          <article
            class="prose prose-sm max-w-none dark:prose-invert leading-relaxed"
            v-html="bodyHtml"
          />
        </div>
        <p v-else class="text-sm text-muted">
          No hay entrelínea para esta coincidencia.
        </p>

        <!-- Link al sitio -->
        <a
          v-if="document.link"
          :href="document.link"
          target="_blank"
          rel="noopener noreferrer"
          class="flex items-center gap-3 rounded-xl border border-primary/30 bg-primary/5 hover:bg-primary/10 transition-colors px-4 py-3 group"
        >
          <UIcon name="i-lucide-external-link" class="size-5 text-primary shrink-0" />
          <div class="min-w-0 flex-1">
            <p class="text-sm font-medium text-primary">Ver en el sitio</p>
            <p class="text-xs text-muted truncate">{{ document.link }}</p>
          </div>
          <UIcon name="i-lucide-chevron-right" class="size-4 text-primary/60 shrink-0 group-hover:translate-x-0.5 transition-transform" />
        </a>
      </div>
    </div>

    <!-- ------------------------------------------------------------------ -->
    <!--  SUB-PANTALLA: lista de estudios relacionados                       -->
    <!-- ------------------------------------------------------------------ -->
    <div v-else class="flex-1 overflow-y-auto divide-y divide-default">
      <a
        v-for="study in document.studies"
        :key="study.id"
        :href="study.link"
        target="_blank"
        rel="noopener noreferrer"
        :title="study.title"
        class="flex items-center gap-3 px-4 sm:px-6 py-3.5 hover:bg-primary/5 transition-colors group"
      >
        <div class="flex flex-col justify-center shrink-0 w-14 text-center">
          <template v-if="study.date">
            <span class="text-base font-bold text-highlighted tabular-nums leading-none">
              {{ new Date(study.date + 'T00:00:00').getUTCDate() }}
            </span>
            <span class="text-[10px] uppercase tracking-wide text-muted leading-tight mt-0.5">
              {{ new Date(study.date + 'T00:00:00').toLocaleDateString('es', { month: 'short', timeZone: 'UTC' }) }}
              {{ new Date(study.date + 'T00:00:00').getUTCFullYear() }}
            </span>
          </template>
          <UIcon v-else name="i-lucide-calendar-x" class="size-4 text-dimmed mx-auto" />
        </div>

        <div class="w-px self-stretch bg-default shrink-0" />

        <div class="flex-1 min-w-0">
          <p class="text-sm font-medium text-highlighted leading-snug group-hover:text-primary transition-colors line-clamp-2">
            {{ study.title }}
          </p>
          <p v-if="study.place" class="text-xs text-muted truncate mt-0.5">
            {{ study.place }}
          </p>
        </div>

        <UIcon name="i-lucide-arrow-up-right" class="size-4 text-muted shrink-0 group-hover:text-primary transition-colors" />
      </a>
    </div>

  </UDashboardPanel>
</template>
