SkateSpots/src/hooks/useSasquatchGuide.ts

import { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useTranslation } from '@/contexts/language';
import type { GuideMessage } from '@/components/SasquatchGuide';

/**
 * Sasquatch Guide - Context-aware helper for onboarding and tips
 * Always visible on home and onboarding pages, can be minimized/expanded at will
 */
export function useSasquatchGuide() {
  const { t } = useTranslation();
  const location = useLocation();
  const navigate = useNavigate();
  const { user } = useCurrentUser();
  const [currentMessage, setCurrentMessage] = useState<GuideMessage | undefined>();

  useEffect(() => {
    let message: GuideMessage | undefined;

    // Show on home page
    if (location.pathname === '/') {
      message = {
        id: 'welcome',
        title: t('sasquatchGuide.homeTitle'),
        message: t('sasquatchGuide.homeMessage'),
        context: 'home',
        suggestedQuestions: [
          t('sasquatchGuide.homeQ1'),
          t('sasquatchGuide.homeQ2'),
          t('sasquatchGuide.homeQ3'),
          t('sasquatchGuide.homeQ4'),
          t('sasquatchGuide.homeQ5'),
          t('sasquatchGuide.homeQ6'),
          t('sasquatchGuide.homeQ7'),
          t('sasquatchGuide.homeQ8'),
        ],
        action: {
          label: t('sasquatchGuide.homeLearnMore'),
          onClick: () => {
            navigate('/onboarding');
          },
        },
        enableChat: true,
        // Map homepage: don't auto-open the panel — the bubble stays minimized
        // until the user taps it.
        autoShow: false,
      };
    }

    // Show on onboarding page
    else if (location.pathname === '/onboarding') {
      message = {
        id: 'onboarding',
        title: t('sasquatchGuide.onboardingTitle'),
        message: t('sasquatchGuide.onboardingMessage'),
        context: 'onboarding',
        suggestedQuestions: [
          t('sasquatchGuide.onboardingQ1'),
          t('sasquatchGuide.onboardingQ2'),
          t('sasquatchGuide.onboardingQ3'),
          t('sasquatchGuide.onboardingQ4'),
          t('sasquatchGuide.onboardingQ5'),
          t('sasquatchGuide.onboardingQ6'),
          t('sasquatchGuide.onboardingQ7'),
          t('sasquatchGuide.onboardingQ8'),
        ],
        action: {
          label: user ? t('sasquatchGuide.onboardingStart') : t('sasquatchGuide.onboardingLogin'),
          onClick: () => {
            if (user) {
              navigate('/map');
            } else {
              // Scroll to login section
              const loginSection = document.getElementById('login-section');
              if (loginSection) {
                loginSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
                // Highlight the section briefly
                loginSection.classList.add('ring-4', 'ring-red-500/50');
                setTimeout(() => {
                  loginSection.classList.remove('ring-4', 'ring-red-500/50');
                }, 2000);
              } else {
                window.scrollTo({ top: 0, behavior: 'smooth' });
              }
            }
          },
        },
        enableChat: true,
        // Dedicated onboarding page — auto-open is helpful here.
        autoShow: true,
      };
    }

    // Show on The Lab page
    else if (location.pathname === '/lab') {
      message = {
        id: 'lab-guide',
        title: t('sasquatchGuide.labTitle'),
        message: t('sasquatchGuide.labMessage'),
        context: 'lab',
        suggestedQuestions: [
          t('sasquatchGuide.labQ1'),
          t('sasquatchGuide.labQ2'),
          t('sasquatchGuide.labQ3'),
          t('sasquatchGuide.labQ4'),
          t('sasquatchGuide.labQ5'),
          t('sasquatchGuide.labQ6'),
          t('sasquatchGuide.labQ7'),
          t('sasquatchGuide.labQ8'),
        ],
        action: user ? undefined : {
          label: t('sasquatchGuide.labLogin'),
          onClick: () => {
            navigate('/onboarding');
          },
        },
        enableChat: true,
        // The Lab: don't auto-open — the bubble stays minimized until tapped.
        autoShow: false,
      };
    }

    // Show on the Crews page
    else if (location.pathname === '/crews') {
      message = {
        id: 'crews-guide',
        title: t('sasquatchGuide.crewsTitle'),
        message: t('sasquatchGuide.crewsMessage'),
        context: undefined,
        suggestedQuestions: [
          t('sasquatchGuide.crewsQ1'),
          t('sasquatchGuide.crewsQ2'),
          t('sasquatchGuide.crewsQ3'),
          t('sasquatchGuide.crewsQ4'),
          t('sasquatchGuide.crewsQ5'),
          t('sasquatchGuide.crewsQ6'),
        ],
        action: user ? undefined : {
          label: t('sasquatchGuide.crewsLogin'),
          onClick: () => {
            navigate('/onboarding');
          },
        },
        enableChat: true,
        autoShow: false,
      };
    }

    // /map: never auto-show — user opens Sasquatch by tapping the floating bubble
    // The map guide context is still available in the generic fallback inside SasquatchGuide
    else if (location.pathname === '/map') {
      message = undefined;
    }

    setCurrentMessage(message);
  }, [location.pathname, user, navigate, t]);

  const dismissCurrentMessage = () => {
    setCurrentMessage(undefined);
  };

  return {
    currentMessage,
    dismissCurrentMessage,
  };
}