import { ref, computed } from 'vue';

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

const STORAGE_KEY = 'gala_onboarding_completed';

// Shared state across components
const isCompleted = ref(localStorage.getItem(STORAGE_KEY) === 'true');
const showTour = ref(false);
const currentStep = ref(0);

export function useOnboarding() {
  const shouldShowTour = computed(() => !isCompleted.value);

  function start() {
    if (isCompleted.value) return;
    currentStep.value = 0;
    showTour.value = true;
  }

  function next() {
    currentStep.value++;
  }

  function prev() {
    if (currentStep.value > 0) {
      currentStep.value--;
    }
  }

  function skip() {
    complete();
  }

  function complete() {
    showTour.value = false;
    isCompleted.value = true;
    localStorage.setItem(STORAGE_KEY, 'true');
  }

  function reset() {
    localStorage.removeItem(STORAGE_KEY);
    isCompleted.value = false;
    currentStep.value = 0;
  }

  return {
    isCompleted,
    showTour,
    currentStep,
    shouldShowTour,
    start,
    next,
    prev,
    skip,
    complete,
    reset,
  };
}