import * as React from 'react'
import { cn } from '../../lib/utils'
import { Inbox } from 'lucide-react'
import { formatRelativeTime } from '../../utils'
import { HealthCard, HealthDot } from './HealthCard'
import { worstStatus, type HealthStatus } from './health-status'

export interface AttentionItem {
  id: string
  label: string
  /** Optional context line, e.g. "Weekly brief · awaiting review". */
  meta?: string
  /** Link target; when set the row is a link. */
  href?: string
  /** Row tone (default warn — it's in the attention queue for a reason). */
  tone?: HealthStatus
  /** Timestamp shown as relative time on the right. */
  at?: string | Date | null
}

export interface AttentionFeedProps {
  title?: string
  items: AttentionItem[]
  limit?: number
  emptyMessage?: string
  className?: string
}

/**
 * The "needs a human" queue: records flagged for review across every type. Empty
 * is the healthy state (all clear); anything in the queue pulls the card to warn
 * (or worse, per item tone). Presentational — a tenant widget collects the items
 * from whatever it considers actionable (stuck records, drafts awaiting review…).
 */
export function AttentionFeed({
  title = 'Needs attention',
  items,
  limit,
  emptyMessage = 'All clear — nothing needs review.',
  className,
}: AttentionFeedProps) {
  const status: HealthStatus =
    items.length === 0 ? 'ok' : worstStatus(items.map((it) => it.tone ?? 'warn'))
  const statusLabel = items.length === 0 ? 'All clear' : `${items.length} to review`
  const listed = limit ? items.slice(0, limit) : items

  return (
    <HealthCard
      title={title}
      status={status}
      statusLabel={statusLabel}
      icon={Inbox}
      isEmpty={items.length === 0}
      emptyMessage={emptyMessage}
      className={className}
    >
      <ul className="divide-y divide-gray-100" aria-label={`${title} items`}>
        {listed.map((item) => {
          const body = (
            <span className="flex items-start justify-between gap-3 py-2">
              <span className="flex items-start gap-2 min-w-0">
                <HealthDot status={item.tone ?? 'warn'} className="mt-1.5" />
                <span className="min-w-0">
                  <span className="block text-sm text-gray-900 truncate">{item.label}</span>
                  {item.meta && <span className="block text-xs text-gray-500 truncate">{item.meta}</span>}
                </span>
              </span>
              {item.at && (
                <span className="text-xs text-gray-400 tabular-nums flex-shrink-0 pt-0.5">
                  {formatRelativeTime(item.at)}
                </span>
              )}
            </span>
          )
          return (
            <li key={item.id}>
              {item.href ? (
                <a
                  href={item.href}
                  className={cn(
                    'block rounded px-1 -mx-1 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-ring',
                  )}
                >
                  {body}
                </a>
              ) : (
                body
              )}
            </li>
          )
        })}
      </ul>
    </HealthCard>
  )
}