import { Link, useLocation } from 'react-router-dom'
import { BrandSwitcher } from './BrandSwitcher'
import {
  PLACEMENT_FLOW,
  detectPlacementFlowStep,
  placementFlowPath,
  type PlacementFlowStepKey,
} from '../lib/placementFlow'
import type { BrandData } from '../types/brand'

type Props = {
  active?: PlacementFlowStepKey
  brandId: string
  brands: BrandData[]
  onBrandChange: (id: string) => void
  brandLoading?: boolean
}

export function PlacementFlowNav({
  active,
  brandId,
  brands,
  onBrandChange,
  brandLoading,
}: Props) {
  const { pathname } = useLocation()
  const current = active ?? detectPlacementFlowStep(pathname) ?? 'research'

  return (
    <nav className="ac-persona-flow-nav" aria-label="找 TA 工作流">
      <div className="ac-persona-flow-nav__head">
        <p className="display-en text-[10px] font-bold tracking-[0.16em] text-brand uppercase">
          找 TA · 流程 B
        </p>
        <BrandSwitcher
          brandId={brandId}
          brands={brands}
          onChange={onBrandChange}
          disabled={brandLoading}
        />
      </div>
      <ol className="ac-persona-flow-nav__steps">
        {PLACEMENT_FLOW.map((step) => {
          const isActive = step.key === current
          return (
            <li key={step.key}>
              <Link
                to={placementFlowPath(step.path, brandId)}
                className={`ac-persona-flow-nav__step ${isActive ? 'ac-persona-flow-nav__step--active' : ''}`}
                aria-current={isActive ? 'step' : undefined}
              >
                <span className="ac-persona-flow-nav__eyebrow">{step.step}</span>
                <span className="ac-persona-flow-nav__label">{step.shortLabel}</span>
              </Link>
            </li>
          )
        })}
      </ol>
    </nav>
  )
}