import { Badge } from '@fluentui/react-components'
import type { DownloadStatus } from '../../store/downloads'

/** The item-download status shown as a chip — the queue's live status plus the
 *  library's 'pending' (catalogued but not yet downloaded). */
export type ChipStatus = DownloadStatus | 'pending'

type ChipColor = 'brand' | 'success' | 'danger' | 'warning' | 'subtle'

/**
 * One label + color per status (UI18 / M8) — the single source of truth that
 * replaces QueueItem's Fluent `Badge` map and LibraryView's custom color `pill`
 * spans, so the same status concept looks and reads identically on both screens
 * (e.g. Library no longer says "Downloaded" where the queue says "Completed").
 */
const STATUS_CHIP: Record<ChipStatus, { label: string; color: ChipColor }> = {
  pending: { label: 'Pending', color: 'subtle' },
  queued: { label: 'Queued', color: 'subtle' },
  downloading: { label: 'Downloading', color: 'brand' },
  paused: { label: 'Paused', color: 'warning' },
  saved: { label: 'Saved', color: 'subtle' },
  completed: { label: 'Completed', color: 'success' },
  error: { label: 'Failed', color: 'danger' },
  canceled: { label: 'Canceled', color: 'subtle' }
}

/** Shared status chip used by the download queue and the library item list. */
export function StatusChip({ status }: { status: ChipStatus }): React.JSX.Element {
  const { label, color } = STATUS_CHIP[status]
  return (
    <Badge appearance="tint" color={color}>
      {label}
    </Badge>
  )
}
