import { useState, useEffect } from 'react';
import axios from 'axios';

// Tour ID mapping - matches backend constants
export const TOUR_IDS = {
  MOBILE_DEVICE_LIST: 'mobile_device_list',           // 0x0100
  MOBILE_DEVICE_MODAL: 'mobile_device_modal',         // 0x0200
  MOBILE_CENTRAL_CONFIG: 'mobile_central_config',     // 0x0400
} as const;

export type TourId = typeof TOUR_IDS[keyof typeof TOUR_IDS];

interface UseTourResult {
  runTour: boolean;
  setRunTour: (run: boolean) => void;
  tourStepIndex: number;
  setTourStepIndex: (index: number) => void;
  isTourCompleted: boolean;
  markTourCompleted: () => Promise<void>;
  resetTour: () => Promise<void>;
}

/**
 * Custom hook for managing Joyride tours with backend persistence
 *
 * @param tourId - Unique identifier for the tour
 * @param autoStart - Whether to auto-start tour for first-time users (default: true)
 * @param autoStartDelay - Delay in ms before auto-starting tour (default: 500)
 * @returns Tour control functions and state
 */
export const useTour = (
  tourId: TourId,
  autoStart = true,
  autoStartDelay = 500
): UseTourResult => {
  const [runTour, setRunTour] = useState(false);
  const [tourStepIndex, setTourStepIndex] = useState(0);
  const [isTourCompleted, setIsTourCompleted] = useState(false);

  useEffect(() => {
    const checkTourStatus = async () => {
      try {
        const response = await axios.get(`/tours/${tourId}/is-completed`);
        const completed = response.data.completed;

        setIsTourCompleted(completed);

        // Auto-start tour if not completed and autoStart is enabled
        if (!completed && autoStart) {
          setTimeout(() => {
            setRunTour(true);
          }, autoStartDelay);
        }
      } catch (error) {
        console.error('Error checking tour status:', error);
      }
    };

    checkTourStatus();
  }, [tourId, autoStart, autoStartDelay]);

  const markTourCompleted = async () => {
    try {
      await axios.post('/tours/complete', { tour_id: tourId });
      setIsTourCompleted(true);
      setRunTour(false);
    } catch (error) {
      console.error('Error marking tour as completed:', error);
    }
  };

  const resetTour = async () => {
    try {
      await axios.post('/tours/reset', { tour_id: tourId });
      setIsTourCompleted(false);
      setTourStepIndex(0);
      setRunTour(true);
    } catch (error) {
      console.error('Error resetting tour:', error);
    }
  };

  return {
    runTour,
    setRunTour,
    tourStepIndex,
    setTourStepIndex,
    isTourCompleted,
    markTourCompleted,
    resetTour,
  };
};