/**
 * Onboarding Store
 *
 * Manages the state for the interactive onboarding guide.
 * Persists completion status to localStorage.
 */

import { create } from "zustand";
import { persist } from "zustand/middleware";

/**
 * Onboarding step identifiers
 */
export type OnboardingStep =
  | "welcome"
  | "toolbar"
  | "presets"
  | "layouts"
  | "layers"
  | "container-settings"
  | "add-element"
  | "element-settings"
  | "complete";

/**
 * Step configuration with metadata
 */
export interface StepConfig {
  id: OnboardingStep;
  title: string;
  description: string;
  target?: string; // CSS selector or data attribute to highlight
  scrollTarget?: string; // Element to scroll into view
  position?: "top" | "bottom" | "left" | "right" | "center";
  action?: "next" | "add-element" | "complete";
}

/**
 * All onboarding steps configuration
 */
export const ONBOARDING_STEPS: StepConfig[] = [
  {
    id: "welcome",
    title: "Welcome to Opus Price Builder!",
    description:
      "Let's take a quick tour of the price layout builder. You'll learn how to create beautiful, custom price displays for your WooCommerce store.",
    position: "center",
    action: "next",
  },
  {
    id: "toolbar",
    title: "Element Toolbar",
    description:
      "This toolbar contains all the building blocks for your price display: Regular Price, Sale Price, Currency Symbol, Discount Badge, and Text elements. Click any element to add it to the canvas.",
    target: "[data-onboarding='toolbar']",
    position: "bottom",
    action: "next",
  },
  {
    id: "presets",
    title: "Layout Presets",
    description:
      "Start quickly with pre-built layouts! Choose from Standard presets for simple designs or Advanced presets with animations. Click a preset to apply it to the canvas.",
    target: "[data-onboarding='presets']",
    scrollTarget: "[data-onboarding='presets']",
    position: "right",
    action: "next",
  },
  {
    id: "layouts",
    title: "Your Layouts",
    description:
      "Save and manage your custom price layouts here. You can create multiple layouts for each price scenario and activate them for different locations (product page, shop loop, etc.).",
    target: "[data-onboarding='layouts']",
    scrollTarget: "[data-onboarding='layouts']",
    position: "right",
    action: "next",
  },
  {
    id: "layers",
    title: "Layer Tree",
    description:
      "All elements on your canvas appear here. Drag to reorder layers, toggle visibility, or lock elements. The Container item at the top controls the wrapper settings for your entire price display.",
    target: "[data-onboarding='layers']",
    scrollTarget: "[data-onboarding='layers']",
    position: "right",
    action: "next",
  },
  {
    id: "container-settings",
    title: "Container Settings",
    description:
      "Click the gear icon next to 'Container' to customize the wrapper: add padding, borders, backgrounds, or even write custom HTML/CSS for advanced layouts.",
    target: "[data-onboarding='container-settings']",
    scrollTarget: "[data-onboarding='layers']",
    position: "right",
    action: "next",
  },
  {
    id: "add-element",
    title: "Let's Add Your First Element",
    description: "Click the 'Regular Price' element below to add it to the canvas. This will show you how the element settings work.",
    target: "[data-onboarding='add-regular-price']",
    position: "bottom",
    action: "add-element",
  },
  {
    id: "element-settings",
    title: "Element Settings Panel",
    description:
      "When you select an element, this floating panel appears. Here you can customize typography, colors, decimal settings, animations, and more. Each element type has its own specific settings.",
    target: ".floating-settings",
    position: "left",
    action: "complete",
  },
];

interface OnboardingState {
  // Whether the onboarding has been completed
  completed: boolean;
  // Whether the onboarding is currently active
  isActive: boolean;
  // Current step index
  currentStepIndex: number;
  // Whether to show onboarding on first visit
  showOnFirstVisit: boolean;

  // Actions
  startOnboarding: () => void;
  nextStep: () => void;
  previousStep: () => void;
  skipOnboarding: () => void;
  completeOnboarding: () => void;
  resetOnboarding: () => void;
  goToStep: (stepId: OnboardingStep) => void;
}

export const useOnboardingStore = create<OnboardingState>()(
  persist(
    (set, get) => ({
      completed: false,
      isActive: false,
      currentStepIndex: 0,
      showOnFirstVisit: true,

      startOnboarding: () => {
        set({
          isActive: true,
          currentStepIndex: 0,
        });
      },

      nextStep: () => {
        const { currentStepIndex } = get();
        const nextIndex = currentStepIndex + 1;

        if (nextIndex >= ONBOARDING_STEPS.length) {
          get().completeOnboarding();
        } else {
          set({ currentStepIndex: nextIndex });
        }
      },

      previousStep: () => {
        const { currentStepIndex } = get();
        if (currentStepIndex > 0) {
          set({ currentStepIndex: currentStepIndex - 1 });
        }
      },

      skipOnboarding: () => {
        set({
          isActive: false,
          completed: true,
          showOnFirstVisit: false,
        });
      },

      completeOnboarding: () => {
        set({
          isActive: false,
          completed: true,
          currentStepIndex: 0,
        });
      },

      resetOnboarding: () => {
        set({
          completed: false,
          isActive: false,
          currentStepIndex: 0,
          showOnFirstVisit: true,
        });
      },

      goToStep: (stepId: OnboardingStep) => {
        const stepIndex = ONBOARDING_STEPS.findIndex((s) => s.id === stepId);
        if (stepIndex !== -1) {
          set({ currentStepIndex: stepIndex });
        }
      },
    }),
    {
      name: "oppb-onboarding",
      partialize: (state) => ({
        completed: state.completed,
        showOnFirstVisit: state.showOnFirstVisit,
      }),
    }
  )
);

// Selector hooks
export const useIsOnboardingActive = () => useOnboardingStore((state) => state.isActive);
export const useCurrentOnboardingStep = () => {
  const currentStepIndex = useOnboardingStore((state) => state.currentStepIndex);
  return ONBOARDING_STEPS[currentStepIndex] || null;
};
export const useOnboardingProgress = () => {
  const currentStepIndex = useOnboardingStore((state) => state.currentStepIndex);
  return {
    current: currentStepIndex + 1,
    total: ONBOARDING_STEPS.length,
    percentage: ((currentStepIndex + 1) / ONBOARDING_STEPS.length) * 100,
  };
};
