<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useSettingsStore, PAGE_SIZE_OPTIONS } from '~/stores/settings'

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

const settings = useSettingsStore()
const { pageSize, paginationType, showParagraphNumbers } = storeToRefs(settings)

const pageSizeItems = PAGE_SIZE_OPTIONS.map(n => ({
  value: n,
  label: `${n} ${t('settings.results')}`
}))

const paginationItems = [
  {
    value: 'infinite_scroll' as const,
    label: t('settings.infinite_scroll'),
    description: t('settings.infinite_scroll_desc')
  },
  {
    value: 'numbered' as const,
    label: t('settings.numbered'),
    description: t('settings.numbered_desc')
  }
]
</script>

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

    <div class="overflow-y-auto flex-1">
      <div class="p-6 space-y-8">
        <!-- Resultados por búsqueda -->
        <div>
          <p class="text-sm font-semibold text-highlighted mb-1">
            {{ t('settings.page_size_title') }}
          </p>
          <p class="text-xs text-muted mb-4">{{ t('settings.page_size_desc') }}</p>
          <URadioGroup v-model="pageSize" :items="pageSizeItems" />
        </div>

        <USeparator />

        <!-- Tipo de paginación -->
        <div>
          <p class="text-sm font-semibold text-highlighted mb-1">
            {{ t('settings.pagination_title') }}
          </p>
          <p class="text-xs text-muted mb-4">{{ t('settings.pagination_desc') }}</p>
          <URadioGroup v-model="paginationType" :items="paginationItems" />
        </div>

        <USeparator />

        <!-- Números de párrafo -->
        <div class="flex items-center justify-between gap-4">
          <div>
            <p class="text-sm font-semibold text-highlighted mb-1">
              {{ t('settings.paragraph_numbers_title') }}
            </p>
            <p class="text-xs text-muted">{{ t('settings.paragraph_numbers_desc') }}</p>
          </div>
          <USwitch v-model="showParagraphNumbers" />
        </div>
      </div>
    </div>
  </UDashboardPanel>
</template>
