Scrum4Me/components/jobs/job-detail-pane.tsx

'use client'

import { useTransition } from 'react'
import { toast } from 'sonner'
import { cn } from '@/lib/utils'
import { JOB_STATUS_LABELS, JOB_STATUS_COLORS } from '@/components/shared/job-status'
import { jobStatusToApi } from '@/lib/job-status'
import type { JobWithRelations } from '@/actions/jobs-page'
import { Button } from '@/components/ui/button'
import { DemoTooltip } from '@/components/shared/demo-tooltip'
import { restartClaudeJobAction } from '@/actions/claude-jobs'

const RESTARTABLE_API_STATUSES = new Set(['failed', 'cancelled', 'skipped'])

interface FieldRowProps {
  label: string
  children: React.ReactNode
}

function FieldRow({ label, children }: FieldRowProps) {
  return (
    <div className="flex gap-2 py-1.5 border-b border-border/50 text-sm">
      <span className="w-28 shrink-0 text-muted-foreground">{label}</span>
      <span className="flex-1 min-w-0">{children}</span>
    </div>
  )
}

function subjectLabel(job: JobWithRelations): { label: string; value: string } | null {
  switch (job.kind) {
    case 'TASK_IMPLEMENTATION':
      if (!job.taskTitle) return null
      return { label: 'Taak', value: job.taskCode ? `${job.taskCode} ${job.taskTitle}` : job.taskTitle }
    case 'SPRINT_IMPLEMENTATION':
      if (!job.sprintGoal && !job.sprintCode) return null
      return {
        label: 'Sprint',
        value: job.sprintCode && job.sprintGoal ? `${job.sprintCode} ${job.sprintGoal}` : (job.sprintGoal ?? job.sprintCode ?? ''),
      }
    case 'IDEA_GRILL':
    case 'IDEA_MAKE_PLAN':
    case 'PLAN_CHAT':
      if (!job.ideaTitle) return null
      return { label: 'Idee', value: job.ideaCode ? `${job.ideaCode} ${job.ideaTitle}` : job.ideaTitle }
    default:
      return null
  }
}

interface JobDetailPaneProps {
  job: JobWithRelations | null
  isDemo: boolean
}

export default function JobDetailPane({ job, isDemo }: JobDetailPaneProps) {
  const [isPending, startTransition] = useTransition()

  if (!job) {
    return (
      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
        Selecteer een job om details te zien
      </div>
    )
  }

  const apiStatus = jobStatusToApi(job.status)
  const subject = subjectLabel(job)
  const canRestart = RESTARTABLE_API_STATUSES.has(apiStatus)

  function handleRestart() {
    startTransition(async () => {
      const result = await restartClaudeJobAction(job!.id)
      if ('error' in result) toast.error(result.error)
    })
  }

  return (
    <div className="overflow-y-auto h-full p-4">
      <FieldRow label="Status">
        <span className={cn('text-xs px-2 py-0.5 rounded-full border font-medium', JOB_STATUS_COLORS[apiStatus])}>
          {JOB_STATUS_LABELS[apiStatus]}
        </span>
      </FieldRow>
      <FieldRow label="Kind">{job.kind}</FieldRow>
      <FieldRow label="Product">{job.productName}</FieldRow>
      {subject && <FieldRow label={subject.label}>{subject.value}</FieldRow>}
      <FieldRow label="Branch">
        <span className="font-mono text-xs break-all">{job.branch || '—'}</span>
      </FieldRow>
      <FieldRow label="PR">
        {job.prUrl ? (
          <a href={job.prUrl} target="_blank" rel="noreferrer" className="text-primary underline text-xs break-all">
            PR openen ↗
          </a>
        ) : '—'}
      </FieldRow>
      <FieldRow label="Verify">{job.verifyResult ?? '—'}</FieldRow>
      <FieldRow label="Aangemaakt">
        {new Date(job.createdAt).toLocaleString('nl-NL')}
      </FieldRow>
      <FieldRow label="Gestart">
        {job.startedAt ? new Date(job.startedAt).toLocaleString('nl-NL') : '—'}
      </FieldRow>
      <FieldRow label="Klaar">
        {job.finishedAt ? new Date(job.finishedAt).toLocaleString('nl-NL') : '—'}
      </FieldRow>
      <FieldRow label="Fout">
        {job.error ? (
          <pre className="text-xs text-status-blocked whitespace-pre-wrap break-all max-h-40 overflow-auto bg-status-blocked/5 rounded p-2">
            {job.error}
          </pre>
        ) : '—'}
      </FieldRow>
      <FieldRow label="Samenvatting">
        {job.summary ? (
          <pre className="text-xs whitespace-pre-wrap break-words max-h-40 overflow-auto bg-muted/40 rounded p-2">
            {job.summary}
          </pre>
        ) : '—'}
      </FieldRow>
      <div className="pt-3 mt-3 border-t border-border/50">
        <p className="text-xs text-muted-foreground mb-1.5">Beschrijving</p>
        {job.description ? (
          <pre className="text-xs whitespace-pre-wrap break-words bg-muted/40 rounded p-3 font-sans">
            {job.description}
          </pre>
        ) : (
          <p className="text-xs text-muted-foreground italic">Geen beschrijving.</p>
        )}
      </div>
      {canRestart && (
        <div className="pt-3 mt-3 border-t border-border/50">
          <DemoTooltip show={isDemo}>
            <Button
              size="sm"
              onClick={handleRestart}
              disabled={isPending || isDemo}
            >
              {isPending ? 'Opnieuw starten…' : 'Opnieuw starten'}
            </Button>
          </DemoTooltip>
        </div>
      )}
    </div>
  )
}