'use client'

import { forwardRef } from 'react'
import { cn } from '@/lib/utils'
import { CodeBadge } from '@/components/shared/code-badge'
import { debugProps } from '@/lib/debug'

export const PRIORITY_BORDER: Record<number, string> = {
  1: 'border-l-4 border-l-priority-critical',
  2: 'border-l-4 border-l-priority-high',
  3: 'border-l-4 border-l-priority-medium',
  4: 'border-l-4 border-l-priority-low',
}

interface BacklogCardProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string
  priority: number
  code?: string | null
  isSelected?: boolean
  isDragging?: boolean
  badge?: React.ReactNode
  actions?: React.ReactNode
}

export const BacklogCard = forwardRef<HTMLDivElement, BacklogCardProps>(function BacklogCard(
  { title, priority, code, isSelected, isDragging, badge, actions, className, ...rest },
  ref
) {
  return (
    <div
      ref={ref}
      className={cn(
        'bg-surface-container rounded border border-border px-3 py-2 select-none transition-colors cursor-pointer',
        PRIORITY_BORDER[priority],
        isSelected
          ? 'bg-primary-container border-primary text-primary-container-foreground'
          : 'hover:bg-surface-container-high',
        isDragging && 'opacity-40 shadow-lg',
        className,
      )}
      {...rest}
      {...debugProps('backlog-card', 'BacklogCard', 'components/backlog/backlog-card.tsx')}
    >
      <div className="flex items-start justify-between gap-2">
        <p className="text-sm leading-snug line-clamp-2 flex-1" {...debugProps('backlog-card__title')}>{title}</p>
        {code && <CodeBadge code={code} className="shrink-0 mt-0.5" />}
      </div>
      {(badge || actions) && (
        <div className="flex items-center justify-between gap-1 mt-1.5">
          <div className="flex items-center gap-1">{badge}</div>
          {actions && <div className="flex items-center gap-1 shrink-0">{actions}</div>}
        </div>
      )}
    </div>
  )
})