'use client'
import React from 'react'
import type { IngestionJobStatus } from '@/types'

type AnyStatus =
  | IngestionJobStatus['status']
  | 'processing'
  | 'processed'
  | 'failed'
  | 'draft'
  | 'published'
  | 'rejected'
  | 'queued'
  | 'generated'
  | 'active'
  | 'superseded'
  | 'introductory'
  | 'intermediate'
  | 'advanced'

const STATUS_CONFIG: Record<
  AnyStatus,
  { label: string; background: string; color: string }
> = {
  queued: { label: 'Queued', background: 'var(--cream)', color: 'var(--fg-muted)' },
  extracting: { label: 'Extracting', background: '#fff3cd', color: '#856404' },
  chunking: { label: 'Chunking', background: '#fff3cd', color: '#856404' },
  structuring: { label: 'Structuring', background: '#cce5ff', color: '#004085' },
  writing: { label: 'Writing', background: '#cce5ff', color: '#004085' },
  embedding: { label: 'Embedding', background: '#d4edda', color: '#155724' },
  done: { label: 'Done', background: 'var(--success)', color: 'var(--teal-900)' },
  failed: { label: 'Failed', background: '#f8d7da', color: '#c0392b' },
  processing: { label: 'Processing', background: '#fff3cd', color: '#856404' },
  processed: { label: 'Processed', background: 'var(--success)', color: 'var(--teal-900)' },
  draft: { label: 'Draft', background: 'var(--cream)', color: 'var(--fg-muted)' },
  published: { label: 'Published', background: 'var(--success)', color: 'var(--teal-900)' },
  rejected: { label: 'Rejected', background: '#f8d7da', color: '#c0392b' },
  generated: { label: 'Generated', background: '#cce5ff', color: '#004085' },
  active: { label: 'Active', background: 'var(--success)', color: 'var(--teal-900)' },
  superseded: { label: 'Superseded', background: 'var(--cream)', color: 'var(--fg-muted)' },
  introductory: { label: 'Introductory', background: 'var(--accent-soft)', color: 'var(--teal-900)' },
  intermediate: { label: 'Intermediate', background: '#fff3cd', color: '#856404' },
  advanced: { label: 'Advanced', background: 'var(--peri)', color: 'var(--teal-900)' },
}

interface StatusBadgeProps {
  status: AnyStatus
}

export function StatusBadge({ status }: StatusBadgeProps) {
  const config = STATUS_CONFIG[status] ?? {
    label: status,
    background: 'var(--cream)',
    color: 'var(--fg-muted)',
  }

  return (
    <span
      style={{
        display: 'inline-block',
        padding: '2px var(--s-2)',
        borderRadius: 'var(--r-pill)',
        fontSize: 'var(--t-label)',
        fontFamily: 'var(--font-mono)',
        fontWeight: 500,
        textTransform: 'uppercase',
        letterSpacing: 'var(--label-ls)',
        background: config.background,
        color: config.color,
      }}
    >
      {config.label}
    </span>
  )
}
