import { NavLink, useLocation } from 'react-router-dom'
import { useProgramScope } from '../context/ProgramScopeContext.jsx'
import { useMethodUiContext } from '../hooks/useMethodUiContext.js'
import { resolveActiveProcessStepKey } from '../config/methodUiDefaults.js'

export function MethodProcessBar() {
  const location = useLocation()
  const { initiativeId, hrefWithScope } = useProgramScope()
  const { processSteps, archetypeKey, loading } = useMethodUiContext()

  if (!initiativeId || loading || processSteps.length === 0) {
    return null
  }

  const activeKey = resolveActiveProcessStepKey(location.pathname, processSteps)

  return (
    <nav
      className="method-process-bar"
      aria-label={`Prozess — ${archetypeKey || 'Vorhaben'}`}
    >
      <ol className="method-process-bar__steps">
        {processSteps.map((step, index) => {
          const isActive = activeKey === step.key
          return (
            <li
              key={step.key}
              className={
                'method-process-bar__step' +
                (isActive ? ' method-process-bar__step--active' : '')
              }
            >
              {index > 0 && (
                <span className="method-process-bar__sep" aria-hidden="true">
                  →
                </span>
              )}
              <NavLink
                to={hrefWithScope(step.to)}
                className={({ isActive: routerActive }) =>
                  'method-process-bar__link' +
                  (routerActive || isActive ? ' method-process-bar__link--active' : '')
                }
              >
                {step.label}
              </NavLink>
            </li>
          )
        })}
      </ol>
    </nav>
  )
}