import { Link } from 'react-router-dom'
import { COPY_FLOW, copyMissionDetailPath, type CopyFlowStepKey } from '../lib/copyFlow'
import type { CopyMissionData } from '../types/copyMission'
import type { PersonaData } from '../types/api'
import { CopyMissionSwitcher } from './CopyMissionSwitcher'
import { CopyPersonaSwitcher } from './CopyPersonaSwitcher'

type Props = {
  active: CopyFlowStepKey
  missionId: string
  personaId: string
  personas: PersonaData[]
  missions: CopyMissionData[]
  onPersonaChange: (id: string) => void
  onMissionChange: (id: string) => void
  loading?: boolean
  analyzeJobActive?: boolean
  scanJobActive?: boolean
}

export function CopyFlowNav({
  active,
  missionId,
  personaId,
  personas,
  missions,
  onPersonaChange,
  onMissionChange,
  loading,
  analyzeJobActive,
  scanJobActive,
}: Props) {
  return (
    <nav className="ac-persona-flow-nav" aria-label="拷貝忍者工作流">
      <div className="ac-persona-flow-nav__head">
        <p className="display-en text-[10px] font-bold tracking-[0.16em] text-brand uppercase">拷貝忍者</p>
        <CopyPersonaSwitcher
          personaId={personaId}
          personas={personas}
          onChange={onPersonaChange}
          disabled={loading}
        />
        <CopyMissionSwitcher
          missionId={missionId}
          missions={missions}
          onChange={onMissionChange}
          disabled={loading}
        />
      </div>
      <ol className="ac-persona-flow-nav__steps">
        {COPY_FLOW.map((step) => {
          const isActive = step.key === active
          const jobLive =
            (step.key === 'research' && analyzeJobActive) || (step.key === 'output' && scanJobActive)
          return (
            <li key={step.key}>
              <Link
                to={copyMissionDetailPath(missionId, step.hash)}
                className={`ac-persona-flow-nav__step ${isActive ? 'ac-persona-flow-nav__step--active' : ''} ${jobLive ? 'ac-persona-flow-nav__step--job-live' : ''}`}
                aria-current={isActive ? 'step' : undefined}
              >
                <span className="ac-persona-flow-nav__eyebrow">{step.step}</span>
                <span className="ac-persona-flow-nav__label">
                  {step.shortLabel}
                  {jobLive ? <span className="ac-persona-flow-nav__job-dot" aria-hidden /> : null}
                </span>
              </Link>
            </li>
          )
        })}
      </ol>
    </nav>
  )
}