import { useState, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import type { Step, CallBackProps } from 'react-joyride';
import { ACTIONS, EVENTS, STATUS } from 'react-joyride';

const STORAGE_KEY = 'tutorial_completed';

export function useTutorial(initialLoading: boolean, isMobile: boolean, blocked = false) {
  const { t } = useTranslation();

  const steps: Step[] = useMemo(
    () => [
      {
        target: '[data-tutorial="filters"]',
        title: t('tutorial.step1Title'),
        content: t('tutorial.step1Content'),
        placement: 'right' as const,
        disableBeacon: true,
      },
      {
        target: '[data-tutorial="ai-filters"]',
        title: t('tutorial.step2Title'),
        content: t('tutorial.step2Content'),
        placement: 'right' as const,
        disableBeacon: true,
      },
      {
        target: '[data-tutorial="map"]',
        title: t('tutorial.step3Title'),
        content: t('tutorial.step3Content'),
        placement: 'bottom' as const,
        disableBeacon: true,
      },
      {
        target: '[data-tutorial="search"]',
        title: t('tutorial.step4Title'),
        content: t('tutorial.step4Content'),
        placement: 'bottom' as const,
        disableBeacon: true,
      },
      {
        target: '[data-tutorial="right-pane"]',
        title: t('tutorial.step5Title'),
        content: t('tutorial.step5Content'),
        placement: 'left' as const,
        disableBeacon: true,
      },
      {
        target: '[data-tutorial="poi-button"]',
        title: t('tutorial.step6Title'),
        content: t('tutorial.step6Content'),
        placement: 'left' as const,
        disableBeacon: true,
        styles: { tooltip: { transform: 'translateY(-50px)' } },
      },
    ],
    [t]
  );

  const [run, setRun] = useState(() => {
    if (isMobile) return false;
    return !localStorage.getItem(STORAGE_KEY);
  });

  const shouldRun = run && !initialLoading && !isMobile && !blocked;

  const handleCallback = useCallback((data: CallBackProps) => {
    const { status, action, type } = data;

    if (status === STATUS.FINISHED || status === STATUS.SKIPPED) {
      localStorage.setItem(STORAGE_KEY, '1');
      setRun(false);
    }
    // Also stop if user closes a tooltip via the X button
    if (action === ACTIONS.CLOSE && type === EVENTS.STEP_AFTER) {
      localStorage.setItem(STORAGE_KEY, '1');
      setRun(false);
    }
  }, []);

  const resetTutorial = useCallback(() => {
    localStorage.removeItem(STORAGE_KEY);
    setRun(true);
  }, []);

  return useMemo(
    () => ({
      steps,
      run: shouldRun,
      handleCallback,
      resetTutorial,
    }),
    [steps, shouldRun, handleCallback, resetTutorial]
  );
}