'use client'
import React from 'react'
import type { SourceDocument } from '@/types'
import { StatusBadge } from '@/components/ui/StatusBadge'

interface JobStatusListProps {
  documents: SourceDocument[]
}

function formatDate(iso: string): string {
  if (!iso) return '—'
  try {
    return new Intl.DateTimeFormat('en', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    }).format(new Date(iso))
  } catch {
    return iso
  }
}

export function JobStatusList({ documents }: JobStatusListProps) {
  if (documents.length === 0) {
    return (
      <div style={{ color: 'var(--fg-muted)', fontSize: 'var(--t-body)', padding: 'var(--s-4)' }}>
        No documents yet.
      </div>
    )
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-2)' }}>
      {documents.map((doc) => (
        <div
          key={doc.id}
          style={{
            background: 'var(--bg-warm)',
            borderRadius: 'var(--r-sm)',
            padding: 'var(--s-3) var(--s-4)',
            display: 'flex',
            alignItems: 'center',
            gap: 'var(--s-3)',
            flexWrap: 'wrap',
          }}
        >
          <div style={{ flex: 1, minWidth: 0 }}>
            <p
              style={{
                margin: 0,
                fontWeight: 600,
                fontSize: 'var(--t-body)',
                color: 'var(--fg)',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
            >
              {doc.filename}
            </p>
            <p style={{ margin: 0, fontSize: 'var(--t-small)', color: 'var(--fg-muted)' }}>
              {doc.chunk_count} chunks · {formatDate(doc.ingested_at)}
            </p>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--s-2)' }}>
            <span
              style={{
                fontSize: 'var(--t-label)',
                fontFamily: 'var(--font-mono)',
                textTransform: 'uppercase',
                color: 'var(--fg-subtle)',
              }}
            >
              {doc.format}
            </span>
            <StatusBadge status={doc.status} />
          </div>
        </div>
      ))}
    </div>
  )
}
