import { useState, useCallback } from 'react';
import Joyride, { type CallBackProps, STATUS, ACTIONS, EVENTS } from 'react-joyride';
import { TOUR_STEPS } from '../../config/tourSteps';
import { useAuthStore } from '../../stores/authStore';
import api from '../../services/api';

interface AppTourProps {
  run: boolean;
  onComplete: () => void;
}

export function AppTour({ run, onComplete }: AppTourProps) {
  const [stepIndex, setStepIndex] = useState(0);
  const setUserIntroSeen = useAuthStore((s) => s.setUserIntroSeen);

  const handleCallback = useCallback(
    async (data: CallBackProps) => {
      const { status, action, type } = data;
      const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];

      if (finishedStatuses.includes(status)) {
        // Mark intro as seen on backend (fire-and-forget)
        api.patch('/auth/intro-seen').catch(() => {});
        setUserIntroSeen();
        onComplete();
        return;
      }

      // Handle step navigation
      if (type === EVENTS.STEP_AFTER) {
        setStepIndex((prev) =>
          action === ACTIONS.PREV ? prev - 1 : prev + 1,
        );
      }
    },
    [onComplete, setUserIntroSeen],
  );

  if (!run) return null;

  return (
    <Joyride
      steps={TOUR_STEPS}
      run={run}
      stepIndex={stepIndex}
      continuous
      showProgress
      showSkipButton
      scrollToFirstStep
      disableOverlayClose
      callback={handleCallback}
      styles={{
        options: {
          primaryColor: '#228be6',
          zIndex: 10000,
          arrowColor: '#fff',
          backgroundColor: '#fff',
          textColor: '#333',
          overlayColor: 'rgba(0, 0, 0, 0.5)',
        },
        tooltip: {
          borderRadius: 8,
          fontSize: 14,
          padding: 20,
        },
        tooltipTitle: {
          fontSize: 16,
          fontWeight: 600,
        },
        buttonNext: {
          borderRadius: 6,
          fontSize: 14,
          padding: '8px 16px',
        },
        buttonBack: {
          borderRadius: 6,
          fontSize: 14,
          marginRight: 8,
        },
        buttonSkip: {
          fontSize: 13,
        },
      }}
      locale={{
        back: 'Previous',
        close: 'Close',
        last: 'Finish Tour',
        next: 'Next',
        skip: 'Skip Tour',
      }}
    />
  );
}