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

export interface TourStep {
  target: string
  title: string
  content: string
  placement?: 'top' | 'bottom' | 'left' | 'right'
}

export interface TourDefinition {
  id: string
  route: string
  steps: TourStep[]
}

export const useTourStore = defineStore('tour', () => {
  const activeTourId = ref<string | null>(null)
  const currentStepIndex = ref(0)
  const activeTour = ref<TourDefinition | null>(null)

  const isActive = computed(() => activeTourId.value !== null)

  const currentStep = computed(() => {
    if (!activeTour.value) return null
    return activeTour.value.steps[currentStepIndex.value] || null
  })

  const totalSteps = computed(() => activeTour.value?.steps.length || 0)

  const isFirstStep = computed(() => currentStepIndex.value === 0)
  const isLastStep = computed(() => currentStepIndex.value >= totalSteps.value - 1)

  function start(tour: TourDefinition) {
    activeTourId.value = tour.id
    activeTour.value = tour
    currentStepIndex.value = 0
  }

  function next() {
    if (!isLastStep.value) {
      currentStepIndex.value++
    } else {
      stop()
    }
  }

  function back() {
    if (!isFirstStep.value) {
      currentStepIndex.value--
    }
  }

  function stop() {
    activeTourId.value = null
    activeTour.value = null
    currentStepIndex.value = 0
  }

  return {
    activeTourId,
    currentStepIndex,
    activeTour,
    isActive,
    currentStep,
    totalSteps,
    isFirstStep,
    isLastStep,
    start,
    next,
    back,
    stop,
  }
})