import { NavLink, useLocation } from 'react-router-dom'
import { useProgramScope } from '../context/ProgramScopeContext.jsx'
import {
  PLAN_OUTLINE_NODES,
  resolvePlanOutlineActiveKey,
} from '../plan/planOutlineNodes.js'

export function PlanOutlineNav() {
  const location = useLocation()
  const { initiativeId, initiativeTitle, hrefWithScope } = useProgramScope()
  const activeKey = resolvePlanOutlineActiveKey(location.pathname)

  return (
    <nav className="plan-outline-nav" aria-label="Plan-Outline">
      <div className="plan-outline-nav__header">
        <span className="plan-outline-nav__eyebrow">Planen</span>
        {initiativeId ? (
          <p className="plan-outline-nav__root" title={initiativeTitle || initiativeId}>
            {initiativeTitle || 'Vorhaben'}
          </p>
        ) : (
          <p className="plan-outline-nav__root plan-outline-nav__root--muted">
            Portfolio — Vorhaben wählen
          </p>
        )}
      </div>

      <ul className="plan-outline-nav__list">
        {PLAN_OUTLINE_NODES.map((node) => {
          const needsInitiative = node.requiresInitiative && !initiativeId
          const isDisabled = node.disabled || needsInitiative

          if (isDisabled) {
            return (
              <li key={node.key}>
                <span
                  className={
                    'plan-outline-nav__link plan-outline-nav__link--disabled' +
                    (activeKey === node.key ? ' plan-outline-nav__link--active' : '')
                  }
                  aria-disabled="true"
                  title={needsInitiative ? 'Vorhaben im Scope wählen' : node.hint}
                >
                  {node.label}
                </span>
              </li>
            )
          }

          return (
            <li key={node.key}>
              <NavLink
                to={hrefWithScope(node.to)}
                end
                className={({ isActive }) =>
                  'plan-outline-nav__link' +
                  (isActive ? ' plan-outline-nav__link--active' : '')
                }
              >
                {node.label}
              </NavLink>
            </li>
          )
        })}
      </ul>
    </nav>
  )
}