<script setup lang="ts">
// Home redirects straight to the search experience.
import type { ButtonProps } from '@nuxt/ui'

const nuxtApp = useNuxtApp()
const { $i18n } = useNuxtApp()
const t = $i18n.t

const release = releases[0]

const links = ref<ButtonProps[]>([
  // {
  //   label: t('nav.tour'),
  //   icon: 'ph-student',
  //   color: 'error',
  //   class: 'hidden sm:flex',
  //   onClick: () => nuxtApp.callHook('tour',11)
  // },
  {
    label: t('nav.bible_studies'),
    to: `/${$i18n.locale.value}/estudios-biblicos`,
    icon: 'ph-books',
    color: 'primary'
  },
  {
    label: t('nav.conferences'),
    to: `/${$i18n.locale.value}/conferencias`,
    icon: 'ph-books',
    color: 'secondary'
  },
])

</script>

<template>
  <UDashboardPanel id="changelog-panel" grow>
    <UDashboardNavbar :title="t('nav.home')">
      <template #leading>
        <UDashboardSidebarCollapse />
      </template>
    </UDashboardNavbar>

    <div class="flex-1 overflow-y-auto">
      <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
        <div class="flex flex-col lg:flex-row lg:items-start gap-8 lg:gap-12">

          <!-- Hero: título, descripción y accesos -->
          <div class="flex-1 flex flex-col gap-6">
            <UBadge variant="subtle" color="neutral" size="sm" class="w-fit">
              {{ release?.date }}
            </UBadge>

            <div>
              <h1 class="text-3xl sm:text-4xl font-bold text-highlighted tracking-tight">
                Buscador Carpa
              </h1>
              <p class="mt-3 text-base text-muted leading-relaxed">
                {{ $t('home.instructions') }}
              </p>
            </div>

            <div class="flex flex-col sm:flex-row flex-wrap gap-3">
              <UButton
                v-for="link in links"
                :key="link.label"
                v-bind="link"
              />
            </div>
          </div>

          <!-- Changelog card -->
          <div id="index_changelog" class="w-full lg:w-80 xl:w-96 shrink-0">
            <UCard variant="soft">
              <template #header>
                <div class="flex items-center gap-2">
                  <UIcon name="ph-git-branch" class="size-4 text-muted shrink-0" />
                  <div class="flex-1 min-w-0">
                    <p class="font-semibold text-highlighted text-sm truncate">{{ release?.title }}</p>
                    <p v-if="release?.description" class="text-xs text-muted truncate">{{ release?.description }}</p>
                  </div>
                  <UBadge variant="outline" color="neutral" size="xs" class="shrink-0">
                    v{{ release?.version }}
                  </UBadge>
                </div>
              </template>
              <ul class="space-y-2">
                <li v-for="(change, i) in release?.changes" :key="i" class="flex items-start gap-2 text-sm">
                  <UBadge :color="typeConfig[change.type].color as any" variant="subtle" size="xs" class="mt-0.5 shrink-0">
                    {{ typeConfig[change.type].label }}
                  </UBadge>
                  <span class="text-default leading-snug">{{ change.text }}</span>
                </li>
              </ul>
            </UCard>
          </div>

        </div>
      </div>
    </div>
  </UDashboardPanel>
</template>
