Scrum4Me/components/sprint/task-list.tsx

'use client'

import { useState, useTransition, useEffect, useActionState } from 'react'
import { useFormStatus } from 'react-dom'
import {
  DndContext, DragEndEvent, DragOverlay, DragStartEvent,
  KeyboardSensor, PointerSensor, useSensor, useSensors, closestCenter,
} from '@dnd-kit/core'
import {
  SortableContext, useSortable, verticalListSortingStrategy, arrayMove,
  sortableKeyboardCoordinates,
} from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
import { useSprintStore } from '@/stores/sprint-store'
import {
  createTaskAction, updateTaskStatusAction, updateTaskAction,
  deleteTaskAction, reorderTasksAction,
} from '@/actions/tasks'
import { cn } from '@/lib/utils'

const STATUS_CYCLE: Record<string, 'TO_DO' | 'IN_PROGRESS' | 'DONE'> = {
  TO_DO: 'IN_PROGRESS',
  IN_PROGRESS: 'DONE',
  DONE: 'TO_DO',
}
const STATUS_COLORS: Record<string, string> = {
  TO_DO: 'bg-status-todo/15 text-status-todo border-status-todo/30',
  IN_PROGRESS: 'bg-status-in-progress/15 text-status-in-progress border-status-in-progress/30',
  DONE: 'bg-status-done/15 text-status-done border-status-done/30',
}
const STATUS_LABELS: Record<string, string> = { TO_DO: 'To Do', IN_PROGRESS: 'Bezig', DONE: 'Klaar' }

const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }

export interface Task {
  id: string
  title: string
  description: string | null
  priority: number
  status: string
  story_id: string
  sprint_id: string | null
}

interface TaskListProps {
  storyId: string
  sprintId: string
  productId: string
  tasks: Task[]
  isDemo: boolean
}

function SortableTaskRow({
  task, isDemo, onStatusToggle, onDelete,
}: { task: Task; isDemo: boolean; onStatusToggle: () => void; onDelete: () => void }) {
  const [editing, setEditing] = useState(false)
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: task.id })
  const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.4 : 1 }

  const [, formAction] = useActionState(
    async (_prev: unknown, fd: FormData) => {
      const result = await updateTaskAction(_prev, fd)
      if (result?.success) setEditing(false)
      return result
    },
    undefined
  )

  if (editing) {
    return (
      <div ref={setNodeRef} style={style} className="px-4 py-2 border-b border-border bg-surface-container">
        <form action={formAction} className="space-y-2">
          <input type="hidden" name="id" value={task.id} />
          <input type="hidden" name="priority" value={task.priority} />
          <Input name="title" defaultValue={task.title} className="h-7 text-sm" required autoFocus />
          <div className="flex gap-2">
            <EditSubmitButton />
            <Button type="button" variant="ghost" size="sm" className="h-7" onClick={() => setEditing(false)}>Annuleren</Button>
          </div>
        </form>
      </div>
    )
  }

  return (
    <div ref={setNodeRef} style={style} className="group flex items-center gap-3 px-4 py-2.5 border-b border-border hover:bg-surface-container/50 transition-colors">
      {!isDemo && (
        <span {...attributes} {...listeners} className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 text-sm select-none">⠿</span>
      )}
      <div className="flex-1 min-w-0">
        <p className={cn('text-sm truncate', task.status === 'DONE' && 'line-through text-muted-foreground')}>
          {task.title}
        </p>
        <span className="text-xs text-muted-foreground">{PRIORITY_LABELS[task.priority]}</span>
      </div>
      <button onClick={onStatusToggle} disabled={isDemo} aria-label={`Status: ${STATUS_LABELS[task.status]}`}>
        <Badge className={cn('text-xs border cursor-pointer hover:opacity-80 transition-opacity', STATUS_COLORS[task.status])}>
          {STATUS_LABELS[task.status]}
        </Badge>
      </button>
      {!isDemo && (
        <div className="opacity-0 group-hover:opacity-100 flex gap-1">
          <button onClick={() => setEditing(true)} className="text-xs text-muted-foreground hover:text-foreground">Bewerk</button>
          <button onClick={onDelete} aria-label="Verwijder taak" className="text-xs text-muted-foreground hover:text-error">×</button>
        </div>
      )}
    </div>
  )
}

function EditSubmitButton() {
  const { pending } = useFormStatus()
  return <Button type="submit" size="sm" className="h-7" disabled={pending}>{pending ? '…' : 'Opslaan'}</Button>
}

