import { ref, watch } from 'vue'
import { defineStore } from 'pinia'

export type PaginationType = 'infinite_scroll' | 'numbered'

export const PAGE_SIZE_OPTIONS = [10, 20, 30, 40, 50] as const
export type PageSizeOption = typeof PAGE_SIZE_OPTIONS[number]

const STORAGE_KEY = 'lgcc:settings:v1'

interface SettingsData {
  pageSize: PageSizeOption
  paginationType: PaginationType
  showParagraphNumbers: boolean
}

const DEFAULTS: SettingsData = {
  pageSize: 10,
  paginationType: 'infinite_scroll',
  showParagraphNumbers: true
}

function readStorage(): SettingsData {
  if (typeof window === 'undefined') return { ...DEFAULTS }
  try {
    const raw = window.localStorage.getItem(STORAGE_KEY)
    if (!raw) return { ...DEFAULTS }
    const parsed = JSON.parse(raw) as Partial<SettingsData>
    return {
      pageSize: (PAGE_SIZE_OPTIONS as readonly number[]).includes(parsed.pageSize as number)
        ? (parsed.pageSize as PageSizeOption)
        : DEFAULTS.pageSize,
      paginationType:
        parsed.paginationType === 'numbered' || parsed.paginationType === 'infinite_scroll'
          ? parsed.paginationType
          : DEFAULTS.paginationType,
      showParagraphNumbers: typeof parsed.showParagraphNumbers === 'boolean'
        ? parsed.showParagraphNumbers
        : DEFAULTS.showParagraphNumbers
    }
  } catch {
    return { ...DEFAULTS }
  }
}

function writeStorage(data: SettingsData) {
  if (typeof window === 'undefined') return
  try {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
  } catch (e) {
    console.warn('No se pudieron guardar los ajustes', e)
  }
}

export const useSettingsStore = defineStore('settings', () => {
  const pageSize = ref<PageSizeOption>(DEFAULTS.pageSize)
  const paginationType = ref<PaginationType>(DEFAULTS.paginationType)
  const showParagraphNumbers = ref<boolean>(DEFAULTS.showParagraphNumbers)
  const ready = ref(false)
  let hydrated = false

  function hydrate() {
    if (typeof window === 'undefined') return
    if (hydrated) return
    const data = readStorage()
    pageSize.value = data.pageSize
    paginationType.value = data.paginationType
    showParagraphNumbers.value = data.showParagraphNumbers
    ready.value = true
    hydrated = true
  }

  if (typeof window !== 'undefined') {
    watch([pageSize, paginationType, showParagraphNumbers], () => {
      if (!hydrated) return
      writeStorage({ pageSize: pageSize.value, paginationType: paginationType.value, showParagraphNumbers: showParagraphNumbers.value })
    })
  }

  return {
    pageSize,
    paginationType,
    showParagraphNumbers,
    ready,
    hydrate
  }
})