Scrum4Me/components/jobs/job-card.tsx

'use client'

import { cn } from '@/lib/utils'
import { debugProps } from '@/lib/debug'
import { JOB_STATUS_LABELS, JOB_STATUS_COLORS } from '@/components/shared/job-status'
import { jobStatusToApi } from '@/lib/job-status'
import type { ClaudeJobKind, ClaudeJobStatus } from '@prisma/client'

interface JobCardProps {
  id: string
  kind: ClaudeJobKind
  status: ClaudeJobStatus
  taskCode?: string | null
  taskTitle?: string | null
  ideaCode?: string | null
  ideaTitle?: string | null
  sprintGoal?: string | null
  sprintCode?: string | null
  productName: string
  productCode?: string | null
  pbiCode?: string | null
  storyCode?: string | null
  branch?: string | null
  error?: string | null
  summary?: string | null
  createdAt: Date | string
  startedAt?: Date | string | null
  finishedAt?: Date | string | null
  isSelected?: boolean
  onClick?: () => void
}

const KIND_LABELS: Record<ClaudeJobKind, string> = {
  TASK_IMPLEMENTATION: 'TAAK',
  SPRINT_IMPLEMENTATION: 'SPRINT',
  IDEA_GRILL: 'GRILL',
  IDEA_MAKE_PLAN: 'PLAN',
  IDEA_REVIEW_PLAN: 'REVIEW',
  PLAN_CHAT: 'CHAT',
}

export default function JobCard({
  kind, status, taskCode, taskTitle, ideaCode, ideaTitle,
  sprintGoal, sprintCode, productName, productCode, pbiCode, storyCode,
  branch, error, createdAt, startedAt, finishedAt, isSelected, onClick,
}: JobCardProps) {
  let titleText: string
  if (kind === 'TASK_IMPLEMENTATION') {
    titleText = taskCode && taskTitle ? `${taskCode} ${taskTitle}` : taskTitle || 'Taak'
  } else if (kind === 'SPRINT_IMPLEMENTATION') {
    if (sprintCode && sprintGoal) titleText = `${sprintCode} ${sprintGoal}`
    else titleText = sprintGoal || sprintCode || 'Sprint'
  } else if (kind === 'IDEA_GRILL' || kind === 'IDEA_MAKE_PLAN') {
    titleText = ideaCode && ideaTitle ? `${ideaCode} ${ideaTitle}` : ideaTitle || 'Idee'
  } else if (kind === 'PLAN_CHAT') {
    titleText = ideaCode ? `Chat ${ideaCode}` : 'Chat'
  } else {
    titleText = 'Job'
  }

  let breadcrumb: string
  if (kind === 'TASK_IMPLEMENTATION') {
    breadcrumb = [productCode ?? productName, pbiCode, storyCode].filter(Boolean).join(' ')
  } else if (kind === 'IDEA_GRILL' || kind === 'IDEA_MAKE_PLAN' || kind === 'IDEA_REVIEW_PLAN' || kind === 'PLAN_CHAT') {
    breadcrumb = [productCode ?? productName, ideaCode].filter(Boolean).join(' ')
  } else if (kind === 'SPRINT_IMPLEMENTATION') {
    breadcrumb = [productCode ?? productName, sprintCode].filter(Boolean).join(' ')
  } else {
    breadcrumb = productCode ?? productName
  }

  const detailText = branch || (error ? error.slice(0, 80) : null) || productName
  const displayDate = finishedAt ?? startedAt ?? createdAt

  const apiStatus = jobStatusToApi(status)

  return (
    <div
      onClick={onClick}
      className={cn(
        'border rounded-lg p-3 cursor-pointer hover:bg-surface-container transition-colors text-sm',
        isSelected && 'ring-2 ring-primary',
      )}
      {...debugProps('job-card', 'JobCard', 'components/jobs/job-card.tsx')}
    >
      <div className="flex items-center gap-2" data-debug-id="job-card__status">
        <span className="text-[10px] px-1.5 py-0.5 rounded border bg-muted text-muted-foreground font-mono shrink-0">
          {KIND_LABELS[kind]}
        </span>
        {breadcrumb && (
          <span className="truncate font-mono text-[10px] text-muted-foreground flex-1 min-w-0">
            {breadcrumb}
          </span>
        )}
        <span className={cn('text-xs px-2 py-0.5 rounded-full border font-medium shrink-0 ml-auto', JOB_STATUS_COLORS[apiStatus])}>
          {JOB_STATUS_LABELS[apiStatus]}
        </span>
      </div>
      <p className="font-medium truncate mt-1" data-debug-id="job-card__title">{titleText}</p>
      <div className="flex items-end justify-between gap-2 mt-0.5" data-debug-id="job-card__actions">
        <p className="text-xs text-muted-foreground truncate">{detailText}</p>
        <span className="text-[10px] text-muted-foreground shrink-0 tabular-nums">
          {new Date(displayDate).toLocaleString('nl-NL', { dateStyle: 'short', timeStyle: 'short' })}
        </span>
      </div>
    </div>
  )
}