/**
 * Composable for fetching and managing rune styles and keystones
 * Transforms rune data into format needed for display components
 */
export const useRuneStyles = (
  runes: Ref<
    Array<{
      count: number
      primaryStyle: number
      secondaryStyle: number
      selections: Array<number>
      pickrate: number
    }>
  >
) => {
  const primaryStyles = ref<Array<PerkStyle>>(Array(runes.value.length))
  const secondaryStyles = ref<Array<PerkStyle>>(Array(runes.value.length))
  const keystoneIds = ref<Array<number>>(Array(runes.value.length))

  const { data: perksData } = useFetch('/api/cdragon/perks')
  const { data: stylesData } = useFetch('/api/cdragon/perkstyles')

  const perks = reactive(new Map<number, Perk>())
  watch(
    perksData,
    newPerks => {
      if (Array.isArray(newPerks)) {
        perks.clear()
        for (const perk of newPerks) {
          if (perk?.id) {
            perks.set(perk.id, perk)
          }
        }
      }
    },
    { immediate: true }
  )

  function refreshStylesKeystones(): void {
    if (!stylesData.value?.styles) return

    primaryStyles.value = Array(runes.value.length)
    secondaryStyles.value = Array(runes.value.length)
    keystoneIds.value = Array(runes.value.length)

    for (const style of stylesData.value.styles) {
      for (const rune of runes.value) {
        const runeIndex = runes.value.indexOf(rune)

        if (style.id === rune.primaryStyle) {
          primaryStyles.value[runeIndex] = style

          // Find keystone from first slot
          if (style.slots?.[0]?.perks) {
            for (const perk of style.slots[0].perks) {
              if (rune.selections.includes(perk)) {
                keystoneIds.value[runeIndex] = perk
                break
              }
            }
          }
        }

        if (style.id === rune.secondaryStyle) {
          secondaryStyles.value[runeIndex] = style
        }
      }
    }
  }

  // Refresh when styles data loads or runes change
  watch(
    [stylesData, runes],
    () => {
      refreshStylesKeystones()
    },
    { immediate: true }
  )

  // Reset when runes array changes
  watch(
    () => runes.value.length,
    () => {
      primaryStyles.value = Array(runes.value.length)
      secondaryStyles.value = Array(runes.value.length)
      keystoneIds.value = Array(runes.value.length)
      refreshStylesKeystones()
    }
  )

  return {
    perks,
    primaryStyles,
    secondaryStyles,
    keystoneIds
  }
}