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(); 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, }; }