'use client'

import * as React from 'react'
import { StatusBadge, type StatusBadgeConfig } from './StatusBadge'

/** Lifecycle status of a generated document (matches @startsimpli/api DocumentStatus). */
export type DocumentStatus = 'draft' | 'generating' | 'ready' | 'error'

/**
 * Canonical color + label mapping for document lifecycle status — the single
 * source of truth shared by the deck list cards and the reopen toolbar (per the
 * present-web reopen-ux-spec §1.2). Generic enough that any documents-backed app
 * (vault, market) can reuse it for a status pill.
 */
export const DOCUMENT_STATUS_CONFIG: Record<DocumentStatus, StatusBadgeConfig> = {
  draft: {
    label: 'Draft',
    className: 'gap-1.5 bg-gray-100 text-gray-600',
  },
  generating: {
    label: 'Generating',
    className: 'gap-1.5 bg-amber-100 text-amber-700',
  },
  ready: {
    label: 'Ready',
    className: 'gap-1.5 bg-green-100 text-green-700',
  },
  error: {
    label: 'Error',
    className: 'gap-1.5 bg-red-100 text-red-700',
  },
}

/** Per-status dot treatment: hollow for draft, pulsing for generating, solid otherwise. */
const DOT_CLASS: Record<DocumentStatus, string> = {
  draft: 'border border-current bg-transparent',
  generating: 'bg-current animate-pulse',
  ready: 'bg-current',
  error: 'bg-current',
}

export interface DocumentStatusBadgeProps {
  status: DocumentStatus
  size?: 'sm' | 'md'
  /** Show the leading status dot. Defaults to true. */
  showDot?: boolean
  className?: string
}

/**
 * Status pill for a generated document. Wraps the generic `StatusBadge` with the
 * canonical document-status config and a leading dot whose treatment encodes the
 * state (hollow draft / pulsing generating / solid ready+error).
 */
export function DocumentStatusBadge({
  status,
  size = 'md',
  showDot = true,
  className,
}: DocumentStatusBadgeProps) {
  return (
    <StatusBadge<DocumentStatus>
      status={status}
      config={DOCUMENT_STATUS_CONFIG}
      size={size}
      className={className}
    >
      {showDot ? (
        <span
          aria-hidden="true"
          className={`mr-1 inline-block h-1.5 w-1.5 shrink-0 rounded-full ${DOT_CLASS[status] ?? 'bg-current'}`}
        />
      ) : null}
    </StatusBadge>
  )
}