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

type Props = {
  personaId: string
  personas: PersonaData[]
  onChange: (id: string) => void
  disabled?: boolean
}

export function CopyPersonaSwitcher({ personaId, personas, onChange, disabled }: Props) {
  if (!personas.length) {
    return (
      <div className="ac-brand-switcher ac-brand-switcher--empty">
        <p className="text-sm text-ink-secondary">
          尚未建立人設。
          <Link to="/personas" className="ml-1 font-semibold text-brand hover:underline">
            前往人設庫
          </Link>
        </p>
      </div>
    )
  }

  return (
    <div className="ac-brand-switcher">
      <Field label="拷貝人設">
        <Select
          value={personaId}
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled || !personas.length}
        >
          {!personaId ? <option value="">請選擇人設</option> : null}
          {personas.map((item) => (
            <option key={item.id} value={item.id}>
              {item.display_name?.trim() || item.id}
            </option>
          ))}
        </Select>
      </Field>
      <Link to="/personas" className="ac-brand-switcher__link text-xs font-semibold text-brand hover:underline">
        人設庫
      </Link>
    </div>
  )
}