/* "Ollama: Connected — qwen2.5:3b-instruct", or the reason it is not.
 *
 * `BROWSER-UX-SPEC.md` §44. It is a status line, not a control: the only thing
 * it does is link to the place the problem is fixed. Rendered as a `<Link>`
 * rather than a button because it navigates, which is what a screen reader
 * should be told it does.
 */

import { Link } from 'react-router-dom'
import { blocksPlay, statusLabel, useModelStatus } from './modelStatus'

export function ModelStatusBadge({ compact = false }) {
  const { status, model, endpoint } = useModelStatus()
  const bad = blocksPlay(status)
  const label = statusLabel(status)

  return (
    <Link
      to="/settings"
      className={`model-badge ${bad ? 'bad' : ''} ${status === 'checking' ? 'checking' : ''}`}
      data-testid="model-status"
      data-status={status}
      // The visible text is two short fragments; the accessible name is the
      // whole sentence, including the endpoint, which sighted readers get from
      // Settings rather than from a badge in a nav bar.
      aria-label={
        status === 'ready'
          ? `${label}. Narrator model ${model}. Endpoint ${endpoint}. Open Settings.`
          : `${label}. Open Settings.`
      }
    >
      <span className="model-badge-dot" aria-hidden="true" />
      <span className="model-badge-text">{label}</span>
      {!compact && status === 'ready' && model && (
        <span className="model-badge-model">{model}</span>
      )}
    </Link>
  )
}