import { Link } from 'react-router-dom'
import type { CopyMissionData } from '../types/copyMission'
import { Field, Select } from './ui'

type Props = {
  missionId: string
  missions: CopyMissionData[]
  onChange: (id: string) => void
  disabled?: boolean
}

export function CopyMissionSwitcher({ missionId, missions, onChange, disabled }: Props) {
  if (!missions.length) {
    return (
      <div className="ac-brand-switcher ac-brand-switcher--empty">
        <p className="text-sm text-ink-secondary">
          尚無拷貝任務。
          <Link to="/matrix" className="ml-1 font-semibold text-brand hover:underline">
            建立任務
          </Link>
        </p>
      </div>
    )
  }

  return (
    <div className="ac-brand-switcher">
      <Field label="目前任務">
        <Select
          value={missionId}
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled || !missions.length}
        >
          {!missionId ? <option value="">請選擇任務</option> : null}
          {missions.map((item) => (
            <option key={item.id} value={item.id}>
              {item.label?.trim() || item.seed_query || item.id}
            </option>
          ))}
        </Select>
      </Field>
      <Link to="/matrix" className="ac-brand-switcher__link text-xs font-semibold text-brand hover:underline">
        任務列表
      </Link>
    </div>
  )
}