Scrum4Me/components/solo/solo-board.tsx

'use client'

import { useEffect, useState, useTransition } from 'react'
import {
  DndContext, DragEndEvent, DragOverlay, DragStartEvent,
  PointerSensor, useSensor, useSensors, closestCorners,
} from '@dnd-kit/core'
import { toast } from 'sonner'
import { useSoloStore } from '@/stores/solo-store'
import { updateTaskStatusAction } from '@/actions/tasks'
import { SoloColumn, type ColumnStatus } from './solo-column'
import { SoloTaskCardOverlay } from './solo-task-card'
import { TaskDetailDialog } from './task-detail-dialog'
import { UnassignedStoriesSheet, type UnassignedStory } from './unassigned-stories-sheet'

export interface SoloTask {
  id: string
  title: string
  description: string | null
  implementation_plan: string | null
  priority: number
  sort_order: number
  status: 'TO_DO' | 'IN_PROGRESS' | 'REVIEW' | 'DONE'
  story_id: string
  story_title: string
}

export interface SoloBoardProps {
  productId: string
  productName: string
  sprintGoal: string
  tasks: SoloTask[]
  unassignedStories: UnassignedStory[]
  isDemo: boolean
  currentUserId: string
}

const COLUMN_STATUSES: ColumnStatus[] = ['TO_DO', 'IN_PROGRESS', 'DONE']

function getColumnStatus(status: SoloTask['status']): ColumnStatus {
  if (status === 'REVIEW') return 'IN_PROGRESS'
  return status
}

export function SoloBoard({
  productId, productName, sprintGoal, tasks: initialTasks, unassignedStories: initialUnassigned, isDemo,
}: SoloBoardProps) {
  const { tasks, initTasks, optimisticMove, rollback } = useSoloStore()
  const [activeDragId, setActiveDragId] = useState<string | null>(null)
  const [selectedTask, setSelectedTask] = useState<SoloTask | null>(null)
  const [sheetOpen, setSheetOpen] = useState(false)
  const [unassignedStories, setUnassignedStories] = useState(initialUnassigned)
  const [, startTransition] = useTransition()

  const taskKey = initialTasks.map(t => t.id).join(',')
  useEffect(() => {
    initTasks(initialTasks)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [taskKey])

  const pointerSensor = useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
  const sensors = useSensors(...(isDemo ? [] : [pointerSensor]))

  const taskList = Object.values(tasks)
  const columnTasks: Record<ColumnStatus, SoloTask[]> = {
    TO_DO: taskList.filter(t => getColumnStatus(t.status) === 'TO_DO'),
    IN_PROGRESS: taskList.filter(t => getColumnStatus(t.status) === 'IN_PROGRESS'),
    DONE: taskList.filter(t => getColumnStatus(t.status) === 'DONE'),
  }

  function handleDragStart(event: DragStartEvent) {
    setActiveDragId(event.active.id as string)
  }

  function handleDragEnd(event: DragEndEvent) {
    setActiveDragId(null)
    const { active, over } = event
    if (!over) return

    const toStatus = over.id as ColumnStatus
    if (!COLUMN_STATUSES.includes(toStatus)) return

    const task = tasks[active.id as string]
    if (!task) return
    if (getColumnStatus(task.status) === toStatus) return

    const prevStatus = optimisticMove(active.id as string, toStatus)
    if (!prevStatus) return

    startTransition(async () => {
      const result = await updateTaskStatusAction(active.id as string, toStatus)
      if (result && 'error' in result) {
        rollback(active.id as string, prevStatus)
        toast.error('Status bijwerken mislukt — taak teruggeplaatst')
      }
    })
  }

  const activeTask = activeDragId ? tasks[activeDragId] : null

  const columns = (
    <div className="grid grid-cols-3 gap-4 flex-1 min-h-0">
      {COLUMN_STATUSES.map(status => (
        <SoloColumn
          key={status}
          status={status}
          tasks={columnTasks[status]}
          isDemo={isDemo}
          onTaskClick={(t) => setSelectedTask(t)}
        />
      ))}
    </div>
  )

  return (
    <div className="flex flex-col h-full p-4 gap-4 min-h-0">
      <div className="flex items-start justify-between gap-4 shrink-0">
        <div className="min-w-0">
          <h1 className="text-base font-semibold text-foreground truncate">{productName}</h1>
          {sprintGoal && (
            <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">{sprintGoal}</p>
          )}
        </div>
        <button
          className="text-sm text-primary hover:underline whitespace-nowrap shrink-0 disabled:text-muted-foreground disabled:cursor-default"
          disabled={unassignedStories.length === 0}
          onClick={() => setSheetOpen(true)}
        >
          Toon openstaande stories ({unassignedStories.length})
        </button>
      </div>

      <DndContext
        sensors={sensors}
        collisionDetection={closestCorners}
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
      >
        {columns}
        <DragOverlay>
          {activeTask && <SoloTaskCardOverlay task={activeTask} />}
        </DragOverlay>
      </DndContext>

      <TaskDetailDialog
        task={selectedTask}
        productId={productId}
        isDemo={isDemo}
        onClose={() => setSelectedTask(null)}
      />

      <UnassignedStoriesSheet
        stories={unassignedStories}
        productId={productId}
        isDemo={isDemo}
        open={sheetOpen}
        onOpenChange={setSheetOpen}
        onClaim={(id) => setUnassignedStories(prev => prev.filter(s => s.id !== id))}
      />
    </div>
  )
}