function CreateTaskForm({ storyId, sprintId, onDone }: { storyId: string; sprintId: string; onDone: () => void }) {
  const [, formAction] = useActionState(
    async (_prev: unknown, fd: FormData) => {
      const result = await createTaskAction(_prev, fd)
      if (result?.success) onDone()
      return result
    },
    undefined
  )
  return (
    <form action={formAction} className="flex gap-2 px-4 py-2 border-b border-border">
      <input type="hidden" name="storyId" value={storyId} />
      <input type="hidden" name="sprintId" value={sprintId} />
      <input type="hidden" name="priority" value="2" />
      <Input name="title" autoFocus placeholder="Taaknaam…" className="h-7 text-sm flex-1" required />
      <CreateSubmitButton />
      <Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>×</Button>
    </form>
  )
}

function CreateSubmitButton() {
  const { pending } = useFormStatus()
  return <Button type="submit" size="sm" className="h-7" disabled={pending}>{pending ? '…' : 'Toevoegen'}</Button>
}

export function TaskList({ storyId, sprintId, productId, tasks, isDemo }: TaskListProps) {
  const { taskOrder, initTasks, reorderTasks, rollbackTasks } = useSprintStore()
  const [creating, setCreating] = useState(false)
  const [activeDragId, setActiveDragId] = useState<string | null>(null)
  const [, startTransition] = useTransition()

  const idKey = tasks.map(t => t.id).join(',')
  useEffect(() => {
    initTasks(storyId, idKey ? idKey.split(',') : [])
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [storyId, idKey])

  const taskMap = Object.fromEntries(tasks.map(t => [t.id, t]))
  const order = taskOrder[storyId] ?? tasks.map(t => t.id)
  const orderedTasks = order.map(id => taskMap[id]).filter(Boolean)

  const doneCount = orderedTasks.filter(t => t.status === 'DONE').length

  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
  )

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event
    if (!over || active.id === over.id) return
    const prevOrder = [...order]
    const newOrder = arrayMove([...order], order.indexOf(active.id as string), order.indexOf(over.id as string))
    reorderTasks(storyId, newOrder)
    setActiveDragId(null)
    startTransition(async () => {
      const result = await reorderTasksAction(storyId, newOrder)
      if (!result.success) { rollbackTasks(storyId, prevOrder); toast.error('Volgorde opslaan mislukt') }
    })
  }

  function handleStatusToggle(task: Task) {
    startTransition(async () => {
      await updateTaskStatusAction(task.id, STATUS_CYCLE[task.status] ?? 'TO_DO')
    })
  }

  function handleDelete(id: string) {
    startTransition(async () => {
      const result = await deleteTaskAction(id)
      if (result && 'error' in result) toast.error(result.error ?? 'Verwijderen mislukt')
    })
  }

  return (
    <div className="flex flex-col h-full">
      <PanelNavBar
        title="Taken"
        actions={
          <>
            <span className="text-xs text-muted-foreground">{doneCount}/{orderedTasks.length} klaar</span>
            {!isDemo && (
              <Button size="sm" className="h-7 text-xs" onClick={() => setCreating(true)}>+ Taak</Button>
            )}
          </>
        }
      />

      <div className="flex-1 overflow-y-auto">
        {creating && (
          <CreateTaskForm storyId={storyId} sprintId={sprintId} onDone={() => setCreating(false)} />
        )}

        {orderedTasks.length === 0 && !creating ? (
          <div className="text-center mt-8 space-y-3">
            <p className="text-sm text-muted-foreground">Geen taken voor deze story.</p>
            {!isDemo && <Button size="sm" variant="outline" onClick={() => setCreating(true)}>Maak eerste taak aan</Button>}
          </div>
        ) : (
          <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragStart={e => setActiveDragId(e.active.id as string)}
            onDragEnd={handleDragEnd}
          >
            <SortableContext items={orderedTasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
              {orderedTasks.map(task => (
                <SortableTaskRow
                  key={task.id}
                  task={task}
                  isDemo={isDemo}
                  onStatusToggle={() => handleStatusToggle(task)}
                  onDelete={() => handleDelete(task.id)}
                />
              ))}
            </SortableContext>
            <DragOverlay>
              {activeDragId && taskMap[activeDragId] && (
                <div className="bg-surface-container-low border border-primary rounded px-4 py-2 text-sm shadow-lg opacity-90">
                  {taskMap[activeDragId].title}
                </div>
              )}
            </DragOverlay>
          </DndContext>
        )}
      </div>
    </div>
  )
}