import type { ReactNode } from 'react'
import {
  onboardingGlowClass,
  onboardingStepLabel,
  shouldGlowInPage,
  type OnboardingStep,
} from '../lib/onboarding'
import { useOnboarding } from '../onboarding/OnboardingContext'
import { useLocation } from 'react-router-dom'

export function useOnboardingGuide(step: OnboardingStep) {
  const { pathname } = useLocation()
  const { loading, isComplete, nextStep } = useOnboarding()
  const active = !loading && !isComplete && shouldGlowInPage(nextStep, step, pathname)
  return {
    active,
    glowClass: onboardingGlowClass(active),
    label: onboardingStepLabel(step),
  }
}

export function OnboardingGuideTarget({
  step,
  children,
  className = '',
  label,
}: {
  step: OnboardingStep
  children: ReactNode
  className?: string
  label?: string
}) {
  const { active, glowClass, label: defaultLabel } = useOnboardingGuide(step)
  const badge = label ?? defaultLabel

  return (
    <div className={`hx-guide-target ${glowClass} ${className}`.trim()}>
      {active ? (
        <span className="hx-guide-badge" aria-hidden>
          {badge}
        </span>
      ) : null}
      {children}
    </div>
  )
}